Recent Topics

1 Sep 18, 2005 17:02    

So, after my upgrade to the latest version my CSS changed a wee bit. I couldn't manage to change the size and font style of the post titles.

Another thing is that I would like a bigger space between the post titles and the post itself.

here is my CSS file:


/* Designed by François PLANQUE - http://fplanque.net/ */

@import url(../../rsc/basic.css);	/* Import basic styles */
@import url(../../rsc/img.css);	/* Import standard image styles */
@import url(../../rsc/blog_elements.css);	/* Import standard blog elements styles */
@import url(../../rsc/forms.css);	/* Import default form styles */
@import url(../../rsc/comments.css);	/* Import default comment styles */

body {
	background: url('img/bg1.jpg');
	padding: 0px;
	color: #000000;
	font-style:normal; font-variant:normal; font-weight:normal; font-size:70%; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:justify;  
}

a {
	color: #6597D9; text-decoration:none
}
a:visited {
	color: #FF6600;
}
a:hover {
	color: #6597D9; text-decoration:underline
}

h2 {
	color: #5182C2;
	font-size: 180%;
	margin: 0;
}
.h3, h3 {
	color: #5182C2;
	font-size: 15pt; font-weight:bold; font-family:"serif"
        font-variant: small-caps;
        text-transform: capitalize;
        
}
h4 {
	color: #5182C2;
	font-size: 110%;
}

h5 {
	color: #5182C2;
	font-size: 140%; font-weight:bold; font-family:"Trebuchet MS"
}

table.invisible
{
	margin: 1ex;
	border-collapse: collapse
}
table.invisible td
{
	padding: 0ex 1ex;
}
td.right
{
	text-align: right;
}
div#pageFooter {
	clear: both;
	background-color: #fff;
	width: 738px;
	margin: 0 auto;
	padding: 0 0 1ex 0;
}
p.baseline {
	border-top: 1px solid #ddd;
	text-align: center;
	font-size: 74%;
	color: #999;
	padding: 1ex;
	margin: 0;
}
hr {
	border-left:0px none; border-right:0px none; border-bottom:0px none; height: 0;
	border-top: 1px solid #78a
}

div#wrapper {
	background: #fff url('img/bg_content.gif') repeat-y 0 0;
	width: 740px;
	margin: 0 auto;
	padding: 0
}

div.pageHeader {
	padding: 1ex;
	margin: 0 1px 1ex 1px;
	border-bottom: 0px solid #ddd;
	text-align: center;
	background: #5182C2;
}

h1#pageTitle {
	color: #fff;
	font-size: 270%;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

ul#bloglist {
	background-color: #fff;
	border-bottom: 1px solid #000;
	margin: 0 1px;
	padding: 0;
	list-style-type:none;
	padding: .5ex 0;
}
ul#bloglist li {
	border-right: 1px solid #000;
	display: inline;
	padding: .5ex 1em;
}

a.BlogButton,
a.BlogButtonCurr {
	font-weight: bold;
	text-decoration: none;
}
a.BlogButton {
	color: #000;
}

a:hover.BlogButton {
	text-decoration: underline;
	color: #9ae;
}
a.BlogButtonCurr, a:visited.BlogButtonCurr {
	color: #78a;
}
a:hover.BlogButtonCurr {
	text-decoration: underline;
	color: #9ae;
}


.pageSubTitle {
	color: #fff;
	letter-spacing: 4px;
	text-align: center;
	vertical-align: middle;
	border: 0px;
	padding-right: 6px;
	padding-top: 6px;
	padding-bottom: 4px;
	padding-left: 6px;
	font: 109% Arial, Helvetica, sans-serif;

}
div.stats{
	float: right;
	padding-right: 1px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 0px;
}

/* Styles for main area (left) */
h2 {
	margin: 1ex;
	border-bottom: 1px solid #78a;
}

/* Styles for posts */
.bPosts {
	float: left;
	width: 480px;
	overflow: hidden;
	/* background: #090;*/
}
.bPost, .bPostpublished
{
	clear: both;
	margin: 0 2.5ex;
	padding: 0;
	border-bottom: 1px solid #ddd; line-height:150%
}
.bSmallHead {
	font-size: 80%;
	color: #999;
	margin: 2ex 0 1ex 0;
}
.bTitle {
	color: #5182C2;
	margin: 1ex 0;
	font-size: 15pt; font-weight:bold; font-family:"serif"
        font-variant: small-caps;
        text-transform: capitalize;
}
.bText {
	margin-top: 0px;
	margin-bottom: 0px;
}
.bSmallPrint
{
	clear: both;
	color: #999;
	font-size: 80%;
	margin: 1ex 0 2ex 0;
}

