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.
Advertisements

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.

Image

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

Image

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.

CSS for Mobile/Responsive Design – IE Hacks

I’m testing on IE11, which is supposed to be standards compliant. And it is, except when it isn’t. Here is a great example of a hack that I had to use to make some sweet JQuery Superfish menu items behave in IE11.

#superfish-1 {
font-size: 98.9%;
float: left;
margin: -75px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
#superfish-1 {
font-size: 93%;
float: left;
margin: -77px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
}

CSS for Mobile – IE Hacks

I’m testing on IE11, which is supposed to be standards compliant. And it is, except when it isn’t. Here is a great example of a hack that I had to use to make some sweet JQuery Superfish menu items behave in IE11.

#superfish-1 {
font-size: 98.9%;
float: left;
margin: -75px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
#superfish-1 {
font-size: 93%;
float: left;
margin: -77px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
}

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.

Image

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.

Mobile Testing – Free Tools

Here is another site that will provide you with many options for styling your site at several different screen widths/heights. What I really like about this site is that it shows so many resolutions on one page.

While this will be more of a distraction (info overload) if you are just starting to style a site for mobile devices, it is really nice once you have most of the changes in place and want to see what the site looks like on a wide variety of devices at a glance.

http://www.responsinator.com