Customizing the Header

The header includes your logo, menu, sociables, etc etc. This will be a tutorial on how to customize these elements.

Identifying the Header elements

In the following image you will see Persuasion and all of the elements in the header. No matter which theme your using it will have these features so read on below to figure out how to configure and style them.

.header_links {  }
.header_links a {  }
.header_links a:hover {  }

.header_text {  }

.header_social {  }
.social_icon a {  }
.social_icon a img {  }

.logo {  }

#primary_menu {  }
.jqueryslidemenu .sub-menu a {  }
.jqueryslidemenu .sub-menu a:hover {  }

Styling the header elements

The most common request for the header elements is how to move them around or change their colors. Here are some quick examples to give you an idea on how to style these elements. If you wish to do any of these yourself then just copy and paste the code into Dashboard -> your theme -> General Settings -> Custom CSS.

Moving an element: If your just wanting to move one of the elements a little bit then you would play around with their top, left, right, and bottom attributes like so,

.logo { position: absolute !important; top: 50px !important; left: 200px !important; }
#primary_menu { position: absolute !important; top: 100px !important; right: 20px !important; }

In the above example we are setting the logo's position to "absolute" which means it will display exactly 50px from the top and 200px from the left inside the header. You can do this with any of the header elements, just replace the classes and ID's with the examples above.

Changing the link colors and fonts: Another popular request is how to change the menu link colors. You can start by adding this in Dashboard -> your theme -> General Settings -> Custom CSS,

.header_links a { color: white !important; }
.header_links a { color: #000000 !important; }

.jqueryslidemenu .sub-menu a { font-family: "Verdana" !important; color: red !important; }
.jqueryslidemenu .sub-menu a:hover { font-family: "Arial" !important; color: blue !important; }

In the first two lines we are changing the header link colors to white and when hovered over to black. The "#000000" is the hex color for black. You can do a google search for "hex colors" and find a lot of color lists to use.

The last lines are for the primary menu. You can style the top level menu items in your skin but for the dropdown links you can use that. You can see how to change the font as well.

Creating more space for your logo

Sometimes you will want to use a very large logo and the header may not be big enough for it. In this case you can increase the height of your header by adding this in Dashboard -> your theme -> General Settings -> Custom CSS,

#header { height: 200px !important; }

If your using inFocus then you may also want to edit the header background image after doing this which you can find in /wp-content/themes/infocus/images/header.png.

Sociables opening up in a new tab

Another popular request is to have the sociables open in a new tab. You can do this by adding the following in Dashboard -> your theme -> General Settings -> Custom Javascript,

jQuery(document).ready(function(){
jQuery('.social_icon a').attr('target', '_blank');
});