Questions about the "Classic" template

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Questions about the "Classic" template

Postby TheThoughtfulBoxful » November 10th, 2018, 12:27 pm

Hi! I'm new to Smackjeeves and I would greatly appreciate some help modifying my comic's site. My coding skills aren't the best... but I'm learning!

http://greenleaf.smackjeeves.com/comics/

Right now I'm trying to modify the site's title. I've successfully removed the ribbon image (as advised in another thread) but I'm not sure what code to put to change the color of the title text.

Also, what codes do I need to use in order to change the individual text styles (body/header, navigation, title, etc.) using Google Fonts?

Thank you in advanced! I hope this isn't too much trouble :)
User avatar
TheThoughtfulBoxful
 
Posts: 4
Joined: September 16th, 2018, 1:01 pm

Re: Questions about the "Classic" template

Postby eishiya » November 10th, 2018, 1:22 pm

It looks like you've already figured out how to change the title text colour ("#banner span") :D

If I recall correctly, with Google Fonts you just pop Google's code in, and then refer to that font by name in the rest of your CSS, as if it were a regular font. So for the navigation, for example, you'd want
Code: Select all
#nav-menu {
font-family: "My Shiny New Font", "My Fallback Font", "broad category of fallback font in case even the fallback fails, e.g. sans-serif";
}
Image
User avatar
eishiya
 
Posts: 9479
Joined: December 5th, 2009, 11:17 am

Re: Questions about the "Classic" template

Postby TheThoughtfulBoxful » November 10th, 2018, 1:32 pm

eishiya wrote:It looks like you've already figured out how to change the title text colour ("#banner span") :D


Yeah! It took a while, though xP

eishiya wrote:If I recall correctly, with Google Fonts you just pop Google's code in, and then refer to that font by name in the rest of your CSS, as if it were a regular font. So for the navigation, for example, you'd want
Code: Select all
#nav-menu {
font-family: "My Shiny New Font", "My Fallback Font", "broad category of fallback font in case even the fallback fails, e.g. sans-serif";
}


Okay, thank you! Sounds easy enough... I'm assuming this goes under the <style> area of the code like with the other modifications? (Mainly guessing based off of the "#" symbol in the code.)
User avatar
TheThoughtfulBoxful
 
Posts: 4
Joined: September 16th, 2018, 1:01 pm

Re: Questions about the "Classic" template

Postby eishiya » November 10th, 2018, 2:55 pm

TheThoughtfulBoxful wrote:
eishiya wrote:It looks like you've already figured out how to change the title text colour ("#banner span") :D


Yeah! It took a while, though xP

eishiya wrote:If I recall correctly, with Google Fonts you just pop Google's code in, and then refer to that font by name in the rest of your CSS, as if it were a regular font. So for the navigation, for example, you'd want
Code: Select all
#nav-menu {
font-family: "My Shiny New Font", "My Fallback Font", "broad category of fallback font in case even the fallback fails, e.g. sans-serif";
}


Okay, thank you! Sounds easy enough... I'm assuming this goes under the <style> area of the code like with the other modifications? (Mainly guessing based off of the "#" symbol in the code.)

Correct, it goes with your other custom CSS.
Image
User avatar
eishiya
 
Posts: 9479
Joined: December 5th, 2009, 11:17 am

Re: Questions about the "Classic" template

Postby TheThoughtfulBoxful » November 10th, 2018, 3:03 pm

Sorry to bother you, but I was wondering if SJ has a list of coding terms (ie #nav-menu, #border span, etc.) that I could refer to so I don't have to keep asking for help?

I'm trying to figure out how to modify the body & header texts for the entire site (including the news & FAQ pages) but I don't know what terms to use. -_-"
User avatar
TheThoughtfulBoxful
 
Posts: 4
Joined: September 16th, 2018, 1:01 pm

Re: Questions about the "Classic" template

Postby eishiya » November 10th, 2018, 3:12 pm

They're not coding terms, they're the IDs of the elements, and they are whatever you (or the template's designer) choose them to be.

You can easily check each element's IDs, classes, etc by using your browser's inspection tools. Right-click the element and select "Inspect" or "Inspect Element" or something similar, most modern browsers have this feature (at least on desktop). You can also use these tools to test out changes to the style before you put it in your code, which is a lot faster since you don't have to save the code and then refresh the page to see whether your code works.
Image
User avatar
eishiya
 
Posts: 9479
Joined: December 5th, 2009, 11:17 am


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 4 guests