Template to match my forum

[CCWBumper]

I'm handy at installing and configuring scripts, but terrible at altering templates. How does one go about getting or finding someone interested in customizing or building a template that would make my links match my forum style? Is this an intensive and expensive effort or fairly simple and inexpensive?

[redeye]

There are a few good people on the forum who are expert at customising templates, WTM has done some excellent ones, but is in need of sleep from overwork :D

[WTM]

Please post a link to your forum and give a brief description which exact features you want to see on your directory page

[CCWBumper]

Please post a link to your forum and give a brief description which exact features you want to see on your directory page

The link to the forum is here (http://www.combatcarry.com/vbulletin/).

It doesn't have to match the forum design exactly, but would probably be looking for the same color scheme and header graphic. The navigation bar content is not necessary unless it is easy to do. After posting this thread I DID try to modify the template and totally messed it up. If there is a "guide" to what the components in the template are I might be able to figure this out but I really am "template challenged" it appears.... :wink:

[WTM]

You don't need anything special - the bigest custom part is to insert your header image. I would suggest you download FireAndIce or BlueWater template and play with CSS colors. Ask questions as they come and we will try to point you in the right direction.
If you feel like it's over your head let me know and we will figure out something...

[Vincent Wright]

to CCWBumper

WTM is extremely good at customizing templates. :good: So I suggest that you pay attention to what he has to say about your site.

[CCWBumper]

Thanks, WTM. Do you think it would be harder to do GreenLeaves over FireAndIce or BlueWater? I really live the GreenLeaves layout, although the design colors don't "fit". I will try my hand at it, though. Thanks for the encouragement and help if I make a mess out of it.

[CCWBumper]

to CCWBumper

WTM is extremely good at customizing templates. :good: So I suggest that you pay attention to what he has to say about your site.

Thanks, Vincent. One thing I am good at (most of the time) is taking advice.... :)

[Vincent Wright]

All of us have to take this or that advice from time to time to get something done ;)

[WTM]

Thanks, WTM. Do you think it would be harder to do GreenLeaves over FireAndIce or BlueWater? I really live the GreenLeaves layout, although the design colors don't "fit". I will try my hand at it, though. Thanks for the encouragement and help if I make a mess out of it.

It's not that it's harder but GreanLeaves is not fixed width and it's much easier to achieve desired look with fixed width template.
Also your forum skin using all rectangle shapes and you could use some of the elements (like category headers background images) for your directory skin.

Do you have PSD file for your header image?
It is very odd size (864px). It should be cut to 780px or made stretchable...
Just an opinion...:ooi:

[Vincent Wright]

It is very odd size (864px). It should be cut to 780px or made stretchable...
Just an opinion...:ooi:

Absolutely right! Ignoring 800x600 resolution is a no-no imho.

[CCWBumper]

Thanks again, WTM. After toying with the style sheet for the past couple of hours I think I may be getting the hang of it. I found out pretty fast one of the reasons GreenLeaves is not a good choice; all of the graphics that would have to be worked over. As bad as I am with stylesheets, I am even worse at graphics production.

I agree that the header graphic size is going to be a problem. I don't have the PSD files, but could probably get them. One of my forum moderators built the graphic so I could probably her to tweak it a bit. Honestly, while I like the header graphic, I have never liked the way it looked in the design. It looks a little like someone just slapped it down on the page as an afterthought. I may just concentrate on getting the colors correct before even worrying about working the header graphic into the whole deal.

What I am having no success at is changing the background color (behind the categories) to be a different color than the main page background. I am using the FireAndIce template as a base to modify.

Thanks again for your comments, they're helping me make progress....:)

[WTM]

Bumper,
Please post a link to your directory so we can see what you are talking about.

[CCWBumper]

