By dkashen on

Hi,

I'm trying to learn drupal and rudimentary css by working with my
first drupal install and the friendselectric theme.

To help sort out things, I've modified the .png references in the
style.css file to be .png that include graphical representations of
their role (eg header-left.png is a picture of "header-left.png".)
Everything shows up graphically according to it's role.

However, I'm finding I don't understand the rules or conventions that
determine which .png (or other images) end up on top or otherwise, and
whether this is a css issue or a friendselectric theme issue.

Can someone point me to some documentation for the interaction between
css style files and themes ?

Thanks,
D

⋅ Categories: Drupal 4.7.x

Comments

pembeci’s picture

pembeci commented

There are no easy rules to understand these relations because every theme can work differently. As a side note friendselectric may not be the easiest theme to start learning these things. Drupal only handles the logo image, all the rest of the images comes with a theme so their usage is only dependent on theme's css and tpl.php files.

  <?php if ($logo): ?>
    <a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" 
      alt="<?php print t('Home') ?>" id="site-logo" /></a>
  <?php endif; ?>

This part of the page.tpl.php file of friendselectric handles the HTML for the logo image. Since Drupal handles the upload of the logo image at the admin pages the theme reads the address from variable $logo.

Most of the images that come with themes are used to paint backgrounds of certain html entities or certain parts of the page. Check this tutorial to see how CSS can be employed to do this:

http://www.tizag.com/cssT/background.php

To see how friendselectric uses them, copy the image, make a small change (so the dimensions remain same) and then use this new image at the css.

dkashen’s picture

dkashen commented

"Drupal only handles the logo image, all the rest of the images comes with a theme so their usage is only dependent on theme's css and tpl.php files."

Now, I know where to look . thanks!

"As a side note friendselectric may not be the easiest theme to start learning these things"

Can you suggest another theme that would be more straightforward ?

Thanks again,

styro’s picture

styro commented

Bluemarine as a good base for learning how themes work, and for developing your own.

FriendsElectric can look good but it has more complex CSS and markup, which makes it much harder to figure out how it works.

--
Anton
New to Drupal? | Forum posting tips | Troubleshooting FAQ
Example Knowledge Base built using Drupal

pembeci’s picture

pembeci commented

I agree, bluemarine is a good start to learn "rudimentary css". friendselectric uses a lot of div wrappers, so it is not very obvious how it uses background-image to achieve its look. I suggest starting with simpler themings features, like try changing the color of node titles (hint: <h2 class="title">) , try adding a message to the bottom of the nodes (hint: node.tpl.php), try to add a drupal logo to the footer (hint: page.tpl.php and <div id="footer">), try making the links at sidebar blocks 18pt (hint: sidebar block a {font-size: ...}), try increasing the border thickness and color of some boxes you see.

By simple tasks like this you can learn how css and phptemplate works together to theme drupal pages.