Grace

sjeeps · September 2007

Grace

sjeeps · September 2007

screenshot:

Vanilla Grace

Krak · September 2007

I'm not too crazy about the default font but other than that I like it. Love the contrast and the way you moved some items around.

Wanderer · September 2007

Yup, me too, I hate Serif fonts on a web page unless they are large, very sparsely used and not Times. Also, any font reversed out of a dark color should be sans serif, otherwise the style looks "pretty" cool.

Posted: Monday, 3 September 2007 at 7:36AM

sjeeps · September 2007

Thanks guys, I've tested the theme with other fonts like arial, verdana, lucida grande and even trebuchet ms, etc. and it still looks fine

So feel free to change it to the font you like and just make sure you use percentage.

Stash · September 2007

I agree Wandere, serif fonts look great when used sparingly as titling fonts ;)

Wanderer · September 2007

<mark on your calendar>
[-Stash-] agrees with Wanderer

</mark on your calendar>

Len · November 2007

I'm new...please forgive. I really like the Grace theme/style! However, when looking at the list of all discussions, how can I get all the discussion details ("Started by", "Category", etc) to all appear in a single line as opposed to more than one line the way this one has it?

sjeeps · November 2007

You'll need to edit a few lines in the styles/default/vanilla.css file...

Change line 341-355:


#Discussions .Topics .DiscussionStarted, #Discussions .Topics .DiscussionCategory, #Discussions .Topics .DiscussionComments, #Discussions .Topics .DiscussionLastComment, #Discussions .Topics .DiscussionActive, #Discussions .Topics .DiscussionNew {
display: inline;
float: left;
font-size: 110%;
font-weight: 100;
line-height: 25px;
margin: 0;
}
#Discussions .Topics .DiscussionStarted, #Discussions .Topics .DiscussionCategory, #Discussions .Topics .DiscussionLastComment, #Discussions .Topics .DiscussionActive {
width: 41%;
}
#Discussions .Topics .DiscussionComments, #Discussions .Topics .DiscussionNew {
width: 18%;
text-align: right;
}

To:


#Discussions .Topics .DiscussionStarted, #Discussions .Topics .DiscussionCategory, #Discussions .Topics .DiscussionComments, #Discussions .Topics .DiscussionLastComment, #Discussions .Topics .DiscussionActive, #Discussions .Topics .DiscussionNew {
display: inline;
float: left;
font-size: 13px;
font-weight: 100;
line-height: 25px;
margin: 0 10px 0 0;
}
/*#Discussions .Topics .DiscussionStarted, #Discussions .Topics .DiscussionCategory, #Discussions .Topics .DiscussionLastComment, #Discussions .Topics .DiscussionActive {
width: 41%;
}
#Discussions .Topics .DiscussionComments, #Discussions .Topics .DiscussionNew {
width: 18%;
text-align: right;
}*/

Len · November 2007

Wow! Works perfect! Thanks! I'll invite you take a peek... http://mlhofsa.schendelsworld.com/forum/ Please keep in mind that this is a new forum (as we are a new group) and that the forum is not quite "open for business" yet. I just want to pretty it up first. THANKS AGAIN!

Wanderer · November 2007

Len, mate, there is no need for an apostrophe in FAQs.
It's neither possessive nor contracted, merely a plural.

sjeeps · November 2007

Nice job Len except the logo and the date look messed up in FireFox and if you don't want the h1 bullet, you should change this:


#Content h1 {
	font-size: 170%;
	font-weight: 100;
	margin: 0 25px 10px 0;
	padding: 3px 0 0 34px;
	float: left;
	text-align: left;
	background: transparent url('content-bullet.gif') no-repeat 0 0;
	line-height: 23px;
	white-space: nowrap;
	}

To:


#Content h1 {
	font-size: 170%;
	font-weight: 100;
	margin: 0 25px 10px 0;
	padding: 3px 0 0 0;
	float: left;
	text-align: left;
	/*background: transparent url('content-bullet.gif') no-repeat 0 0;*/
	line-height: 23px;
	white-space: nowrap;
	}

Good luck!

Len · November 2007

Eventually I want to put something there, but for now that really helps tidy up the page. In regards to the date...how would I put it on the left side of the screen? I've tried a few things but again...batting zero.

Len · November 2007

Never mind! I figured it out (I think)! Would you mind taking a look at it sjeeps?

sjeeps · November 2007

Right now the logo to the left is messing up the date, so change this:


/* Header & TOP NAVIGATION */
	#Header {
	margin: 0;
	padding: 0;
	width: 100%;
	background: #000 url('header-bg.gif') no-repeat right bottom;
	color: #FFF;
	float: left;
	border-bottom: 5px solid #FF2E31;
	}
	#Header a {
	color: #F1F1F1;
	text-decoration: none;
	}
	#Header a:hover {
	color: #FF2E31;
	}
	#Header #Title {
	float: left;
	width: 70%;
	margin: 3% 0 2% 3%;
	font-size: 175%;
	font-weight: 100;
	letter-spacing: -1px;
	display: block;
	}
	#Header #Date {
	float: center;
	text-align: left;
	padding: 0;
	margin: 0 0 0% 3%;
	width: 100%;
	}

To:


/* Header & TOP NAVIGATION */
	#Header {
	margin: 0;
	padding: 2% 0 0;
	width: 100%;
	background: #000 url('header-bg.gif') no-repeat right bottom;
	color: #FFF;
	float: left;
	border-bottom: 5px solid #FF2E31;
	}
	#Header a {
	color: #F1F1F1;
	text-decoration: none;
	}
	#Header a:hover {
	color: #FF2E31;
	}
	#Header #Title {
	float: left;
	width: 40%;
	margin: 3% 0 2% 3%;
	font-size: 175%;
	font-weight: 100;
	letter-spacing: -1px;
	display: block;
	}
	#Header #Date {
	float: right;
	text-align: right;
	padding: 0;
	margin: 0 221px 0 0;
	width: 25%;
	}

I'll have to update this theme soon for Vanilla 1.14...

Len · November 2007

Okay...how's it looking now?