Ooops, sorry, I meant to add a link. You can find it here (http://www.combatcarry.com/links/).

What I was trying to do is change the background (in the box borders) surrounding "Categories", "Main Categories" and "Statistics" to the #E9E6CF color.

[WTM]

In your CSS file find this style:div.box
{
margin: 5px 5px 5px 5px;
border: 1px solid #A1A1A1;
}

it may look little different but you are looking for div.box

Add this line: background-color: #E9E6CF;
Your new style should look something like this:
div.box
{
margin: 5px 5px 5px 5px;
border: 1px solid #A1A1A1;
background-color: #E9E6CF;
}

[WTM]

Also try this:

find style for div.box-caption and replace this line: background-color: #E3E3E3;with this code:
background: #416083 url('/vbulletin/images/gradients/gradient_tcat.gif') repeat-y top left;
line-height: 29px;

[CCWBumper]

Wow! That got me lot closer with one line of code.

I copied the whole css file and pasted it into Notepad to make it easier to search for different elements within the file. Once I find it there, it's pretty easy to find it within the script theme editor. I use the color picker "Pixie" to identify colors but have been unable to determine the red color used for links. I don't want to keep asking dumb questions, but what section of the stylesheet controls the color of category links? I'm trying to take out the all of the red.

Again, I really appreciate your input on this. I'm getting happier as I get closer to the forum design....:wink:

[WTM]

div.categories a
{
color: #C60001;
font-weight: bold;
}

[CCWBumper]

Thanks, WTM, I'm thinking I may need to read a tutorial and learn some of the syntax. Colorwise, it now looks pretty close to the forum. Now I have to address the header graphic. I appreciate all of your help; I couldn't have done it without you.... :good:

[CCWBumper]

Also try this: <code snipped>

WOW! again. I'm not sure how I missed your second post, but when I changed the code you added to use the graphic off my forum it REALLY made it look good. Check it out... :D

[Vincent Wright]

The directory looks good now :good: except for the eSyndiCat logo :)

[WTM]

Here's the list of other changes you may try...

1. For box headers to make them exactly like ones in the forum:

- find this style:
div.box-caption
{
background: #416083 url('/vbulletin/images/gradients/gradient_tcat.gif') repeat-y top left;
line-height: 29px;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
padding: 3px 0 3px 10px;
border-bottom: 1px solid #0B198C;
}
Replace this line:
font-size: 14px;
with this two lines:
font-size: 10pt;
font-family: verdana, geneva, lucida, 'lucida grande', arial, sans-serif;

Also try to change line-height to 28px or 27px... - just play with it to get desired size.

2. For links to appear like they are in the forum:

Find this CSS section:
div.categories a
{
color: #000000;
font-weight: bold;
}
Replace with this code:
div.categories a, div.categories a:visited,
{
color: #333333;
font-weight: bold;
}
div.categories a:active, div.categories a:hover,
{
color: #FF4400;
font-weight: bold;
}
To apply same styles to main categories in the left column:

Find CSS section:
p.top-category a
{
color: #C60001;
font-weight: bold;
}
and replace it with this code:
p.top-category a, p.top-category a:visited,
{
color: #333333;
font-weight: bold;
}
p.top-category a:active, p.top-category a:hover,
{
color: #FF4400;
font-weight: bold;
}

3. To make nice inside border for the boxes like you have in the forum

Find this style:
div.box
{
margin: 5px 5px 5px 5px;
border: 1px solid #0B198C;
background-color: #E9E6CF;
}
Change it to:
div.box
{
margin: 5px 5px 5px 5px;
padding: 1px;
border: 1px solid #0B198C;
background-color: #E9E6CF;
}

4. I would suggest to remove white lines (borders) in the right section. To get it done:

Find this style:
div.content
{
border: 1px solid #FFF;
border-bottom: none;
padding-bottom: 1px;
}
and remove everything between brackets like this:
div.content
{

}
Do this for now and try to find PSD file for your header graphics.
I'll post some more tips later.

[Michele]

I know I'm a little late in this conversation, but I have 2 general suggestions.

When I was trying to figure out what template did what and what element a particular group of code was impacting I put some junky text "Where does this show up?" kind of thing. It isn't foolproof, but it does help to figure out what is putting what thing on the page. And I surrounded the test code by a bunch of empty lines so I could find it again.

The other thing I learned the hard way. If your CSS file starts getting big from customizations - the admin control panel doesn't always load all of it. I wanted to make a change that was near the beginning of the file. Only about 2/3 of the file loaded. I made the change and saved. The entire site was a trainwreck. Thank goodness I have saved a copy on my hard drive.