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

Resolved – Error 495 in Drupal – panels_renderer_standard.class.php

Notice: Undefined index: settings in panels_renderer_standard->render_pane() line 495 panels_renderer_standard.class.php). this is the original error. this is my contribution to the issue on drupal.org

Posted by pjmcghee on October 23, 2013 at 8:46am new

Hey, I was able to resolve this error pretty easily. I had been working with some new styles, making a clone of an existing, changing styles around on a specific panel pane. then, i decided that i really needed to make the change to the entire column. so i added a style there and changed the panel pane style back to the original style. i then began receiving the error.

I was quite sure what was going on after reading this post (and thanks @merlinofchaos! for everything!). I recreated the offending, or broken panel pane to make sure it worked properly, deleted the original pane and saved the page. the error is now gone.

then, i added the original style to the new, recreated pane. now, all is correct and the error is gone. and i have the new style on the column so that i can style the whole thing the way that works best for me.

so there never was actually an empty style, i believe that the system just got a little confused with the multiple changes. that also seems to be consistent with some drupal panel behavior. sometimes you just need to delete and recreate rather than fix unless you want to really dig into the db. and i really don’t!

small price to pay for the amazing panels module. @merlinofchaos – you rock.

Drupal Panel Pages, CSS and Mobile Tip

If you use Panels for your layouts, add a column CSS class to the most left hand column of your layout. Since Adaptive Themes will place this column first after the header stuff, this class will more easily allow you to adjust the margins of your content relative to the header.

You’ll need to add a custom style to the column in the Page Manager layout. If you choose no stylistic choices at all you will wind up with something like this selector:

.region-plain-box-fp-25-left-col {
  1. background-color: #ffffff;
  2. color: #000000;
  3. margin-bottom: 10px;
  4. padding: 10px;

}

Note that the Administrative title (so that it can be reused) that I have used will show in the selector. Since I have added this late in the development, I have to adjust it to the current style of my page.
.region-plain-box-fp-25-left-col {
  1. background-color: rgba(0, 0, 0, 0);
  2. color: #000000;
  3. margin-bottom: 0;
  4. padding: 0;
  5. margin-top: -59px;
}
 I have added the Margin-top parameter to move all the content closer to the header for the 320px width layout. Sort of a hack, but a really useful one!