|
Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy.
While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs.
|
Before you begin and lose any changes, make sure to check out the article on Backing Up Theme Files.
Inspecting Elements
There are several different ways to look at the html, css and other code in the back of a site for each browser. This will help pin-point the exact location of each item on a page. It also gives some insight on its location in the CSS of your Theme.
The following is a walkthrough using Google Developer Tools Inspect Element Feature. To learn more about all the features it provides, check out the article here.
To get started, you will need to right click anywhere on the browser and select "Inspect Element".
You will see a magnifying glass icon. 
Click this to grab the item you are wanting to inspect.
You can expand the arrows to see more of each section, as well as edit and preview to see the changes.
In this example we were wanting to change the color of the menu bar.
Inspect Element tells us that it is located in the style sheet under .navbar-collapse. The background color is #bf635c and we would like it to be black using hexcode #000000.
So we changed the hex code color to be black and now it will show on the page.
However, this is not saved to the server. You will need to navigate to Themes > Edit Theme > Global CSS Editor and find where that feature is located to make those specific changes.
If it's a specific color-change or font, you can hit CTRL+F and search for the color and location in the CSS.
For example, the default color of the navigational menu bar in this case was #bf635c and we would like it to be black using hexcode #000000.
We know from inspecting the element it's located under ".navbar-default .navbar-collapse, .navbar-default .navbar-form"
We will then hit CTRL+F to find #bf635c and change it in the CSS editor to #000000.
The search window will appear in the top right of the browser. You can click the arrows up and down and the search results will show highlighted on the page.
Find where the hexcode for #bf635c is located and change it to #00000.
Hit Save, and now preview your store.
Success!
Other Articles On Modifying Items