A place for the Foliage theme

Tom,

thank you for your nice comment about the theme :)
Here come some answers:

1) The original Foliage theme for Drupal 5 has been created by netbjarne. He based his theme on Drupal's core Bluemarine by implementing a very nice design.
Some time ago I took over the maintenance for Foliage and ported it to Drupal 6. I modified the XHTML and CSS and made the theme tableless by keeping the same look and feel that Foliage for Drupal 5 has.
This means: Foliage for Drupal 5 is built with tables while Foliage for Drupal 6 is tableless. Maybe I should make another release for version 5 by using the XHTML/CSS code from version 6?

2) You can copy the theme folder, rename it and upload it to your /sites/all/themes directory. This way you can keep the original theme and modify the copy.

3) If you want to upgrade the theme for Drupal 6 some additional steps are required.
You can either upgrade your modification following those steps or install Foliage's Drupal 6 version and then port your modifications from #5 to #6.

4) Your offer to give credits is appreciated :) Foliage for Drupal 5 has been designed and developed by netbjarne and so all credits for this version belong to him.
For the Drupal 6 version you can split the credits if you want in the way: design by netbjarne - upgrade for Drupal 6 sponsered by csswebsite.net (like you can read in the Drupal 6 README.txt).

I hope that my answers have been helpful.

use the firefox browser with the firebug addon to help you figure out what css is being called where.

_____________________________________________________________________
My posts & comments are usually dripping with sarcasm.
If you ask nicely I'll give you a towel : )

Hi, as I know so far you can use 6 digit colour definition as well in all style.css.
I did test foliage Theme and it works!

Cheers

Oscar,

thanks for your comment.

I agree with VeryMisunderstood: Firebug is very helpful when you work with CSS files and it's an absolutely necessary tool for people that work professionally with XHTML/CSS.

For the start you might want to experiment with the following settings in style.css. Modifying those colors will quickly change the look of your website:

- the headers: h1, h2 and h3
- the link color: a:link, a:visited, a:hover
- the block background color: .block
- the block headers: .block .title
(the bold parts refer to the definitions as you find them in style.css)

I hope that my answers are helpful. Have a lot of fun with Foliage :)

Johann

I must say, I absolutely love your theme!

I do experience a problem in Firefox 2, when I view the new version 5. The problem is that the middle column overlaps with the right. It can be fixed by switching to a smaller font size. You wouldn't happen to have a quit solution?
Thanks,

btw: rawvegandating.com is where I use the theme, in the find match section you can view the bug

Hello Linda,

First I would advice you to go to Drupal Handbooks
there you will find everything you need to amplify your Drupal and of course your WEB Programming knowledge.

If you are searching for more details on THEME you may visit Forum for Themes
and also use google and made search like type your searched word (per example theme) then add a space
and then add site:drupal.org so you will come easily to any answer you need.

Pay attention of the Drupal version you use.

For changing the title of your Site go to:

adminmenu -> administer -> site configuration -> site information

Cheers

Back to Drupal as Newby Second Level. There is nothing better then Drupal.
First Production Site e-kontakt

Hallo,
as you say , "i am very are new to CSS and HTML..." , there are many ways to change colour or add a picture to the backround of your used Theme. If you have a local server installed Webserver , i suggest you to try firts with the CSS files that are supplayed with your used Theme
in the THEME folder of your Drupal installation. Please make a copy of your used THEME folder before and give it a different name (i.e my_theme).

Here you find some example about working with CSS files Friends Electric , but of course i could help you more in details if you precise your used Drupal Version and used Theme.

Cheers

Back to Drupal as Newby Second Level. There is nothing better then Drupal.
First Production Site Theme Developing Test Site

Hi,
I just read your request and suddenly have this Theme installed on my local. I can't go in the details yet but
i give you some info where you have to look at.

The styles.css have some item that influence the overall layout of the Menu.
You have to modify (i suppose i did not test yet) following fields values:

#pageWrap
#content
#leftCol
#rightCol
#leftCol .inside
#rightCol .inside

Of course because the menu is in a Block maybe you have to work there too.
It depends also for what a Drupal Version you use this Theme too.(D5.x or D6.x)

Cheers

There is nothing better then Drupal. Please contribute
Drupal Themes Developing

I did it somehow by changing values in the styles.css, where you see 18 here:

