I have a lot of trouble with existing themes, so I'm trying to make a simple table-free pure CSS-based theme from scratch.
There's an explanation here how to make a new theme based on PHPTemplate engine. I've put these example files in a theme folder on the server:
block.tpl.php
box.tpl.php
comment.tpl.php
node.tpl.php
page.tpl.php
Now what?!
I don't see an explanation how to add the CSS files. The guide goes off track with all kinds of interesting advanced tricks. I still don't get the basics!
I know html and CSS and vaguely understand PHP from using Nucleus for the last couple of years. It's totally unclear to me how the different parts in Drupal hang together to form themes.
Specifically, what elements, classes and IDs should I define in my stylesheet? Should I call it style.css and put it in my theme folder? What does drupal.css do?
Comments
style.css
You need style.css .
--
Read my developer blog on Drupal4hu.
--
Drupal development: making the world better, one patch at a time. | A bedroom without a teddy is like a face without a smile.
You are giving yourself a lot of trouble ;)
Just for the reference, my website http://www.salsamontreal.com
You can see that this is a mixt between the getfirefox theme and another one (can't remember the name).
The idear is that you can learn a LOT from other themes and copy a lot.
As for this question...
Well. To see the classes and IDs, I have used Firefox extension webdevelopper. It will give you all the infos you need. Just right clic and ask :)
From what I understand drupal.css is kind of the base of your CSS. You can then add or overwrite with the style.css in your theme folder. To test, just rename your drupal.css to drupal.css.old, and you will see. Sometimes, drupal.css can just be in your way. Look at the webdevelopper infos and comment the classes that annoy you.
Good luck.
Thanks, but that's not good enough
That's what I tried to do at first, but it's very hard to "reverse engineer" what does what, even with developers tools.
My impression was that the available stylesheets are unnecessarily messy. Do the developers understand CSS or have they copied and pasted their stylesheets together as well? Layout and CSS seems an afterthought now...
That's why I want to start from scratch, with a clean slate!
I'm not a CSS specialist either. After lots of trial and error the clean way to create three proportional main columns is probably this:
.centercolumn {
padding-right: 25%;
max-width : 35%;
}
.leftcolumn {
padding-right: 5%;
width: 15%;
}
.rightcolumn {
padding-left: 5%;
width: 20%;
}
Is this correct?
It would be nice if those basics were explained somewhere. And that f***ing watchdog table at the administration page still messes up the layout and forces me to scroll horizontally...
Themeing with css involves
Themeing with css involves comprpmises. If you want a realitivly blank slate, try argeebee. The order in which you create your content output determines in large part how you use your css. You can view my present experiment page.tpl.php here. So, start with a mockup of what you want to achieve, then go to generating the order of output.
If you want to seperate the admin theme stuff then look at the civicspace theme. I don't plan to go that route myself but I also don;t have a lot of time to work on this right now.
-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
Drupal shouldn't compromise layout
No it doesn't. The point of CSS is that you can control how your page looks. Without an overview of what does what in Drupal the puzzle becomes a lot harder.
Using ready-made themes and copy/pasting other people's stylesheets is the easy way out, but it's not very efficient if you have a specific idea of what you want your pages to look like.
what?
Why do people only take one sentence out of context from what I write and then try and tell me I'm wrong?
Actually, yes css does involve compromises to deal with the real world of bowser versions and your specific layout and what accessability standard you want to follow, but you are missing my point.
If you have such a clear vision of what you want, then you can accomplish it with phpTemplate. Even a php neophyte like myself has manged to build a page.tpl.php template that does work. You don't have to reverse engineer anything. Just write your own template.
-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
Err.
First, you say, "Do the developers even understand CSS?"
Then you say, "I'm not a CSS expert."
Then you say, "Theming with CSS doesn't involve compromises!"
I've designed pure CSS layouts in drupal from scratch; it takes work and planning. Three-column layouts with CSS ARE difficult, especially if you have specific ideas about how those three columns should be spaced. http://css-discuss.incutio.com/?page=ThreeColumnLayouts is another good resource -- it lists dozens of attempts people have made at creating three-column layouts.
Every one of those techniques involves trade-offs and compromises because of the nature of CSS, browser compatability, and so on. Check out http://www.alistapart.com as well. It offers good resources for the sorts of challenges you'll be facing if you want to design complex layouts with pure CSS.
--
Eaton — Partner at Autogram
Customizing themes can be difficult
but customizing an existing theme is MUCH easier than building a new theme from scratch.
RE
Reverse engineering can be difficult, but, for people who learn by doing, it is a very effective way to learn. And, it's an essential preliminary step prior to developing your own theme (esp with limited CSS experience). Customizing an existing theme will help you learn more CSS, and will help you learn how the theme engines work.
RE
There have been many threads noting that some admin blocks "break" some themes -- the admin blocks are particularly rough on three column themes.
RE
An observation: you are asking for help. This quote sounds, at best, rude. While you might be frustrated, there are more effective ways of asking for help.
Cheers,
bonobo
-------
http://www.funnymonkey.com
Tools for Teachers
-------
http://www.funnymonkey.com
Pretty please with sugar on top
I'm giving feedback more than asking for help. I know by now that the likelyhood of getting answers to questions in this forum is not great anyway. I post my own answers when I find them.
I'm reporting on my struggles with Drupal and what the developers do with that is up to them. Yes, I am frustrated and I want them to know it. I've wasted almost a week with Drupal and no end in sight. Building websites is not my job, so I'm losing money - and sleep.
The main advise I got in this thread is to stick with themes because CSS is too hard. That doesn't answer my question how to build my own layout. I never had problems customizing layout in Nucleus with PHP and CSS. I still get the impression layout is an afterthought for Drupal's developers.
Advice
Dear PeterLucas,
To bad you're not accepting email, so I have to talk to you in public.
Because you visit the support forum you probably want help. The least effective way of ensuring you get help is to insult people (insult != feedback).
I've been looking through number of your posts, and I'm not too happy with them. You seem to be impatient (reposting questions after a day) and you have a tendency for inflammatory comments.
Such behaviour will only hurt the willingness of others to help you.
To remind you: people here
- are Drupal users and developers
- are in their free time
- are unpayed
- have other priorities
- have other interests
- may not have knowledge about your problem
- sleep in the night of 6-7 Oktober
- believe Google doesn't bite
- believe trial and error doesn't hurt
- believe doing your homework doesn't kill you
- do not like to be insulted
No pretty pleases with sugar on top will get you any help if people giving the help detest you. Make sure they don't have a reason to do so.
(added in edit: asking questions in the handbook is useless).
consider your own advice
There are many people in this community who see Drupal as a very positive thing. Granted, there is always room for improvement, but the idea is to work toward improvement not belly-ache and insult others. Become a contributor, not a complainer.
Consequently, since you have only been a Drupal member for a couple of weeks and do not have much invested yet, I suggest either
(a) changing your attitude and joining the comunity by becoming a positive participate within it
or
(b) cutting your losses and taking your own advice
http://drupal.org/node/34213#comment-61129
Otherwise, if you continue at this rate, eventually you'll receive little or no assistance in the forums and people will ignore you. There are best practices for becoming involved in an open source community. Your methods of complaining are not part of those practices.
Clarification
The main advise I got in this thread is to stick with themes because CSS is too hard. That doesn't answer my question how to build my own layout.
You don't seem to understand the concept of 'themes' in drupal. That's okay.
A 'theme' in drupal is just a presentation layer for the nodes and other content created by drupal's modules. It takes 'raw' information and renders it into HTML. Using PHPTemplate, there's a php-based 'tpl' file that contains rendering information for the basic HTML of each page, and node-specific 'tpl' files that control how each different type of node renders in HTML. These tpl files are pretty simple, especially with clean themes like grey_box.
CSS is a means of separating HTML semantic markup from layout and formatting information. Some Drupal themes use lots of HTML markup to accomplish layout tasks. Others render clean HTML and use CSS files to accomplish layout tasks.
Earlier, you said that CSS doesn't involve compromises. I said that it does, based on quite a few years experience working with it. That's not an attempt to discourage you, just an attempt to clarify some unrealistic expectations you seem to have of how CSS works. I pointed you to resources dedicated to solving some of the problems you're running into. I hope that didn't discourage you.
Building websites is not my job, so I'm losing money - and sleep.
Then Drupal might not be for you. It is not a turnkey system at the moment. If you don't know PHP, and don't know CSS, you CAN make drupal work. But it requires being happy with the 'out of box' options that the core Drupal install provides, OR time spent tinkering and learning, OR money to hire someone who does build websites for a living.
--
Eaton — Partner at Autogram
the answer is...
...I don't know. (To your question "Is this correct?")
I changed my theme from two other themes. I took what I liked and merge them. The rest was by trial, error and tests. In the end, the result is good!
If you really want to create a CSS theme from scratch, you should probably learn CSS from scratch too. Does that make some sence? I don't think you can use the fast track here.
Alexandre Racine
www.gardienvirtuel.com Sécurité informatique conformité, consultation et plus
A step back
Here's the deal.
themes in drupal generate html.
by default, drupal.css is included with EVERY page, as it helps define the way standard stuff like edit tabs and headers look. if you're writing a custom theme, chances are those css classes will only be seen in administrative pages.
style.css is the stylesheet that's used by default in phptemplate. it goes in the same directory as all the tpl.php files. you do your html layout in the .tpl.php files, specifying CSS classes and IDs. then, style.css contains the CSS presentation information for those classes and IDs you use in your tpl files.
In a nutshell, once you start writing something from scratch, it's all up to you. that's one of the reasons that many authors start with grey_box or one of the relatively clean 'standard' themes. Not because they're lazy or don't understand. Rather, it often makes more sense than reinventing the wheel.
That said, what you're doing -- starting completely from scratch -- is how I've designed a number of custom drupal themes. It offers more control and a better understanding of exactly what HTML your site will be generating. But you've also mentioned that you're on a very tight timeframe and you're not very experienced with PHP or CSS. Under THOSE circumstances, previous advice to start with something simpler might be good.
--
Eaton — Partner at Autogram