Our responsive themes use the Bootstrap framework.
What is bootstrap?
You can find out more at http://getbootstrap.com/.
You can view the Github Project Here.
In this article we will discuss how to make modifications to the theme's files. This requires moderate to advanced levels of knowledge in CSS and HTML. Also make sure to backup the theme before making massive changes. This way you can quickly revert back if you don't like what changed.
You will be making these changes in the theme's files.
The bootstrap files will be:
bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
Your theme files will be:
all the other .css files.
You can get to these by going to Content > Files > Shared > Themes > [Theme Of Your Choice] > CSS. Here will be the default CSS stylesheet locations.
Or if you are the Theme Editor you can find this under Themes > Edit Theme > Theme Files.
How Do I Find Where I Need To Make changes?
To find something specific in the framework and CSS, you can always use the inspect element tool. Do this by right clicking in Chrome or in your browser to use a similar tool to get the same effect. This will help find what you're looking for and tell you where it is located in your theme files.
Get ready to meet your new best friends. Introducing (if you haven't already been formally aquainted)... Control and F!
Using the File Manager, you can either download or edit the file. Downloading guarantees you can edit and save the changes and come back to them later. For quick changes, most would like to just use "edit".
Using Control + F you can find what you're searching for by typing it in the box at the top of your browser or text editor.
Remember to hit Save and you're good to go.
What is Font Awesome?
Font Awesome is a certain font that makes images with icons. It is used across all responsive themes for areas such as shopping cart icons, user icons and social networking icons!
Most 2014+ Responsive themes utilize the 3.2.1 version of Font Awesome. You can find numerous icons and use them in the html and you will find it in the form of
<i class="icon-facebook"></i>
Check out this awesome cheat sheet here!
More Useful Help:
Spark Pay online stores Help Articles on Theme & Site Design
Spark Pay online stores Community
Tips and Tricks With CSS on w3schools.com
Tips and Tricks with HTML on w3schools.com
|
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.
|