body.left #outerColumn {
border-left: 18em solid #fff;
}
#leftCol {
float: left;
margin-left: -18em;
width: 18em;
}

This makes the left side taller. Same works for the right side.

I think that you refer to the links "No right column", "No left column" and "No left and right columns" in the primary menu.

This depends on how you organize the display of the blocks in the backend.
The columns disappear if you don't assign blocks to the left and/or right sidebars. There's nothing to change in the theme files.

Foliage uses Drupal's $body_classes variable that displays CSS class names dynamically dependent on various situations. Two of those class names are "sidebar-left" and "sidebar-right". And the settings in style.css depend on those class names.

There are different approaches:

If you want to add rounded corners around the layout you can replace Foliage's default header.jpg and footer.jpg with images that have rounded corners for example.

The blocks have no background images in the Foliage theme. You might want to create some but then you must also modify the CSS settings.

You can try scripts like Nifty Corners without a contributed module or to use the module that you mentioned in your post.

you have settings for these in your admin UI.

goto administer -> menus -> settings tabs

adjust the dropdowns accordingly.

If you have done this and are still having trouble, please further explain how you have the drops downs set.

a_____________________________________________________________________
My posts & comments are usually dripping with sarcasm.
If you ask nicely I'll give you a towel : )

Hi Eric,

the theme was coded to adjust the width of the content column dependent on the appearance of blocks inside the left and right sidebars. This means that the left and/or right sidebars are automatically showing up when you add blocks into the left and/or right sidebars in the Drupal backend.

If this does not happen I can only assume that you modified the theme files in some way. It will be helpful if you can show me the URL of your Foliage installation.

Hi ewm7712,

If i have understand right you want to make direct change in your Theme in the styles.css file.
Ok if you use FireFox or Safari you can use the great tools Firebug(Firefox) and Develop Menu(Safari 3).
Of course you may have surely make first a copy of the default theme Foliage in the /sites/all/theme Folder and give
it a new name and activate in the admin --> Theme . When you analise the .css files with the mentioned tools
you will see all css setting with the path to the relative used .css file. It sound all a bit complex but it's not
please feel free to feedback.

So at this point , of course it depends on what version of Drupal you are using, you will have an overview of all
.css setting the Theme is using. But some of them listed in Firebug or Develop Menu are default settings, this means
that thea where called by the respective modules .css files.

So to overwrite this settings you may just copy the part of settings you want to change in your custom styles.css file
and see what you want to change. Be aware that if an item is existent in your styles.css the first one will be applyed
and the second will be ignored.

Cheers

and Adsense Injector module. Don't see why it wouldn't be with the Ad module or any other drupal module for that matter. Take a look at this site

The primary links are actually displaying horizontally and not vertically. So I don't quite understand what you mean.

Take a look at the theme demo that is located at http://foliage.nr7.net. The links "Home", "No right column",... in the header are the primary links and they are ordered horizontally.

IE doesn't like me setting the font-size to 87.5% for Body, so I've used html>body in the CSS so IE can't understand, and put an IF IE in the html to make sure it's 100%.

Thanks anyway!

Philip

Really cool, well done, and thanks for sharing.
Cheers

Share your experience with the Open Source Community it's not only a choice but a Life Philosophy !!!
Some interesting A New Tutorial Site

It seems that you have made heavy changes to Foliage's original CSS settings and so I can only guess what has happened.

1) About the columns:
Maybe some content inside the blocks is too wide. Try to disable one block after another. After disabling each single block refresh the browser and see if the page is displaying correctly.
You might find the reason for the problem this way.

2) About the search bar:
I saw that you have set the header-right div to "display: inline" and maybe this is the problem. But you have modified the theme so much that I can't find the problem within a few minutes.
I suggest that you insert the original CSS settings for the header part again and then make your own modifications once more.

All settings apply to style.css:

1. Set the right column background image (or background color) in #pageWrap.

2. The left column background image (or background color) goes into #outerColumn:

But the other settings for #outerColumn must also be modified:

3. The center column background image (or background color) goes into #innerColumn.
If you don't want a background image for the center column you must at least define a background color because otherwise the background that has been applied to #outerColumn will become visible.

4. Finally add this part somewhere into style.css:

I have tested this code with Firefox, IE6 and IE 7 but it should also work in all other browsers.