Jump to content
TNG Community
Paul Wake

Template 5 Borders and CSS

Recommended Posts

Paul Wake

Back before v7 took TNG toward CSS, my template 5 site has a lot of hard coded HTML tweaks to slightly alter the format of the pages. The original template had colored bars of unequal widths, text too close to box edges, etc., and I fixed all that. In upgrading to the newer versions I've lost my formatting, and have been trying to tweak the CSS to get the same result, but am just bedeviled by this. In the Wake Family History web site, the index page had, for example, a thin greenish bar across the top, and another across the bottom. They weren't equal heights, so I went into mytngstyles.css and added a line fixing the .row height, and now they're equal. I can do that much. However, I can't do the rest of what I want. As I look at the page I see that there's a thin black border around the whole thing, and that's great. But within the page, some areas have a black border, and some don't. For example, the vertical brown bar has a black border on the right side, but not on the left. The top greenish horizontal bar has a border on most of its bottom, but not on the part that abuts the leaves. Not the end of the world, but it's become annoying because I can't figure out how to fix it, and it seems like I should be smart enough to find the proper parts of the CSS to change. If anyone understand this template's CSS well, I'd sure appreciate some pointers.

Share this post


Link to post
Share on other sites
tomk

Paul,

I use Firefox with the 'Firebug' add-on. With Firebug, you can hover over the various sections of your webpage, and see the CSS associated with each part, along with what is specified for border, and what file/line number the section is in.

At least this will get you to the appropriate place so that you can make changes and see the affect. Remember to have backup copies of the files before you make changes.

TomK

Share this post


Link to post
Share on other sites
Paul Wake

Paul,

I use Firefox with the 'Firebug' add-on. With Firebug, you can hover over the various sections of your webpage, and see the CSS associated with each part, along with what is specified for border, and what file/line number the section is in.

At least this will get you to the appropriate place so that you can make changes and see the affect. Remember to have backup copies of the files before you make changes.

TomK

I use the Web Developer toolbar for the same sort of thing. Still haven't figured out the borders, though.

Share this post


Link to post
Share on other sites
BobA

I use the Web Developer toolbar for the same sort of thing. Still haven't figured out the borders, though.

paul,

without seeing your .css file, I can only guess....My mytngstyle.css file (which is a mashup of several templates) has several borders defined as different styles. That way I can call each style as needed for each section of the screen where I want to draw a different border.. For example, I have a screen area style that is defined as .style33 the border is explicitly listed in the .css files as:

.style33 {

border: 2px solid #990000;

}

when .style33 is invoked in the template (a big box around the entire table that fills the screen), it is defined in the table definition to begin with (the area I want the box around). The effect is a drawn border around the entire region that is 2 pixels wide and is maroon color .

My table code starts with:

<table cellspacing="0" cellpadding="5" class="style33" style="width: 100%">

You can also add the border command directly into a defined style by listing it among the already defined attibutes and that will be called on each time the that whole style is used.

Hope this helps,

/BobA

Share this post


Link to post
Share on other sites
Mike Goodstadt

Paul,

The 'border' CSS property has three values: border-width, border-type, border-color. In the default templatestyle.css the class '.row' is set as:

border:1px none black;

border-collapse:collapse;

So if you change this one you need to give it a style of 'solid' etc. otherwise it won't be visible. Also temporarily remove border-collapse to see what borders really belong to each element ot the table (watch out as it reoccurs higher up in the CSS hierarchy on the 'maintable' class).

This template uses tables and has a whole series of styles for the various parts of the table - and then hides them with style=none and border-collapse on various levels of CSS! *Uggghh*.

This is not a clean layout nor, as you are finding here, is it easy to edit. You may have to change the classes 'imagesection', 'spacercol' and others. Tables are great for making data coherent but are not the correct way (ie. CSS positioning) to visually layout a page.

All the best,

Mike

PS: Personally I find Firefox + Firebug better organised, easier to test changes in situ and quick to check through the different style sheets in use.

Share this post


Link to post
Share on other sites
Paul Wake

Ah, got it:

.row { height: 12px; }
.row12 { border-top: 0; }
.content { border: 0; }
Having thought that put my site back to mostly back to v6 custom formatting (before the v7 changes to CSS), I just noticed my width never got tweaked back to 100%. Changing .maintable width does the job for all pages, except the index page's right side items get all skeewhompus. This never ends! EDIT: Figured out the above also
.maintable { width: 100%; }
.indexbox { margin-left : auto; }
(leaving the right margin defined by pixels) FURTHER EDIT: Needed to add
border-right: 1px solid black;

on the .row and .content lines.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×