Defacto theme style.css

[Don Chambers]

I'm very new to s9y. I have been reviewing all these great themes many of you have created......

I have noticed that there are dozens of different style.css sheets.... I understand why they differ from one another, but is any one of them the defacto standard, containing all variables, and ideally, having all those in a standard order? It is very difficult to compare one to another since many use, or omit, certain expressions, and others have those in very different order from one another.

[Don Chambers]

I suppose I will start with the default. But allow me, a total noob, to offer the following observations:

Why, on earth, must there be a seemingly random order to the various styles within the style sheets? Can this be standardized? It is VERY difficult for a newbie like me to compare one sheet to another when these styles are in completely different order. Some are the first, second, etc, while the same style in a different theme might be on the second or 3rd PAGE.

The online tech documentation addresses some of the styles and variables, but nowhere near all of them. Seems like a minor undertaking for someone who really knows this stuff to get that up to date. And, before anyone mentions it, I will be more than happy to help where I can once I have a better understanding of this stuff.

How about a default template that has every single variable in use, with every single option included, even if many of those are commented out as not applicable.


I thought I could get well into my own theme design tonight, but I am tripping all over this stuff. I'm sure those of you who are experts in this stuff see right past the inefficiencies, but for someone brand new, this is frustrating.

[d_cee]

Hi Owen

Carl Galloway has a fully commented stylesheet available to download from his website that might help you.

Here's a link to the entry Carl's sylesheet

hope that helps

Dave Cummins

[Don Chambers]

I found the commented style sheet in the wiki last night, and it helped. Carl's blog explained one further aspect though - that being, there apear to be dozens of undocmuented styles. Would be great to get a single style sheet with every single style listed and defined even if rarely used ones were commented out.

[garvinhicking]

I recommend going the opposite way: Inspect the HTML structure, and then you'll spot the CSS elements you want to style.

Usually, if you want to paint a car, you go around the car and look at the parts you want to paint. Not the other way round: Have an disassembled car and see all available parts.

I recommend tools like EditCSS, Aardvark, Xyloscope, DOM Inspector MODIv2 and the Firefox Browser for easily checking out which elements to style how. Beware though this has a learning curve and effect: It will vastly increase your HTML and CSS skills, but it takes some time to get used to it.

But in the end, this effort is worth the experience you gather to build customized webpages.

Regards,
Garvin

[carl_galloway]

Owen,

Thanks you for visiting my site, it feels good to know that something I've contributed has helped you. I wish I had the time to fully document the undocumented styles, but at present I have too many projects on the boil and alas my list of styles is a bunch of post-it notes on the wall next to my desk.

Garvin's suggestion is exactly how I got started with theming, I would look at the theme on screen, figure out what I wanted to change, then view the source in my browser, find the code that related to the change I wanted to make, and if a style name existed, then I'd add that to my stylesheet. If you discover something that has no class or id and you think it should have one, please let us know on these forums. We are actively trying to make serendipity more usable.

Carl

[Don Chambers]

Thanks judebert, gavin & carl. I'll get the hang of this stuff eventually.

So far, I started with the default style.css. Changes so far are not working at all - even the sidebar plugins are not displaying. Only changes I have made to the template so far are below, noted in bold. Nothing else changed. Started by copying the default folder, but did blow away the subfolder 'admin' from this new copy, and deleted a bunch of images that are in the default img folder, with the exception of the arrows.

.serendipitySideBarContent input {
width: 130px;
}

#mainpane {
border-bottom: 1px solid #000000;
margin: auto;
width: 760px;
border-top: 0px;
background-color: #FFFFFF;
border-top: 1px solid #000000;
}

#content {
padding: 10px;
margin: 10px;
width: 610px;
background-image: url('{TEMPLATE_PATH}img/clc-main.png');
}

#serendipityRightSideBar {
width: 150px;
border-left: 1px dashed #000000;
padding: 10px;
vertical-align: top;
background-image: url('{TEMPLATE_PATH}img/clc-side.png');
}

#serendipityLeftSideBar {
width: 150px;
border-right: 1px dashed #000000;
padding: 10px;
vertical-align: top;
background-image: url('{TEMPLATE_PATH}img/clc-side.png');
}