input.bComment, 
textarea.bComment
{
	background-color: #eee;
	border: 1px solid #ccc;
	width: 97%;
	padding: 2px;
	margin: 0ex;
}
select.bComment
{
	background-color: #eee;
	border: 1px solid #ccc;
	padding: 1px;
	margin: 0ex;
}


/* Styles for stats */
div.statbloc
{
	float: left;
	width: 44%;
	margin: 0 0 2ex 1.5ex; 
	border: 1px solid #78a;
}
div.statbloc h3
{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	color: #FFFFFF;
	text-align: center;
	background: #78a;
	padding: 1ex;
}

input.submit,
input.reset {
	background-color: #ddd;
	color: #78a;
	border: 1px solid #000;
	font-weight: bold;
	padding: 1px;
}

input:hover.submit {
	color: #000;
	text-decoration: underline;
}

/* Styles for sidebar (right) */
.bSideBar {
	width: 259px;	
	float: right;
	overflow: hidden;
	/* background: #900; */
}
.bSideItem {
	margin: 2ex;
	padding: 0 0 2ex 0;
	border-bottom: 1px solid #ddd;line-height:150%
}
.bSideItem2 {
	margin: 4ex;
	padding: 0 0 2ex 0;
	border-bottom: 1px solid #ddd;
}


.bSideItem ul {
	margin-left: 8px;
	padding-left: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
	list-style-type:square;
}
.bSideItem ul ul{
	margin-left: 8px;
	padding-left: 8px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.bSideItem form {
	margin-top: 0px;
	margin-bottom: 0px;
}
.dimmed

{
	color: #aaa;
	font-size: 84%;
}
input.SearchField
{
	background-color: #eee;
	border: 1px solid #ccc;
	padding: .5ex;
	width: 96%;
	margin: 0ex;
}

/* Calendar: */
caption.bCalendarCaption {
	border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color: #eee;
	border-bottom: 0px none;
}
table.bCalendarTable {
	border: solid 1px #ccc;
	border-collapse: separate; 
}
table.bCalendarTable tfoot td {
	background-color: #eee;
	border-top: 1px solid #ccc;
}
table.bCalendarTable tfoot a {
	text-decoration: none;
}
table.bCalendarTable tfoot a:hover {
	background-color: #78a;
	color: #fff;
}
th.bCalendarHeaderCell {
	color: #abc;
}
#bCalendarToday {
	background-color: #bce;
}

you can see that I put this line where I thought it would work, but it didn't.


font-size: 15pt; font-weight:bold; font-family:"serif"
        font-variant: small-caps;
        text-transform: capitalize;

2 Sep 19, 2005 17:29

change

.h3, h3 {


to

.h3, h3.bTitle {

3 Sep 20, 2005 04:04

it didn't work. At least not on firefox. :(

4 Sep 20, 2005 04:25

The bigger space between the title and the post can be achieved by adding "padding-bottom: 20px;" or "margin-bottom: 20px;" to your h3.bTitle class. The 20px can be changed to whatever you like, and padding or margin depending on what looks best in both firefox and ie.

Your font problem is simple, you forgot the trailing ";" on your font-family:"serif" line. :)

Don't you hate when that happens?
By the way, current css wisdom says not to specify a specific font-size on your site because some people like to adjust their fonts larger or smaller and that doesn't work so well if the css is locking it in at a particular size. You could try font-size: larger; or whatever (you can look up the options) until you hit something close to what you want.

Hope that helps!

5 Sep 20, 2005 04:44

Sorry, I need to read posts more carefully. I thought your original problem was that you couldn't get text-transform:capitalize to work.

6 Sep 20, 2005 16:46

well, aparently I changed it like you told. Here it is:


/* Designed by François PLANQUE - http://fplanque.net/ */

@import url(../../rsc/basic.css);	/* Import basic styles */
@import url(../../rsc/img.css);	/* Import standard image styles */
@import url(../../rsc/blog_elements.css);	/* Import standard blog elements styles */
@import url(../../rsc/forms.css);	/* Import default form styles */
@import url(../../rsc/comments.css);	/* Import default comment styles */

body {
	background: url('img/bg1.jpg');
	padding: 0px;
	color: #000000;
	font-style:normal; font-variant:normal; font-weight:normal; font-size:70%; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:justify;  
}

a {
	color: #6597D9; text-decoration:none
}
a:visited {
	color: #FF6600;
}
a:hover {
	color: #6597D9; text-decoration:underline
}

h2 {
	color: #5182C2;
	font-size: 180%;
	margin: 0;
}
.h3, h3.bTitle {
	color: #5182C2;
	font-size: 15pt; font-weight:bold; font-family:"serif;"
        font-variant: small-caps;
        text-transform: capitalize;
        padding-bottom: 12px;
        
}
h4 {

	color: #5182C2;
	font-size: 110%;
}

h5 {
	color: #5182C2;
	font-size: 140%; font-weight:bold; font-family:"Trebuchet MS"
}

table.invisible
{
	margin: 1ex;
	border-collapse: collapse
}
table.invisible td
{
	padding: 0ex 1ex;
}
td.right
{
	text-align: right;
}
div#pageFooter {
	clear: both;
	background-color: #fff;
	width: 738px;
	margin: 0 auto;
	padding: 0 0 1ex 0;
}
p.baseline {
	border-top: 1px solid #ddd;
	text-align: center;
	font-size: 74%;
	color: #999;
	padding: 1ex;
	margin: 0;
}
hr {
	border-left:0px none; border-right:0px none; border-bottom:0px none; height: 0;
	border-top: 1px solid #78a
}

