Where is the code to change the size/color/font of the H1, H2, tags, etc?

[IslandJay]

Where is the code to change the size/color/font of the H1, H2, tags, etc?

[Alupis]

Settings --> Design --> Template Editor --> Go to folder (choose the highlighted yellow one that ends with /css) --> Edit the default.css (or whatever it's named if you have changed it.

After making changes, make sure to flush the store cache otherwise you will see no difference. Settings --> Store Settings --> Scroll down to the very bottom and click the "Clear Cache" button.

Your browser may still cache the CSS files, so while on the front-end page you are trying to make style changes to, do a Ctrl + Shift + R to do a hard reload (dumps all cached things for the page).

[cwnoah]

Excellent info, Alupis - thanks!

[ForcedFabllc]

Where can I find the place to edit the subcategory names under the pictures on our site? I want to bold them and increase the font size a bunch. I just found out how to edit the size of the box for the photo, but no where I can edit it all.

[Alupis]

ForcedFabllc I"m not quite sure what you are referring to... maybe a quick screenshot would clarify?

[fastergrace]

Where can I find the place to edit the subcategory names under the pictures on our site? I want to bold them and increase the font size a bunch. I just found out how to edit the size of the box for the photo, but no where I can edit it all.

Have you tried opening the page in Chrome, highlighting the text, right-clicking and hitting "inspect element"? From there you can usually narrow down what tag is telling it what size to be, and then change it.

[ScribeTime]

ForcedFabllc - Not sure if you found a solution to changing the font-size and font-weight of the subcategory names yet.

But I found the .subcategories . name code using the same inspect element method that fastergrace suggested. To change the size and weight of my subcategory names, I'd need to add code similar to the one below to my default_modified.css file:

.sub-categories .name {
display: block;
font-weight: 600;
font-size: 16px;
}

The .sub-categories .name code is found in the layout.css file, but it appears that adding the above (or similar code) to the default_modified.css file will override it.

[ForcedFabllc]

Here is a screen shot of the text I want to change. I also want to kill the space between the thumbnail and the word or at least reduce it, I think I may have figured that one out though.

http://snag.gy/tBkKv.jpg

[Alupis]

You currently have this HTML on the category pages (under the START: SUB_CATEGORIES_FORMAT section if you look in your template):

        <li>
        <div class="sub-categories">
              <a href="Audi_c_17060.html">
              <!--START: SUB_CATEGORY_IMAGE-->
              <span class="img"><img src="assets/images/Category Photos/Audi Performance Parts.jpg" alt="Audi"></span>
              <!--END: SUB_CATEGORY_IMAGE-->
              <!--START: SUB_CATEGORY_NAME-->
              <span class="name">Audi</span>
              <!--START: SUB_CATEGORY_NAME--></a>
              <div class="desc"></div>
            </div>
        </li>

And the relevant CSS (from layout.css):

.sub-categories .img {
    display: block;
    min-height: 160px;
}

The <span class="img"> is inheriting a "min-height: 160px;" from the sub-categories css class in the layout.css (which you cannot manipulate). So, you will need to create a new class in your default.css file and use that to over-ride the min-height attribute.

So in your default.css somewhere, add:

.myCustomSubCatClass {
   min-height: 0px; // or whatever spacing you want here
}

Then in your template, add the new CSS class to the appropriate area, like:

<li>
    <div class="sub-categories">
      <a href="Audi_c_17060.html">
      <!--START: SUB_CATEGORY_IMAGE-->
      <span class="img myCustomSubCatClass"><img src="assets/images/Category Photos/Audi Performance Parts.jpg" alt="Audi"></span>
      <!--END: SUB_CATEGORY_IMAGE-->
      <!--START: SUB_CATEGORY_NAME-->
      <span class="name">Audi</span>
      <!--START: SUB_CATEGORY_NAME--></a>
      <div class="desc"></div>
    </div>
</li>

Now the distance between the image and text will be determined by how much whitespace your images have. If necessary, you can play with that spacing to have it as tight or loose as desired. Just note that your text links will now not be in a neat row since they will all be at different distances from the image.

And here's the (simulated) result:

http://s28.postimg.org/v16m5482l/sample.png

[ForcedFabllc]

ok thats a great starting point. I think I am going to work on the white space sizing on those images before I start moving the spacing around that way I can create even boxes. that chevy one is already killing me due to the size of the car and alignment..