coding moron has no idea how to change background color

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

Moderator: Help Desk Team

coding moron has no idea how to change background color

Postby calmcnichols » April 14th, 2019, 2:10 pm

Hey. I am the worst coder on the planet and barely know anything. I'm banging my head into a wall trying to change the background color of my entire site to #161616 and see nowhere to do this. I'm trying to edit the 'overall layout' section because I assume that this is the right place (???) but there is no feedback to anything I do. Currently using the simple and clean template but just want to edit the background color, menu color, and change the borders if possible.

any help is much appreciated. thanks.
Image is there a safe space for low self-esteem? Image
User avatar
calmcnichols
 
Posts: 31
Joined: April 13th, 2019, 11:08 pm
Location: KS, USA

Re: coding moron has no idea how to change background color

Postby eishiya » April 14th, 2019, 7:03 pm

Most of the default templates have their CSS in a separate file. To change things, you don't tweak the code, instead you override it. Create a <style> element in Overall Layout in your layout's <head> section (so, right before the head ending tag, </head>), and place your background colour code (and any other custom CSS) in there. To change the body background colour, you'd use this CSS override:
Code: Select all
body {
   background-color: #161616;
}


Same general approach to all the other elements: figure out what selector you need to target that element (use your browser's Inspect tools to make this easier), then add a bit of CSS to add styling to it. These snippets will override the default styling.
Image
User avatar
eishiya
 
Posts: 9729
Joined: December 5th, 2009, 11:17 am

Re: coding moron has no idea how to change background color

Postby Eightfish » April 15th, 2019, 1:26 am

Like eishiya said, the css stylesheet is in a separate document. On your template, it's the address

Code: Select all
<link href="http://www.smackjeeves.com/templates/simple_and_clean/style.css?v=2" rel="stylesheet" />


is linking to.

So another way to go about things would be to copy the stylesheet and replace whatever you want, then replace the link in the code with a link to your altered stylesheet. Or you could do what I did and replace the code above with just the text from the stylesheet and that would work as normal. It's not really the proper way to do things though.


By the way your linework is stunning and you have a fantastic grasp of anatomy.
Image
User avatar
Eightfish
 
Posts: 27
Joined: November 12th, 2018, 5:09 am

Re: coding moron has no idea how to change background color

Postby calmcnichols » April 15th, 2019, 3:31 pm

thanks to both for your help (and for the compliment, glad you like it). figured out how to do some very basic color changing and such but unfortunately am still struggling with how to center the banner and move the favorite button up to the menu. I really don't understand how to do this basically at all, let alone competently. Wish I was able to apply more of what both of you are saying but i honestly don't grasp it all.

tried doing some menu editing on the menu modify template thingy (???) but trying to add the favorites link or whatever there either has it not show up at all or has a favorite icon between each menu button and I just want it at the end. and some of the googling I was doing for centering the banner (like using margin: 0 auto;) doesn't seem to work at all. i have no idea. apologize for the dead weight i'm being atm.
Image is there a safe space for low self-esteem? Image
User avatar
calmcnichols
 
Posts: 31
Joined: April 13th, 2019, 11:08 pm
Location: KS, USA

Re: coding moron has no idea how to change background color

Postby eishiya » April 15th, 2019, 3:46 pm

The banner isn't centered because it's currently set to float left (i.e. always go on the left side of whatever's next to it). You can fix that with this CSS override:

Code: Select all
#banner {
float: none;
}



The menu on SJ is set up in this way:
Code: Select all
some intro code here
<!-- BEGIN links --> this begins a loop to go through all the default links (Home, First Comic, Latest Comic, Archive)
code that gets generated for every automatically generated link in the menu
<!-- END links --> this marks the end of the loop
some wrap-up code here

To add custom links, add them either before the start of the loop, or after the end, applying the same code that gets applied within the loop.
The default menu code for Simple and Clean looks like this:
Code: Select all
<ul>
<!-- BEGIN links -->
   <li><a href="{links.URL}">{links.TEXT}</a></li>
<!-- END links -->
</ul>

So, to have a properly styled +Fav link, you'd modify it to this:
Code: Select all
<ul>
<!-- BEGIN links -->
   <li><a href="{links.URL}">{links.TEXT}</a></li>
<!-- END links -->
   <li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}">+Fav</a></li>
</ul>

Notice how the same <li> and </li> from the default code is in there, and that it's within the big <ul> element the whole menu is contained in. This makes sure that any styling applied to the menu also gets applied to your new addition as well.
(Feel free to replace "+Fav" with an image or other text. Rinse and repeat for any additional custom links you want in the menu!)
Image
User avatar
eishiya
 
Posts: 9729
Joined: December 5th, 2009, 11:17 am

Re: coding moron has no idea how to change background color

Postby calmcnichols » April 15th, 2019, 10:10 pm

thanks a lot for taking the time to help. i really do appreciate it. worked great.
Image is there a safe space for low self-esteem? Image
User avatar
calmcnichols
 
Posts: 31
Joined: April 13th, 2019, 11:08 pm
Location: KS, USA

Re: coding moron has no idea how to change background color

Postby calmcnichols » April 29th, 2019, 3:30 pm

one more question. I have this issue on my site where clicking the banner to bring you to the main news archive works fine and looks good but accessing a post directly from the SJ page has no background box and looks hideous with black text on a dark background. And I have no idea what to edit to change it. I've tried editing both news template pages with stuff like background-color and background etc but nothing seems to change. I also tried editing the Overall page in a similar method to above but again nothing changes since I have no idea what to add. I really hate coding and don't understand what I need to do at all. What do I edit and where do I do it?
Ideally I would like the news posts on BOTH areas to be color #282828 or something so they look different from the background (#161616) but can still see the header text color (#bcbcbc). I apologize for being a dumb boy but I just do not understand this stuff at all and have no clue how to troubleshoot.
Image is there a safe space for low self-esteem? Image
User avatar
calmcnichols
 
Posts: 31
Joined: April 13th, 2019, 11:08 pm
Location: KS, USA

Re: coding moron has no idea how to change background color

Postby eishiya » April 29th, 2019, 3:56 pm

Those are two separate pages. One is the News/Welcome page, the other is the News Archive. The problem is that the News Archive posts have no class assigned to them, so none of the CSS styling applies.

In the News Archive, find code that looks like this:
Code: Select all
<!-- Begin .post -->

<div><a name="somethingsomething"...


Add the "news" class to the DIV:
Code: Select all
<!-- Begin .post -->

<div class="news"><a name="somethingsomething"...


On an unrelated note, although images are helpful, links are even more helpful xP If someone can't see the code, they can't help much, and it's hard to diagnose a problem from screenshots alone anyway.
Image
User avatar
eishiya
 
Posts: 9729
Joined: December 5th, 2009, 11:17 am


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 2 guests