Need Help with Changes

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

Moderator: Help Desk Team

Need Help with Changes

Postby Annoyedaquarius » April 22nd, 2019, 10:33 pm

I could really use some help trying to changed the background colour of my website THINKING it was going to be quick and easy (My comic releases THIS thur). Just something simple to paste right into my html or some CSS to paste into it. I'm not sure how any of it works and reading is very hard for me. Is there anyone who could help me, just very straight forward as it's tricky for me to understand paragraphs. I tried doing this-
"So, just go to your Overall Layout, add
CODE: SELECT ALL
<style>
/*Custom CSS goes here!*/
</style>
right before </head>, and put your custom code in there."
But nothing happened. I'm not sure if I pasted it wrongly or what. Or if CSS can't go into the html. If that's the case do I have to write a whole CSS code because Idk how to do that... I just want to change my background colour...

http://www.potofbooks.com/

The code I have on the site currently-
"<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{PAGE_TITLE} - {SITE_NAME}</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700">
<link rel="stylesheet" href="http://www.smackjeeves.com/templates/classic/style.css?v=2">
<link rel="alternate" type="application/rss+xml" title="{SITE_NAME} RSS" href="{SITE_URL_FULL}rss/">
<meta name="Description" content="{SITE_DESCRIPTION}">
{SOCIAL_META_TAGS}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">

var _sjt = {};

</script>
<style>
#logo {
padding: 0;
}
</style>
</head>

<body background-color="#5f8bd4">
<div id="overall-wrapper">
<div id="inner-wrapper">
<div id="page">
<div id="header">
<div id="logo">
<a href="{SITE_URL_FULL}">
<img src="https://66.media.tumblr.com/7ffe1cab387d36daf85b6ec256cf3d89/tumblr_po9xcuv0Xb1rchwai_540.png" alt="{SITE_NAME}">
</a>
</div>
<div id="nav-bar">
{MENU}
</div>
</div>
<div id="main">

{CONTENT}

</div>
</div>
<div id="footer-placeholder"></div>
<div id="overall-footer">

Powered by <a class="sj" href="http://www.smackjeeves.com/" target="_blank">Smack Jeeves<span class="subtle"> Webcomic Hosting</span></a>

</div>

</div>
</div>

</body>
</html>"
User avatar
Annoyedaquarius
 
Posts: 4
Joined: June 13th, 2018, 2:19 pm

Re: Need Help with Changes

Postby eishiya » April 23rd, 2019, 6:53 am

The background-color="#5f8bd4" code should go in your CSS code, not in your HTML. So, right under where you put your logo CSS, put
Code: Select all
body {
background-color: #5f8bd4;
}


You may also want to add background-image: none; so that the background image doesn't hide your background color.
Image
User avatar
eishiya
 
Posts: 9696
Joined: December 5th, 2009, 11:17 am

Re: Need Help with Changes

Postby Annoyedaquarius » April 23rd, 2019, 5:41 pm

I think I get it? I really don't understand where the CSS is I'm sorry...

(EDIT-nope never mind, I did this wrong too. I'm sorry if this is frustrating I just really don't understand. Once looking at the code it's VERY hard for me to read)

<style>
#logo {
(should it go right here? like..)
background=none
background-color="whatever colour i use"
padding: 0;
}
</style>
User avatar
Annoyedaquarius
 
Posts: 4
Joined: June 13th, 2018, 2:19 pm

Re: Need Help with Changes

Postby eishiya » April 23rd, 2019, 5:47 pm

No, like this:

Code: Select all
<style>
#logo {
padding: 0;
}

body {
background-image: none;
background-color: whatever color you use;
}
</style>


Since the background stuff should affect the body of your page rather than the logo, they should be written with the "body" selector outside the curly braces {}. Also, CSS uses a colon to separate the property name (e.g. background-color) and the value. Each property-value pair should end in a semicolon to tell the browser that that pair is done, since line breaks are just there for clarity and don't actually mean much.
Image
User avatar
eishiya
 
Posts: 9696
Joined: December 5th, 2009, 11:17 am

Re: Need Help with Changes

Postby Annoyedaquarius » April 23rd, 2019, 5:55 pm

Alright, I posted my entire code below. I copy and pasted but my site doesn't look any different. I'm sure I've done something wrong.

-------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{PAGE_TITLE} - {SITE_NAME}</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700">
<link rel="stylesheet" href="http://www.smackjeeves.com/templates/classic/style.css?v=2">
<link rel="alternate" type="application/rss+xml" title="{SITE_NAME} RSS" href="{SITE_URL_FULL}rss/">
<meta name="Description" content="{SITE_DESCRIPTION}">
{SOCIAL_META_TAGS}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">

var _sjt = {};

</script>
<style>
#logo {
padding: 0;
}

body {
background-image: none;
background-color: ##5f8bd4;
}
</style>
</head>

<body background-color="#5f8bd4">
<div id="overall-wrapper">
<div id="inner-wrapper">
<div id="page">
<div id="header">
<div id="logo">
<a href="{SITE_URL_FULL}">
<img src="https://66.media.tumblr.com/7ffe1cab387d36daf85b6ec256cf3d89/tumblr_po9xcuv0Xb1rchwai_540.png" alt="{SITE_NAME}">
</a>
</div>
<div id="nav-bar">
{MENU}
</div>
</div>
<div id="main">

{CONTENT}

</div>
</div>
<div id="footer-placeholder"></div>
<div id="overall-footer">

Powered by <a class="sj" href="http://www.smackjeeves.com/" target="_blank">Smack Jeeves<span class="subtle"> Webcomic Hosting</span></a>

</div>

</div>
</div>

</body>
</html>
User avatar
Annoyedaquarius
 
Posts: 4
Joined: June 13th, 2018, 2:19 pm

Re: Need Help with Changes

Postby eishiya » April 23rd, 2019, 6:19 pm

You have an extra # in your background colour:
background-color: ##5f8bd4;
This makes the entire value appear invalid to the browser, so it keeps using the old one.


By the way, you can remove the "background-color" property from your HTML here:
Code: Select all
<body background-color="#5f8bd4">

This can just be <body>
Image
User avatar
eishiya
 
Posts: 9696
Joined: December 5th, 2009, 11:17 am

Re: Need Help with Changes

Postby Annoyedaquarius » April 23rd, 2019, 6:38 pm

Shooooo OK the colour is changed ahhh. I'm sorry it's just SO hard for me to read.

Quick question, why is my page going crazy? Image below. Do I need to make is smaller? It shows up fine on my phone it show up with like "Freestyle Mode-Zoom and Pan Manually" Can I turn that off at all?
https://66.media.tumblr.com/afb40468b7f ... 1_1280.png
User avatar
Annoyedaquarius
 
Posts: 4
Joined: June 13th, 2018, 2:19 pm

Re: Need Help with Changes

Postby eishiya » April 23rd, 2019, 7:58 pm

That zoom setting you mentioned is only for the mobile reader, it does nothing in desktop mode. You have to enable the mobile reader if you want it to show up instead of the desktop site on your comic.

But yes, it looks like your page is too large. Try to keep your pages under 1000 px wide. I aim for around 700px.
Image
User avatar
eishiya
 
Posts: 9696
Joined: December 5th, 2009, 11:17 am


Return to Template Development & Support

Who is online

Users browsing this forum: bobadventures and 1 guest