Defacto theme style.css

Skinning and designing Serendipity (CSS, HTML, Smarty)
User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Defacto theme style.css

Post by Don Chambers » Thu Feb 16, 2006 4:43 am

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.

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Thu Feb 16, 2006 5:30 am

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
Regular
Posts: 603
Joined: Wed Jan 18, 2006 6:32 pm
Location: UK
Contact:

Post by d_cee » Thu Feb 16, 2006 10:49 am

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

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Thu Feb 16, 2006 3:22 pm

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.

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Thu Feb 16, 2006 4:03 pm

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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Thu Feb 16, 2006 5:33 pm

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

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Thu Feb 16, 2006 6:07 pm

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
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway » Thu Feb 16, 2006 6:13 pm

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.

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Thu Feb 16, 2006 6:23 pm

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

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Thu Feb 16, 2006 6:27 pm

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

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.
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Thu Feb 16, 2006 8:26 pm

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

Now, onto formatting!!! Thanks Garvin!

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Fri Feb 17, 2006 12:50 am

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! :lol:

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Fri Feb 17, 2006 3:20 am

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. 8)

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Fri Feb 17, 2006 10:31 am

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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Fri Feb 17, 2006 3:19 pm

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/

Post Reply