Spark Pay online stores is a very powerful platform. You can have so many different widgets on a page, that it can sometimes get complicated for styling it the way you'd see fit. The scope of this article is to show how to find the correct CSS class for editing all the different parts of the website.
This lesson requires you to have a beginner knowledge of HTML and CSS. The lesson will be centered around the Chrome web browser, but Firefox (and to a lesser extent, Internet Explorer) are capable of performing these steps as well, albeit in a different way.
So to begin, lets take a look at the default Ultra Store theme. Its a very nice and styled theme, but I think I want to change the color scheme of some of the elements. Note that this could be done with the Live Design Toolbar , but that is an alternate method entirely.
So looking at the site, it looks great. But there are a couple things I'd like to change, to give it my own flair. For example, lets change the background color of the header in the left column.
Now that I've decided what I'm changing, lets get to work! In your web browser, right click the element (part of the page) you'd like to change, and click "Inspect Element". This will bring up the Chrome Developer Tools in the bottom of the window.
Now this may look complicated, but this is one of the most useful tools. In the bottom, you'll see the HTML layout of the page, broken down into an expanding/collapsing tree structure.
Don't be intimidated by all the HTML code that you're seeing from the page. You can't harm your website from these developer tools, so feel free to toy around and explore the features.
When I clicked inspect element, I clicked it on the text that says "Categories". I noticed that this is what is highlighted now on the site, but this isn't what I'm trying to change. Since I know the text entered here inside the box I am looking to change, I need to move up in the tree structure. As I hover my mouse on the different elements, I land on the div class of left-head, and the entire area I'm wanting to change highlights. Since the div box has a class of "left-head", I know to affect this, the CSS rule will look something like this: .left-head{}
To confirm, I can even see in the right column of the dev tools, the CSS that is being displayed on this element. That definitely looks like a blue background to me, so I'm pretty sure I'm in the right spot. However, I want to test to make sure, before I change the CSS in my admin panel. So I'm going to change this to a different shade of blue, I think I'll go with green.
The CSS elements in the right panel of the developer tools are customizable. You can click on the rules, and change them on the fly. Note that this doesn't actually change anything on the back end of the site. Any changes made to the page in the developer tools are lost upon refreshing/editing the page. They are only temporary to your browser window.
In the right panel of the developer tools, I see that the background of this element is hexadecimal code #3D90EE. To change this, I'm just going to click it, and change this code to the word "green". After replacing the hex code, I am now seeing the element as a green background.
That was easy! But we need to change this in the CSS of the admin panel. So at this point, you want to either copy the css class .left-head , or remember that this is the class to you are trying to change.
Whenever I'm ready to go add this rule, I log into the admin panel and go to the Global CSS Editor. Here I did a search for the class I was looking for. So I pressed CTRL + F, and did a search for ".left-head". 3 results came up. Going through them, I see the specific rule I was looking for. And this is where I need to make my change.
After switching our the hex code for the word green, I check the front end of the website, to confirm the background box is showing green, and it is! Mission accomplished!
