Removing The Fat

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

Moderator: Help Desk Team

Removing The Fat

Postby Dread86 » January 15th, 2010, 10:28 pm

Hey there, folks. I've had my comic up for a few weeks now and have been wanting to redesign my site for it but am a little rusty on my coding skills. What I'm trying to figure out basically is how I can scale the page down a bit to make it less wide. The default SJ template is somewhat fat and the boxes are basically too wide for my liking. I'd really like to know how to scale it down in width, remove the SJ banner and pave the way for my own custom graphics.

Specific tips and tricks for what I'd like to do would be great, and yes, I have considered taking a template that's already been made and editing it. I actually don't want to do that as I'd really like to figure this all out for myself (with any help I can get)!
User avatar
Dread86
 
Posts: 8
Joined: December 31st, 2009, 6:42 pm

Re: Removing The Fat

Postby Mr Aids » January 15th, 2010, 10:49 pm

Read this, and if you still have any question I will answer them.

Also, if you can link to the site you want help with, things will be easier for the both of us.
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: Removing The Fat

Postby Dread86 » January 15th, 2010, 10:53 pm

Ah, thank you! The site in question is: http://havencomic.smackjeeves.com and I am going to go read that wiki...

I am basically trying to slim down the page in width and have everything uniform. I'm trying to do this with the default template before I start adding custom graphics. Basically I'm not sure how to slim down the boxes that hold everything including the menu, the comic, the comments and of course news.
User avatar
Dread86
 
Posts: 8
Joined: December 31st, 2009, 6:42 pm

Re: Removing The Fat

Postby Mr Aids » January 15th, 2010, 11:18 pm

Well, to do that you have to edit the CSS, which is in Overall Layout under Page Design and Appearance. The CSS for this template is all contained in a stylesheet, which is this url:

http://www.smackjeeves.com/templates/default/style.css

From there, we're going to grab this bit of code:

Code: Select all
#content
{
   margin: 20px;
   height: 100%;
}


And stick that underneath the stylesheet back at Overall Layout.

Now we're going to add a width property so make everything slimmer:

Code: Select all
#content
{
   margin: 20px;
   height: 100%;
   width: 000px;
}


Simply replace the 000's with how wide you want your content to be in px, and there you go. Everything should be slimmer, if done right.
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: Removing The Fat

Postby Dread86 » January 15th, 2010, 11:23 pm

Alright so I'm not quite clear here. Where exactly do I stick that code?
User avatar
Dread86
 
Posts: 8
Joined: December 31st, 2009, 6:42 pm

Re: Removing The Fat

Postby Mr Aids » January 15th, 2010, 11:27 pm

Alright, go to Page Design / Appearance, then Overall Layout.

Look for this bit in the code:

Code: Select all
<style type="text/css">



      @import url("http://www.smackjeeves.com/templates/default/style.css");



   </style>


Which should be near the top. Stick the code underneath the url.
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: Removing The Fat

Postby Dread86 » January 15th, 2010, 11:29 pm

EDIT: It worked but now I need to center everything...

I'd been trying the old HTML tag <center></center> in various positions but it either doesn't work or screws everything up. I want to have the text links above the comic centered as well as the page itself... Can't figure out how to do it. Thanks for your help thus far though Mr. AIDS!
Last edited by Dread86 on January 15th, 2010, 11:40 pm, edited 1 time in total.
User avatar
Dread86
 
Posts: 8
Joined: December 31st, 2009, 6:42 pm

Re: Removing The Fat

Postby Mr Aids » January 15th, 2010, 11:39 pm

kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: Removing The Fat

Postby Dread86 » January 15th, 2010, 11:44 pm

Ah, thanks for that. Tried it and it's not working... :/
User avatar
Dread86
 
Posts: 8
Joined: December 31st, 2009, 6:42 pm

Re: Removing The Fat

Postby Mr Aids » January 15th, 2010, 11:49 pm

Oh I know what you mean now.

Change margin: 20px; to margin: 0 auto;
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: Removing The Fat

Postby Dread86 » January 15th, 2010, 11:51 pm

Ahhh! Brilliant, thank you!
User avatar
Dread86
 
Posts: 8
Joined: December 31st, 2009, 6:42 pm

Re: Removing The Fat

Postby Mr Aids » January 16th, 2010, 12:04 am

If you need any more help, check the Wiki before asking me.

Is there anything else you need to know at this time?
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: Removing The Fat

Postby Dread86 » January 16th, 2010, 12:07 am

Only thing I can think of is making the text menu links above the comic centered as well.
User avatar
Dread86
 
