In Chrome, the css inspector is accessed by holding down the Ctrl and Shift key and hitting the i key. ctrl-shift-i
In Firefox, the inspector is an extension called firebug. You install the extension and then click the bug to open the inspector.
Navigate to your redeye website homepage, and open an inspector. It will split the screen in half.
In the top half, scroll your webpage until you see FEATURED.
Right click on the the text "See Our Most featured Products". Click Inspect.
The bottom half of the screen will display the html code for that section of your page, which is generated by the AbanteCart system on the backside and served to the front side.
On the right side of the bottom half of the screen you will see the css styling for that section of your page, and specifically the styling for the element that you right clicked in the top half, or for any html element that you expand and click in the bottom half.
From right-clicking the text specified above, you'll see this on the right side bottom half:
.heading1 .subtext { style.css:63
font-size: 16px;
color: #522c0b;
text-transform: none;
font-weight: normal;
padding: 0;
}
In a new tab, google "css font-weight", navigate to the w3schools link, and learn about font-weight.
Go back to your inspector tab. Click the word normal (as seen in the paste above), and change it to bold. Look at the piece of text we are working on. You will see that it is now bold.
What you are doing is using an inspector to modify the styling of a page on the fly. You can do anything you want while working in an inspector. It will not save your changes to the actual style.css file that is running your site, which means that while playing with an inspector, you can't break anything.
If you click refresh on the browser page, it will reload the page using the actual style.css file, which means that it will erase any inspector changes you were playing with.
Download and install notepad++ or some other "improved notepad app" for editing css files.
Your style.css file is located in /sitename/storefront/view/default/stylesheet/ , unless you cloned a template extension for your customization, in which case it is in sitename/extensions/templatename/storefront/view/templatename/stylesheet/.
(If you do all of your work to a clone, your work is not at risk of being erased by future AbanteCart system updates. See AbanteCart documentation Developer Tools to learn more.)
Open the style.css file in your new editor. Scroll to line 63 (as designated by the inspector, see paste above).
There you will find the same css styling elements that you saw in the inspector. Change normal to bold for that same font-weight element. Refresh your working page. Now the bold font is permanent.
However, it is permanent for all .heading 1 .subtext items on the entire website.
So begins your education in css styling.
Use the w3schools site.
Become familiar by trial and error manipulations in an inspector window.
CSS will allow you to create entirely new specifically-targeted styles that affect only a single element on a website instead of the entire class of items that are styled by a single css style.
Sometimes you have to clear cache before refreshing to see changes you made to the style.css file.
Once you get handy with CSS, you can explore the changes that are possible by editing tpl files contained in various folders in the template folder. Always work with a backup. Inspector won;t help you much with template edits, and you can really break the system if you hack the wrong part of a tpl file.
The AbanteCart application (back end) uses a large and extendable php program and many template files (tpl) to generate and serve html to the "front end" that you see on the web.
HTML delivers content, black & white, unorganized.
Templates organize content.
CSS determines every other aspect of what the content will look like (the style of the content), including placement location to some extent, which is often a sort of shared role with templates.
Syntax is king. Open parentheses require closed parentheses. Commas are not semicolons. Spaces are not trivial. Dots are not hashes. Single quotes are not ticks.
Playing around in my spare time, it took me 2 years to learn this (and more), and I'm still a noob. I'm 52. :-)
Good luck!