body {
font-size: 10pt;
margin: 0;
background-color: #D2DFF2;
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
margin-bottom: 30px;
background-image: url('{TEMPLATE_PATH}img/clc-background.gif');
}

#serendipity_banner {
margin: auto;
width: 760px;
height: 120px;
background-image: url('{TEMPLATE_PATH}img/clc-top.png') no-repeat center top;
}

#serendipity_footer {
margin: auto;
width: 760px;
height: 40px;
background-image: url('{TEMPLATE_PATH}img/clc-bottom.png');
}

[carl_galloway]

Owen, you don't need the 'single quotes' in the url of your background image.

Because the serendipity stylesheet is parsed for smarty code this might affect your output. Jude should be able to clear that point up better than me.

[Don Chambers]

Carl - I used the single quotes because that is what the default style.css used for the banner. I tried without, and still nothing.

site is http://www.chicagoloopcruise.com/serendipity

[garvinhicking]

Owne, in your HTML output you have disable the link rel="stylesheet". No wonder that no CSS changes apply

So in your index.tpl change this:

Code: Select all

<!--
    <link rel="stylesheet" type="text/css" href="http://www.chicagoloopcruise.com/serendipity/index.php?/serendipity.css" />
-->

to this

Code: Select all

    <link rel="stylesheet" type="text/css" href="http://www.chicagoloopcruise.com/serendipity/index.php?/serendipity.css" />

Regards,
Garvin.

[Don Chambers]

DOH!!!! That is left over from when I was originally trying to capture the blog within an existing page!

Now, onto formatting!!! Thanks Garvin!

[Don Chambers]

OK - making progress. Still need to find decent colors that work throughout the page (active, links, etc), and much other formatting.

I do have the following questions:

1) I cannot find a style that is producing the border around the pane. I have the #mainpane set as follows, so perhaps it is elsewhere?

#mainpane {
border-bottom: 0px;
border-top: 0px;
border-right: 0px;
border-left: 0px;
margin: auto;
width: 760px;
background-color: #FFFFFF;

2) I'm living with an existing design. The column on the left, which contains buttons on my site, is 150px wide. The calendar and one of the RSS lines is pushing that wider than 150, and forcing the BG image to tile. Any suggestions?

3) Is there a simple variable to suppress the blog title and description? I'm using graphics from my base site, and really do not need header text.

4) My base site uses javascript in a countdown timer. Anyway to get that to work in the serendipity banner?

Thanks all!!! This is a riot. I have no idea what I am doing, but getting results anyway!

[Don Chambers]

2 others:

1) There is a block marked "trackbacks".... how do I get rid of that?

2) Why isn't my footer showing?

#serendipity_footer {
margin: auto;
width: 760px;
height: 40px;
background-image: url('{TEMPLATE_PATH}img/clc-bottom.png');
}

BTW - my name is Don. The "Owen Stubbs" name dates back years for me - not an attempt to hide my identity, rather it was developed as a result of a movie.

[garvinhicking]

Sadly your URL isn't showing up for me, so I cannot help you completely, only on a few cases.

2) I'm living with an existing design. The column on the left, which contains buttons on my site, is 150px wide. The calendar and one of the RSS lines is pushing that wider than 150, and forcing the BG image to tile. Any suggestions?

Usually, it's the calendar's fault. You'd need to style the calendar differently and give it smaller font sizes or smaller widths to produce the right size.

You might want to try the calendar style from Carl's Theme on www.carlgalloway.com. Just look at his CSS and search for "calendar" styles.

3) Is there a simple variable to suppress the blog title and description? I'm using graphics from my base site, and really do not need header text.

Yes, you can edit the "index.tpl" template file of your blog. There you'll see $blogTitle and $blogDescription variables which you can just remove.

4) My base site uses javascript in a countdown timer. Anyway to get that to work in the serendipity banner?

Yeah, you'd put that in index.tpl as well.

You can remove the 'trackbacks' by editing the template file 'entries.tpl' and just search for the word 'trackback'. You'll find the mentioned passages easily, I guess.

Best regards,
Garvin

[Don Chambers]

I'll try your suggestions Garvin, but one question. I do not know what template his site is using... how do I look at his CSS???


The page I am working on for myself is:

http://www.chicagoloopcruise.com/serendipity/