By Anonymous (not verified) on

Hi,
I need to reduce the size of the slogan in Garland - Drupal 5.0.

It looks like the slogan is H1 style from the page.tpl.php file.

But in the style.css file, modifying

h1 {
  font-size: 170%;
}

or even

#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
  color: #fff;
  font-weight: normal;
  text-shadow: #1659ac 0px 1px 3px;
  font-size: 1.5em;
}

would not change anything. I even changed font size for H2, 3 and 4 but no change.

Am I trying in the wrong direction?

Thank for the help.
Michael

⋅ Categories: Drupal 5.x

Comments

robray’s picture

robray commented

Did you try re-saving your theme configuration after making your changes?

"Re-saving" copies style.css over to the files folder which is where it gets read.

this is new to Garland and it got me, and tends to get a lot of people.

NOTE: don't try editing and copying straight over to the files folder as it will get overwritten next time you re-save your theme config.

Anonymous’s picture

Anonymous (not verified) commented

Hi Robray,
Thanks for your answer.
I didn´t quite get what you meant though by re-saving your theme: do you mean that

1. I change the CSS style in the style.css file
2. I upload that file to the server
3. I go to mysite/?q=admin/build/themes and press the button Save configuration ?

I pushed that button about 5 times after having changed the h1 font to 100% instead of 170% and 1em instead of 1.5em... but nothing changed.

Now, I was using the style.css file in the theme folder and then realized there was a copy in the files folder. I did the above procedure with both files but none of them worked.

Any other thought or am I doing something wrong?
Thanks.

Michaël

Chill35’s picture

Chill35 commented

You have to modify the style.css that's in files/color/garland-xxxx... if you have picked different colors for your Garland theme.

vm’s picture

vm commented

when making these changes is cache turned on ? and are you using the css aggregator ?

if both of these are answered yes, you may want to disable them while making changes to the site.

emptying your cache tables can't hurt either.

Chill35’s picture

Chill35 commented

are you using the css aggregator ?

How does one know if one is using this ?
What does it do ?

Caroline

vm’s picture

vm commented

to find out if you have enabled them visit: administer -> site configuration -> performance

if you have any questions after reading the instructions on that settings page, post back.

Chill35’s picture

Chill35 commented

You are a doll. Thanks.

pasquale’s picture

pasquale commented

Or you can just go to http://yoursite.com/cron.php after making any changes to files. This runs cron.php and refreshes your cache tables I think. Anyway, it works, and it's easy. Also obviously make sure to refresh your browser too. Ctrl/Command+Shift+R works for Firefox. Or go to Tools->Clear Private Data...

David_Rothstein’s picture

David_Rothstein commented

Running cron does indeed clear your cache tables, but it does not clear your aggregated CSS files in the 'files/css' directory or the copy of your theme that may be present in the 'files/color' directory. (Starting in Drupal 6 there is a "Clear cached data" button at the Administer › Site configuration › Performance page that takes care of clearing most of this for you, though... but still not 'files/color', it seems.)

However, I think the main point is that if you are developing a theme, you are typically going to be going back and forth many times between making changes and viewing the page, so having to do anything between each page load would still be a pain! That's why it's best to just completely turn off things like page caching and CSS aggregation in a development environment.

toddgator’s picture

toddgator commented

If you are using the color module, then a custom CSS file was created under files/color/garland-2664d353/style.css although I am sure the 2664d353 part is a generated code. But you get the idea. Edit that CSS file.

Also, under Performance settings, whenever I make changes, I disable the page and CSS caches. Once I am happy with the changes, I then re-enable those.

Hope that helps,
Todd

My favorite web host!

Elwë’s picture

Elwë commented

-

Anonymous’s picture

Anonymous (not verified) commented

The problem with editing this file is that the directory changes each time a change is made to the theme configuration. Decide to turn off the display of the site mission? This temporary file and directory gets rewritten, the name of the directory changes, and the style.css is overwritten.

DocMartin’s picture

DocMartin commented

