Change the Submenu background

December 24, 2013|

Because Preference uses CSS 3 gradient backgrounds for the submenus (and a couple other in-page elements), using the theme customizer for this is not really possible, so we have to use an online tool for this. You can still achieve a customized look and style for your submenus, but we have to do a little extra work here.

By default, the theme’s styling for the submenus (and menus) are found in the theme’s /css/ folder. However, to access these styles, you will need an FTP program to open them because WordPress doesn’t show these in the admin’s own theme editor (not sure why they made this inaccessible). The file is found here:

/wp-content/themes/preference/css/menu.css

The class for the gradient is found around line 60 and looks like this:

.mainmenu ul li:hover > ul { /* second level half rounded */

The actual styling is handled by this batch of code:

background-color: #78a5b6; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1N2U4ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzhhNWI2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVjODc5NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background-image: -moz-linear-gradient(top,  #557e8e 0%, #78a5b6 0%, #5c8797 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#557e8e), color-stop(0%,#78a5b6), color-stop(100%,#5c8797)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top,  #557e8e 0%,#78a5b6 0%,#5c8797 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top,  #557e8e 0%,#78a5b6 0%,#5c8797 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top,  #557e8e 0%,#78a5b6 0%,#5c8797 100%); /* IE10+ */
background-image: linear-gradient(to bottom,  #557e8e 0%,#78a5b6 0%,#5c8797 100%); /* W3C */

The significance of the above code is that it helps style the submenu background for various browsers — which are noted in comments at the end of each line.

Customizing the Gradient Colours

A good tool to customize or create new gradients can be found on a popular CSS 3 site here:

Gradient Tool

Basically you will be adding your own colours if a preset style doesn’t appeal to you with what they offer on the page, you can create an unlimited array of gradients with this online tool. Once the style and colours you want are added and then generated, you will simply replace the default gradient styles above with your own. The best way I found is to start with a preset and then change the colours by clicking and dragging on the small little (bottom) icons called “Color Stops” like the screenshot below shows:

color-stop

Changing (customizing) the colours is done by double clicking on a colour stop. This will open a window which you then move the cursor around on the colour palette until you find the colour and tone you want and then click “OK”. Do the same for the other colour stop to get the other gradient colour:

color-stop-custom

When you have your gradient colours and styling completed, you will then select the ie9 support checkbox so that we can get this to cooperate with Internet Explorer 9:

gradient-ie9-support

NOTE: You do not need the code that shows up in a yellow background box for the ie9 browser because I already have this coded into the theme; you will need to copy the code that is above that for your submenu styling:

gradient-css

IMPORTANT: IF you are making these kind of custom changes to the theme, I recommend the Child Theme method so that you can keep the main theme (parent theme) updated without affecting customization changes.

 What if You Don’t Want a Gradient?

If you decide you don’t want the gradient effect or that you find it a bit confusing, you can make it very simply by replacing the default gradient code with just a background colour like this:

background-color: #bcbf2d;

 

 

Categories: Setup Tutorials for Preference

Leave a Reply