Can anyone please tell me where I can locate the default CSS file (or its equivalent) that controls the basic Drupal tab settings.

That is the file where the settings where links like View and Edit are specified.

These do not seem to be specified inside individual themes (or though I stand ready to be corrected!)

-- Ade Atobatele

Comments

view the rendered source of your site and you'll see at least the following core CSS files:

/modules/node/node.css
/modules/system/defaults.css
/modules/system/system.css (this one has the tab style rules)
/modules/user/user.css

you'll also notice that many modules add their own CSS files. and then of course your theme will add most of the styles. (core's CSS aggregation feature is your friend, btw!)

note that in general the core CSS attempts simple/sane baseline styling, to be augmented by the theme styles. if you want to alter core styles, be sure to overwrite them in your theme CSS, rather than hacking the core stylesheets themselves.

lastly, if you're able to use Firefox, i'd strongly recommend the Firebug add-on/extension as an extremely helpful tool in parsing out the individual styles affecting any given page element (and for client-side development in general).

Many thanks for the prompt assistance.

Ade Atobatele

Ade Atobatele

"if you want to alter core styles, be sure to overwrite them in your theme CSS, rather than hacking the core stylesheets themselves."

May I ask, once I have my desired styles in my theme's style.css how do I force that to override the ones stipulated in default.css?

let's say some stylesheet in core sets a specific margin you don't want:

.core-style { margin: 1em; }

to override that, don't edit that line in the core stylesheet. instead, simply add a new rule in your theme's stylesheet:

.core-style { margin: 0; }

be aware of issues like specificity. (in general, if possible, i'd recommend using the exact same selectors in your stylesheet that were used in core -- that'll make tracking the overrides much simpler. you may even want to section off a specific part of your stylesheet explicitly for core overrides.)

and again, Firebug (linked above) is an essential tool for managing all of these cascading styles.

Thanks for the advice about not changing core files. However, I'm not sure what to do about this case:

In "defaults.css", image borders are set as follows

img {
  border: 0;
}

Therefore, any border value set in TinyMCE (which the client expects to use on an image-by-image basis) is ignored. So, I don't see how to override a setting of nothing - it's different than your example above.

I tried adding this to "style.css"

img {
}

but it didn't work. Any advice would be appreciated!

Jim

well you can change the styles for every image on your site with something like:

img {
  border: 1px red dashed;
}

but that's probably not what you want. so, add a little specificity to your CSS rules. you could add a class to the image markup and use a style like this:

img.myclass {
  border: 1px red dashed;
}

or, assuming you just want to change the style of images in your node content, and that your node content is wrapped in div.content (as is the Drupal default), you could use something like this w/o having to edit any HTML:

div.content img {
  border: 1px red dashed;
}

hth

hth,

Thanks for the reply! That information is very good, assuming I want to set a global border. But this is not quite the case, as the client wants to do different sized/styled borders for different node images. For example, the image in one node would have a 1 px solid border, and another would have a 2 px dashed border.

This can be set in TinyMCE, but whatever is chosen there is overridden by the "default.css" setting. So I don't understand how to get that to work without removing the image border specification entirely from "default.css", which is not the best practice. I realize this may be more of a question for the Wysiwyg module (though it hasn't been asked there). Anyway, it's just something that's really puzzling me....

Jim