I need help with coding 3 things on my comic!

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

Moderator: Help Desk Team

I need help with coding 3 things on my comic!

Postby atomicbomb23 » January 2nd, 2018, 11:37 pm

I need help getting rid of this white border/background/box around my comics? I want the background image I have set showing behind the comic pages
Uh...Here's what I'm talking about!

http://lifessweettreat.smackjeeves.com/

2nd coding help! The white box is small and makes the character image go through it! How do I get rid of that or make it longer?
Here's a visual for this as well!

http://lifessweettreat.smackjeeves.com/characters/

The 3rd and final thing I need help with it coding my text for the comic page as well as character page? Uh I need help with changing the color and font style of it! (I tried coding this myself and it still doesn't work so I think I'm just not typing it right or doing something wrong)

I've tried going through the forums as well as just coding sites in general and I couldn't find anything relating to my issues so I'm sorry if these have been solved or asked before but I'm new to coding as well as Smackjeeves still and I easily get confused by it!

Thanks for reading!
User avatar
atomicbomb23
 
Posts: 10
Joined: September 20th, 2014, 3:26 pm

Re: I need help with coding 3 things on my comic!

Postby eishiya » January 2nd, 2018, 11:46 pm

Moved your thread to the right place xP

To get rid of the white background, add this CSS override:
Code: Select all
#main {
background: none;
}


If you don't know what a CSS override is:
Find or add a <style> element just before </head> in Overall Layout, and add the CSS code there. An "override" is just CSS code that takes precedence over other CSS, in this case, over the default CSS for your template. Since this code is added on the page itself and after the line where the default CSS is imported, it takes precedence.


To fix your character page images bleeding out, you need a clearfix, because apparently using align="left" and align="right" makes them float, and floating images aren't counted towards the dimensions of their container, hence the container not stretching to fit them. A clearfix is just this:
Code: Select all
<div style="clear:both"></div>

Add this code at the bottom of your characters page OR right below {CONTENT} in Overall Layout, if you plan to have many kinds of pages with floated elements.


Can you be more specific about the changes you want to make to the text?
Image
User avatar
eishiya
 
Posts: 9400
Joined: December 5th, 2009, 11:17 am

Re: I need help with coding 3 things on my comic!

Postby atomicbomb23 » January 3rd, 2018, 3:39 pm

Thank you very much for moving this to the right section and the coding help with the white box and my character page! :)

For the text of my comic (like the titles of them, comments, etc.) I wanted to change the color of the text and change the font style to Arial/Berlin Sans FB (a font that anyone can read clearly!)

Thank you for reading and helping!
User avatar
atomicbomb23
 
Posts: 10
Joined: September 20th, 2014, 3:26 pm

Re: I need help with coding 3 things on my comic!

Postby eishiya » January 3rd, 2018, 5:44 pm

The font is already set to an easy-to-read sans-serif font, and anyone who doesn't have it will see whatever sans-serif font they have set as the default in the browser (Arial or Helvetica by default in most browsers).

If you do want to change it, this is the override for the font:
Code: Select all
html, body {
   font-family: Arial, 'Berlin Sans FB', sans-serif;
}

This'll make it use Arial, then Berlin Sans FB for anyone who doesn't have Arial, and their default sans-serif font for anyone who doesn't have either of those fonts.

The colour is a bit more complicated, as different colours are set for different things.
For the comment text and default text:
Code: Select all
body {
   color: #292e33;
}


Most link text:
Code: Select all
a{
   color: #036;
}


The top menu:
Code: Select all
#nav-bar a {
   color: #e4edf6;
}

#nav-bar a:hover {
   color: #fff;
}


Headers (page titles, etc)
Code: Select all
h1, h2 {
   color: #363636;
}


Subheaders (comic date lines, etc)
Code: Select all
.subheader {
   color: #737373;
}


Comments header:
Code: Select all
.comment-header .title {
   color: #363636;
}


(Change the numbers to the hex value of the colours you want.)

There are some other colours set. You can look at aaaaaall the default CSS here. Search for CSS rules starting with "color:" to find the ones that modify font colours. I think the above should cover the important stuff.
Image
User avatar
eishiya
 
Posts: 9400
Joined: December 5th, 2009, 11:17 am

Re: I need help with coding 3 things on my comic!

Postby atomicbomb23 » January 4th, 2018, 1:31 am

Thank you very much! This helps a lot. I appreciate it! :) (Its late where I am however so I'll probably try these tomorrow.)
User avatar
atomicbomb23
 
Posts: 10
Joined: September 20th, 2014, 3:26 pm

Re: I need help with coding 3 things on my comic!

Postby atomicbomb23 » January 4th, 2018, 10:35 pm

Hey I'm really sorry to bother this thread again but I totally forgot to ask do I put those font codes in the overall layout or the comic page templates?

EDIT!: Nevermind I figured out to put in in the overall layout! :)
User avatar
atomicbomb23
 
Posts: 10
Joined: September 20th, 2014, 3:26 pm

Re: I need help with coding 3 things on my comic!

Postby eishiya » January 4th, 2018, 10:46 pm

They go in Overall Layout along with your other CSS overrides.

Remember to tweak the colours though! The colours I included are the default ones, so adding those codes will make no difference until you change the colours.
Image
User avatar
eishiya
 
Posts: 9400
Joined: December 5th, 2009, 11:17 am

Re: I need help with coding 3 things on my comic!

Postby atomicbomb23 » January 6th, 2018, 4:56 am

Thank you so much! I really appreciate you taking the time to help me! Is it alright if I ask for coding help with something else? (I don't want to make a whole other thread for this one other thing :( ). I'd like to add a synopsis sidebar on my webcomic and I'm unsure how to code that.
User avatar
atomicbomb23
 
Posts: 10
Joined: September 20th, 2014, 3:26 pm

Re: I need help with coding 3 things on my comic!

Postby eishiya » January 6th, 2018, 9:57 am

Where do you want to put it? Your layout uses the full width of the browser, so I don't see anywhere where you can add a sidebar. I feel it would be better to make an "about" page with the synopsis instead - that way it's there for people who want it, and doesn't clutter up the page for people who don't. You can do that using the Extra Pages feature, just like you did with the characters page.
Image
User avatar
eishiya
 
Posts: 9400
Joined: December 5th, 2009, 11:17 am

Re: I need help with coding 3 things on my comic!

Postby atomicbomb23 » January 6th, 2018, 5:20 pm

I would say I'd want to put the side bar on the left but if you saw making an about page would be easier than I'd rather go with that option! Thank you very much! :)
User avatar
atomicbomb23
 
Posts: 10
Joined: September 20th, 2014, 3:26 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 4 guests