div#wrapper {
	background: #fff url('img/bg_content.gif') repeat-y 0 0;
	width: 740px;
	margin: 0 auto;
	padding: 0
}

div.pageHeader {
	padding: 1ex;
	margin: 0 1px 1ex 1px;
	border-bottom: 0px solid #ddd;
	text-align: center;
	background: #5182C2;
}

h1#pageTitle {
	color: #fff;
	font-size: 270%;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

ul#bloglist {
	background-color: #fff;
	border-bottom: 1px solid #000;
	margin: 0 1px;
	padding: 0;
	list-style-type:none;
	padding: .5ex 0;
}
ul#bloglist li {
	border-right: 1px solid #000;
	display: inline;
	padding: .5ex 1em;
}

a.BlogButton,
a.BlogButtonCurr {
	font-weight: bold;
	text-decoration: none;
}
a.BlogButton {
	color: #000;
}
a:hover.BlogButton {
	text-decoration: underline;
	color: #9ae;
}
a.BlogButtonCurr, a:visited.BlogButtonCurr {
	color: #78a;
}
a:hover.BlogButtonCurr {
	text-decoration: underline;
	color: #9ae;
}


.pageSubTitle {
	color: #fff;
	letter-spacing: 4px;
	text-align: center;
	vertical-align: middle;
	border: 0px;
	padding-right: 6px;
	padding-top: 6px;
	padding-bottom: 4px;
	padding-left: 6px;
	font: 109% Arial, Helvetica, sans-serif;

}
div.stats{
	float: right;
	padding-right: 1px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 0px;
}

/* Styles for main area (left) */
h2 {
	margin: 1ex;
	border-bottom: 1px solid #78a;
}

/* Styles for posts */
.bPosts {
	float: left;
	width: 480px;
	overflow: hidden;
	/* background: #090;*/
}
.bPost, .bPostpublished
{
	clear: both;
	margin: 0 2.5ex;
	padding: 0;
	border-bottom: 1px solid #ddd; line-height:150%
}
.bSmallHead {
	font-size: 80%;
	color: #999;
	margin: 2ex 0 1ex 0;
}
.bTitle {
	color: #5182C2;
	margin: 1ex 0;
	font-size: 15pt; font-weight:bold; font-family:"serif"
        font-variant: small-caps;
        text-transform: capitalize;
}
.bText {
	margin-top: 0px;
	margin-bottom: 0px;
}
.bSmallPrint
{
	clear: both;
	color: #999;
	font-size: 80%;
	margin: 1ex 0 2ex 0;
}

input.bComment, 
textarea.bComment
{
	background-color: #eee;
	border: 1px solid #ccc;
	width: 97%;
	padding: 2px;
	margin: 0ex;
}
select.bComment
{
	background-color: #eee;
	border: 1px solid #ccc;
	padding: 1px;
	margin: 0ex;
}


/* Styles for stats */
div.statbloc
{
	float: left;
	width: 44%;
	margin: 0 0 2ex 1.5ex; 
	border: 1px solid #78a;
}
div.statbloc h3
{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	color: #FFFFFF;
	text-align: center;
	background: #78a;
	padding: 1ex;
}

input.submit,
input.reset {
	background-color: #ddd;
	color: #78a;
	border: 1px solid #000;
	font-weight: bold;
	padding: 1px;
}

input:hover.submit {
	color: #000;
	text-decoration: underline;
}

/* Styles for sidebar (right) */
.bSideBar {
	width: 259px;	
	float: right;
	overflow: hidden;
	/* background: #900; */
}
.bSideItem {
	margin: 2ex;
	padding: 0 0 2ex 0;
	border-bottom: 1px solid #ddd;line-height:150%
}
.bSideItem2 {
	margin: 4ex;
	padding: 0 0 2ex 0;
	border-bottom: 1px solid #ddd;
}


