By ClayTrainor on

Hi, I'm brand new to drupal, and i was just wondering how i can modify and play around with my themes.

I have other sites that i built with CSS and html, that i would like to port over to drupal but i dont even understand the basic theme help section .

Here are the first 3 steps i came accross

"Which ever theme you choose to work with you will need to know how to accomplish some basic theme tasks.

* Find and open a Cascading Style Sheet(CSS) file for your theme
* Copy and paste CSS code
* Learn the CSS attributes in your theme"

i get stuck at the "copy and paste css code" step... where do i paste it to?

any recommended reads for the absolute newb?

⋅ Categories: Drupal 5.x

Comments

gopher’s picture

gopher commented

You need to learn how Drupal's theming engine works. It's called PHPTemplate, and you can find a good overview of it here: http://drupal.org/phptemplate

Basically, if you wanted to port a static html/css page to PHPTemplate, you would create your page.tpl.php using your normal index.html code, then add in the desired dynamic PHP snippets where appropriate. The best way to do that is open the default Garland page.tpl.php, and copy/paste the php snippets where you want a dynamic title, sidebar and content to go etc. Paste your existing css styles into style.css in your theme directory, then see how things turn out as you may need to re-style some parts of the page because Drupal adds a lot of markup. Find a good DOM inspector and go to work styling the code that is generated by Drupal (it usually comes with handy id's and classes).

It's a lot to take in at first, but once you understand PHPTemplate it's very very easy (so long as you understand the basics of how html/css/php works in general).

PRFB’s picture

PRFB commented

Elliott Rothman put together several great videos on theming, CSS, and other aspects of Drupal site setup....

http://theartlab.net/podcast/drupal-school

3goose’s picture

3goose commented

If you use a well marked up page.tpl.php you can just play with the CSS to get the look and layout you want. It sounds like you know CSS. If you do, use a sold theme (zen theme is a good one to start from) find your style.css file, make a backup, then begin changing what you need.

Look in either /sites/all/themes/[theme_name] or /[theme_name] for the style.css file.

I don't know whether it's always called style.css, but it has been in every theme i've checked out.

cableray’s picture

cableray commented

I perfer the foundation theme. It uses fluid sidebars and simpler code. Les. features though. You can grab some from zen though. I don't like the fact that foundation uses classes were it should use id's.

fresh-off’s picture

fresh-off commented

Clay, i suggest you download chapter 8 from "Pro Drupal Development" for free (or buy it - it's a great book):
http://apress.com/ApressCorporate/supplement/1/10258/1590597559-4237.pdf
Chapter 8 is all about theming.

because I happen to be a designer, understanding how to implement a grid based design from scratch in drupal was VERY important to me! This tutorial describing panels and views helped me to understand that:

http://ryan.grinhost.net/tutorial/2007/anatomy_front_page

Hope that helps!

-brendan

ClayTrainor’s picture

ClayTrainor commented

hey, thanks alot to all of you for your help, you definitely gave me some good resources, exactly what i was looking for.

I bought "Pro Drupal Development" so now im just waiting for it to arrive.

Drupal school will fill the void until it arrives.

thanks alot everyone!!!

i'll try to return the favor when i learn something about drupal, lol