In this post, I continue my series on how to override Open Framework's default styles to get a more custom look-and-feel on your site. Last time we looked at how to override our typography styles. Today, we'll look at a grab bag of other things, including block styles, sidebar menus, and region styles.
Before we dive in, make sure you are familiar with the steps we took in using Firebug (or Chrome dev tools) and CSS Injector. Here's another post I wrote that introduces CSS Injector and Firebug in more detail.
Overriding Block Styles (aka "well")
Blocks are a foundational way of building a Drupal site. Open Framework comes with some default block styles, so lets look at how to override those.
The first thing we will need to do is make sure the Block Class module is enabled. Block Class lets us add classes to our blocks through the GUI. So, go to your Modules page, and find the Block Class module in the list and enable it if it isn't already.
Once you've saved and enabled Block Class, you now should see a field when you configure a block, called "CSS class(es)." We're going to add the well class to this field and save our block.
So, here's what our block looks like – it has the default Bootstrap gray box around it (with rounded corners and an inner shadow). We want to change how this well class looks to better fit with our design.
So, let's override the well class CSS with our own custom CSS:
/* Overriding well style */
.well {
background: #E4EEF5;
border: 1px solid #C2E0F2;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
Now we can see our well has sharp corners, a flat blue background and border, and no shadow. (Note: I've included the vendor prefixes for border-radius an box-shadow here to be safe, but it's likely you will not need them in newer browsers.)
Sidebar Menu Styles
Let's say you have a custom menu block that you've placed in the sidebar. By default, this menu is not very attractive. The links are listed with bullets, the hover state adds a gray background, and the active state could be a little more obvious. Here's what it looks like by default:
For us to override these styles, we're going to need to not only target the links in their inactive state (when we aren't hovering over them), but we're going to have to target them for active, hover, and focus states. Drupal uses the .active class to indicate if you are currently on the page. In the screenshot above, I was on the homepage, thus the "Home" link was active (and black instead of pink). In the screenshot above, I was hovering over the "Resources" link, so we see that link in the hover state. The focus state is important also for those navigating your page with the keyboard. So, let's look at what we need to override in our CSS.
First, we will want to remove the bullets and add some default link styles. I've used Firebug to inspect and see that I need to override the .sidebar .nav selector.
/* Overriding sidebar menu styles */
.sidebar .nav {
margin: 0;
}
.sidebar .nav li {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .nav li a {
padding: .5em 0;
border-top: 1px solid #C2E0F2;
}
.sidebar .nav li.last a {
border-bottom: 1px solid #C2E0F2;
}
In the code above, I start by stripping off the margins and padding from the list (ul.nav, and the list items - li). I remove the bullet style from the list items, and then I add some padding and borders to the links themselves. Here's what we've got so far:
We still need to style the active, hover, and focus states for our links, so let's go ahead and add that:
.sidebar .nav li a:hover,
.sidebar .nav li a:focus,
.sidebar .nav li a.active {
background: #E4EEF5;
color: #000000;
}
In this example, I am making all these states look the same. Here's what we've got now – a blue background with black text for active, hover, and focus:
Here's our complete CSS for styling our sidebar menus:
/* Overriding sidebar menu styles */
.sidebar .nav {
margin: 0;
}
.sidebar .nav li {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .nav li a {
padding: .5em;
border-top: 1px solid #C2E0F2;
}
.sidebar .nav li.last a {
border-bottom: 1px solid #C2E0F2;
}
.sidebar .nav li a:hover,
.sidebar .nav li a:focus,
.sidebar .nav li a.active {
background: #E4EEF5;
color: #000000;
}
Region Styles
OK, the last thing I want to cover in this post is how to style entire regions of the page. For example, we might want the header and footer regions to have a different background color. First, we use Firebug to find what selector to target. In hovering over the header region, I see that I will need to override the .header class. Here's what my header region looks like right now:
Let's add a light background and a border to the bottom. To do this, we will first need to override the margins and instead replace them with padding. This will make sure our background color stretches from the top of the screen. Here's what our CSS looks like:
/* Overriding the header region */
.header {
margin: 0;
padding: 30px 0;
background: #E4EEF5;
border-bottom: 1px solid #C2E0F2;
}
And here's how the styles look now – a light blue background and a subtle border on the bottom:
Now, if you wanted to separate the header region from the menu a bit, you could add back a bottom margin to the header region, which would space them apart a bit.
The same idea applies to other regions on the page. Here are some you might want to try overriding:
.site-footer(to override the footer region).site-main-menu(to override the main menu region).main(to override the middle area of the page)body(to override the entire page background)
What's next
We've now covered most of the basics for overriding Open Framework, but there's still a bit of work to do to customize the responsive styles (when you load your site in smaller windows/screens. In the next post, I'll cover how to write media queries to target responsive styles in Open Framework.
