WordPress Navigation Menu

SEO Dave

Comment on Customize WordPress Theme CSS File

Customize WordPress Theme CSS File

Hi Mark,

Yes the Stallion Responsive 8.1 menu CSS and corresponding HTML code has been changed a LOT to remove the need for Jquery and other javascript to generate the mobile version of the menu, means a major performance improvement as Stallion Responsive no longer needs any javascript by default.

Means if you’ve made a custom CSS file manually would probably be easier to start from the new default colour CSS file from 8.1 and recreate whatever CSS changes you made to create your custom file again.

Since I was making menu changes I changed the main menu CSS class from menu to srumenu to avoid any clashes with plugins in the future, menu as a CSS class was too general and ran the risk if a plugin used menu as a class to mess things up.

I also changed the photo navigation menu as well which is why it’s not working with your custom CSS file. With that menu removed the need for multiple javascript files, replaced the accordion javascript code with CSS code, so you’ll need the new code from the 8.1 CSS file.

Had to do this sort of update myself in the past, I find it helps to add comments to the modified files as I make the changes so it’s easy to add them to the next update, otherwise it’s a lot of hassle trying to remember what changes you made.

something like

/* Custom Start */
CSS changed
/* Custom End */

Makes it a lot easier for copying and pasting when making updates with major customizations.

You might find it easier with this sort of major CSS code changes to add your code changes to the bottom of the CSS file you are working with (a copy in the child theme folder) or even added to the top of the mobile.css file (again copied to the child theme folder) since it’s enqueued last.

When CSS is read by a browser it’s the last rule that’s used, so if you add the same CSS code twice with changes the last version will be used, the first will be ignored.

For example at the top of the Dazzling Blue and Cayenne Theme CSS file

#wrap_stallion {
background-color: #F6F8FE;
}

If you added the same code to the bottom of the Dazzling Blue and Cayenne Theme CSS file or top of mobile.css with a different color code like:

#wrap_stallion {
background-color: #ffffff;
}

Only the last version of background-color: would be used.

Means you can copy sections of CSS code you want to change, modify it in one block making it much easier to copy to a new file during an update.

This doesn’t work with everything, you have to be able to replicate the CSS completely and change it (or add to it), so works with the CSS example above. However if you wanted to change say

.wp-pagenavi {
font: normal normal normal 175%/150% Arial, Helvetica, sans-serif;
clear: both;
margin-bottom: 10px;
}

to

.wp-pagenavi {
font: normal normal normal 175%/150% Arial, Helvetica, sans-serif;
clear: both;
margin-top: 10px;
}

You would still have the “margin-bottom: 10px;” from the first CSS rule group, so where you would just delete the line “margin-bottom: 10px;” if you didn’t want the 10px bottom margin, with the copy and change approach you still have to set margin-bottom to something to not have it set to 10px, there has to be a second copy of margin-bottom that replaces the first instance. You might use:

.wp-pagenavi {
margin-bottom: 0;
margin-top: 10px;
}

This would remove the bottom margin (set to 0) and add a top margin and the font and clear would be used from the original CSS rules.

This is actually how the mobile.css file CSS rules work, you’ll find what’s in mobile.css is copied from either the layout CSS file or the color CSS file and set to only be used when the screen width is a particular size.

You’ll find in the mobile.css file there’s 11 versions of

#wrap_stallion {
width: XXXpx;
}

Where XXX is unique to each instance, each one takes priority at a specific device width.

If you can write your CSS code so it can be added to the current CSS rather than deleting/replacing CSS code will make your updates far easier. For the most part will be copy and paste from old to new with modifications to take into account anything changed between updates like the class .menu changing to .srumenu.

David

Customize WordPress Theme CSS File