View Full Version : My "romper room" skin.


Jack_
13th May 2007, 12:50 AM
I have no idea where to post this, because this has to do with a whole style, and have a lot of questions regarding the styling of this. This is an experiment, and I have no idea if it is going anywhere.

With that said, the idea is here:

http://generalchat.org

Now, there are several problems.

1. To make the tables look curved, I have to open every template and edit each one. There has to be an easier way...

2. The color scheme is not the best in the world, and I am wondering what is missing.

3. What are some other ways to make a table look curved? this is the technique I am using:

<div>
<b class="gc_breadcrumbs">
<b class="gc_breadcrumbs1"><b></b></b>
<b class="gc_breadcrumbs2"><b></b></b>
<b class="gc_breadcrumbs3"></b>
<b class="gc_breadcrumbs4"></b>
<b class="gc_breadcrumbs"></b>
</b>
<div class="gc_breadcrumbs_content">

Insert the template crap here

</div>
<b class="gc_breadcrumbs">
<b class="gc_breadcrumbs5"></b>
<b class="gc_breadcrumbs4"></b>

<b class="gc_breadcrumbs3"></b>
<b class="gc_breadcrumbs2"><b></b></b>
<b class="gc_breadcrumbs1"><b></b></b>
</b>
</div>Then the CSS

.gc_breadcrumbs
{
display:block;
}

.gc_breadcrumbs *
{
display:block;
height:1px;
overflow:hidden;
background:#D1DFF5;
}

.gc_breadcrumbs1
{
border-right:1px solid #D1DFF5;
padding-right:1px;
margin-right:3px;
border-left:1px solid #D1DFF5;
padding-left:1px;
margin-left:3px;
background:#D1DFF5;
}

.gc_breadcrumbs2
{
border-right:1px solid #D1DFF5;
border-left:1px solid #D1DFF5;
background:#D1DFF5;
margin:0 1px;
padding:0 1px;
}

.gc_breadcrumbs3
{
border-right:1px solid #D1DFF5;
border-left:1px solid #D1DFF5;
margin:0 1px;
}

.gc_breadcrumbs4
{
border-right:1px solid #D1DFF5;
border-left:1px solid #D1DFF5;
}

.gc_breadcrumbs5
{
border-right:1px solid #D1DFF5;
border-left:1px solid #D1DFF5;
}

.gc_breadcrumbs_content
{
background:#D1DFF5;
padding:0 5px;
}
*end breadcrumbs*/So the colors can be changed pretty easily. However, this method seems a bit messy to me, and there has to be a better way. Anybody willing to help?

Thanks.

darnoldy
13th May 2007, 11:47 PM
Jack-

Round-cornered boxes are a pain in the a—oh, you noticed!

I dislike having everything all boxed up, in general, and IMNSHO round-cornered boxes are not worth the effort.

A couple of responses to the "color scheme...what is missing" question: you are missing any warm colors—you need a yellow, orange, or red tone to add some energy. You are missing dark and saturated colors—your blue and green are both light-to-medium in value. I try to work with a 9-color pallet (I know that sounds like a lots) chosen by the following method:


make a 3 x 3 grid--like a tic-tac-toe box
across the top, label the columns" "warm," "neutral," and "cool"
down the left side, label the rows: "light," "medium," and "dark"
choose a color for each box according to its row and columnGenerally, Black is the dark neutral, but it doesn't have to be. You could use chocolate brown or a charcoal grey or even a navy blue.

Generally, white is the light neutral, but you could choose a buff, ivory, or light grey

Once you decide on nine colors that you think work well together, then you can decide which parts of your site will use which color.

Jack_
14th May 2007, 12:37 AM
Jack-

Round-cornered boxes are a pain in the a—oh, you noticed!

I dislike having everything all boxed up, in general, and IMNSHO round-cornered boxes are not worth the effort.

A couple of responses to the "color scheme...what is missing" question: you are missing any warm colors—you need a yellow, orange, or red tone to add some energy. You are missing dark and saturated colors—your blue and green are both light-to-medium in value. I try to work with a 9-color pallet (I know that sounds like a lots) chosen by the following method:

make a 3 x 3 grid--like a tic-tac-toe box
across the top, label the columns" "warm," "neutral," and "cool"
down the left side, label the rows: "light," "medium," and "dark"
choose a color for each box according to its row and columnGenerally, Black is the dark neutral, but it doesn't have to be. You could use chocolate brown or a charcoal grey or even a navy blue.

Generally, white is the light neutral, but you could choose a buff, ivory, or light grey

Once you decide on nine colors that you think work well together, then you can decide which parts of your site will use which color.

I upgraded, reverted the templates, and woah! What a mess. I may dump the idea altogether. This is not worth the hassle.

Edder
24th May 2007, 11:04 PM
To answer your first question, you could always try using vBulletin's search and replace function to speed things up a bit.

Also, I'm not sure why you are using <b> tags to create round corners. First, it's not valid XHTML and second, it might be easier to place 4 <div> tags, one for each corner, instead.