By Tmanagement on

Hi all,

During my second Drupal project I again got frustrated with all the default drupal css settings. For example, setting margin:0; and padding:0; for the body is not enough for Drupal. During development of a site which is using the nice menus module I found all kinds of strange paddings and margins but had no idea where they were coming from. Finally by setting the a tag in a specific block to 0 it all worked out. Now I can finally style all the links the way I want to.

It would save me time when there was no such thing as a default drupal css scheme. And to be honest, why should anybody need a default css markup?

In my opinion Drupal will get easier and faster to work with when the only default in theming is the theme itself.

Wondering what the rest thinks about it.

⋅ Categories: Drupal 5.x

Comments

ubersoft’s picture

ubersoft commented

It's caused me no end of headache -- layouts that work perfectly fine on other sites I've worked on simply don't work when trying to theme Drupal because it insists on throwing things into the mix that I have no use for.

My page is full of "block-clear clear-clear-clear-cache-clear-clear" tags that, I assume, do something... they certainly manage to mess with my attempts to create columns, but I haven't figured out what else they do just yet.

I know that individual Drupal modules have their own css files so that their output can be controlled, and apparently if I want to override a style generated by one of those modules I'll have to edit the css in the module itself... which I'm hesitant to do, especially if it's a core module.

On the one hand this makes a certain amount of sense -- some modules are specifically designed to display information, and in order for that module to be useful right out of the box (so to speak) they need some built in theming. But it would be nice if Drupal had an "override or ignore module css" switch so that only the theme css file is used.

boris mann’s picture

boris mann commented

No, you don't need to override in code. You can simply create a node-blog.tpl.php, block.tpl.php, etc. etc. where you define all the classes.

ubersoft’s picture

ubersoft commented