I just had trouble trying to change the css file within files/color - permissions problems (even some trouble trying to edit w cpanel, after my ftp program couldn't dent the file here).

Instead, made changes to the Garland css within themes folder.
If then save Garland configuration, this gets copied over to files/color (I've found).

Then, it seems, can change site mission wording etc, but the revised css file will remain.

[albeit a bit of a hassle if want to fiddle about, changing this and that in css and seeing what happens. Guess I'd better leave it be for now.]

One point: I don't think the site name and slogan should have h1 tag, as surely this should be for page titles. But, not about to faff with this just yet. [And if you plan to faff: keep copy of original Garland css someplace, lest things go awry!]
____________________________
CheungChauHK 長洲HK - South China Sea island in Hong Kong.

____________________________
DocMartin and Hong Kong Outdoors

linweb’s picture

linweb commented

You could do this the simple way by changing the code around line 36 in page.tpl.php

$site_html = implode(' ', $site_fields);

to

$site_html = implode('<span style="font-size:60%"> ', $site_fields) .'</span>';



I like to import a custom css file in my theme either by adding this after <![endif]--> around line 11 

<style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/custom.css";</style>

or by adding it via template.php

/*
  Example of adding extra styles
*/
// theme_add_style('/themes/my_theme/custom.css', $media = 'all');



I'm sure there are other ways but I didnt want to change the default <h1> style so I just added a rule to

$site_html = implode('<span class="slogan"> ', $site_fields) .'</span>';

and put the following in my custom.css

.slogan {
  font-size: 60%;
}

--
cheers!

Anonymous’s picture

Anonymous (not verified) commented

Adding a custom css file is the way to go, but I think the "best practice" here is to place the css file in sites/all/themes. According to the readme.txt in the sites/all directory,

This directory should be used to place downloaded and custom modules and themes which are common to all sites. This will allow you to more easily update Drupal core files. These modules and themes should be placed in subdirectories called modules and themes as follows:
sites/all/modules
sites/all/themes

I couldn't find a place to import a css file in template.php, so in page.tpl.php, I added this right after the call for the print.css:

<style type="text/css" media="screen">@import "http://courses.danbutcher.com/poetry/sites/all/themes/oliviacustom.css";</style>

I named my custom sheet "oliviacustom.css" because it's tailored to the Olivia color scheme for Garland, and this will allow me to keep track of modifications I make if I decide to change the color scheme.

Finally, I suspect that this method could be problematic if the custom css requires the use of background images generated by Garland, since the color scheme-specific images are stored in the dynamically generated css directory that is overwritten each time a change is made to the theme configuration; this makes it difficult to specify a URL for the background image, and if no path is specified, the default Garland images are used.

Zachariah’s picture

Zachariah commented

why did you choose to use @import instead of just specifying the sheet like this?
<link rel="stylesheet" type="text/css" media="screen" href="/all/themes/custom.css" />

(or in your case <link rel="stylesheet" type="text/css" media="screen" href="http://courses.danbutcher.com/poetry/sites/all/themes/oliviacustom.css" />)

Is it to weed out certain browsers, or is it to make it cascade properly?

ericfoy’s picture

ericfoy commented

You could do this the simple way by changing the code around line 36 in page.tpl.php

$site_html = implode(' ', $site_fields);

to

$site_html = implode('<span style="font-size:60%"> ', $site_fields) .'</span>';

Didn't work for me.

Elwë’s picture

Elwë commented

hi, I tried to modifiy the css file which is in the files/color/garland-xxx/style.css file, but I don't have the rights to to it, it's 644 and chmod dosen't work.

thanks for help

Chill35’s picture

Chill35 commented

Please try this : modify the file locally (modify a copy on your computer) then upload it to files/color/garland-xxx.

Caroline

Elwë’s picture

Elwë commented

thank you but it didn't work...
other idea?

Chill35’s picture

Chill35 commented

How did you achieve to ftp files to your server in the first place ? :)

Caroline
11 heavens

caddymob’s picture

caddymob commented

Have you made sure to fully refresh the page? Be sure to hit Ctrl+F5 to do this. I had the same problem, but apparently stuff remains in cache...

Elwë’s picture

Elwë commented

hi,
Chill35 : you mean when I installed drupal? With a ftp software.
caddymob: which page? the one of the color selection? I tried but it didn't change anything.

thank you much

caddymob’s picture

caddymob commented

Yes-- in the color page. Save the configuration and then hit Ctrl+F5. It worked for me?

Elwë’s picture

Elwë commented

sorry didn't work either...

caddymob’s picture

caddymob commented

sorry Elwë, I've nothing left in my trick box. I am but a simple n00b

DocMartin’s picture

DocMartin commented

Hi Elwe:

I've just had problems w permissions in the files/color folder
You could try replacing styles.css in themes/garland with your new version. (save copy of original styles.css may be wise). Then, to configuration for garland (thro admin themes), and save config - with colours as you like them. This should copy the edited styles.css over to the files/color folder.
____________________________
CheungChauHK 長洲HK - South China Sea island in Hong Kong.

____________________________
DocMartin and Hong Kong Outdoors

marketanomaly’s picture

marketanomaly commented

All this just to reduce the font size? Doing the simplest thing in Drupal requires extensive coding. I've been looking into migrating my sites to Drupal, but I think I must be nuts to choose this platform. It seems that it was intentionally designed to be impossible to use.

marketanomaly’s picture

marketanomaly commented

Hmm... Posted twice. Only pressed submit once. Sorry.

David_Rothstein’s picture

David_Rothstein commented

The above discussion seems to have gotten a little unwieldy, so here is a simple summary. The easiest way to make small modifications to the Garland CSS (such as changing font sizes, etc.) seems to be as follows:

  1. Go into the themes/garland directory, edit the "page.tpl.php" file and insert one line of code:
    <style type="text/css" media="all">@import "/sites/all/themes/custom.css";</style>
    You should put this line after any other CSS files you want to override (so at the very least, it should go after the line containing <?php print $styles ?>, which loads all the standard CSS onto the page).
  2. Now create a file "custom.css" in the directory sites/all/themes (of course, you can use a different location as long as you change the code above). Put any custom CSS you want in this file.

That's all that's needed. As for the person who complained about all the "extensive coding" that Drupal requires to do simple things, I hardly think one line of code is extensive! And the only reason you even need that line is due to some of the advanced features of the Garland theme (in particular, the nifty color wheel that lets you easily change your site's color scheme dynamically), which requires that Garland's CSS files be dynamically generated. It certainly isn't a problem with Drupal as a whole; if you want to be constantly fiddling around with the CSS directly, then you can always use a different theme rather than Garland (for example, Zen, which was specifically designed for that purpose).

icesurfer’s picture

icesurfer commented

Adding the line to the themes/garland/page.tpl.php file appears to be a good solution. Do I need to remember to edit this line each time that I update Drupal or deploy Drupal on a different host?

If there is no custom.css file will any errors be generated?

Should this be a feature request to the Garland theme developers so that it is included automatically on all new releases so we aren't tempted to hack the style.css file directly? I could envision setting the path to the "custom.css" file as an option in the configure module for garland. Home >> Administration >> Site Building >> [garland] >> configure but I don't know how to write the patch myself.

David_Rothstein’s picture

David_Rothstein commented

Yes, any time you got yourself a new version of the Garland theme you would need to redo the edit to that file (unless you update your site via CVS; then at least when updating Drupal CVS would probably take care of it for you).

If the custom.css file isn't there then your end users shouldn't see any errors, but there would be a bunch of "page not found" messages showing up in your webserver error logs.

I like the idea of having an optional "path to custom.css" configuration setting! Not just for Garland -- I think this would be useful for Drupal's theme system as a whole. It seems like it's quite common for people to want to use a standard theme but make small tweaks to the CSS, and this would make it a lot easier for them to do that. It seems like all the other ways involving making changes to one of the core Drupal directories, which you then have to worry about keeping track of from site to site (even the solution by @jlndrr below, which I agree is better because it doesn't involving actually editing core files, still means there's an extra folder on your system that you have to maintain and keep track of). I definitely think it would be great if you could not touch Drupal's code at all, put your custom.css file in the "files" directory (which you have to deal with on a site upgrade anyway), and not worry about it beyond that.

Why don't you look around and see if there's already a feature request for this, and if not, consider submitting it as a feature for the Drupal 7 theme system?

juliendorra’s picture

juliendorra commented

Hi all,

I had, too, some trouble figuring how to add some minor CSS tweak to my garland, custom colored, theme. I found a quick, standard solution with no PHP.

Editing Garland directly is not a recommended way in the Theming Handbook, AFAIK.

Instead it is recommended that you use the same trick the Minnelli theme use : use a subfolder inside the garland folder.

the easiest way is to just duplicate the themes/garland/minnelli folder, a rename it as you like. You will end with :

- a color folder (needed to keep the nice color editing admin. Just keep the Minelli one)

- PNGs for the logo and the screenshot

- a specific CSS that contains only the modifications of the sub them, and an import of the main garland style.css. That where you are going to add your styles. You can delete everything but the @import, and start tweaking !

You will probably need to resubmit you theme colors if you modified them with the color wheel in the color module. I had to resubmit, change theme, etc. to have my colors right. (it's because pictures and a custom built style.css is copied to files/color when you use the color module)

----

I found this solution easier than editing a template file. Once my needs grows, I could also duplicate all the themes/garland directory, rename it and directly edit the style.css there, but apparently you need to change the theme name in a file or two, like .info for example

David_Rothstein’s picture

David_Rothstein commented

It looks like there's now a module available that will end all the confusion here: Site Specific CSS!

All you have to do is install this module, then create the file "/files/garland.css" with the CSS changes/additions you want.

Basically this seems to be implementing the idea that was discussed above (http://drupal.org/node/112456#comment-674222).