Where is there a list of all the drupal internal CSS classes and CSS IDs that someone (like me) could use to more quickly develop and modify themes?
I have searched for quite some time, without luck, to find this information.
----------
Some examples of these CSS classes and IDs, are the many classes and IDs used to format various node types. There are of course the obvious IDS like #site-name #site-slogan #breadcrumbs
But for example, the classes and IDs for the links within the breadcrumbs aren't obvious.
With, for example, a phptheme - the style.css contains this information, but it is garbled and their aren't any comments that relate the styles in the file to the visual elements within a drupal page. There isn't any assurance of rational organizaton between the nomenclature there and their actual consistent use within the system's design.
Has anyone created a comprehension 'TAXONOMY' of all this information so that themes can be developed more easily?
Has anyone thought to begin right with this information with considering future design? Isn't it all about the output in the end?
----
Also, while learning drupal it is apparent that the style.css of a theme effects not only the public aspects of a site but the formatting and organization of countless internal pages within drupal's own system, including the administration areas.
If I only had a complete and comprehensive of all this, I could create a style.css without hours make that DAYS of trial and error experimentation.
Also, while drupal makes claims of internationalization, I see HARDCODED publically visible english test in places like the core of phptemplate and xtemplate. A good example of is the:
Submitted by (some user) on Wed, 01/25/2006 - 11:21pm.
Where the 'submitted by' isn't at all user configurable within the administration pages, or accessible under programmable control anywhere. It could/SHOULD be something stored in the database - variable and modifiable - for different kinds of nodes and contexts.
While Drupal appears to have many features, why are such basic design concepts and obvious localization issues overlooked?
Why is such a basic documentation issue like a list of the CSS information not documented anywhere that I can find on drupal.org?
p.s. a listing of all those pesky internal pages, user registration for example, one needs to tweak when building a drupal site would also be useful....
p.p.s. Sometimes the powerful of a system can only come to fruition of basic aspects of it's foundation are thoroughly implemented, (e.g. things like the hard coded output text in the phptemplates engine files without thought of placing it in the settings interface with consequent customizability and localizability)
Comments
Submitted
If you refer to t('Submitted by %a on %b.' .... ) in phptemplate.engine; it is localised. If a translation is loaded, t() translates this string.
--
Tips for posting to the forums.
When your problem is solved, please post a follow-up to the thread you started.
where is there a list of all the CSS classes and IDs
Thanks for note heine, but my main question is about locating a list of the CSS classes and IDs used by drupal?
Is there a comprehensive list of all the CSS selectors - classes and IDs - used by drupal to manage formatting - documented anywhere - with the relationship between class / ID and visual elements on given pages?
For example, is the set of A: styles a class or ID specific to breadcrumbs? As in the actual example below - the text-color in the .breadcrumb class applies to the » between each link, but it does not apply to the links in the breadcrumb chain, which apparently inherent, but from what ancestor? Wouldn't it have been better for drupal internally to have defined a more granular and specific set of CSS ( classes / ID selectors ) for such visual elements?
------
excerpt output from actual drupal page:
----
While some of this is visible with the firefox developer's toolbar, that does reveal the whole story....
I just discovered that the problem - the lack of documentation - is noted in the following article - as quoted below.
http://drupal.org/node/7272
Well - "the stylesheet capabilities will likely be able to satisfy most" is not quite true since the implementation of styles internally to drupal is incomplete, not granular enough and therefore inadequate. An ID based system would be great. It could even have a taxonomy within the drupal database. It seems like a great design would have all the layout definition in the database, which would make deisgn drupal admin pages to edit it all much more straightforward. It seems like every single visual aspect of drupal should have defining CSS in the drupal database. The system would no longer need external CSS files at all and could depend entirely on inline CSS generated from database output when building its pages for display. If the content can ceom from the database - isn't it logical that they layout and styling should be stored in and come from the database too? There is even a module that does something like this for the contents of nodes - but it only applies to the contents of the nodes - not their formatting containers.
spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...
Drupal CSS classes and IDs
I can not point you here nearest related post -I could not find Drupalhandbok on CSS classes and IDs, but its been disgussed here
http://drupal.org/node/16220
As much as i know there is not central documentation on this
Drupal has strengths but some basic concepts overlooked, disagreed, or in the process of building or had consensus but waiting someone to pick them up
Ideally default Drupal CSS classes and IDs needs to be
✹standarized, ✹retriable, ✹configurable (with option turn default), ✹Add/delete/importexport class/ID functions tied to the theme_editor.module for online admin configuration of customised themes
nearest example of what i mean by this kind of module function would be similar to the variable.module functions for editable variables
http://drupal.org/node/24026
Class and ID
Hi sprite,
You could use the Web Developers Toolbar extension for Firefox https://addons.mozilla.org/extensions/moreinfo.php?id=60 to display class and ID information.
Under the Information menu select Display ID & Class Details.
If you are looking the class, id or selector path of a specific element you can use View Style Information under the CSS menu.
Nether of these provide exactly what you are after but they should help you style your site.
www.csscreator.com
good tip
Using the Firefox web dev toolbar is a good tip.
I am already using it to -discover- a lot of the CSS selector class and ID information. It is laborious, it means going through each page in the administration system and also creating mockup pages for every known kind of node and block and so on to find out what CSS selectors are applied to them.
But unfortunately the firefox web deve toolbar does NOT provide semantic information about the classes and IDs the toolbar reveals.
For example - I can tell that #breadcrumb applies just to the inter-link >> character and that the links for breadcrumbs use generic link styles - but generic link style inherited from where? This also implies as I have proven with experiments - the associated styles are NOT unique - and changing the attributes of that will effect the attributes of other visual elements TOO :( ....
but of course I am having to create this document myself in order to develop a theme for my site. Everyone who tries to develop a detailed theme will run into this problem.
I believe this is why there are not very comprehensive or detailed themes available for dupral - This is a really BIG task - where everyone wanting to theme their site is -reinventing - and re-reinventing - the same table of CSS information that ought to have been one of the first design documents created by the developers.
As stated above - a feature version of drupal ought get this stuff out of external files all together and use CSS information stored in the drupal database for everything. Drupal could then provide a user-interface for changing the CSS styles for each and every visual element in drupal.
spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...
Drupal is not a CSS editor
Although some people joke that until Drupal does your laundry it's incomplete, that doesn't mean Drupal is the best for everything. Putting CSS inside the database will make CSS modification with a decent editor much harder. Besides, you'll only do it during theme development.
Tip: look into phptemplate theming if you want more control over drupal's output.
--
Tips for posting to the forums.
When your problem is solved, please post a follow-up to the thread you started.
CSS decrypting
Personally, I would use something like Stylemaster to debunk the stylesheet as you can pull in script files with HTML embedded in them and quickly get a visual answer and then directly edit from there. I guess it's a bit like the Developers toolbar extensions but with editing funtions.
Per theme
Each theme has control over which IDs and classes are used. It's true that there are plenty of "standard" names used, but by no means is this a definitive or globally shared list. The firefox DOM inspector and IE developer toolbar (still beta?) are both good tools for analysing page structure, ID's and classes. They provide everything I need to style any page elements.
In Drupal HEAD (CVS) at least, the string "submitted by" is passed through the
t()function - which does get localised if the appropriate module(s) are in use.CSS documentation - I am building a document as I learn it....
Well I guess I will have to build my own document as I learn everything, helped along by the firefox dev toolbar and inspiration.
MEANWHILE AN APPROACH TO BREADCRUMB CUSTOMIZATION:
The concept implemented below uses descendant selector syntax to customize the otherwise generic list items that comprise the breadcrumb list.
( I have the property values blank
- so that you can use your imagination )
/* DIV container */
.breadcrumb
{
border-top:
border-bottom:
padding:
margin:
color: /* applies only to the >> character between links*/
font-size:
font-weight:
height:
/* additional properties desired */
}
/* the following styles employ descendant syntax to capture the links in breadcrumbs */
.breadcrumb a:link
{
color:
background:
}
.breadcrumb a:visited
{
color:
background:
}
.breadcrumb a:hover
{
color:
background:
}
.breadcrumb a:active
{
color:
background:
}
/* the css above enables specific attributes for each aspect of the breadcrumb list */
spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...
your reply is not entirely on point....
1) you missed the point of my original question and your replies do not address the problem that it raises.
2) localization is NOT the primary issue within the primary question I asked. My question is deeper. I want varying terms for varying node types.
ALSO:
Drupal uses a set of very STANDARD internal selector names for almost everything it outputs. My reply above about how to customize the breadcrumbs demonstrates some of drupal's internal logic in this regard.
{
see my posts at:
http://drupal.org/node/47205
http://drupal.org/node/47205#comment-88757
http://drupal.org/node/47205#comment-88768
}
By way of example:
the standard drupal node DIVs have selector names like:
.main-content.node
.main-content.sticky
(etc.)
each drupal standard child component of a page/node has CSS selectors like - e.g.:
.main-content.node.title
.main-content.node.info
.main-content.node.links
.main-content.node.terms
.main-content.node.content
( etc. )
Plus other generic elements, like the H2 and A:link A:hover generics, that are descendants can be 'caught' by creating descendant selector descriptions as in my breadcrumb customization example (elsewhere in this forum).
The real issue is that people should not have to spend HOURS - DAYS - WEEKS - reinventing this CSS selector/class/ID discovery wheel for all the standard internal drupal classes and IDs - when it list should have been part of the original architectural design documents given to every drupal developer in the first place!
IN ANY EVENT:
Spritely 'lil ole' missy me - sprite - I have been building a complete listing of all those internal classes and IDs as I progress toward developing my own master template creation tools.
Even if somebody else thinks everybody should re-invent that wheel over and over and over again by trial and error
- I personally intend to do it only once:
.... thank you very much.
spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...
the themedev (contributed) module also provides assistance...
While themedev isn't static documentation, it does provide what may be even more powerful DYNAMIC visual documentation of all the CSS elements on any page displayed while it is active.
The themedev (contributed) module is certainly a starting point toward creating groups of styles with appropriate selectors to customize the visual attributes of just about any aspect of any page drupal displays.
spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...
Still theme-based
Your examples have used the following class names:
These are all changeable on a per-theme basis, or can be removed entirely at the themers choice. All I am saying is that your document will be a static document with classnames in the theme of your choice at the time of writing.
Who is the target audience for your document?
I think i see what sprite is saying
I've wished for the same thing... although style.css can vary a fair bit, drupal.css is pretty constant. There seems to be some logic or naming convention in place but it is not very obvious. Sure , we can all use the web developer toolbar to make our own maps, but ... it's usually better for humans to do things via deduction and leave induction to machines.
Still, i think that the place to start looking is drupal.css . that file does not change from theme to theme i dont think. i think style.css is the one that varies.
(update)
yes, i tried this... i renamed style.css and the web dev bar tells me that the drupal.css names are in fact pretty descriptive... so.. i'm thinking that you might be able to get away with simply redefining those ones to start with? ( Not a css guru at all ... i still use w3m to view doc pages ) i'm interested because i'll have to do this later in the week .. so good luck, and keep us posted on your progress :D
FYI
drupal.css is optional, on a per-theme basis.
yes, drupal.css is the one
looking at this more, drupal.css is definitely the one to start with. rename that style.css and you can totally see the logic.
To change the 'Submitted by'
To change the 'Submitted by' text, turn on local module and change it. Further information can be found here: http://drupal.org/handbook/modules/locale (and yes, it is a main point as you specifically brought it up).
As to a 'standard' list, there isn't one. You can use drupal.css as a starting point but your theme can exclude drupal.css if you so choose. I did an experiment and built a theme that excluded it once (http://www.blkmtn.org/node/248) but decided not to persue it later. But you'll notice this quick WordPress port here:http://www.blkmtn.org/node/268 has completely different div layouts and names. I am using phpTemplate, if you use Smarty or XTemplate then you may get different results.
Your css and class names is going to be a mix of the modules you are using and the theme you are using. There are not really 'standard' names for this. Drupal theming is very very flexible. As a result, it is less 'standard' across the board and maintaining such a list will be problamatic.
-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
Uh-oh
Before anyone starts writing about hack non-solutions and primary questions with random presses of the SHIFT-key ;-) a bit more information / background on changing strings in drupal core with locale.
/me runs for cover.
--
Tips for posting to the forums.
When your problem is solved, please post a follow-up to the thread you started.
Feel frree to update the
Feel frree to update the information in the handbook. :)
-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
useful exercise
Hi Sprite
Have you started documenting your findings, or do I also have to do it from scratch ;-)
.s
Will this work?
Pardon me if this isn't what everyone's looking for, I'm just starting to dig into Drupal myself.
Some of the internal class and ID logic is revealed here: http://drupaldocs.org/api/4.6/group/themeable
Clicking through the various theme_ functions does seem to reveal many of the classes and ID's that are assigned.
For example, viewing the theme_block function detail pagereveals how it generates classes and ID's:
Drupal CSS Analysis
I have done some analysis.
http://drupal.org/node/57543
wow
Wow sime, how long did that take?? Thanks!
not *too* long
A few hours. Dusted off the old excel skills! Would have made my life a lot easier if Excel saved anything approaching a decent html file. I should probably start using OpenOffice.