Drupal and CSS

Language Specific CSS Selectors

The site that I am working on is bilingual, specifically in english and in spanish. This presents complications for any site of course, so this is a good trick to have in your arsenal. This is especially good for Drupal but will work on any site.

media=”screen”

:lang(es) #menu-4184-1

{

position:relative;

width: 122px;

}

This will allow the particular selector to be used only when the language is set to spanish. Please note that many other languages can be used by this by replacing the two letter language code with the one that you need. EI – de for german.

Advanced CSS Selectors and Drupal

Drupal can be difficult to override at times in terms of styling unless you place your intercepts in a submodule’s PHP so creative CSS knowledge and implementation is a must to keep your site from looking “too Drupaly”.

One CSS technique that I have been using a bit lately that you don’t usually run into in systems where the HTML is more easily customizable is the title attribute selector. Warning – this is really a hack. But I think that it deserves a place in any Drupal Developer’s toolkit.

The title attribute looks like this:

a[title~=Request]{

/*css stuff goes here*/

}

This selector targets hyperlinks (a) that have a title that contains the word Request (case sensitive too). This selector will add whatever you add in the following curly brackets. There are other options too. See the w3s link at the bottom.

The SS is really two SSs: one with the selector disabled so you see the element and one with it turned on. The element that needs to disappear is a link to the /user/password page. For whatever reason (this is Drupal and sometimes it takes so long to figure out the mystery that it becomes a Pyrrhic victory as the deadline is missed) this link will take you to a place where the UX sucks. The workaround is pretty easy though. Use the Password reset form and hide the link using CSS. But since the link has nothing special in its selectors that gets tough. So, use the title attribute selector. The green box in the SS is the form for passwords, BTW.

http://www.w3schools.com/css/css_attribute_selectors.asp

Advanced CSS Selectors for Drupal – Page class tied to low level IDs

Customizing Drupal content placement can be tricky. If you have a piece of content

that appears in more than one area, you may need flexibility in your CSS to style the elements independently of one another.

What has worked well for me is CSS selectors that utilize the cascading nature of CSS for advanced

In the SS, you can see that the selector combined a class and an ID. The ID is for the individual node, in this case an amazon book ad generated externally, and the class is for the page itself. It’s important to note that the selector will work as long as the two selectors are in the same hierarchy. I could just use the ID but that is assigned to the individual node and that node appears (may or may not, hard to tell with Drupal) in other areas. Style by the ID, fix one, break the other. But, using the class of the page and the ID of the node allows an easy to find hierarchy that will cascade every time for that page and will only hit that element on that page. So unless you have the same node twice on the same page, this will always allow consistent styling selection.

Styling Drupal Table Columns

Tables can be a pain. And they can be quite a bit of pain when they are used in Drupal. I used Advanced Forum and am pretty happy with it. But there are some margin issues that really don’t seem to lend themselves to easy fixing via CSS.

I need to expand the Forum Title Column. To do this easily and effectively in Drupal, I choose the corresponding column header and expand that. This will also expand the entre

column below. Look to the examples that are illuminated in yellow. This makes it much easier to add space to an area that needs it, like a title while leaving a # visits smaller.

Customizing Drupal Confirmation Pages

If you use Panels Pages for the bulk of you site building, you may have noticed that there are frequent limitations on some of the more random pages.

An example is the comment confirmation delete form. I don’t need much on this form, the stock info is fine, but I want to add my logo at least. I don’t use the logo function that Drupal provides standard, I implement it with my own CSS.

On the form, I use the background element on the #node-confirmation-form ID to add the logo via the CSS shown in the SS. But since that places the background right underneath the form text, I have to tweak it a bit to move things around so that they look OK. I ended up using a combination of height, top, padding and relative positioning. I really just had to experiment until I got it right.

This is not the best approach, but it is a good quick and dirty way to customize a form strictly through CSS when Page Manager doesn’t offer to intercept it for you.

CSS Tip – Customize without Theme Intercepts

A thorough knowledge of CSS is a must for customizing a layout using Drupal. Today, I needed to move an input field on a form. The issue is that the field shares its Drupal defined selector class with several other fields of the same type on other forms. Fix one form by the selector, break the same field on a different form.

By using the CSS ID of the parent form, (which is several divs up in the HTML) and inserting a space in between the ID and the class selector, I can zero in on the particular field that I want. The other way that this would have to be done is via an intercept at the theme level, which would be more involved and require subtheming, PHP and a TPL file. Using the two selectors together is easier for someone who doesn’t want (or know how to) take that approach.

