|
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.
|
How To Change Colors, Font Sizes and Alignment In A Theme
There are many ways to edit colors and styles on your Spark Pay online store. For those who want to see the site in a live preview using LiveDesign as they edit the style, please reference (option 1). For those who are familiar with HTML and CSS and only want to access the style sheet, please reference (option 2).
To make some basic changes to your Spark Pay online stores store you will need the following:
- Use either a cloned theme or make sure you have a backup of CSS, HTML on hand just in case.
Read more about Backing Up Theme Files.
- CSS/HTML knowledge. You can find some great articles on basic color changes, font face and sizes and alignment at HTMLGoodies.com
Note: Some themes only allow basic alterations using LiveDesign and the HTML/CSS editor. One of the themes that allow customization is the BASE theme to build custom responsive sites.
Option 1) Using the Live Design Editor
Note: Some themes may require the use of CSS to make specific changes regarding widgets and other elements that are not plain text.
Live design offers many different user friendly options. One such option is to easily access and change colors and styles.
When you're in Live Design's Design Mode, the starting mode is Basic Design. This mode gives handy quick styles that are most commonly changed styles. With the design mode active, simply hover over the different areas of your site. This will highlight the areas that can be styled.
If you want to change text color, for example, select the text, click “font color”, and set the color you want.
(IMPORTANT: Many elements have the same selector, so some changes can affect more than one area. If you are in risk of doing this a warning message at the bottom of the design console will appear. It specifiies how many elements match the one you are editing.)
Option 2) Using Cascading Style Sheets (CSS) to Change Text Colors
CSS is important in order to change specific dynamics on a webpage. These elements include text colors, link colors, page background, tables, and forms.
Each theme has a Global CSS Editor that can be found by going to Themes > Edit Theme > Global CSS Editor
Text Colors:
a. is the opening tag for a link.
font. is the opening tag for all fonts
h1, h2, h3. is the opening tag for all heading text.
an example of this would be:
A:link {
COLOR: #000000 /*The color of the link*/
}
A:visited {
COLOR: #800080 /*The color of the visited link*/
}
A:hover {
COLOR: green /*The color of the mouseover or 'hover' link*/
}
BODY { COLOR: #800080 /*The color of all the other text within the body of the page*/
{
Alignment:
To align elements you will need to either tell it's alignment or position to be: left, center, right, absolute, or justified
| Value | Description |
|---|
| left |
Left-align content |
| right |
Right-align content |
| center |
Center-align content |
| justify |
Stretches the lines so that each line has equal width (like in newspapers and magazines) |
Example of what this will look like in the editor:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
or
<span data-mce-mark="1"><div align="center"></span>
<span data-mce-mark="1">Text here and stuff</span>
<span data-mce-mark="1"></div></span>
For more help check out the following resources:
w3schools.com
codeacademy.com
teamtreehouse.com
theodinproject.com