Posts: 8
Joined: December 31st, 2009, 6:42 pm

Re: Removing The Fat

Postby Mr Aids » January 16th, 2010, 12:52 am

Alright, to do that we have to do this.

Find this bit in the code:

Code: Select all
<style type="text/css">



      @import url("http://www.smackjeeves.com/templates/default/style.css");
#content
{
   margin: 0 auto;
   height: 100%;
   width: 900px;
}


   </style>


And now replace it with this:

Code: Select all
<style type="text/css">

@import url("http://www.smackjeeves.com/templates/default/default_jumpbox.css");

/********************** Body Tag *************************/

html, body
{
   height: 100%;
}

body
{
   margin:0;
   padding-top:0;
   padding-left:0;
   padding-right:0;
   font: normal .9em "trebuchet ms", arial, sans-serif;
   color: #000;
   background: #CEC9BD;
}

a:link, a:visited
{
   color: #024;
   font-weight: bold;
   text-decoration: none;
}

a:hover
{
   text-decoration: underline;
}

a img
{
   border: 0;
}

#content
{
   margin: 0 auto;
   height: 100%;
        width: 900px;
}

#header
{
   border-top: 5px solid #990000;
   padding: 15px 0 5px 40px;
}

#header a:link, #header a:visited
{
   color: #000;
}

#header a img
{
   border: 0;
}

#header a:hover
{
   text-decoration: none;
}

#header h1
{
   font-size: 2em;
   margin: 0;
   padding: 0;
}

#header p
{
   margin: 5px 0 0;
   padding: 0;
}

#main-top
{
   height: 6px;
   background: url("images/shadow-top.gif") bottom left repeat-x;
}

#main-top div
{
   height: 100%;
   background: url("images/shadow-tl.gif") bottom left no-repeat;
}

#main-top div div
{
   height: 100%;
   background: url("images/shadow-tr.gif") bottom right no-repeat;
}

#main
{
   background: #fff url("images/shadow-left.gif") top left repeat-y;
   text-align: center;
}

#main2
{
   background: url("images/shadow-right.gif") top right repeat-y;
   padding: 10px 16px 10px 16px;
}

#menu
{
   height: 22px;
   border-top: 1px solid #333;
   border-bottom: 1px solid #333;
   background: #999;
   margin: 0 0 10px 0;
   padding: 4px 0 0;
}

#menu ul
{
   margin: 0;
   padding: 0;
}

#menu li
{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}

#menu a:link, #menu a:visited
{
   font-size: .9em;
   line-height: 14px;
   font-weight: bold;
   margin: 2px 0 0 40px;
   padding-bottom: 2px;
   text-decoration: none;
   border: none;
   color: #fff;
}

#menu a:hover
{
   border-bottom: 4px solid #900;
   padding-bottom: 2px;
}

#main-bottom
{
   height: 26px;
   background: url("images/shadow-bottom.gif") top left repeat-x;
}

#main-bottom div
{
   height: 26px;
   background: url("images/shadow-bl.gif") top left no-repeat;
}

#main-bottom div div
{
   height: 26px;
   background: url("images/shadow-br.gif") top right no-repeat;
}

/* Comics
----------------------------------------------- */
#comic-container
{
   margin: 0 auto;
}

.comic-date-header
{
   margin: 0 auto;
   font-size:85%;
   text-transform:uppercase;
   letter-spacing:.2em;
   color:#357;
}

#comic-header
{
   height: 30px;
}

#comic-header #rating
{
   display: block;
   float: left;
   font-weight: bold;
}

#comic-header #rating img
{
   vertical-align: top;
   margin-top: 5px;
}

#comic-header #rating b
{
   font-size: 120%;
}

#comic-header #rate
{
   display: inline;
   float: right;
}

#comic-header #rate ul, #comic-header #rate li
{
   margin: 0;
   padding: 0;
   display: inline;
}

#comic-header #rate li
{
   list-style-type: none;
}

#comic-header #rate img
{
   margin: 0;
   padding: 0;
   display: block;
   float: left;
}

#comic-header #rate #text
{
   margin: 4px 4px 0;
}

.comicnav
{
   background-color: #CCCCCC;
   border-top: 1px solid #666;
   border-bottom: 1px solid #666;
   margin: 5px;
   padding:5px;
}

.comicnav form
{
   display: inline;
}

.comicnav select
{
   margin: 0 0 25px 0;
   
}

.comicnav img
{
   margin: 5px 5px 0 5px;
   border: 0;
}

#comments_container
{   
   text-align: left;
   margin: 0;
   padding: 0;
   padding-left: 8px;
   padding-right: 8px;
   width: 100%;
}

