By avolve on

I am working on my first drupal theme and want to know if there is a full list of the elements required/i should include in my css.

i have created the layout already in css, yet of all the different themes i have looked at the coding of, i often find contradictory elements or they are structured in not the clearest way to follow.

I do not want to add the php (i am/will be using the php engine - unless someone convinces me otherwise) until i have all the syles down.

Can anyone point me in the direction of a list of css elements?

thanks
colin
veganarky.net
[no recent entiries as working on design...]

Comments

sepeck’s picture

sepeck commented

that there is one. The only one 'for sure' is drupal.css will be included in your theme as that is a system level one. After that, the only elements are the ones you put in.

-sp
---------
Drupal Best Practices Guide - My stuff Black Mountain

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

behindthepage’s picture

behindthepage commented

For example the block module outputs the following divs:

.block block-block
#block-block-XX (X's denote block ID number)
h2 .title
.content

<div class="block block-block" id="block-block-6">
 <h2 class="title">User Block</h2>
 <div class="content"><p>This is where the content goes</p>
</div>
</div>

Now if you make a menu block it outputs the following divs:

.block block-menu
#block-menu-XX (X's denote menu ID number)
h2 .title
.content

and the menu.inc outputs the following divs:

.menu
ul
li .leaf
.active
.collapsed
.expanded

<div class="block block-menu" id="block-menu-103">
 <h2 class="title">Navigation</h2>
 <div class="content"><div class="menu">
<ul>
<li class="leaf"><a href="/node/1" title="" class="active">Home</a></li>
<li class="leaf"><a href="/node/5" title="">Page 2</a></li>
<li class="leaf"><a href="/node/28" title="">Page 3</a></li>
<li class="leaf"><a href="/node/29" title="">Contact Us</a></li>
<li class="expanded"><a href="/?q=node/add" title="">Create content</a>
</ul>
</div></div>
</div>

And as I understand it, to change the classes you either have to hack the module (which I don't reccommend) or override the output with a block.tpl.php in your theme's folder.

I agree that this is rather confusing but I assume it has been done for flexibility so we can style each individual block if we want to.

gpdinoz

"If we can see further it is because we stand on the shoulders of giants"

Regards
Geoff

Dublin Drupaller’s picture

Dublin Drupaller commented

I think Ber was trying to start a page like that recently..

http://drupal.org/node/27316

It's not finished..but I think you have a good idea..i.e. have a one-page reference or cheat-sheet to the drupal core CSS names.

That would be very useful if it doesn't exist already..

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

robertgarrigos’s picture

robertgarrigos commented

shame. I just had the same idea and wanted to give it a look. Is that a developers only page?

sepeck’s picture

sepeck commented

-sp
---------
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

cendion’s picture

cendion commented

..but how can one see this? I mean where in the "block module" does it say that it outputs the div's:

.block block-block
#block-block-XX (X's denote block ID number)
h2 .title
.content

I use Firefox and the Web Developer toolbar and I can see that the theme I'm using sort of outputs a #block-menu-45 and a .block block-menu but I am unable to find this id and class in the block module, or anywhere alse for that matter. They are not listed in my themes php/css files, that´s for sure.

fletcherson’s picture

fletcherson commented

The number 43 is the ID of one specific block, these ID's are not hardcoded. The block's receive these ID's automatically and dynamically.

Imagine making a CMS framework for several people/websites/communities, you can't know for sure how many blocks every community is going to have. In Drupal there isn't a limit for how many blocks you can set up. At least this unique ID creation for every block allows us to theme every block differently if we like to, and a good example on this is the Fancy theme where several of the blocks have different border-colors.

ID of the block would be the same as the Block ID the block receives in the database.

Just add it to you're theme's CSS as a new style.

ica’s picture

ica commented

avolve - point you make is obvious for many people who like and impressed with Drupal wants to work with it and comes to customise the layout to give their site unique look, but no coding experience or no time or who wants to concentrate on other aspects of the site without hand coding.
Solution would be standardized CSS elements with a 'CSS generator' - a visual integrated CSS editor interface as seperate or combined to a theme editor

there is (or was) some work to solve it by 'chromatic' http://drupal.org/user/12322 seemed right way to go

http://coacalina.org/theme_style_generator
http://drupal.org/node/25197

and this one by Byright which is not exactly 'dynamic'
http://drupal.org/project/theme_editor
but try it if any use to you

also its been on many other posts ideas around theming and CSS many attemps led to no concrete solution except
PHPTemplate Regions solution on Drupal 4.7 which does not adress
http://drupal.org/node/29139

some other posts on the issue
http://drupal.org/node/7272
http://drupal.org/node/660
http://drupal.org/node/7133

I spotted online CSS editors. Would be nice to see Drupal had a module solution otherwise i guess general approach is 'diy - start learning coding' -with respect to the idea

- some css style generators
http://www.pixy.cz/apps/webedit/ (>Edit style)
http://www.listulike.com/generator/
http://www.csscreator.com/version1/index.php
http://www.csscreator.com/version2/pagelayout.php
http://htmlbasix.com/stylesheet.shtml
http://www.xmldir.de/quickcss/
http://www.inknoise.com/experimental/layoutomatic.php
http://www.udm4.com/udm-resources/css-generator.html

pamphile’s picture

pamphile commented

nice links thanks

marcel
http://businesletters.com

freyquency’s picture

freyquency commented

I doing some rebuilding on coacalina right now so the first link will not work.

ica’s picture

ica commented

yes, you must be busy with it.
chromatic, have you abondoned the theme_style_generator idea?
i thought you hit the right spot with it

freyquency’s picture

freyquency commented

I've been enjoying a busy summer and lately trying to get everthing converted to a multisite setup. :)

ica’s picture

ica commented

i am not sure its suitable or anyhow adaptable to Drupa, maybe just can give an idea somehow, but I found LucidCMS theming idea somehow interesting to looked at
Theming: HTML tag
Styles: CSS
http://demo.opensourcecms.com/lucidcms/

Username- admin
Password- demo

Templates:
http://demo.opensourcecms.com/lucidcms/index.php?command=layout&mode=edi...
Styles:
http://demo.opensourcecms.com/lucidcms/index.php?command=layout&mode=edi...

eldarin’s picture

eldarin commented

.. designers often use the DOM-inspector integrated into the Firefox browser.
That way you can look at any element being output by a Drupal page. With the "Web developer" extension you can also interact with the CSS rules listed in the DOM-inspector, and even edit/change them on the fly.

This is invaluable help to many designers of web-pages, especially for javascript-related issues, but also dynamic/javascript CSS.

robertgarrigos’s picture

robertgarrigos commented

I don't know how I could live without it!

thanks for the info.

---
Robert Garrigos
Personal site:www.garrigos.org
Admin of: www.escolasafa.info - www.societatbach.org