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: 9
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: 9830
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: 9
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: 9830
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: 9
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: 9830
Joined: December 5th, 2009, 11:17 am

Re: Questions about the "Classic" template

Postby TheThoughtfulBoxful » December 25th, 2018, 10:01 am

Hello! Happy Holidays! I seem to have run into some more trouble with the code on my site...

Comic: http://greenleaf.smackjeeves.com/

Under Appearance -> Menu I've been trying to add my own social links using the prexisiting twitter/facebook/reddit/patreon blank codes.

For example:
Code: Select all
   </li>
   <li>
      <a class="icon twitter" href="#" target="_blank">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
           <path d="M612 116.26c-22.52 9.98-46.7 16.75-72.1 19.77 25.94-15.53 45.8-40.16 55.2-69.4-24.33 14.37-51.17 24.8-79.78 30.47-22.9-24.44-55.5-39.66-91.63-39.66-69.34 0-125.56 56.22-125.56 125.5 0 9.84 1.1 19.44 3.25 28.62-104.33-5.24-196.84-55.22-258.76-131.17-10.82 18.5-16.98 40.06-16.98 63.1 0 43.55 22.18 81.98 55.84 104.47-20.58-.7-39.93-6.35-56.87-15.76v1.58c0 60.8 43.3 111.55 100.7 123.1-10.52 2.83-21.6 4.4-33.1 4.4-8.1 0-15.93-.8-23.62-2.33 16 49.9 62.34 86.2 117.26 87.2-42.95 33.65-97.1 53.65-155.9 53.65-10.15 0-20.13-.62-29.96-1.72 55.57 35.68 121.54 56.48 192.44 56.48 230.95 0 357.2-191.3 357.2-357.2l-.43-16.24c24.67-17.6 46-39.7 62.8-64.86z"/>
         </svg>
      </a>
   </li>


However, when I edit the code with my own URL, nothing happens.
Code: Select all
<a class="icon twitter" href="http://www.twitter.com/boxfulthoughts" target="_blank">


I've observed on comics with the same theme, such as http://mokepon.smackjeeves.com/, the codes are identical, only the method I've described appears to be working for them. Any idea what I'm doing wrong here? Also, I've noticed on the Mokepon site that the creator found a way to make the menu bar transparent? How does one do that?

I know it's the holidays, so feel free to answer whenever you're able.
User avatar
TheThoughtfulBoxful
 
Posts: 9
Joined: September 16th, 2018, 1:01 pm

Re: Questions about the "Classic" template

Postby eishiya » December 25th, 2018, 10:12 am

Make sure you uncomment the code! In the template code, all the social media links are commented out so that they don't show up until you want them. HTML comments are
<!-- start comment
--> end comment
All of the social media links are commented out as a single block, the easiest solution to uncomment just the Twitter bit is to move just the twitter code out of the block, below the --> line.


By the way, looking at your site code, I noticed you put your Google Fonts links in the wrong place, they need to be within the Head of the page, i.e. between <head> and </head> somewhere, but you have them above <head>. Just move <head> above them and they should be fine.


Edit: Whoops, missed the transparent menu bar bit. That's done by setting a transparent colour in CSS instead of an opaque one. That can be done using the rgba syntax, e.g.:
Code: Select all
#nav-bar {
   background-color: rgba(0, 0, 0, 0.85);
}

The first three numbers (0, 0, 0 black in this example) are the RGB values of the colour. The fourth number is the alpha value, a number between 0 (fully transparent) and 1 (fully opaque). In this example it's 0.85.
You can use rgba() anywhere in CSS where you'd use a #color.
Image
User avatar
eishiya
 
Posts: 9830
Joined: December 5th, 2009, 11:17 am

Re: Questions about the "Classic" template

Postby TheThoughtfulBoxful » December 25th, 2018, 10:35 am

Okay wow yes this worked great!! Thank you!

edit: thanks for letting me know about the font codes!
User avatar
TheThoughtfulBoxful
 
Posts: 9
Joined: September 16th, 2018, 1:01 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 6 guests