Defacto theme style.css
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
Defacto theme style.css
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.
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.
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
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.
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.
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
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
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
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.
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
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
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/
# 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/
-
- Regular
- Posts: 1331
- Joined: Sun Dec 04, 2005 5:43 pm
- Location: Andalucia, Spain
- Contact:
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
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
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
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');
}
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');
}
-
- Regular
- Posts: 1331
- Joined: Sun Dec 04, 2005 5:43 pm
- Location: Andalucia, Spain
- Contact:
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
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
site is http://www.chicagoloopcruise.com/serendipity
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
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:
to this
Regards,
Garvin.
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" />
-->
Code: Select all
<link rel="stylesheet" type="text/css" href="http://www.chicagoloopcruise.com/serendipity/index.php?/serendipity.css" />
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/
# 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/
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
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!
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!
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
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.
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.
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
Sadly your URL isn't showing up for me, so I cannot help you completely, only on a few cases.
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.
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
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.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?
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.
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.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.
Yeah, you'd put that in index.tpl as well.4) My base site uses javascript in a countdown timer. Anyway to get that to work in the serendipity banner?
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/
# 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/
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
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/
The page I am working on for myself is:
http://www.chicagoloopcruise.com/serendipity/
=Don=