.bSideItem ul {
	margin-left: 8px;
	padding-left: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
	list-style-type:square;
}
.bSideItem ul ul{
	margin-left: 8px;
	padding-left: 8px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.bSideItem form {
	margin-top: 0px;
	margin-bottom: 0px;
}
.dimmed

{
	color: #aaa;
	font-size: 84%;
}
input.SearchField
{
	background-color: #eee;
	border: 1px solid #ccc;
	padding: .5ex;
	width: 96%;
	margin: 0ex;
}

/* Calendar: */
caption.bCalendarCaption {
	border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color: #eee;
	border-bottom: 0px none;
}
table.bCalendarTable {
	border: solid 1px #ccc;
	border-collapse: separate; 
}
table.bCalendarTable tfoot td {
	background-color: #eee;
	border-top: 1px solid #ccc;
}
table.bCalendarTable tfoot a {
	text-decoration: none;
}
table.bCalendarTable tfoot a:hover {
	background-color: #78a;
	color: #fff;
}
th.bCalendarHeaderCell {
	color: #abc;
}
#bCalendarToday {
	background-color: #bce;
}

but, still nothing happens on Firefox. Only works on IE. And the capitalize function does not work in neither of them.

7 Sep 20, 2005 17:25

Your capitalize is working fine, unless you wanted it to be uppercase. capitalize only does the first letter, uppercase does all letters. I think your h3.bTitle is being ignored because bTitle comes later in the file. I'm not sure about that though: the rules for css are sort of simple but sort of complex too.

Your style sheet has some errors in it, but it works as one would hope in Firefox when I applied it to the stock custom skin and included your background image. Therefore this file is not the culprit. Something you've done elsewhere is why you are getting the general background image throughout the entire page. You can start troubleshooting the problem by creating a new blog with no posts in it, then visit that blog, then test it with the [url=http://validator.w3.org/]html validator[/url]. After you identify and correct the few remaining errors you can use the [url=http://jigsaw.w3.org/css-validator/]css validator[/url] to help you debug. Another thing you can consider is to start with the custom skin again and re-build your modifications a little bit at a time. Take a look each step of the way, and when the problem shows up you'll know what caused it.

8 Sep 20, 2005 18:55

the background is fine. It's white as it was suposed to be in IE and Firefox.

And yes, I would like the uppercase thing. How do I do it? Just change captalize to uppercase? How do I keep the first letter bigger than the other letters - with all of the others uppercased?

9 Sep 20, 2005 19:53

Nando wrote:

the background is fine. It's white as it was suposed to be in IE and Firefox.

Oh. I am still seeing the all-blue background, even after forcing the page to reload the css. Dunno how that happened...

Nando wrote:

And yes, I would like the uppercase thing. How do I do it? Just change captalize to uppercase? How do I keep the first letter bigger than the other letters - with all of the others uppercased?

Correct on the first part: using uppercase in place of capitalize will work. The second part I don't know how you'd do that. I *think* there is css that will apply, but I don't know for sure. If it was me I'd probably try to whip up a script that takes the first character and applies a little span to it so it was just a bit bigger, but I'm only shooting from the hip here - don't actually have any code to do it with. Are you a frequent visitor at http://www.w3.org/TR/REC-CSS2/propidx.html ? When I was doing a lot of stuff with skins I made it my home page so I could get there quickly.

10 Sep 20, 2005 21:58

BTW, just speaking for myself, it's not necessary to post your css file in the message. It's easier for me to just visit your site and pull up your css file there while I'm looking at your layout. But I'm not sure how others might use or not use that info here.

11 Sep 21, 2005 03:54

the uppercase thing worked, thank you! But I do believe it's possible to put the first letter big than the other ones. She managed to do it: http://www.xikita.com/blog/

Any idea how?

12 Sep 21, 2005 04:18

Looking at her css I see:

font-variant: small-caps;
text-transform: capitalize;

Perhaps that is what you're after.

13 Sep 21, 2005 04:29

Nate wrote:

Looking at her css I see:

font-variant: small-caps;
text-transform: capitalize;

Perhaps that is what you're after.

that's exactly how mine was. But it didn't work

14 Sep 21, 2005 04:38

You have an error in your css:

font-size: 15pt; font-weight:bold; font-family:"serif;"

The semi-colon should be outside the quotation marks like:

font-size: 15pt; font-weight:bold; font-family:"serif";

That was messing up the rest.

Problem solved? :lol:

15 Sep 21, 2005 13:08

oh yeeeeeeeesssssssssssssss!!! Thank you so much! :D


Form is loading...