By iwant2fly on

I have been using drupal for a while, but I am terrible at themes and editing them so I would appreciate relatively simple directions. I am trying to redo our company's web site using drupal so that we have a foundation on which we can expand our web site easily. I am trying to set up a 3 column fixed width theme with a header and footer with a background that looks like our current static site. www.jamesriverpress.com Basicly I just need the "edges" of the paper and a solid background color. I am thinking that I need a background image for the header that is the correct width, and a background image for the footer also the same width, then a repeating image justified to the left in the left column and a repeating image justified to the right in the right hand column. A well as setting the background color. I am using the Zen theme as a base , and have used Zenophile to create a sub-theme that I am trying to edit. Am I on the right track? How should I go about this?

⋅ Categories: Drupal 6.x

Comments

iwant2fly’s picture

iwant2fly commented

Any ideas for someone totally new to themeing?

iwant2fly’s picture

iwant2fly commented

Thoughts anyone?

sovarn’s picture

sovarn commented

yeah thats the basic technique. just try it first and if you need for help post a message.

thorshammer’s picture

thorshammer commented

... I also happen to be developing a new sub-theme using ZEN. If you haven't already, its a good idea to get to know Drupal's theme structure, specifically page.tpl.php (unless you don't know any PHP), and the zen.css stylesheet. That PHP file of course lays out the basic page structure in terms of divisions, and the stylesheet completes the structure with precise positioning, sizes, colours, backgrounds etc.

I'm not familiar with Zenophile, but in the process of starting a sub-theme based on Zen I'd imagine you have copies of the page.tpl.php and zen.css files in your sub-theme folder - as well as a zen.info file. (The latter two should be renamed to reflect your sub-theme name.) If not, copy the 3 files over from the Zen folder, rename the .css and .info to the name of your sub-theme (leave the php file name intact), and update your .info file to reflect that css name. (Any text editor will get you into the .info file.) Then start editing your stylesheet to get the backgrounds and colours you want. If you know PHP, tweaking the tpl.php file might also help your cause - but changing css should be sufficient.

ps. jamesriverpress is a nice clean website - keep it up.

iwant2fly’s picture

iwant2fly commented

Thanks for the feedback. Unfortunately I do not know PHP at all and I struggle with CSS. I only dabble in web development and learned the basics when Front Page was new and cool. I am trying learn, but its a daunting task. At least I now I am on the right track. If anyone has an specific directions on where and what code I should enter to get a repeating background into each of the side columns I would appreciate it. The drupal community is what makes it a great system. I have never had so much fun learning a new way of doing things.

sovarn’s picture

sovarn commented

it really depends on what theme you are using. are there any sidebars etc?

also the middle of the page (from your link) is not a solid colour so will also have to be a background.

Are you going to also have a fixed height for the site?

iwant2fly’s picture

iwant2fly commented

I am starting with the Zen theme. Fixed width, Variable height, 3 Column Layout with a header and a footer. I am going to have the background be a solid color, similar to the current site, and I just want to create an image that looks like the "edge" of a piece of paper, that transitions into the color of the solid background. My question is how do I put a repeating image into the right or left column of a zen sub theme, and how do I set the background color?

sovarn’s picture

sovarn commented

set the css for the left block as:

background: white url(images/left.png) repeat-y top left;

just change the colour and the image location. this will position the background image to the left.

atavision’s picture

atavision commented

I am also new to drupal, by way of building websites on Dreamweaver, I too have no real understanding of CSS.
Is it possible to change the page colours on the Zen theme without any of this coding knowledge?

I was hoping that changing the colours of various parts of the pages, like the first sidebar background, or
second sidebar background, would be easy like it is in Wordpress themes.

Is there any tutorial out there that lays out how to do these sort of appearance changes to the Zen
theme (drupal 7)?

I'm sure there are plenty of us out there that would benefit from something like this.

krainsong’s picture

krainsong commented

I am also trying to do the same thing. I need basic instructions for changing the CSS to get my page background and header images to appear on the Zen sub-theme for Drupal 7. I have pretty good familiarity with CSS, but with 16 style sheets to choose from, I'm lost. I tried changing the pages.css to this;
#header {
background-image:url(images/header.jpg) no-repeat;
height: 224px;
}
and on page-backgrounds css I tried this;
#header {
background: url(images/header.jpg) no-repeat ;
}
but got no change after uploading, even after visiting the Appearance section on the site.
Any ideas? I also can't seem to get the page background to appear, it's a small strip that would repeat y down the page.
thanks for any help.
Karen

hansyg’s picture

hansyg commented

Hi Karen,

If it is repeat-y you might want to try

#header {
  background: url(images/header.jpg) repeat-y;
  height: 224px;
}

HTH,
Hans

ontological’s picture

ontological commented

You might try the Mayo theme. You can change more of the options within the admin UI via the Appearance settings for the theme. I've found it to be pretty flexible (for example, having a border around the page is a snap).

It is not as easy to sub-theme as Zen though. So if creating several sub-themes is a requirement Zen might be a better choice.

Hope this helps.