1.4K Messages
•
262.9K Points
How can I change my font size and color in my store?
One of the most common questions store owners have is how to make minor design changes. These issues lie out of the scope of Bigcommerce technical support, but are perhaps minor enough that you aren't ready to call in the help of our professionals. Luckily, there are some outstanding tools available for these minor tweaks, and in this tutorial we'll show you some of the basics - changing font size and color!
In this tutorial, we will be using the Firefox extension Firebug, but if you prefer you can also use Google Chrome's built-in Developer Tools in a nearly-identical fashion to what we cover here. These tools allow you to preview changes in your browser before making them on your site, and allow you to find the location those changes need to be made.
For our examples, we will change text in our main category menu, but the tactics described below can be used virtually anywhere on your site. Just keep in mind that those changes could affect other areas if you're not careful. Please ALWAYS backup your template files before attempting design changes. If you're not sure how we'll show you below!
What We'll Cover
Backing up your template files.
1.) Log in to your Bigcommerce Control Panel.
2.) Click on Design.
3.) Choose the Download Template Files button.
4.) Save the file to your computer.
5.) That's it! This zip folder is a backup of all of your template files, including any customizations you may have previously made.
back to top
Changing font size.
Have you backed up your template files yet?
1.) On the front-end of your website, find the text area you want to change.
2.) Right-click on the text and choose Inspect Element with Firebug.
3.) The firebug console will display with HTML (structure, content, etc) on the left, and CSS (style, color, size, etc) on the right. We're going to be dealing with the CSS to change font sizes.
4.) You should be able to see your font-size displayed on the right. In this example, it is 1.2em, but in some instances it can also be in pixels (px).
5.) Click the size and change its value. Notice the size changes on your site. Find the size that works best for you - in this case we will change to 1.8em.
6.) Once you have established the size you want, make note of the file name and line number. In our example, we are going to modify the styles.css.
7.) Back in your Bigcommerce Control Panel, click Design.
8.) Click the Template Files tab.
9.) Scroll down to the styles folder and click the plus sign to expand it.
10.) Find the styles.css file and click edit.
11.) Scroll down to the line you took note of in Firebug.
12.) Make the same change you made in Firebug and save.
That's it! Now your font size will be modified on the front-end of your site!
back to top
Changing font color.
Have you backed up your template files yet?
1.) Back on the front-end of your site, right-click the text you want to change.
2.) Look for a color to be listed, much like the font-size was in the example above. In this example, there is no color given, as the font-color is being inherited from another area of the stylesheet. So to target this text directly, we will simply add one!
3.) Click the last value in the selected CSS class.
4.) Hit tab to move to a new blank line.
5.) Add color: followed by a value.
6.) You can add simple values like red.
7.) Alternatively, you can use a specific hex value. If you're unsure what hex value to choose, you can find it visually at sites like Color Picker.
8.) Find the color you want and copy the hex value.
9.) Back in your Firebug console, simply paste in the value to preview the color.
10.) Once you have established the color you want, make note of the file name and line number. In our example, we are going to modify the styles.css
11.) Back in your Bigcommerce Control Panel, click Design.
12.) Click the Template Files tab.
13.) Scroll down to the styles folder and click the plus sign to expand it.
14.) Find the styles.css file and click edit.
15.) Scroll down to the line you took note of in Firebug.
16.) Make the same change you made in Firebug and save.
That's it! Now your font size will be modified on the front-end of your site!
![]( "finalresult2013-05-24_0007.png")
In this tutorial, we will be using the Firefox extension Firebug, but if you prefer you can also use Google Chrome's built-in Developer Tools in a nearly-identical fashion to what we cover here. These tools allow you to preview changes in your browser before making them on your site, and allow you to find the location those changes need to be made.
For our examples, we will change text in our main category menu, but the tactics described below can be used virtually anywhere on your site. Just keep in mind that those changes could affect other areas if you're not careful. Please ALWAYS backup your template files before attempting design changes. If you're not sure how we'll show you below!
What We'll Cover
Backing up your template files.
1.) Log in to your Bigcommerce Control Panel.
2.) Click on Design.
3.) Choose the Download Template Files button.
4.) Save the file to your computer.
5.) That's it! This zip folder is a backup of all of your template files, including any customizations you may have previously made.
back to top
Changing font size.
Have you backed up your template files yet?
1.) On the front-end of your website, find the text area you want to change.
2.) Right-click on the text and choose Inspect Element with Firebug.
3.) The firebug console will display with HTML (structure, content, etc) on the left, and CSS (style, color, size, etc) on the right. We're going to be dealing with the CSS to change font sizes.
4.) You should be able to see your font-size displayed on the right. In this example, it is 1.2em, but in some instances it can also be in pixels (px).
5.) Click the size and change its value. Notice the size changes on your site. Find the size that works best for you - in this case we will change to 1.8em.
6.) Once you have established the size you want, make note of the file name and line number. In our example, we are going to modify the styles.css.
7.) Back in your Bigcommerce Control Panel, click Design.
8.) Click the Template Files tab.
9.) Scroll down to the styles folder and click the plus sign to expand it.
10.) Find the styles.css file and click edit.
11.) Scroll down to the line you took note of in Firebug.
12.) Make the same change you made in Firebug and save.
That's it! Now your font size will be modified on the front-end of your site!
back to top
Changing font color.
Have you backed up your template files yet?
1.) Back on the front-end of your site, right-click the text you want to change.
2.) Look for a color to be listed, much like the font-size was in the example above. In this example, there is no color given, as the font-color is being inherited from another area of the stylesheet. So to target this text directly, we will simply add one!
3.) Click the last value in the selected CSS class.
4.) Hit tab to move to a new blank line.
5.) Add color: followed by a value.
6.) You can add simple values like red.
7.) Alternatively, you can use a specific hex value. If you're unsure what hex value to choose, you can find it visually at sites like Color Picker.
8.) Find the color you want and copy the hex value.
9.) Back in your Firebug console, simply paste in the value to preview the color.
10.) Once you have established the color you want, make note of the file name and line number. In our example, we are going to modify the styles.css
11.) Back in your Bigcommerce Control Panel, click Design.
12.) Click the Template Files tab.
13.) Scroll down to the styles folder and click the plus sign to expand it.
14.) Find the styles.css file and click edit.
15.) Scroll down to the line you took note of in Firebug.
16.) Make the same change you made in Firebug and save.
That's it! Now your font size will be modified on the front-end of your site!
No Responses!