Help modifying some elements

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

Moderator: Help Desk Team

Help modifying some elements

Postby YunikoYokai » February 2nd, 2018, 3:04 pm

Hi all,

I'm relatively new to the site and to HTML/CSS coding, so I'm finding myself getting a bit stuck at a few places while modifying my comic's page. They are just small things but it's enough to annoy me :)

Comic link: http://starquake1.smackjeeves.com


Things to Note:
    - I don't have premium and can't get Smackjeeves to like my google docs CSS, so I use a mix of Internal and inline CSS
    - The base template is Bliss (other than the images, colours, a few stroke additions and the internal CSS (which is 99% the Bliss one in itself), the code is exactly the same).

So the things that I would really appreciate some help with;
    - Making the text in the Menu larger (news, first comic etc)
    - In the Menu bar, the highlighted hover box doesn't cover the entire height of the bar, is there a way to fix this?
    - Is there a way to make the CHAPTER 1 inside the table (below #, Title, Date Released, Comments) have the same colours as the chapter 1 button above the table? Everything I try effects the entire table
    - Inside the comic pages themselves, how do you change the colour and font of the first/previous/next/latest page text? Nothing I do seems to help
    - The news page is a mess. I need boxes around the different sections (home and news) but everything I do with it screws everything up.
    - How do you change the colour of the Author's Comment box? I can't see anything for it...

Image

I appreciate any help! If you want to see sections of the code, let me know what you need and I'll paste them in (I'm not sure what you need, there's so many sections!)
Image
User avatar
YunikoYokai
 
Posts: 24
Joined: October 8th, 2017, 4:03 am

Re: Help modifying some elements

Postby eishiya » February 2nd, 2018, 3:49 pm

Google Drive doesn't serve the CSS as a plain text file, but includes a bunch of presentation HTML with it, which is why it doesn't work. You may be able to host it elsewhere. That said, if most of your CSS is copied from Bliss, why not use the Bliss CSS file, and then just include your overrides in a <style> element instead of ALL of the CSS?

To make the menu font larger, find this part of your CSS:
Code: Select all
#navcontainer ul li a

and in that section, replace
Code: Select all
font-family: 22px

with
Code: Select all
font-size: 22px;

Don't forget the semi-colon xP There are other missing semicolons, I recommend looking for those to make sure all your CSS is working as you intend. Some of your colours are missing the required # in front of them, too. You may want to run your CSS through a validator to find these problems more easily.


The menu hover box doesn't span the entire width because the container has its own padding in addition to the padding you've given the menu elements. Set the container padding to 0:
Find:
Code: Select all
#navcontainer ul
{
background-color: #2b629f;
   color: 45b3e1;
   font-family: Russo One
        font-size: 30px
   line-height: 26px;
   margin-left: 0;
   margin-top: 0;
   padding-bottom: 3px;
   padding-left: 0;
   padding-top: 3px;
   text-align: center;
   width: 100%;
}

Replace with:
Code: Select all
#navcontainer ul
{
   background-color: #2b629f;
   color: #45b3e1;
   font-family: Russo One;
   font-size: 30px;
   line-height: 26px;
   margin-left: 0;
   margin-top: 0;
   padding-left: 0;
   text-align: center;
   width: 100%;
}

(Fixed the semi-colons and missing # for you as well.)


Archive chapter title colours: Of course you can :D The chapter title rows have the class "chapter_title", so just make a rule with the colours you want for that, e.g.
Code: Select all
.chapter_title, .chapter_title h2
{
   background-color: #143f75 !important;
   color: #3cb3e1;
}

(The !important keyword prevents other rules from overriding this background-color. The reason it's needed is because there's some other CSS setting the grey background colour that's technically more specific and therefore would override this one.)


For the navigation arrow colours: Your colours are overridden by the CSS for the link colours. The colour needs to go on the A element rather than the table cell containing it. Instead of using inline CSS there though, I recommend using your main CSS instead, since the navigation arrows all share a class, "navi". So, get rid of the inline CSS, and add this rule to your main CSS:
Code: Select all
a.navi
{
   color:#3cb3e1;
}

(Make sure you paste it as-is. "a.navi" (no space) has a different meaning from "a .navi" (with a space). The former is "A elements with class navi", the latter is "elements with class navi within an A element."

Miscellaneous: Your layout is super-wide. On anything narrower than a 1920px screen (e.g. many screens out there, or anyone who doesn't have their browser maximised), people have to scroll horizontally, and that's a hassle. Try to avoid setting hard widths like that, unless they're just about the width of your comic pages. In your case, you should be able to just replace all the "1900px" with "100%", and then remove the "width: 100%;" from #navcontainer ul.


With the news page, you'll need to put some containers around the text before you can style them. So you'll need to edit the HTML, not just the CSS.
Image
User avatar
eishiya
 
Posts: 9397
Joined: December 5th, 2009, 11:17 am

Re: Help modifying some elements

Postby YunikoYokai » February 3rd, 2018, 5:17 am

eishiya wrote:Google Drive doesn't serve the CSS as a plain text file, but includes a bunch of presentation HTML with it, which is why it doesn't work. You may be able to host it elsewhere. That said, if most of your CSS is copied from Bliss, why not use the Bliss CSS file, and then just include your overrides in a <style> element instead of ALL of the CSS?


I figured as much after a bit of research. I probably don't need to paste in the whole CSS, but I am a terrible programmer so I make horrific mistakes when trying to overwrite things (as you may have discovered :lol: ) so it's easier for me to have the CSS there and easy to edit in case frustration wins!

eishiya wrote:Don't forget the semi-colon xP There are other missing semicolons, I recommend looking for those to make sure all your CSS is working as you intend. Some of your colours are missing the required # in front of them, too. You may want to run your CSS through a validator to find these problems more easily.


Oh pfffffffft, that'd explain a lot! Debugging, the bane of my life ...Although now the menu doesn't take the font over to the other pages other than Archive so I've probably got an overwrite or something there... yay.

eishiya wrote:The menu hover box doesn't span the entire width because the container has its own padding in addition to the padding you've given the menu elements. Set the container padding to 0:
(Fixed the semi-colons and missing # for you as well.)


Ahh, bloody padding. I keep forgetting that exists. Thank you, I've had a play and I think I've got it (although the hover box is one pixel too low...)

eishiya wrote:Archive chapter title colours: Of course you can :D The chapter title rows have the class "chapter_title", so just make a rule with the colours you want for that, e.g.
(The !important keyword prevents other rules from overriding this background-color. The reason it's needed is because there's some other CSS setting the grey background colour that's technically more specific and therefore would override this one.)


Thank you very much. I had to use the !important on the font colour too since the CSS was overriding it but it looks good now!

eishiya wrote:For the navigation arrow colours: Your colours are overridden by the CSS for the link colours. The colour needs to go on the A element rather than the table cell containing it. Instead of using inline CSS there though, I recommend using your main CSS instead, since the navigation arrows all share a class, "navi". So, get rid of the inline CSS, and add this rule to your main CSS:
(Make sure you paste it as-is. "a.navi" (no space) has a different meaning from "a .navi" (with a space). The former is "A elements with class navi", the latter is "elements with class navi within an A element."

There is so many classes out there, I need a cheat sheet with them all. I've got the colour sorted (thank you!), but changing the font hasn't gone as well XD It'll be related to why the fonts on my Archive aren't transferring over to the other pages. Time to have a play and see what I can do.

eishiya wrote:Miscellaneous: Your layout is super-wide. On anything narrower than a 1920px screen (e.g. many screens out there, or anyone who doesn't have their browser maximised), people have to scroll horizontally, and that's a hassle. Try to avoid setting hard widths like that, unless they're just about the width of your comic pages. In your case, you should be able to just replace all the "1900px" with "100%", and then remove the "width: 100%;" from #navcontainer ul.


Thank you, I was actually going to tackle this another day when I understood the difference between pt, px, % and em and which one to use, but that makes things easier!

eishiya wrote:With the news page, you'll need to put some containers around the text before you can style them. So you'll need to edit the HTML, not just the CSS.


I knew it would be something along those lines. I'll have a play and see what I can come up with. Thanks again! I've gotten most of the teething issues sorted, although with all coding, new bugs have reared their heads XD
Image
User avatar
YunikoYokai
 
Posts: 24
Joined: October 8th, 2017, 4:03 am

Re: Help modifying some elements

Postby eishiya » February 3rd, 2018, 9:10 am

To be honest, I find your layout incredibly confusing to work with. Part of the problem is Bliss. It's ancient and poorly-written, so the point where I wrote a replacement for it a while back (but haven't posted it publicly yet). The other problem is you have a lot of redundant CSS that's making it hard to see what your intent is. For example, on the menu, you set the font-family and font-size multiple times:

Code: Select all
#navcontainer ul {
   [...]
   font-family: Russo One;
   font-size: 30px;
   line-height: 35px;
   [...]
}

Code: Select all
#navcontainer ul li a {
   [...]
   font-family: Russo One;
   font-size: 22px;
   [...]
}

So, I can't tell what you're going for at all. And the thing is, this has an effect! it sets the size for the spacing between the links and such, and that makes it harder to debug what's happening with the padding and all that. Try to not set CSS for anything you don't actually need CSS for. For example, don't set "width: 100%" and "text-align: center" for the menu, as that code is unneeded, and don't set font-sizes twice unless you know exactly why you're doing it. Keeping your CSS minimal
- keeps it easy to read
- makes for less text the reader has to download
- makes it easier to debug because there are fewer interacting rules
That last bit is most important for you ;D

By the way, are you using your browser's debug tools to play with this? In Firefox and Chrome, if you press F12, it'll open up the developer console, which lets you inspect individual elements and the CSS affecting them, as well as temporarily toggle and edit various CSS rules. It's great for seeing what each rule is doing.
I still feel like your life might've been much easier if you'd not copied over the entire CSS and instead used overrides, since you'd only have your own rules to deal with. Finding the selectors you need is the main reason to use copied-over CSS, but if you use the debug tools, it's easy to get the selectors.

Edit: you have some tag soup:
Code: Select all
<type=text/css; link href='https://fonts.googleapis.com/css?family=Russo One' rel='stylesheet'>
<type=text/css; link href='https://fonts.googleapis.com/css?family=Prompt' rel='stylesheet'>

This is entirely invalid. "type" is not a real HTML tag as far as I know. What you want is
Code: Select all
<link href="https://fonts.googleapis.com/css?family=Russo One" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prompt" type="text/css" rel="stylesheet">


Edit 2: Please don't set your backgrounds using the background attribute of elements. Use CSS.

Edit 3: Try adding display: block; to #navcontainer ul li a to fix the padding being off. This forces the padding to be considered a proper part of the element (by making it act like a block-level element) rather than something purely decorative and ignorable like on inline elements.
Image
User avatar
eishiya
 
Posts: 9397
Joined: December 5th, 2009, 11:17 am

Re: Help modifying some elements

Postby YunikoYokai » February 3rd, 2018, 1:24 pm

I'm really sorry. I've never done HTML/CSS before now, this my first ever experience of it. The only coding I've ever done is some very basic Python to convert coordinates types (which is all arithmetic anyway). I've just taken the Bliss base and modified it. I'm really sorry if it's completely unreadable, the thought of starting from scratch absolutely terrifies me because I don't know what I'm doing. I don't know the class names, how you define everything, how you call things. And then there are parts of Javascript thrown around (I've never even looked at Javascript). I could draw all of this really happily, coding it? No way, my head can't get around it. I'm just googling bits and pieces and throwing them in and praying they work. If I'm set the font family/size multiple times, it because wanted that font to be for that section there but it wasn't being applied before and this was the only way my non-coding mind found to force it. I'm not a coder and what coding I've done has never been as complex as this, so I'm sorry :(

No I've not used the browser debug tool, I don't really understand it too well. I copied the whole CSS because, as I said, this is the first time I've ever done this. I have no idea idea what I'm doing.

For your edit 1, I threw everything into a validator and it flagged up a warning about it (not an error but i thought it would be good to try and fix it). I just did what it suggested (said it was missing a type).

For edit 2, I'm... slightly confused about what you are trying to say... I'll have to google it in a minute.
For Edit 3, I'll go and try that, hopefully it helps.

Again, I really appreciate the help. I'm sorry I'm such a terrible coder :(

Edit: I tried the Display: Block; but it just stacked (putting each of the list items one on top of the other). it fixed the padding problem but i didn't keep everything inline.
Image
User avatar
YunikoYokai
 
Posts: 24
Joined: October 8th, 2017, 4:03 am

Re: Help modifying some elements

Postby eishiya » February 3rd, 2018, 4:00 pm

Re: edit 2 (not using inline backgrounds), I mean don't use "background="blahblahblah"" in your HTML, set the backgrounds in your CSS instead.

Re: display:block, make sure you're putting it on the right thing (#navcontainer ul li a, NOT anything else). If you put it on the LI element, that'll break your menu. If you put it on the A element, it'll work nicely. If even that doesn't work for some reason, use "inline-block" instead of "block". That'll make the element be placed inline (so they won't stack up), but it'll treat its contents as if they were block-level (so the padding, etc will be treated as part of the element, rather than as decorations outside of it).

I recommend trying out HTML yourself some time. Classes are a LOT less confusing if you set them yourself, instead of trying to figure out what class names someone else used and where. SJ's template system isn't a great introduction to HTML, since it's HTML plus SJ's own coding system on top of that, and it's hard to write anything simple when you're trying to make a comic site. Starting with a simple project outside of SJ would make learning much easier. Learning anything is easier when you start with your own, very basic, code. Trying to figure out someone else's monstrosity is always a challenge, even when you're experienced! As I mentioned, a part of why I'm struggling with your template is because it's Bliss, which is someone else's (inelegant) code.

You should try the debug tools out! Play around with them, click some things. It's entirely in your browser, so any changes you make there will not affect the code you've saved on SJ, and you can start over by refreshing the page. It's great for helping you understand what your CSS rules are actually doing. I wish such tools were around when I was first learning this stuff ;_;
Image
User avatar
eishiya
 
Posts: 9397
Joined: December 5th, 2009, 11:17 am

Re: Help modifying some elements

Postby YunikoYokai » February 3rd, 2018, 4:33 pm

Ah, ok, that makes sense. I think I was leaning towards that.

The inline-block worked, the block was definitely in the right place (I triple checked) so maybe it's the terrible coding but hey, at least that little niggle is taken care of.

I'll see what I can find, although I'm one of these people who need a structured introduction XD I've heard W3School is meant to be good, so I'll try starting there and see what I can do. Is there a template that is better written to use as a reference when I decide to come back to it? I'll play around the the debugging tool and see what happens, I'll probably get lost in seconds XD Thanks for all the help
Image
User avatar
YunikoYokai
 
Posts: 24
Joined: October 8th, 2017, 4:03 am

Re: Help modifying some elements

Postby eishiya » February 3rd, 2018, 5:05 pm

All the templates are made more complex by the fact that they're broken into sections and include SJ templating markup in addition to HTML. I haven't looked at all of the templates in detail, but I think the ones with the clearest easiest-to-modify code are Classic, Gunmetal Reloaded, and Modern. I'm probably biased about Gunmetal Reloaded, as that one is a re-write I did of a rather broken old template, so of course I'd think it's easy to understand xP

Most of them are more straight-forward than Bliss, you happened to pick one of the worst ones xP Bliss is very old, and uses tables for its layout, which is an old technique from when getting things to align was much more difficult. HTML and CSS have both undergone many changes since. It also uses some inline formatting, which makes the code messy and makes tracking down where to make changes more difficult.

Unfortunately I don't know of any good beginner HTML tutorials other than W3Schools, as I learned this stuff too long ago, all the resources have changed. My own approach to learning is generally to try writing what I want with my limited knowledge, google every problem I run into. It probably takes longer :'D
Image
User avatar
eishiya
 
Posts: 9397
Joined: December 5th, 2009, 11:17 am

Re: Help modifying some elements

Postby YunikoYokai » February 7th, 2018, 9:52 am

Ok, so I've swapped from Bliss to Modern and only added the overrides into the CSS instead of the whole thing (apart from the comic archive stuff, but that was already all there to begin with) so hopefully the code looks better. My only niggle now is that I can't seem to centre the navbar choices, they are determined to stay on the left side XD I'm probably missing something blindingly obvious. As soon as that is centres, I don't need to touch anything else (fingers crossed. Also fingers crossed this is a relatively easy fix to do as well).
Image
User avatar
YunikoYokai
 
Posts: 24
Joined: October 8th, 2017, 4:03 am

Re: Help modifying some elements

Postby eishiya » February 7th, 2018, 10:08 am

Overrides to center your menu:

Code: Select all
#overall_navbar ul li a {
float:none;
}

#overall_navbar ul li {
display:inline-block;
}


Your header is off-centre on smaller screens (you can see it off-centre yourself by making your window smaller). You can easily fix that by adding this override:
Code: Select all
#overall_header {
background-position: center;
}

This just makes the background image sit in the middle of its container, so the centre of the image will always be in the centre of #overall_header, and it'll get cropped on both sides if the screen is too small, instead of just one side, which is what's currently making it off-centre.


On a vaguely related note, if you're only using the "background" property to set a background image, use "background-image" instead of "background". "background" is meant to be a shorthand for setting multiple background-related properties at once (colour, position, size, etc), and it invisibly sets any unlisted properties to 0. That can make it harder to make changes later, especially since it makes the order of the rules matter more, because "background" will override any other background-related rules, even if it doesn't look like it does.
Image
User avatar
eishiya
 
Posts: 9397
Joined: December 5th, 2009, 11:17 am

Re: Help modifying some elements

Postby YunikoYokai » February 7th, 2018, 12:36 pm

Thank you so much for the help, I really appreciate it. I also edited the header, it wasn't something that crossed my mind until you pointed it out. I've also changed all the "background"s to "background-image" if they use an image (apart from two which default to the original grey for some reason if I change it to background-image, it's the arrows next to 'Start Reading' and 'Continue Reading' if you click news on the navbar. Everything else is fine though). Thanks again! Fingers crossed I don't have to touch this again in the near future.
Image
User avatar
YunikoYokai
 
Posts: 24
Joined: October 8th, 2017, 4:03 am

Re: Help modifying some elements

Postby eishiya » February 7th, 2018, 12:42 pm

The ones that turn grey have more than just the background image set in their background property, that's why. When you change that to background-image, it invalidates the entire thing since background-image expects only an image, so it uses the default image instead of your override.
Image
User avatar
eishiya
 
Posts: 9397
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