How to Change the Navigation and Body

On of our most asked about questions is:

“How do I change the color of the navigation and content body?” and similar, “How do I change the shape and color of the menu and body?”

We do cover this in our FAQs, but we’re going to cover it here too.

First, we need to ask ourselves a question:

Have I changed the theme opacity / transparency?

If you’ve changed this via “Theme Options > Styling Options” then you will need to edit files specific to that selection.

So in this example, let’s say we’re using Opacity / Transparency setting “0.9”. This means we’re going to need to open “/images/opacity/09/” and it is those images inside there that we will be overwriting with our modified images after your done.

If you have not defined the opacity setting and are using the default (no opacity/transparency) then the images you’d be looking to overwrite are inside the “/images/” folder. Alternatively, if you’re using either “0.7” or “0.8” you would then find those corresponding folders inside the “/images/opacity/” folder and upload there your modified images.

The navigation and content body you see as a default (black) are images. These images will require being modified to suit your specific needs. So if you’re wanting to change the color of the navigation, you’d then want to open the “/PSD Files/” folder included in your download from Theme Forest and located inside it the “Sliced” folder. This folder will contain all the necessary images already sliced and ready for your use.

At this point, you open the editor of your choice. We’re using Photoshop.

These are PSD files and are best suited for Photoshop editing.

So now that you’ve opened your files, you can modify them as you’d like.

You’ll want to, after editing them, save* them to your desktop for upload.

*Note: These need to be saved in .PNG format and nothing else.

Based on your answer to the question above, you’ll upload these images to the proper folders housing the images. This would either be “/images” for no opacity/transparency selection, or “/images/opacity/” and select the folder named for the opacity/transparency setting you’ve defined in your Theme Options.

For your reference, a guide to the sliced images:

The “Content Background” is the “content_back.psd” file.

The “Menu Background” is the “menu_back.psd” file.

The “Menu Bottom / Hide Area” is the “menu_hide_back.psd” file.

The “Hover Arrow” is the “menu_hover_arrow.psd” file.

The “Hide/Show Tooltip Background” is the “tooltip.psd” file.

To change the shape of the body or navigation, you may find it more useful to use the unedited PSD that is available in the “/PSD Files” folder called “layout.psd”. You will of course be required to re-slice your images accordingly and depending on your changes, may also be required to modify the CSS for these areas.

If you’d like to inquire about our development services to make your modifications for you, please email support [AT] kingsizetheme.com – please replace the “[at]” with the “@” symbol as this helps fight spam.