Movable Type Community Forum > Dotted line and spacing alignment

Full Version: Dotted line and spacing alignment

Movable Type Community Forum > Using Movable Type > Templates and Tags

joekelley

Jul 1 2003, 01:35 PM

I'm attempting to step outside the MT template with some pizazz at http://www.thesakeofargument.com/ but am meeting some troubles.

How do I make the dotted line go away and how do I better align and center the MT body?

Thanks a million!

Joe Kelley

gvtexas

Jul 1 2003, 01:44 PM

QUOTE (joekelley @ Jul 1 2003, 04:35 PM)

How do I make the dotted line go away and how do I better align and center the MT body?

Edit your stylesheet and remove these lines from .blogbody:

CODE

border-left:1px dotted #666;
border-right:1px dotted #666;
border-bottom:1px dotted #666;

Change this .blogbody line:

CODE

padding:10px;
- change to -
padding-top:10px;

Then remove this line from .date:

CODE

border-bottom:1px dotted #666;

For widening/centering the blogbody, edit #content:

CODE

width:65%;
margin-right:15px;

- play with those two settings until it looks like you want, but probably the width is all you need to do -

Cheers,
Gary

joekelley

Jul 1 2003, 01:58 PM

Gary, you're a god to me. Thank you very much.

Joe

gvtexas

Jul 1 2003, 03:23 PM

You're welcome! Lookin' good on the site...but you have a problem with your style codes for the hyperlinks...with the blue background the two shades of white work fine, but in the blogbody they aren't visible! I'm writing a tip on this for my new tips blog (which alas is not ready yet), but in essence you add a second set of link styles:

CODE

your existing link styles:

A { color: #336666; text-decoration: none;}
A:link { color: #FFFFFF; text-decoration: none; }
A:visited { color: #FFFFFF; text-decoration: none; }
A:active { color: #FFFFFF; }
A:hover { color: #999999; }

add this section (and change to suit):

div.bodylink { background-color:transparent; color:black; font-size:12px }
.bodylink a:link { color:red; text-decoration:none }
.bodylink a:visited { color:maroon; text-decoration:none }
.bodyink a:hover { color:red; text-decoration:underline }

...then change the specs to suit your needs (color, bold, etc.). Then place this pair of tags around the code you want to inherit the alternate link styles (such as your id="content" section):

CODE

This is one way to do this (there are others), but it's a start. If you're unsure about what each of the link states are for (active, hover, visited, etc.) just visit any of the css help sites out there, such as this site.

Or, you could just alter your link styles so that they work with both backgrounds.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.