I see what you mean, at least concerning the "clear block block clear clear clear" styles. So do the php files in the style directory override files with the same name in modules? For example, if I were to create an empty php file with the exact name of a php file in the modules directory, would Drupal ignore the one the modules directory? (Thereby breaking the module, I'd assume...)

Tmanagement’s picture

Tmanagement commented

Ok people this is a start keep it going!

I know there are all kind of work arounds and I know you can adjust of submit php pages in order to customize the way you like. The thing is, why not just leave all pre-defined css so you dont have to?

To me there is nothing wrong with all the css names that Drupal use. Either Drupal is choosing them or you have to do it by yourself.

So if everybody is trying to adjust the pre-defined css settings why not just abandon it al together?

nancydru’s picture

nancydru
she/her/hers
Primary language English
Location Boston
commented

In a way I agree with your sentiments. Certainly there is a lot of stuff in the "default" CSS's that I just don't need. For example, I don't use Aggregator, but that junk is there and slowing down my sites.

But I look at some of my rendered pages and see anywhere for 5 to 9 CSS invocations, and EVERY one of them has, for example, a body style defined. Now, I know style sheets are supposed to "cascade" but isn't that just a little ridiculous? And if I include an ALIGN element on my HR tag, why do some themes completely override that? I said to center it; just do it!

Perhaps in Drupal 6.x, we can have a CSS builder that allows us to pick and choose from the "defaults."

BTW, the new CSS compression feature really does help reduce the junk.

Nancy W.
now running 4 sites on Drupal so far
Drupal Cookbook (for New Drupallers)

NancyDru

Tmanagement’s picture

Tmanagement commented

Good comments!

I was hoping to play a more assertive role then waiting if something is done in Drupal 6.0.

does anybody have an idea how to discuss this with the Drupal "leaders" ?

sepeck’s picture

sepeck commented

The process is documented in the handbook.

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

Tmanagement’s picture

Tmanagement commented

Which process do you mean?

vm’s picture

vm commented

I think Steven means for you to file a DEP (Drupal Enhancement Proposal) see: http://drupal.org/node/39407

sepeck’s picture

sepeck commented

Actually I was thinking of Contributing to Development which is the first link in the developers guide and visible from the Handbooks page.

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

vm’s picture

vm commented

either in IRC or on the dev channel (planet drupal) if they don't bump into it here.

Tmanagement’s picture

Tmanagement commented

Thanks Steven for the links provided. Never thought about digging into all those files of information.

BTW, what is your opionion about it? You have quite some experience with template design.

Alex Regenbogen’s picture

Alex Regenbogen commented

As a quick-'n'dirty fix to end all CSS inheritance-problems that rise when building your own CSS on top of the already existing CSS that Drupal loads. Why not exclude the:
<?php print $styles ?>
from your page.tpl.php? This will stop Drupal from adding the lines that will load the CSS in the generated page, and will give you absolute control over you pages.

Entering:

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

in it's place will load your very own CSS, and you won't have to worry about any inheritance-problems....

It does however mean, that you have to do everything yourself, but then again, that is what someone that performs this trick want, right?

Tmanagement’s picture

Tmanagement commented

Well thanks for your idea but as it says in your title "quick fix" . Why should we all fix quick or not if it does not have to be included in the first place. Just leave all standard css in the standard theme shipped with Drupal and once you decide to design something completely new you dont have to fix anything you just disable the standard theme and enable your own.

ubersoft’s picture

ubersoft commented

I'm not a designer, so I can't answer with any authority, but I can't imagine that would be practical for some modules. Modules are designed, for the most part, to be plugged in, activated and run. In many cases that means that the modules need to be formatted for the content they generate to be readible. Since a module designer can't anticipate every variation in every theme out there, including css with a module helps them ensure that the module is actually functional.

This can be a pain the neck, but it does make it more likely that each module you plug in to Drupal that affects site output will have some level of usability right out of the box. Everything is a trade-off -- if styles from specific modules are causing problems you can always go in to the module and edit it yourself.

nevets’s picture

nevets commented

From the forums it is clear that audience for Drupal has a range of talents and knowledge. Some people just want Drupal to work for them having everything pre-defined is great and works and the other end are those who want complete control of the look of their site. In this case the "work around" should not be an issue because they are probably writing their own theme and will be writing their own page.tpl.php file anyhow. In the middle we have people who want to customize the look of their site but only want to tweek things. While some find the current state of things a burden, it serves as a good starting point and generally overriding the CSS is not an issue.

So for me throwing out all the predefined CSS seems like the wrong approach, I think if people had to completely write a theme from scratch there would be less themes than there are today. Also as someone who writes modules I often provide some barebones css so the output does not look simply like a pile of bits. There predefined CSS rules that I can take issue with but for me the question is how easy is it to override them. I think it would be better to focus on those rules that are hard if not impossible to override.

Tmanagement’s picture

Tmanagement commented

Good points.

My idea would be that you let the default css be incorporate with the standard themes that come with every Drupal installation rather then being it a standalone css file which is loaded even when you put in your own theme.

By doing so it seems that everyone is better of. For peopel that do not want to change much they just load the theme they want which provide them with default css and thus they have support for all modules they want (when modules are using the default css file). People that are designing from scratch do not have to alter files, they just disable the default theme (which then automaticaly disables the default css incorporate in that default theme) and enable there homemade theme which is having no addition css.

ubersoft’s picture

ubersoft commented

to simply include a setting in Drupal that tells it to use only the css stylesheets for the active theme.

But if you're really designing a theme from scratch, why not simply take out the field that ads all the module css? That seems like the simplest solution...

Tmanagement’s picture

Tmanagement commented

Because it would save me time. Just enabling my own theme would be enough with my solution. Otherwise I would have to edit a line and save it again.

Do not get me wrong. It is not a major problem and your idea does not cost that much time but my solution would save time and if everything in Drupal would be designed that way you could end up with a lot more efficiency gains and to newbees it would be more clear. (When I started with Drupal theming I was wondering why some of my own css was not working the way it should)

ubersoft’s picture

ubersoft commented

I *still* wonder why my css doesn't work the way it should -- though in my case I think it has more to do with my relative inexperience with complicated css combined with IE being a tool of the devil. :)

However, I think there's probably a fairly significant technical hurdle to overcome with your proposed solution, since it would involve a bunch of modules writing css to the same css file. Remember that modules are installed in Drupal by checking a box and then clicking a button -- you can activate a number of them at once. Now picture ten modules writing css to the same file.

Now imagine updating a module that has *changed* some of its styling -- how will it know where to go in that css file, and how will it know which styles to remove and replace.

Now imagine *deactivating* ten modules -- how will those modules know what css to remove from those theme files? How will you manage which module goes first?

Setting that up would take a lot of time and effort, and it would be easy to break.

From a technical, implementation standpoint, including a css file with the module itself makes a lot more sense. It *is* more work for theme-builders, but it's also less time and energy that developers have to spend on figuring out how to automate module installation, an dmore time and energy that developers can spend on enhancing module (and core) functionality.

Tmanagement’s picture

Tmanagement commented

Well, module css is loaded once you call a page via internet. The css is not implemented anywhere and that should not be the case in my proposal.

There was suggested that elements of the default css are used to display certain aspects of modules which I do not know for sure is the case. What I do know, is that all module css is loaded in each page so if you remove them that css can not be loaded anymore.

Consequently, this will not be a problem of my proposal.

If there is some default css "necessary" because a number of items are styled or depend on it then just provide that block of default css in the default themes with commentary so that newbees can easily copy and past the code they want to use in there theme as well.

It seems that there is not a simple and clear explanation why default css is necessary.

sepeck’s picture

sepeck commented

In general, the css loads only on the pages that call it. Using a tool like Firefox plug in Firebug can help you determine this.

In general
Alphabetical Core module css
Alphabetical Contrib module css
Theme style.css

That said, due to the diversity of Drupal's audience a 'reasonable' preset defaults/examples are included with modules to help people start. For advanced themer's that want total control, it is assumed that you will control it via the theme and appropriate edits of the page.tpl.php file.

If you remove <?php print $styles ?> that removes the part that loads all the css files from modules to the theme's css. You can then add;

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

Which will load just your themes style.css

You can use this trick other ways as well. I use Yahoo GRID CSS for my site. So mine looks like

  <?php print $head ?>
  <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/reset-fonts-grids.css";</style>
  <?php print $styles ?>
  <?php print $scripts ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>

This loads the Yahoo GRID css stuff first to get the layout part set. Then all the modules css gets loaded followed by the style.css

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide