Page 1 of 1

Need Help with Changes

PostPosted: April 22nd, 2019, 10:33 pm
by Annoyedaquarius
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>"

Re: Need Help with Changes

PostPosted: April 23rd, 2019, 6:53 am
by eishiya
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.

Re: Need Help with Changes

PostPosted: April 23rd, 2019, 5:41 pm
by Annoyedaquarius
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>

Re: Need Help with Changes

PostPosted: April 23rd, 2019, 5:47 pm
by eishiya
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.

Re: Need Help with Changes

PostPosted: April 23rd, 2019, 5:55 pm
by Annoyedaquarius
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>

Re: Need Help with Changes

PostPosted: April 23rd, 2019, 6:19 pm
by eishiya
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>

Re: Need Help with Changes

PostPosted: April 23rd, 2019, 6:38 pm
by Annoyedaquarius
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

Re: Need Help with Changes

PostPosted: April 23rd, 2019, 7:58 pm
by eishiya
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.