CSS/JScript Aggregation, caching and performance – customizations do not show up

Drupal employs a great mechanism for speeding up page loads once active development has been completed. Under the Performance settings, there are several options for caching pages, CSS and more. As an example, from a high level, CSS files are consolidated from the often several dozen files down to one, with all whitespace, redundant or superseded selectors and comments removed. This is a great way to speed up your site once you are in Production. If you’re actively developing your site, you don’t want to use this because your changes won’t show reliably without constantly clearing your cache.

There are some caveats though. What? Caveats in Drupal? Uh, yeah. I love Drupal but it has more caveats than the US congress has vacations.

The symptoms are always the same – custom changes (to CSS, for example) don’t show up. In my case, Adaptive Themes manifests this type of behavior. AT has a way of “pre-caching” info within its area of Drupal and this will often lead to CSS customizations not showing up once performance caching has been enabled.

In AT’s case, there is a work around. If changes don’t appear:

Clear the cache
Immediately save the AT Theme/Subtheme you are using under Appearance
Clear the cache again

That should do it. You can read the conversation between some of the AT geniuses here:

https://drupal.org/node/1995938

It’s pretty recent and they will have a solution at some point soon, I hope. Considering how awesome AT is, with all of the Responsive features and easy subtheming, this is a pretty small accommodation to make.

Browser Hacks for CSS, IE10+, Safari 5 specifically

No one ever really wants to take shortcuts and wind up with spaghetti. But sometimes you have to. IE 10/11 are great browsers and are much more compliant with standards, but today I still had to use a hack to get something simple done. And thanks to http://www.browserhacks.com/ for showing me the way.

for IE 10/11 you use this:

_::-ms-reveal,

at the beginning of your selector. the selector will remain the exact same but it will only be interpreted by IE10+

so this is the original:

.sf-menu.sf-style-default a {/*092713 hack for IE10 and superfish super menu*/

font-size:104%;
}

and this is what you have afterwards to be interpreted only by IE.

_::-ms-reveal,.sf-menu.sf-style-default a {/*092713 hack for IE10 and superfish super menu*/
font-size:104%;
}

Note that the comment is mine and not needed. the only thing being changed is the font size. simple change but effective for a situation where I COULD NOT get the selector to work consistently despite all claims by MS.

This one works for Safari in that it doesn’t apply itself to Chrome, which would be the usual behavior.

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari only override */
::i-block-chrome,.sf-menu.sf-style-default a {
padding-bottom: 10px;
padding-right: 23px;
font-size: 100%}
}

You can see that the only important part is where it blocks chrome. This should work with any selector

CSS Rendering Engines

IE10 does a much better job than earlier versions at compatibility with modern CSS selectors. But I believe there are still some cases where browser specific selectors may be needed.

IE (pre 10, i believe)
- Engine: Trident
- CSS-prefix: -msie
Firefox
- Engine: Gecko
- CSS-prefix: -moz
Opera
- Engine: Presto
- CSS-prefix: -o
Safari & Chrome
- Engine: WebKit
- CSS-prefix: -webkit

Create a Gallery to Present groups of HTML objects

I need to be able to display a bunch of books that are on sale from Amazon that interest the site’s audience. Amazon’s Associate Program makes it easy to monetize your site by advertising their stuff. And since the product (if placed properly) can be a value add to your clients, it is a win win.

In the SS, you can see the book ads from Amazon. Each one of these ads is a small node from a custom content type

called Ads-Books. This type is nothing more than a piece of full, unfiltered HTML that allows you to create any kind of node that you want to. I have created buttons, help graphics, all sorts of things using these types of nodes. And by using Panels and CSS, they are easy to style and place.

The View uses the Grid display. This uses <TR> and <TD> tags so the tables are added easy and don’t require much in the way of styling. I know, TABLES… but they still have their uses at times.

In addition to the Grid display, I added three pieces of CSS to make things fit together properly:
.book-ads-cell-class > p {width: 25px; /* helps align indiv cells*/}

.panel-pane.pane-views.pane-all-books.no-title.block {left: -8px; position: relative; /* moves the whole panel pane content around inside the table rows/cells*/}

.book-ads-cell-class { /* more help for cells*/
position: relative;
left: -33px;
top: 23px;
}

the other SS shows what one of the individual book nodes looks like in code within CKEditor.

the nice thing about this view is that it is maintenance free. As long as I add book ads to that content type, they will appear properly in the view.