#comments_container h1
{
   font-weight: bold;
}

#comments_container h1 span
{
   float: right;
}

#comments_container .sub-title
{   
   clear: left;
   font-size: 110%;
   margin: 5px;
}

#comments_container .cpost-header, #comments_container p
{   
   clear: left;
   font-size: 90%;
}

#comments_container .cpost-header
{
   border: 2px solid #333;
   background: #CCC;
   padding: 5px;
   margin: 0;
}

#comments_container p
{
   padding: 5px;
   margin: 0;
}

#comments_container p img
{
   float: left;
   margin: 0 5px 5px 0;
}

#comments_container p b
{
   font-size: 1.15em;
   display: block;
   margin: 0;
   padding: 0;
}

.post-me
{
   clear: left;
   margin: 0;
   padding-top: 15px;
   font-size: 1.4em;
   text-align: center;
}

/* News Page
----------------------------------------------- */
#latest-comic
{
   font-size: 1.5em;
   margin: 0 auto 25px;
   width: 400px;
   background: #abc;
   padding: 10px;
   border-top: 2px solid #EAEEF2;
   border-left: 2px solid #EAEEF2;
   border-right: 2px solid #2B2F33;
   border-bottom: 2px solid #2B2F33;
}

#latest-comic a
{
   font-size: .9em;
   padding: 2px;
}

#latest-comic h1
{
   font-size: .8em;
   margin: 0;
   padding: 0;
}

/* Posts
----------------------------------------------- */

.date-header
{
   margin: 5px 10px 0;
   float: right;
   font-size:85%;
   line-height:2em;
   text-transform:uppercase;
   letter-spacing:.2em;
   color:#357;
}

.post
{
   margin:10px;
   padding:0;
   border:1px dotted #999;
   border-width:1px 0;
   text-align: left;
}

.post-title
{
   margin:0;
   font-size:135%;
   line-height:1.5em;
   background: #ABC url("images/icon-arrow.gif") no-repeat 10px 50%;
   display:block;
   border:1px dotted #999;
   border-width:0 1px 1px;
   padding:2px 14px 2px 29px;
   color:#333;
}

a.title-link, .post-title strong
{
   text-decoration:none;
   display:block;
}

a.title-link:hover
{
   background-color:#ded;
   color:#000;
}

.post-body
{
   border:1px dotted #999;
   border-width:0 1px 1px;
   border-bottom-color:#fff;
   padding:10px 14px 1px 29px;
}
 
html>body .post-body
{
   border-bottom-width:0;
}
 
.post p
{
   margin:0 0 .75em;
}

p.post-footer
{
   background:#fff;
   margin:0;
   padding:2px 14px 2px 29px;
   border:1px dotted #999;
   border-width:1px;
   border-bottom:1px dotted #eee;
   font-size:100%;
   line-height:1.5em;
   color:#666;
   text-align:right;
}

html>body p.post-footer
{
   border-bottom-color:transparent;
}

p.post-footer em
{
   display:block;
   float:left;
   text-align:left;
   font-style:normal;
}

a.comment-link
{
   /* IE5.0/Win doesn't apply padding to inline elements,
    so we hide these two declarations from it */
   background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
   padding-left:14px;
}

html>body a.comment-link
{
   /* Respecified, for IE5/Mac's benefit */
   background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
   padding-left:14px;
}

.post img
{
   margin:0 0 5px 0;
   padding:4px;
   border:1px solid #ccc;
}

blockquote
{
   margin:.75em 0;
   border:1px dotted #999;
   border-width:1px 0;
   padding:5px 15px;
   color:#666;
}

.post blockquote p
{
   margin:.5em 0;
}

/* Archive
----------------------------------------------------- */

ul.months
{
   margin: 10px;
   padding: 0;
}

.months li
{
   margin: 0;
   padding: 0;
   text-align: left;
   list-style-type: none;
   border: 1px solid #ccc;
}

.months a:link, .months a:visited
{
   display: block;
   padding: 2px;
   padding-left: 5px;
   margin: 2px;
}

.months a:hover
{
   
}

.months li.post-item, .months li.post-item-selected
{
   margin: 5px;
   padding-left: 20px;
   background: url("http://www.smackjeeves.com/images/icon-arrow-sm.gif") no-repeat 8px 50%;
}

.months li.post-item-selected
{
   background: #999 url("http://www.smackjeeves.com/images/icon-arrow-sm.gif") no-repeat 8px 50%;
   border: 1px solid #000;
}

   </style>
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 5 guests