Hi,

I am interested in using Drupal as a base for my website, giving me the ability to add content directly to my website from the browser.

I am not interested in using Drupal as a design for my website, I don't like the way that it starts with "everything on" ready to customise. I prefer to start with "everything off" and build things as I go.

I want to code the HTML and CSS output myself.

I have started by putting my site 'off-line' and have edited my settings.php to define a maintenance theme. I will start by designing this page and work up through all the different admin pages etc. until I am ready to put my site 'on-line'.

So, I have created a new theme folder containing the following files only:

drake.info
logo.gif
maintenance-page.tpl.php
screenshot.gif
style.css

The maintenance-page.tpl.php file is currently HTML only, no PHP, it looks like I would like.

Now, I need to make it more "Drupal", so I will start adding PHP print snippets, on thing at a time, starting with: style sheets.

So, I take out my hard-coded stylesheet reference and add: print $styles;

This dumps a load of stuff onto my site that I don't want. References to seven stylesheets, each appended with '?X' and with XHTML style tags.

To start, I just want the reference to my one stylesheet, without the ? and with HTML style tags. Where do I go from here?

James.

Comments

ytin’s picture

have you looked at the Zen starter theme? It is basically a theme framework without any styles so you can build from scratch using it.

jimdrake’s picture

yes, same sort of thing, it's not really the idea i have for 'building from scratch'.

i would like to know how drupal is serving my content and then present it in the way i would like.

for me this doesn't involve starting with templates and changing the colour of elements etc. instead starting with an empty document and adding the dynamic elements of the site one-by-one.

first of, i tried adding styles dynamically instead of hard-coded and am not sure why so many stylesheets have been added and where decisions over the html markup come from....

israelshmueli’s picture

In your custom theme info file you can override any core css file by call it again using the same file name.
for example:

stylesheets[all][] = node.css
stylesheets[all][] = admin.css
stylesheets[all][] = defaults.css
stylesheets[all][] = system.css
stylesheets[all][] = system-menus.css
stylesheets[all][] = user.css

Then you should call your custom css file:

stylesheets[all][] = style.css

You can use same technique to override and disable any css files added by contributed modules.
Just look in page source to see what you have got there from $styles
Whenever you want to revive overridden file you can always comment out it's line or copy the original file into your theme directory keeping it's name.

If you don't use any page.tpl.php in your theme you will find yourself using Core's page.tpl
Same situation with other tpl's.
So if you really want to start from scratch you should consider to copy and modify the relevant tpl files beside the maintainence page tpl.

Hope this a bit closer to what you call start from scratch

jimdrake’s picture

Hi,

So I can override the default stylesheets, but I can't remove them? Drupal is locked into needing 6+ stylesheets per page?

And where is the HTML markup coming from? Surely at the PHP stage I can get Drupal to print locations of needed files and then I get to wrap them in the HTML that I want?

To start, I am just doing a simple maintenance splash page while I'm working on my site behind the scenes. I can use things like 'print $directory;' and 'print $site_name;' which are useful, but 'print $styles;' outputs all this:

<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/maintenance.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/drake/style.css?8" />

when what I would like is this:

<link rel="stylesheet" type="text/css" href="/sites/all/themes/drake/style.css">
Jeff Burnz’s picture

Be aware that without some of those stylesheets forms, drag and drop and other admin UI will break, badly.

Drupal has CSS aggregation and compression, so its a non-issue with regards to http requests etc.

Also take a look at the stylestripper module, this is a very handy tool - http://drupal.org/project/stylestripper

Where is the html coming from - many places - templates, theme functions, preprocess functions etc, all of which can be overridden or modified. Granted its not always immediately apparent or easy to grok, but that's the price we pay for flexibility. Some things are just hard.

Dude, if you are starting from scratch then start from scratch, which means reading the documentation and probably buying some books. I'm not be rude or anything but the help around here is spread pretty thin so hand holding you through the addition of every variable aint really gonna happen, especially since a lot of this kind of thing is well trodden ground.

jimdrake’s picture

i am aware that the stylesheets are there for a reason. if i'm ditching style sheets it would only be for live webpages, i'm not interested in creating a theme that covers the admin pages, i can keep using the default theme there.

i am also aware of the hand-holding issue and that the documentation is there.

the problem i have is that the documentation is all very generic, ie. descriptions and explanations always try to encompass systems as a whole.

all i need is a few specific examples to get going, and this is where i'm finding it hard to get the info.

so for now to remain specific, all i really want to understand is the data flow for stylesheet markup. the base html must be stored somewhere, i just find it hard to back-trace stuff.

Jeff Burnz’s picture

Yeah, totally understand your back-tracing issue, if you ask me a specific question about where something comes from I can tell you, how ironic eh? Other than that it really is a matter of looking at the templates (use the Devel module Theme developer, it tells you all about template suggestions and the core template files), looking up theme functions in the API and reading lots of source code such as theme.inc.

Modules often add there own layer of templates and theme functions such as the Views, Panels and CCK modules.

I'm not really sure what you mean by "data flow for stylesheet markup".

jimdrake’s picture

what do i mean by data flow?

so first, think about a static html page, nothing dynamic > no data flow

next say you have a bunch of different php files, one per each page on your site. instead of copying the same header/footer stuff to each page, you just do a print header, print footer at the top and bottom of each of your files. you then have a file somewhere which has this info, like:

header = "all this stuff here to look like the same thing on each page innit"

this would have say one stage of 'data flow'. for me it's easy to look at a php file, see a print, then find the variable, then alter the contents of the variable.

obviously it's more complex than this with drupal.

when i look at the output of print $styles, i don't like it so i want to change it. but i can't find just a $style='all this' somewhere to edit. you mention it's possible to override stuff so there's obviously a bunch of include this, include this, get this form here etc. going on. this is what i mean my 'data flow'. probably the wrong terminology.

i should try the devel module, haven't done that yet

Jeff Burnz’s picture

Ok, then see this - http://drupal.org/node/171194

What you are asking is really quintessential to understanding the theme layer in Drupal, again it comes down to reading the docs and API etc and just playing with it.

Regareding $style='all this', I gave you a big tip, look at the stylestripper module - in particualr its implementation of hook_preprocess_page.