How do you augment the CSS style sheet of a theme?
My first experiments with modifying a theme (I stated with sky) were to just edit the style.css file in the theme directory. That worked, but is obviously not very maintainable. I'm redoing my site and want to be able to leave the original style.css virgin and just add my stuff in another style sheet (which is, after all, the whole idea of CSS).
For example, I want to add:
img.keyline { border: 1px solid black; padding: 0; }
to an existing theme. Where do I put that? I tried to follow the directions in http://drupal.org/node/11774, namely where it says:
"if you only want to alter the CSS of a theme, then just place a new style.css file in a subdirectory of the theme: it will appear as a new theme in Drupal."
So, I made a themes/sky/my-sky directory, and put just that little bit of CSS in a "style.css" file there. Sure enough, "my-sky" showed up as a style I could select in the /admin/build/themes page. When I selected it, however, it looked like what I put there *replaced* the style.css from sky, rather than adding to it.
What clue am I missing?
-- roy@panix.com
Try http://drupal.org/project/sitecss
Roy Smith wrote:
How do you augment the CSS style sheet of a theme?
My first experiments with modifying a theme (I stated with sky) were to just edit the style.css file in the theme directory. That worked, but is obviously not very maintainable. I'm redoing my site and want to be able to leave the original style.css virgin and just add my stuff in another style sheet (which is, after all, the whole idea of CSS).
For example, I want to add:
img.keyline { border: 1px solid black; padding: 0; }
to an existing theme. Where do I put that? I tried to follow the directions in http://drupal.org/node/11774, namely where it says:
"if you only want to alter the CSS of a theme, then just place a new style.css file in a subdirectory of the theme: it will appear as a new theme in Drupal."
So, I made a themes/sky/my-sky directory, and put just that little bit of CSS in a "style.css" file there. Sure enough, "my-sky" showed up as a style I could select in the /admin/build/themes page. When I selected it, however, it looked like what I put there *replaced* the style.css from sky, rather than adding to it.
What clue am I missing?
--
roy@panix.com mailto:roy@panix.com
Hmmm. That seems like it's exactly what I'm looking for, but when I try to use it, it does't seem to see the new css file.
I created /sites/hyc2.org/files/sky.css, and put my additional CSS rules in it. I also installed and enabled the sitecss module. When I make "sky" my default theme, the list of CSS files in the generated HTML doesn't include my site css. This is all I get:
<style type="text/css" media="all">@import "/modules/node/node.css";</ style> <style type="text/css" media="all">@import "/modules/poll/poll.css";</ style> <style type="text/css" media="all">@import "/modules/system/ defaults.css";</style> <style type="text/css" media="all">@import "/modules/system/ system.css";</style> <style type="text/css" media="all">@import "/modules/user/user.css";</ style> <style type="text/css" media="all">@import "/./sites/hyc2.org/modules/ calendar/calendar.css";</style> <style type="text/css" media="all">@import "/sites/hyc2.org/modules/ cck/content.css";</style> <style type="text/css" media="all">@import "/sites/hyc2.org/modules/ date/date.css";</style> <style type="text/css" media="all">@import "/sites/hyc2.org/themes/ sky/style.css";</style>
I would have expected another line with "/sites/hyc2.org/files/ sky.css", but it's not there.
On Feb 23, 2008, at 3:19 PM, Zohar Stolar wrote:
Try http://drupal.org/project/sitecss
Roy Smith wrote:
How do you augment the CSS style sheet of a theme?
My first experiments with modifying a theme (I stated with sky) were to just edit the style.css file in the theme directory. That worked, but is obviously not very maintainable. I'm redoing my site and want to be able to leave the original style.css virgin and just add my stuff in another style sheet (which is, after all, the whole idea of CSS).
For example, I want to add:
img.keyline { border: 1px solid black; padding: 0; }
to an existing theme. Where do I put that? I tried to follow the directions in http://drupal.org/node/11774, namely where it says:
"if you only want to alter the CSS of a theme, then just place a new style.css file in a subdirectory of the theme: it will appear as a new theme in Drupal."
So, I made a themes/sky/my-sky directory, and put just that little bit of CSS in a "style.css" file there. Sure enough, "my-sky" showed up as a style I could select in the /admin/build/themes page. When I selected it, however, it looked like what I put there *replaced* the style.css from sky, rather than adding to it.
What clue am I missing?
--
roy@panix.com mailto:roy@panix.com
-- [ Drupal support list | http://lists.drupal.org/ ]
-- roy@panix.com
Roy,
Why don't you just copy a theme folder into sites/all/themes and give it a new name and then edit the css files there?
Anyway I sort of wanted to relate the following to anyone interested so I'll stick it in here because it's relevant. In Drupal 6, I started building a theme from scratch recently. The new theming handbook is a bit vague on this - it jumps from absolute basics to quite technical descriptions of hooks and stuff. The old theming handbook is outdated as the basic requirements for a theme have changed. Anyway, this is what I did:
a) Create a themename folder in sites/all/themes b) Create a file called themename.info in this folder. The file should contain the following: name = Human readable name of theme description = Human readable description of theme core = 6.x engine = phptemplate c) Set the admin theme to Garland or whatever d) At this point you can already select your new theme as the default theme for the site and use another browser (ie. not logged in to Drupal) to view it. It should work, but look fairly bad. e) Create a file called styles.css in your theme directory. This will automatically be picked up. There you can start creating styling rules. f) If you want to edit the PHP, search the file system for the files block.tpl.php, box.tpl.php, node.tpl.php, and page.tpl.php and then copy them all to your theme directory. Then you are starting with the default files and can edit them a little - any versions of these files you copy from other themes (eg. Zen) are quite different to the default files.
Regards, John
On Feb 25, 2008, at 7:02 PM, John Fletcher wrote:
Roy,
Why don't you just copy a theme folder into sites/all/themes and give it a new name and then edit the css files there?
I'd really like to keep my mods distinct from the base. That way, when a new version of the theme is released (I noticed a few changes in sky from 5.3 to 5.7), it's easy to pick up the new base without touching my local additions.
-- roy@panix.com
Roy,
If you're just using CSS to change a theme, you could use this method without changing the original theme:
"You can also make CSS-only themes by making a subdirectory in any theme directory and placing a new style.css file in it. Drupal will combine the new stylesheet with the template it belongs in, and make it available as a new theme. This is how the Minelli and Marvin themes work."
Complete documentation is located here: http://drupal.org/node/11774
Sincerely, Dennis
-----Original Message----- From: Roy Smith [mailto:roy@panix.com] Sent: Monday, February 25, 2008 7:02 PM To: support@drupal.org Subject: Re: [support] Adding to the CSS of a theme?
On Feb 25, 2008, at 7:02 PM, John Fletcher wrote:
Roy,
Why don't you just copy a theme folder into sites/all/themes and give it a new name and then edit the css files there?
I'd really like to keep my mods distinct from the base. That way, when a new version of the theme is released (I noticed a few changes in sky from 5.3 to 5.7), it's easy to pick up the new base without touching my local additions.
-- roy@panix.com
I've just tried this and it doesn't seem to work. Took a chunk out of my theme's main style.css and placed it in a new style.css which was in my theme's sub-folder and all those customizations disappear from the site completely.
Neil
----- Original Message ----- From: "Dennis Raney" dennis@wildernesslibrary.com To: support@drupal.org Sent: Tuesday, February 26, 2008 4:26 AM Subject: Re: [support] Adding to the CSS of a theme?
Roy,
If you're just using CSS to change a theme, you could use this method without changing the original theme:
"You can also make CSS-only themes by making a subdirectory in any theme directory and placing a new style.css file in it. Drupal will combine the new stylesheet with the template it belongs in, and make it available as a new theme. This is how the Minelli and Marvin themes work."
Complete documentation is located here: http://drupal.org/node/11774
Sincerely, Dennis
-----Original Message----- From: Roy Smith [mailto:roy@panix.com] Sent: Monday, February 25, 2008 7:02 PM To: support@drupal.org Subject: Re: [support] Adding to the CSS of a theme?
On Feb 25, 2008, at 7:02 PM, John Fletcher wrote:
Roy,
Why don't you just copy a theme folder into sites/all/themes and give it a new name and then edit the css files there?
I'd really like to keep my mods distinct from the base. That way, when a new version of the theme is released (I noticed a few changes in sky from 5.3 to 5.7), it's easy to pick up the new base without touching my local additions.
-- roy@panix.com
-- [ Drupal support list | http://lists.drupal.org/ ]
-- [ Drupal support list | http://lists.drupal.org/ ]
That makes sense if you still have the parent theme selected. The subfolder with the style changes should now become your theme and you will have to select that theme as your active theme in order to see these changes.
So for example: themes/chameleon/chameleon.theme themes/chameleon/style.css themes/chameleon/marvin/style.css
Chameleon is the actual fully developed theme. But since there's a suubdirectory marvin with a css file in it there is an additional theme showing up in drupal called marvin. If you select marvin as the active theme it will use chameleon but override the styles with anything in marvin/style.css. But if you keep it on Chameleon then it won't read the marvin css file at all.
Neil: esl-lounge.com wrote:
I've just tried this and it doesn't seem to work. Took a chunk out of my theme's main style.css and placed it in a new style.css which was in my theme's sub-folder and all those customizations disappear from the site completely.
Neil
----- Original Message ----- From: "Dennis Raney" dennis@wildernesslibrary.com To: support@drupal.org Sent: Tuesday, February 26, 2008 4:26 AM Subject: Re: [support] Adding to the CSS of a theme?
Roy,
If you're just using CSS to change a theme, you could use this method without changing the original theme:
"You can also make CSS-only themes by making a subdirectory in any theme directory and placing a new style.css file in it. Drupal will combine the new stylesheet with the template it belongs in, and make it available as a new theme. This is how the Minelli and Marvin themes work."
Complete documentation is located here: http://drupal.org/node/11774
Sincerely, Dennis
-----Original Message----- From: Roy Smith [mailto:roy@panix.com] Sent: Monday, February 25, 2008 7:02 PM To: support@drupal.org Subject: Re: [support] Adding to the CSS of a theme?
On Feb 25, 2008, at 7:02 PM, John Fletcher wrote:
Roy,
Why don't you just copy a theme folder into sites/all/themes and give it a new name and then edit the css files there?
I'd really like to keep my mods distinct from the base. That way, when a new version of the theme is released (I noticed a few changes in sky from 5.3 to 5.7), it's easy to pick up the new base without touching my local additions.
-- roy@panix.com
-- [ Drupal support list | http://lists.drupal.org/ ]
-- [ Drupal support list | http://lists.drupal.org/ ]
On Sat, Feb 23, 2008 at 1:44 PM, Roy Smith roy@panix.com wrote:
How do you augment the CSS style sheet of a theme? My first experiments with modifying a theme (I stated with sky) were to just edit the style.css file in the theme directory. That worked, but is obviously not very maintainable. I'm redoing my site and want to be able to leave the original style.css virgin and just add my stuff in another style sheet (which is, after all, the whole idea of CSS).
For example, I want to add:
img.keyline { border: 1px solid black; padding: 0; }
to an existing theme. Where do I put that? I tried to follow the directions in http://drupal.org/node/11774, namely where it says:
"if you only want to alter the CSS of a theme, then just place a new style.css file in a subdirectory of the theme: it will appear as a new theme in Drupal."
So, I made a themes/sky/my-sky directory, and put just that little bit of CSS in a "style.css" file there. Sure enough, "my-sky" showed up as a style I could select in the /admin/build/themes page. When I selected it, however, it looked like what I put there *replaced* the style.css from sky, rather than adding to it.
What clue am I missing?
--
roy@panix.com
-- [ Drupal support list | http://lists.drupal.org/ ]
One thing you might try is putting an @import to ../style.css as the first line in your sheet. I'd think this would be done automatically as the default behavior, but perhaps not (I don't know).
-
Dennis Raney -
John Fletcher -
Neil: esl-lounge.com -
Roy Smith -
sander-martijn -
Tony Yarusso -
Zohar Stolar