Simple but effective mod of Garland theme
artatac - March 16, 2007 - 14:18
Simple but effective mod of Garland theme, using PaintShop Pro, CorelDraw and the Base.png overlayed. Thought I would share it with the community, in case it is of use.
see www.shelfanger.com
Very nice work. Perhaps you
Very nice work. Perhaps you could share us how you did it. Perhaps it would make a nice addition to the theming manual.
There are no stupid questions. Only stupid anwsers.
will do this as soon as I
will do this as soon as I can - good idea
Joe
Quick tutorial based on what
Quick tutorial based on what I did at www.shelfanger.com
First as with all learning – before you start make a backup of your site and database in case of any problems
Now go to Admin > Themes > Garland > Configure. Chose the standard colourset that most closely matches your desired end result. In this case I am choosing Greenbean. Turn off [Logo], [Site name], [Site Slogan] and [Mission statement] and click [Save configuration].
What you would (usually) now do is browse to your drupal site folder > files. > color > you will now find a new folder in color called [something like] garland-b3aeefcb > open this and find body.png.
If your site is online use ftp-filezilla (or whatever you use) to download this file to your hard disk. To save repeating myself at each stage when we work on this file locally IF your drupal site is online you will need to upload the new version via ftp to then browse the result. If working with a local server simply save and check in browser.
OK – open body.png in image editing program change its size from 1px by 280px to 1280px.by 280px or download and use the versions I have already created at http://82.69.23.179/shelfanger/files/color.zip
Save this elongated version overwriting the original (tip I always make extra copies as I go in case I want to go back a stage). If you go back to your site in a browser and refresh you should see no difference because all we have done, to date, is replace a background.png that is one pixel wide (but that repeats across the background) with a similar one that is 1028 pixels wide. Now go back to your image program > turn body.png negative > save > and check in browser and the background image should now be negative. If so we know we are working with the correct background image.
Back to the image editing program and reverse the last step, turning it back to a positive image and save. The best way forward is to create a new layer and then bring in your new photos, graphics, fancy text onto this new layer. As a test just bring in a very small photo Say 150pixels wide aand put it in the top left corner. Save and publish. (but keep it open if your editing prigramme so you can continue working. When you check again in your browser you should see the new graphic.
Waita minute... it appears to have mostly disappeared into the left hand margin!. Now some code adapting I’m afraid.
Go to files. > color > garland-b3aeefcb > open style.css in notepad and alter the line
background: #fbfaf7 url(body.png) repeat-x 50% 0;
to
background: #fbfaf7 url(body.png) repeat-x 0% 0;
Save file and and recheck in browser. However you have adapted the background in your editing programe should now be reflected in your site. If the new background elements crash into any site text or existing elements simply go back to the editing prog and resize or move them.
That should be enough for part one of this tutorial. - do give me your feedback
very nice!
I can't wait to see the next part, as I'm in the process of modifying garland based on this tutorial! I love the look of your site!
Great Tutorial
That was a really good tutorial. I can't wait for the next instalment - I would like to know how to make the top part transparent?
I tried, but cannot make it
I tried, but cannot make it transparent. I did it differently. I use random photos display on the top with drup down menu.
http://www.thanhsiang.org/faqing/
Drupal drop down mod
Hi I am trying to use your Garland mod wit this drop down menu version of the Garland theme. Have not had much luck so far. http://www.thanhsiang.org/faqing/node/59
Any pointers?
Thanks
Garland Drop Down Menu Colors
I'm still fairly new to drupal and have been using this theme. It was working great, and one day the rollover color on the drop down menu freaked out and changed on me (it looks awful). I've been looking through style.css in the garland_dropmenu folder with no luck finding a way to control this. I'm a designer and not a programmer, which doesn't help much either.
Please help!
Thanks!!
Can't stand it
Hi guys... I am quite a newby with Drupal, so forgive me if I am doing something terribly wrong. I followed the tutorial, and I have replaced the body.png for the 1280*280 version, I have uploaded it, and I have turned it negative. Then I uploaded the file, and I did not saw any difference! With other words, nothing had happened!
Can somebody please help me out and tell me what I'm doing wrong?
what that tells me is that -
what that tells me is that - that is not the body.png it is using. you could do a file search in the site dir and then one by one rename them zbody.png until your background disappears. it is most likely using one in the files/color dir
regards
joe
great tutorial
A great tutorial, I was able to convert basic garland 6.x rc3 theme into a new theme.
http://www.jaigupta.com
Thanks,
Jai
interesting..am subscribing
hi
Very cool
I also would love to see some guides on how to mod Garland. You could really replace base.png with a totally custom design, and use color.module to slice it up.
Also, I'm interested because I wrote the color.module and I've already done some work on letting it automatically compose transparent PNGs onto the base.png. Having the image slide under the template like you did is even cooler, but totally within the realm of possibility to do in code.
By the way, I noticed one small error: on the left hand side, there is a 1 pixel wide column of pink pixels.
--
If you have a problem, please search before posting a question.
Having menu links show up in content
Hi,
I'm also using Garland and am new to drupal. The light has yet to come on! I see that you have a html page with all the links at the top showing up in content - front page - which is what I'm trying to figure out. Are all of your pages written as Nodes ? If so, how do you create a node and put an image in it like you have done? I have spent a lot of time researching this out and have posted a couple of other questions on this but noone has answered me... In the menu section, where you put in the path, it says to put front between <> to have the page show up on the front. I have tried relative paths and the complete path. Both have the file open up in a new window. Any help, direction or links you can provide me would be appreciated.
Thanks!
Casey
One possible solution
Although it would be better to post this in another forum instead of replying to this thread on the Garland theme, one possible solution is to use image together with Image assist.
Images
Hi,
Thanks for the suggestions. I will check them out. Didn't even know what forum I was in. I had done a general search and was responding to this thread because it showed promise...
New to this program, so I'm making mistakes right and left!
I've been working on your suggestions and am definitely making some head way. Thank you...
Take care,
casey
Image in node... Ensure you
Image in node...
Ensure you have CCK and Image and Image_cache installed.
Image_cache define 2 new presets - mainimage (say 300px) thumbnail (100)
Define new content type (or use story) and add image field with teaser and full - set to
above **and label hidden**
Create new content type and include an image - check it works correctly
=============
And \modules\system\defaults.css
img {
border: 0;
float: right;
margin-left: 1em;
}
Image in Node
Thank you. I will do some more homework with the information you've given me. I appreciate it!
Theme design
Not a comment on your site as such but If te center column where to be % instead of fixed width then the RH column would'nt disappear so quickly when the page size is reduced.
Is it possible to modify themes to do this?
good point - but the top
good point - but the top graphic would then break. I am designing for 1024x768resolution.
beautiful
I was anxious to see what some modifications of garland would look like. I really like what you've done.
Garland Simple mod Tutorial - part 2
An example of what will be achieved by the end of this tutorial can be seen at www.venturacottage.com
Fresh install of Drupal5 > Using [Windows explorer], Go to themes folder > make copy
of Garland folder and rename custom > open custom folder > > open style.css in
notepad and alter the lines
background: #f7f1de url(bg-navigation.png) repeat-x 50% 100%;
to
background: #f7f1de url(bg-navigation.png) repeat-x 0% 100%;
and
background: #fbf9f2 url(body.png) repeat-x 50% 0;
to
background: #fbf9f2 url(body.png) repeat-x 0% -37px;
and
background: #ffffff url(bg-content.png) repeat-x 50% 0;
to
background: #ffffff url(bg-content.png) repeat-x -10px 0;
and
max-width: 1270px;
to
max-width: 1920px;
- save and close
Using your browser go to your website > admin/build/themes > enable the custom theme
and set to default > [Save Configeration] Now > [configure] and choose the color set
that you want to base your custom theme on (in my case Belgium Chocolate). Decide if
you wish to use the [Logo] and [Site name] options, or if you are incorporating them
directly into your background graphic and tick/untick accordingly. I DO use them, but
have my own home_logo.gif that works well and is available within the download >
[Save configuration]
Using [Windows explorer], Go to files > color > new folder something like
[custom-1e27bf52] view this folder as thumbnails.
Download drupalcustom.pspimage, which is a PaintShopPro v8 file, a trial version of
which is available at
http://www.hensa.ac.uk/sites/ftp.simtel.net/pub/simtelnet/win95/grafedit...
Open file - drupalcustom.pspimage, on RLS of window you will see the layer box > in
the group called GarlandColour most are inactive > turn off pinkplastic (by clicking
on the eye) and turn on say belgiumchocolate > you will see that the background has
changed. Now within [Group - main] > choose [mainimage] > Edit > Cut and the car should have gone. File > open > bring in an image of your own (anything will do for now) > edit > copy > back to drupalcustom and paste > as new selection > position top left to suit your wishes > selections >select none. To recap, we can change the base colour to whatever we want and brining an image in automatically blends it with the background. Now [File] > [Revert] > and change colour the belgiumchocolate as above > and save as drupalcustom.png > close this file
and open up drupalcustom.png again (this ensures it
is now a single layer flat image). Save it in the [custom-1e27bf52] folder as
body.png overwriting existing one > check home page in browser to view change - if
all ok continue
On RHS of PainShopPro window in Overview section click Info tab (if not already showing) > this will show your cursor position
zoom to say 300% > use the selection tool to select 0,0 to 1920x37 copy/ paste as new image > save in the [custom-1e27bf52] folder as bg-navigation.png
overwriting existing one > check home page in browser to view change
go to position 220,117 and select to the bottom right corner > copy and paste to a new image > save overwriting current bg-content.png.
Now select from top,left > 50 wide x352 deep > copy and paste as new image and save overwriting current bg-content-left.png. > check home page in browser to view change
(on bg-content.png) go to position 488,0 and select to depth 352 and a width of 50 > copy and paste to a new image > save overwriting current bg-content-right.png.
back to the new bg-content.png and crop to 200 deep. Then go from 0,478 total depth and width 10px >edit > copy. Then select from 0,488 to bottom right corner > Edit > paste > into selection > file > save > check home page in browser.
That is pretty much it. Execept to say that you should backup your [custom-1e27bf52] folder, because if you go into the theme settings for whatever reason it helfully overwrites all your custom graphics with new ones!
I hope this is useful to those like me who struggled initially to adapt themes. Let us hope others with more knowledge take this further.
A version of this tutorial with extra screenshots is also at www.ventuacottage.com/garlandmod2.htm
Thanks for part 2!
Thanks for part 2! The link to the tutorial with screenshots doesn't work and you don't have a link to the PSP file, but I found the full tutorial here:
http://vivianbeanland.com/ventura08/garlandmod2.htm
Also I noticed that you made png files available here:
http://vivianbeanland.com/ventura08/garland-mod-tutorial-files
I'm not sure what to do with these, but I'll see if I can make sense of it with the tutorial! It'd be really great to be able to make the image modifications in Photoshop, since I already have it. Cheers.
Gave it a try...
... and I'm very happy with the results! The tutorial was great; thanks for taking the time to contribute. It has given me even more ideas for other sites I'm developing.
Here's the site with a new jazzy header: http://www.clickbankaccountpro.com/
Cheers,
Kent
glad to have helped. the
glad to have helped. the site looks good - well done
regards
Joe
Thanks artatac!
I learned Drupal in the last year, my profile is graphic, so not programmer. A few site I could configured alone! Many possibilities, good forums. But I cannot design the sites as I wanted, mean graphically. Poor. I hate that most Drupal sites are tagged horizonzally and vertically, everything is square. But now, thanks ARTATAC!, I could design the fluid Garland as I want!
Here: www.zatikdr.com (It is not finished, but I like it!)
If somebody needs the PSD (Photoshop) file notice me.
And maybe I misunderstood something, but for me works only if bg-content-left.png is not croped to width of 50 px, instead I use it as wide from 220 to 478 px.
Thanks artatac, that was what I missed!
(Sorry, my English...)
Beautiful site!
I could sure use the PSD file. I am too old to relearn everything is PSP8 hehehe so if you could shoot me a PSD that would be awesome! I notice you have contact turned off in your profile, so who knows... maybe you see this maybe you dont :P
first, great tutorial,
first, great tutorial, second I have two simple issues that need a little clarification
in this part...
"Now select from top,left > 50 wide x352 deep > copy and paste as new image and save overwriting current bg-content-left.png. > check home page in browser to view change"
Are you referring to modifying bg-content.png or body.png here, it would seem to me it should be bg-content.png
and here
"back to the new bg-content.png and crop to 200 deep. Then go from 0,478 total depth and width 10px >edit > copy. Then select from 0,488 to bottom right corner > Edit > paste > into selection > file > save > check home page in browser."
What are you doing here? and when you past into selection... your pasting into bg-content.png?
lastly when you say depth or deep are you referring to in the y direction? Its a little unclear since sometimes you use (x,y) and sometimes you say width and depth
thanks
-mb
i have the same
i have the same question...
lastly when you say depth or deep are you referring to in the y direction? Its a little unclear since sometimes you use (x,y) and sometimes you say width and depth
I'm not sure what to crop. after the crop do I have a thin long (thin in y, long in x direction) piece that is 1699 (width) x 200 (height)? or narrow tall (thin in x, long in y direction) that is 200 (width) x 406 (height)? Or am I to crop off 200 off the top and leave me with 1699 (width) x (206) height? Or crop off 200 off the bottom (leaves me with the same 1699 x 206)?
as you can tell... i'm confused! :)
to clarify - a typical
to clarify - a typical computer resolution is 800x600 that it 800 wide (left to right) and 600 deep (top/ceiling to bottom/floor) - I always refer to wide and deep in those terms
Go on, get yourself a new video card. You deserve it.
A typical 5-year old laptop, maybe.
Feb 2008: 1024x768 and higher: accounts for ~91% of page accesses.
This one says the same, with 800x600 at 7%
Even in 2000, over 50% were on 1024+
Man I miss the days when 800x600 was the case. At least we had a baseline to work towards!
This month I'm working on a job where the Head guy has something like a 1600px wide, wide-aspect ratio HDTV screen (and a huge pipe), runs his browser maximized (!) and keeps complaining that the site doesn't fill his screen properly (we are forbidden from having any outside margin, he hates wasted space) and my design guy isn't happy with the way text wraps around floated images.
The content editor, on the other hand is working on a laptop, and can hardly do anything because the boss keeps saying "make the images bigger".
So we've got images 400px wide inside the WYSIWYG widow (inside the edit UI, inside the site theme and its side region, inside a browser window on an old laptop. 1024px I think, but with three layers of browser spyware toolbars on it) leaving like 40px of space for text alongside each one, and he's gotta align them left or right into an aesthetic layout - for an unpredictable screen size triple his preview space.
And as for the high-res images and video that are supposed to "fill the screen" ... well Lightbox is helping with that, but I've just not been able to convince them that 1.3MB jpegs are a bad idea to throw at the rest of the world every page. :(
The good news is that he's got a solution: People should upgrade.
Oh yeah ... and on this preview machine of his - IE6.
So much for thinking I might just be able to keep everyone happy using css-fu.
(I still do develop towards at 800x600 compatible ... as resolution or no, I think people have a right to browse in a window, not maximized)
.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/
how do you delete a reply?
how do you delete a reply?
gimp? mac?
I'm trying to do this on a mac using the gimp. Has anyone done this, can you translate for me?
at this stage:
On RHS of PainShopPro window in Overview section click Info tab (if not already showing) > this will show your cursor position
zoom to say 300% > use the selection tool to select 0,0 to 1920x37 copy/ paste as new image > save in the [custom-1e27bf52] folder as bg-navigation.png
what is the result? a 1920x37 png file that is an image with a long strip of color on the left?
and is bg-content-left.png supposed to be the part that is "over exposed" or lightened?
I need someone to translate the very precise PaintShopPro instructions into general words so I can do them in another image editor...
Thanks for some help.
gimp anyone? With garland mid tutorial
checking to see if in the time that has passed... Has anyone done a garland mod with the gimp?
Very nice!!! Great tutorial,
Very nice!!! Great tutorial, thanks!
I will put a part two of
I will put a part two of this tutorial together within the next few days
Very nice site, may I ask...
How did you implement the event feature on the right column with the Event calendar page?
Which modules did you use? Any gotchas?
Thanks,
Peter
just the events module and
just the events module and the blocks that come with it...
interesting..am subscribing
nice work
Looks very nice. I would try
Looks very nice. I would try it too but the garland theme is giving me headaches. I can generate new color themes using the color picker but i cannot use them. I guess that's because my php and mysqld run as a different username than me and i do not seem to own those generated files...
I think I have been caught
I think I have been caught out by this before. If YOU don't create the 'files' directory, Drupal does it for you and then palces restrictions on it. Any ideas how you deal with this - anyone?
Have you set file download method to Public?
Have you set file download method to Public?
The colour picker doesn't work when file download method is set to Private.
Go to Home > Administer > Site configuration
Scroll down to Download method and select "Public - files are available using HTTP directly".
Option login as apache
I have found that I need to login as apache user to update the /files/color/custom/style.css
subscribing
subscribing
nice work
nice work
nice work
nice work
Another example of using the
Another example of using the tutorial at www.one2oneclinic.com
hi..not able to upload any files to those folders
how did u do it..pls describe..
how to put a poll in the third column of the front page
Hello,
I am trying to put the lastest poll (or whatever block) on the right column of every page (Administer::Site::Bloks). It works well on every page except on the front page where it appears down in the middle column.
According to your cool exemple, you seems not have modified the css of the front page
1/ should I do something to modify the front page ?
2/ need to change my configuration ?
2/ is it a bug ?
Thank you in advance,
Michel dG
solved
Even if I didn't get any answer, I am posting the way I found according to another question :
It is a problem of access right, you have to specify explicitly "Role specific visibility settings" to every role in "Home › Administer › Site building › Blocks > Poll".
It could be a bug in the permissioning system ?
Michel
file body.png cannot be uploaded
hi..i tried numerous time..i CMOD the files and other dirs to 777..but still no use..the body.png cannot be uploaded to the site..and no file..under any name can be uploaded to the files>color>6568494edge whatever folder...
can u help me..thanks
Just to prove the point try
Just to prove the point try creating a NEW testdatabase, unzip a new version of Drupal to a new folder - IMMEDIATLY create a folder called [files]. Then start the site afresh (answer the db, user and password questions)
NOW as YOU created the [files] folder you should have no issues uploading files to it. - let me know how you get on.
THe bigger question of how you convince Drupal to let you fully interact with a [files] folder IT has created is beyond me and I hope someone can answer it for all of us...
subscribing
nice tutorial
I was able to do it without
I was able to do it without starting over. I renamed the "files" folder that Apache created. Then I created my own "files" folder and copied everything from the original file over. Now I can save to it.
Repeat-x issuess in css
Hi,
Your tutorial is great. Thanks for taking the time to write it. The only issue I have is with coding the css properly (/files/color....) With the repeat-x 0% 0; works great on a monitor of the same size as the image but on one with higher res (1440x990 or more) it will try to replicate the image 'x' to fill the screen.
Do you have any suggestions?
Thanks
Problem in resolution?
Hi,
I seem to have the same issue trying to set the bg-content.png file.
When looking in browser it does not fill out the complete content area, but somehow ends something in the middle.
Could you check this up, or if there is a possible issue I need to be careful with?
Let me have the url please
Let me have the url please and/or send style.css to me
URL and style.css
For the URL i had to set it to a working theme, the standard garland. But if you want we could set a time for you to look at the theme when not ok..
The style.css below:
/* $Id: style.css,v 1.14.2.3 2007/04/18 03:38:59 drumm Exp $ */
/**
* Garland, for Drupal 5.0
* Stefan Nagtegaal, iStyledThis [dot] nl
* Steven Wittens, acko [dot] net`
*
* If you use a customized color scheme, you must regenerate it after
* modifying this file.
*/
/**
* Generic elements
*/
body {
margin: 0;
padding: 0;
background: #f1f1f1;
font: 12px/170% Verdana;
color: #000000;
}
input {
font: 12px/100% "Verdana";
color: #000000;
}
textarea, select {
font: 12px/160% "Verdana";
color: #000000;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 170%;
}
h2 {
font-size: 160%;
line-height: 130%;
}
h3 {
font-size: 140%;
}
h4 {
font-size: 130%;
}
h5 {
font-size: 120%;
}
h6 {
font-size: 110%;
}
ul, quote, code, fieldset {
margin: .5em 0;
}
p {
margin: 0.6em 0 1.2em;
padding: 0;
}
a:link, a:visited {
color: #336699;
text-decoration: none;
}
a:hover {
color: #1a5188;
text-decoration: underline;
}
a:active, a.active {
color: #7c8b9c;
}
hr {
margin: 0;
padding: 0;
border: none;
height: 1px;
background: #747474;
}
ul {
margin: 0.5em 0 1em;
padding: 0;
}
ul li {
margin: 0.4em 0 0.4em .5em;
}
ul.menu, .item-list ul {
margin: 0.35em 0 0 -0.5em;
padding: 0;
}
ul.menu ul, .item-list ul ul {
margin-left: 0em;
}
ul li, ul.menu li, .item-list ul li, li.leaf {
margin: 0.15em 0 0.15em .5em;
}
ul li, ul.menu li, .item-list ul li, li.leaf {
padding: 0 0 .2em 1.5em;
list-style-type: none;
list-style-image: none;
background: transparent url(menu-leaf.gif) no-repeat 1px .35em;
}
ul li.expanded {
background: transparent url(menu-expanded.gif) no-repeat 1px .35em;
}
ul li.collapsed {
background: transparent url(menu-collapsed.gif) no-repeat 0px .35em;
}
ul li.leaf a, ul li.expanded a, ul li.collapsed a {
display: block;
}
ul.inline li {
background: none;
margin: 0;
padding: 0 1em 0 0;
}
fieldset ul.clear-block li {
margin: 0;
padding: 0;
background-image: none;
}
dl {
margin: 0.5em 0 1em 1.5em;
}
dl dt {
}
dl dd {
margin: 0 0 .5em 1.5em;
}
img, a img {
border: none;
}
table {
margin: 1em 0;
width: 100%;
}
thead th {
border-bottom: 2px solid #dfdddd;
color: #000000;
font-weight: bold;
}
th a:link, th a:visited {
color: #8f969e;
}
td, th {
padding: .3em .5em;
}
tr.even, tr.odd, tbody th {
border: solid #dfdddd;
border-width: 1px 0;
}
tr.odd, tr.info {
background-color: #f1f1f1;
}
tr.even {
background-color: #ffffff;
}
tr.odd td.active {
background-color: #e5e5e5;
}
tr.even td.active {
background-color: #ebebeb;
}
td.region, td.module, td.container {
border-top: 1.5em solid #ffffff;
border-bottom: 1px solid #cec4c4;
background-color: #dedede;
color: #101218;
font-weight: bold;
}
tr:first-child td.region, tr:first-child td.module, tr:first-child td.container {
border-top-width: 0;
}
span.form-required {
color: #d39000;
}
span.submitted, .description {
font-size: 0.92em;
color: #595959;
}
.description {
line-height: 150%;
margin-bottom: 0.75em;
color: #595959;
}
.messages, .preview {
margin: .75em 0 .75em;
padding: .5em 1em;
}
.messages ul {
margin: 0;
}
.form-checkboxes, .form-radios, .form-checkboxes .form-item, .form-radios .form-item {
margin: 0.25em 0;
}
#center form {
margin-bottom: 2em;
}
.form-button, .form-submit {
margin: 2em 0.5em 1em 0;
}
#watchdog-form-overview .form-submit,
.confirmation .form-submit,
.search-form .form-submit,
.poll .form-submit,
fieldset .form-button, fieldset .form-submit,
.sidebar .form-button, .sidebar .form-submit,
table .form-button, table .form-submit {
margin: 0;
}
.box {
margin-bottom: 2.5em;
}
/**
* Layout
*/
#header-region {
min-height: 1em;
background: #dddcdc url(bg-navigation.png) repeat-x 0% 100%;
}
#header-region .block {
display: block;
margin: 0 1em;
}
#header-region .block-region {
display: block;
margin: 0 0.5em 1em;
padding: 0.5em;
position: relative;
top: 0.5em;
}
#header-region * {
display: inline;
line-height: 1.5em;
margin-top: 0;
margin-bottom: 0;
}
#header-region p, #header-region img {
margin-top: 0.5em;
}
#header-region h2 {
margin: 0 1em 0 0;
}
#header-region h3, #header-region label, #header-region li {
margin: 0 1em;
padding: 0;
background: none;
}
#wrapper {
background: #f1f1f1 url(body.png) repeat-x 0% -37px;
}
#wrapper #container {
margin: 0 auto;
padding: 0 20px;
max-width: 1920px;
}
#wrapper #container #header {
height: 80px;
}
#wrapper #container #header #logo-floater {
position: absolute;
}
#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
line-height: 120px;
position: relative;
z-index: 2;
white-space: nowrap;
}
#wrapper #container #header h1 span {
font-weight: bold;
}
#wrapper #container #header h1 img {
padding-top: 16px;
padding-right: 20px;
float: left;
}
/* With 3 columns, require a minimum width of 1000px to ensure there is enough horizontal space. */
body.sidebars {
min-width: 980px;
}
/* With 2 columns, require a minimum width of 800px. */
body.sidebar-left, body.sidebar-right {
min-width: 780px;
}
/* We must define 100% width to avoid the body being too narrow for near-empty pages */
#wrapper #container #center {
float: left;
width: 100%;
}
/* So we move the #center container over the sidebars to compensate */
body.sidebar-left #center {
margin-left: -210px;
}
body.sidebar-right #center {
margin-right: -210px;
}
body.sidebars #center {
margin: 0 -210px;
}
/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
margin-left: 210px;
}
body.sidebar-right #squeeze {
margin-right: 210px;
}
body.sidebars #squeeze {
margin: 0 210px;
}
/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
margin: 60px 0 5em;
width: 210px;
float: left;
z-index: 2;
position: relative;
}
#wrapper #container .sidebar .block {
margin: 0 0 1.5em 0;
}
#sidebar-left .block {
padding: 0 15px 0 0px;
}
#sidebar-right .block {
padding: 0 0px 0 15px;
}
.block .content {
margin: 0.5em 0;
}
#sidebar-left .block-region {
margin: 0 15px 0 0px;
}
#sidebar-right .block-region {
margin: 0 0px 0 15px;
}
.block-region {
padding: 1em;
background: transparent;
border: 2px dashed #cec4c4;
text-align: center;
font-size: 1.3em;
}
/* Now we add the backgrounds for the main content shading */
#wrapper #container #center #squeeze {
background: #ffffff url(bg-content.png) repeat-x -10px 0;
position: relative;
}
#wrapper #container #center .right-corner {
background: transparent url(bg-content-right.png) no-repeat 100% 0;
position: relative;
left: 10px;
}
#wrapper #container #center .right-corner .left-corner {
padding: 60px 25px 5em 35px;
background: transparent url(bg-content-left.png) no-repeat 0 0;
margin-left: -10px;
position: relative;
left: -10px;
min-height: 400px;
}
#wrapper #container #footer {
float: none;
clear: both;
text-align: center;
margin: 4em 0 -3em;
color: #595959;
}
#wrapper #container .breadcrumb {
position: absolute;
top: 15px;
left: 35px;
z-index: 3;
}
body.sidebar-left #footer {
margin-left: -210px;
}
body.sidebar-right #footer {
margin-right: -210px;
}
body.sidebars #footer {
margin: 0 -210px;
}
/**
* Header
*/
#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
color: #ffffff;
font-weight: normal;
text-shadow: #4a4443 0px 1px 3px;
font-size: 1.5em;
}
#wrapper #container #header h1 a:hover {
text-decoration: none;
}
#wrapper #container .breadcrumb {
font-size: 0.92em;
}
#wrapper #container .breadcrumb, #wrapper #container .breadcrumb a {
color: #7390b6;
}
#mission {
padding: 1em;
background-color: #ffffff;
border: 1px solid #ede9e5;
margin-bottom: 2em;
}
/**
* Primary navigation
*/
ul.primary-links {
margin: 0;
padding: 0;
float: right;
position: relative;
z-index: 4;
}
ul.primary-links li {
margin: 0;
padding: 0;
float: left;
background-image: none;
}
ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
display: block;
margin: 0 1em;
padding: .75em 0 0;
color: #ffffff;
background: transparent url(bg-navigation-item.png) no-repeat 50% 0;
}
ul.primary-links li a:hover, ul.primary-links li a.active {
color: #ffffff;
background: transparent url(bg-navigation-item-hover.png) no-repeat 50% 0;
}
/**
* Secondary navigation
*/
ul.secondary-links {
margin: 0;
padding: 18px 0 0;
float: right;
clear: right;
position: relative;
z-index: 4;
}
ul.secondary-links li {
margin: 0;
padding: 0;
float: left;
background-image: none;
}
ul.secondary-links li a, ul.secondary-links li a:link, ul.secondary-links li a:visited {
display: block;
margin: 0 1em;
padding: .75em 0 0;
color: #d7dfe7;
background: transparent;
}
ul.secondary-links li a:hover, ul.secondary-links li a.active {
color: #d7dfe7;
background: transparent;
}
/**
* Local tasks
*/
ul.primary, ul.primary li, ul.secondary, ul.secondary li {
border: 0;
background: none;
margin: 0;
padding: 0;
}
#tabs-wrapper {
margin: 0 -26px 1em;
padding: 0 26px;
border-bottom: 1px solid #ebebeb;
position: relative;
}
ul.primary {
padding: 0.5em 0 10px;
float: left;
}
ul.secondary {
clear: both;
text-align: left;
border-bottom: 1px solid #ebebeb;
margin: -0.2em -26px 1em;
padding: 0 26px 0.6em;
}
h2.with-tabs {
float: left;
margin: 0 2em 0 0;
padding: 0;
}
ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,
ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {
border: 0;
background: transparent;
padding: 4px 1em;
margin: 0 0 0 1px;
height: auto;
text-decoration: none;
position: relative;
top: -1px;
}
ul.primary li.active a, ul.primary li.active a:link, ul.primary li.active a:visited, ul.primary li a:hover,
ul.secondary li.active a, ul.secondary li.active a:link, ul.secondary li.active a:visited, ul.secondary li a:hover {
background: url(bg-tab.png) repeat-x 0 50%;
color: #ffffff;
}
ul.primary li.active a,
ul.secondary li.active a {
font-weight: bold;
}
/**
* Nodes & comments
*/
.node {
border-bottom: 1px solid #ebebeb;
margin: -1.5em -26px 1.5em;
padding: 1.5em 26px;
}
ul.links li, ul.inline li {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 1em;
background-image: none;
}
.node .links, .comment .links {
text-align: left;
}
.node .links ul.links li, .comment .links ul.links li {}
.terms ul.links li {
margin-left: 0;
margin-right: 0;
padding-right: 0;
padding-left: 1em;
}
.picture, .comment .submitted {
float: right;
clear: right;
padding-left: 1em;
}
.new {
color: #d39000;
font-size: 0.92em;
font-weight: bold;
float: right;
}
.terms {
float: right;
}
.preview .node, .preview .comment, .sticky {
margin: 0;
padding: 0.5em 0;
border: 0;
background: 0;
}
.sticky {
padding: 1em;
background-color: #ffffff;
border: 1px solid #ede9e5;
margin-bottom: 2em;
}
#comments {
position: relative;
top: -1px;
border-bottom: 1px solid #ebebeb;
margin: -1.5em -25px 0;
padding: 0 25px;
}
#comments h2.comments {
margin: 0 -25px;
padding: .5em 25px;
background: #ffffff url(gradient-inner.png) repeat-x 0 0;
}
.comment {
margin: 0 -25px;
padding: 1.5em 25px 1.5em;
border-top: 1px solid #ebebeb;
}
.indented {
margin-left: 25px;
}
.comment h3 a.active {
color: #000000;
}
.node .content, .comment .content {
margin: 0.6em 0;
}
/**
* Aggregator.module
*/
#aggregator {
margin-top: 1em;
}
#aggregator .feed-item-title {
font-size: 160%;
line-height: 130%;
}
#aggregator .feed-item {
border-bottom: 1px solid #ebebeb;
margin: -1.5em -31px 1.75em;
padding: 1.5em 31px;
}
#aggregator .feed-item-categories {
font-size: 0.92em;
}
#aggregator .feed-item-meta {
font-size: 0.92em;
color: #595959;
}
/**
* Color.module
*/
#palette .form-item {
border: 1px solid #ffffff;
}
#palette .item-selected {
background: #ffffff url(gradient-inner.png) repeat-x 0 0;
border: 1px solid #e3e2e2;
}
/**
* Menu.module
*/
tr.odd td.menu-disabled {
background-color: #f1f1f1;
}
tr.even td.menu-disabled {
background-color: #ffffff;
}
td.menu-disabled {
opacity: 0.5;
}
/**
* Poll.module
*/
.poll .bar {
background: #ffffff url(bg-bar-white.png) repeat-x 0 0;
border: solid #ededed;
border-width: 0 1px 1px;
}
.poll .bar .foreground {
background: #8d8d8d url(bg-bar.png) repeat-x 0 100%;
}
.poll .percent {
font-size: .9em;
}
/**
* Autocomplete.
*/
#autocomplete li {
cursor: default;
padding: 2px;
margin: 0;
}
/**
* Collapsible fieldsets
*/
fieldset {
margin: 1em 0;
padding: 1em;
border: 1px solid #e3e2e2;
background: #ffffff url(gradient-inner.png) repeat-x 0 0;
}
fieldset legend {
/* Fix disappearing legend in FFox */
display: block;
}
html.js fieldset.collapsed {
background: transparent;
padding-top: 0;
padding-bottom: .6em;
}
html.js fieldset.collapsible legend a {
padding-left: 2em;
background: url(menu-expanded.gif) no-repeat 0% 50%;
}
html.js fieldset.collapsed legend a {
background: url(menu-collapsed.gif) no-repeat 0% 50%;
}
/**
* Syndication icons and block
*/
#block-node-0 h2 {
float: left;
padding-right: 20px;
}
#block-node-0 img, .feed-icon {
float: right;
padding-top: 4px;
}
#block-node-0 .content {
clear: right;
}
/**
* Login Block
*/
#user-login-form {
text-align: center;
}
#user-login-form ul {
text-align: left;
}
/**
* Admin Styles
*/
div.admin-panel,
div.admin-panel .description,
div.admin-panel .body,
div.admin,
div.admin .left,
div.admin .right,
div.admin .expert-link,
div.item-list,
.menu {
margin: 0;
padding: 0;
}
div.admin .left {
float: left;
width: 48%;
}
div.admin .right {
float: right;
width: 48%;
}
div.admin-panel {
background: #ffffff url(gradient-inner.png) repeat-x 0 0;
padding: 1em 1em 1.5em;
}
div.admin-panel .description {
margin-bottom: 1.5em;
}
div.admin-panel dl {
margin: 0;
}
div.admin-panel dd {
color: #595959;
font-size: 0.92em;
line-height: 1.3em;
margin-top: -.2em;
margin-bottom: .65em;
}
table.system-status-report th {
border-color: #dfdddd;
}
#autocomplete li.selected, tr.selected td, tr.selected td.active {
background: #336699;
color: #ffffff;
}
tr.selected td a:link, tr.selected td a:visited, tr.selected td a:active {
color: #dbe3ec;
}
/**
* CSS support
*/
span.clear {
display: block;
clear: both;
height: 1px;
line-height: 0px;
font-size: 0px;
margin-bottom: -1px;
}
/*******************************************************************
* *
*******************************************************************/
/**
* Generic elements.
*/
.messages {
background-color: #fff;
border: 1px solid #b8d3e5;
}
.preview {
background-color: #fcfce8;
border: 1px solid #e5e58f;
}
div.status {
color: #3a3;
border-color: #c7f2c8;
}
div.error {
color: #c52020;
}
.form-item input.error, .form-item textarea.error {
border: 1px solid #c52020;
color: #494949;
}
/**
* Watchdog.module
*/
tr.watchdog-user {
background-color: #fcf9e5;
}
tr.watchdog-user td.active {
background-color: #fbf5cf;
}
tr.watchdog-content {
background-color: #fefefe;
}
tr.watchdog-content td.active {
background-color: #f5f5f5;
}
tr.watchdog-warning {
background-color: #fdf5e6;
}
tr.watchdog-warning td.active {
background-color: #fdf2de;
}
tr.watchdog-error {
background-color: #fbe4e4;
}
tr.watchdog-error td.active {
background-color: #fbdbdb;
}
tr.watchdog-page-not-found, tr.watchdog-access-denied {
background: #d7ffd7;
}
tr.watchdog-page-not-found td.active, tr.watchdog-access-denied td.active {
background: #c7eec7;
}
/**
* Status report colors.
*/
table.system-status-report tr.error, table.system-status-report tr.error th {
background-color: #fcc;
border-color: #ebb;
color: #200;
}
table.system-status-report tr.warning, table.system-status-report tr.warning th {
background-color: #ffd;
border-color: #eeb;
}
table.system-status-report tr.ok, table.system-status-report tr.ok th {
background-color: #dfd;
border-color: #beb;
}
or just send me your
or just send me your bg-content.png file...
joe
My png file
http://www.lagraciadedios.org/temp/bg-content.png
As you might see the front page in that site is standard, but the png. file is the one i want to be up.
try this revised version...
try this revised version... http://vivianbeanland.com/ventura08/files/bg-content.png
Regards
Joe
try this revised version...
try this revised version... http://vivianbeanland.com/ventura08/files/bg-content.png
Regards
Joe
Thanks!!
Thanks Joe, may I know what I did wrong? ;)
Its up and running at www.lagraciadedios.org
Site looks good - well
Site looks good - well done.
Basically your image still contained the righthand corner of the "breadcrumb bar", which is hidden on a small screen but as you enlarge the window it suddenly appears - spoiling the view. I had to delete most of the RHS of your image and then replace that with a uniform piece - that could be extended as far as you need.
If you compare the 2 images it should become clear
in the tutorial at http://venturacottage.com/garlandmod2.htm
I explained it thus:
"back to the new bg-content.png and crop to 200 deep. Then go from 0,478 total depth and width 10px >edit > copy. Then select from 0,488 to bottom right corner > Edit > paste > into selection > file > save > check home page in browser"
Regards
Joe
Need a slight template mod I think...
First off thanks very much for the tutorial - the sites I have seen that use it are beautiful!! The site I want to use this on can be viewed at www.cmtravelathome.com I want to take a larger version of the small square gif and use it for this. When I use what I do have the left and right hand sides fade to white rather than the grey in the color scheme we currently have in place. How would I modify the template to fade to grey?
Thanks again!
Judi
Sorry Judi - not sure what
Sorry Judi - not sure what you mean - if you take your current background (presumably 1px wide) and stretch to 1024px wide > then overlay semi-transparent imagery to create the effect you want. Not sre what small square gif means
Regards
Joe
Got it Figured out...
And we love it thanks again!!!
i'm good until I get to this
i'm good until I get to this part crop to 200 deep:
back to the new bg-content.png and crop to 200 deep. Then go from 0,478 total depth and width 10px >edit > copy. Then select from 0,488 to bottom right corner > Edit > paste > into selection > file > save > check home page in browser.
after I crop to 200 deep (very wide in x direction and shallow to 200 in y direction) I dont get how to go to a point x,y 0,478
i must not understand the crop to 200 deep part.
can someone explain better for me? thanks!
I figured it out! I'll post
I figured it out! I'll post a re-written version of the tutorial ( I used drupal 6.1 ).
That's cool, right? Building on other work is the point.. But this is my first doc... Should I just post it as a new post here in the forums? Or in the handbook?
wondering if you had posted
wondering if you had posted the rewritten version for the last step somewhere.....I am experiencing the same problem..thanks
more than happy to have my
more than happy to have my work enhanced! do post the handbook URL back here - regards Joe
I too have used this
I too have used this excellent tutorial (part one only), and it works like a charm, until I use a higher resolution on my screen, the image repeats.
Did you get this issue resloved. I tried following the threads, but got a bit lost.
Thanks in advance.
Stephen
the key is to check
the key is to check style.css > find
max-width: 1920px;
And increase it to say 2500px
and then of course increase the width of body.png to match
Thanks for the tip, I will
Thanks for the tip, I will investigate and apply it accordingly.
Thanks for your time and have good Xmas.
Stephen
Awesome tutorial!
Thanks artatac! work in progress if you guys want to check it out.... open to suggestions
http://www.powermarketingonline.com/equilibrium
Looks good. You could
Looks good. You could consider a version where the main image is say 140% current size and the wording Equilibrium activewear runs just above the [Catalog › Tops ] bar. This would mean that part of the top logo would bleed off at the top but in such a way that it would obviously be meant to be. Your red circular design would then swoop thruough the dark blue tup area, light blue banner and also the RH cornr of the white. Where your image goes from Red > Yellow > Blue, I would consider removing the blue and replacing it with the dark blue or trying to merge the two so there is not a hard edge to where the graphic joins the background.
To experiment safely all you need to do is copy the current graphics to a new folder called 'safe' on your hd and then replace away. If you dont like the result simply copy them back
Best wishes
Joe
Thanks for the tips!
Man the past couple of weeks have been so crazy that I've lacked time to check back with you guys..Good looking out on the tips Joe I'm gonna continue modding garland until I get it perfect so I'll keep your tips in mind. In the meantime you guys might want to check what I have so far and any feedback is greatly appreciated! Keep up the awesome work guys we have a kick @ss community!
Cheers,
Dario M. Ovejero
www.equilibriumactivewear.com
nice..
subscribing...
Custom folder
I'm pretty new to Drupal, recently installed the software. In fact, I don't know much about web issues in general ;) I managed to change my header (thanks for the tips, it was really helpfull)... I uploaded my files in the custom folder created when I choose the Garland theme and the color scheme (garland-xxxxxxxx). I wanted to keep my theme fluid so I had to keep the gradient at the maximum width. It was easier for me to use the base.png file to compose my picture (and extended it to 1280 pixels wide) and cut it out in pieces after, instead of using the files (with the car) you suggested to start with as I use a two columns layout.
I also had to modify the CSS stylesheet a bit, but I needed to write this :
background: #e7e9ed url(bg-navigation.png) repeat-x -30px 100%;
background: #f5f6f8 url(body.png) repeat-x -30px 0;
background: #ffffff url(bg-content.png) repeat-x -10px 0;
I made a really simple header but this is much nicer than just put a logo in place. It would be nice to be able to simply upload a picture when using the color module, maybe a good feature to think about in the future as people always like to have custom headers... You can see what I did it at lenoyau.org, please tell me if anything is wrong.
I still have a small problem. If I need to change something, like publishing the mission (for now it's fake text), what should I do ? Each time I change something, everything disapear, a new folder is created and I have to upload all my files again. This is not a big issue but if there's a way to avoid that, I would like to know...
Another thing, I read on the "Integrating with Color.module" that we can't change the icons ("This array contains a list of images which should not be altered."), what if I want to use other icons ? Maybe I did not understand well that part... We can't altered the array or the images ?
I hope my english is not so bad ;)
Thanks for the tutorial
Great tutorial for us Drpal theming newbies.
My first attempt is at http://www.hospitalitycrew.com - still having issues with transparent PNGs and IE6 though - stupid browser that it is. I might have to re=do the template and hardwire the logo into it which I'm not looking forward to doing.
One imbuggerance I had was that using a Mac, I needed to install PaintShop Pro into my Parallels program. Has anyone out there successfully translated the tutorial and steps into Photoshop? On the surface of things, PS' slices and actions would have made all this pretty well automatic - I don't know enough about that side of things to do it at this point.
Cpngrats on the huge contribution you've made to theming though - great job.
Primary links-drop downs
Very nice implementation.
Can you please share how you got drop down menu's working for your primary links in the header.
Thanks,
Gerry
=-=
the menus are simply a core function of drupal.
primary links and secondary links
these can be investigated in administer -> menus -> settings tab
basically:
you have a parent (primary) menu item
then you child (secondary) menu items to the parent (primary) that show when the parent (primary) is clicked on
_____________________________________________________________________
Confucius says:
"Those who seek drupal answers should use drupal search!" : )
Having to actually click on
Having to actually click on the menu to display underlying submenus is a break of workflow, in my opinion.
Sub-menus should display on mouseover of the parent - this is what I expect and why I eventually went for something like nice menus.
Hi Gerry, I did a fair
Hi Gerry,
I did a fair amount of looking for getting drop downs to work in Garland - I thought they'd work out of the box but I was unable to get it to work.
I ended up using Nice_Menus, altering some of it's CSS to work in the same area as the primary links to the right and re-worked the little arrows in Photoshop to get rid of the grey standard ones. I'm pretty happy so far except for any 3rd level sub-menus which are currently flying out horizontally - logged a support ticket for that one.
Faqing's pull down menus
I have used this garland mod tutorial with faqing's graland drop menu http://www.thanhsiang.org/faqing/node/59
Still on localhost though.
Look forward to seeing what
Look forward to seeing what you've done.
Garland Modified Theme and Drop Downs
Got the theme working and we love it! I also have the drop down menus working (still buggy in IE6 though) if anyone is interested in helping with that let me know. I used Nice Menus as mentioned above with heavy modification to the style sheets as well. You can see the live version here:
http://www.cmtravelathome.com
UN: guest
PW: guest
Please let me know what you think as this is my first attempt at a drupal website and we launch soon!
Judi
Nice
Nice work Judi. How did you get the transparent image at the top (area around your Home link) to stretch to the right?
Also; if possible pl share how you implemented tabs within your pages. I see there are two different implementations for tabs.
A mod of garland with drop
A mod of garland with drop down menus at
http://www.bica.net/
BICA website
Hello,
I am interested to know how you made the drupal drop down menus for the primary links in your site ?
Can you explain what you did ?
Thanks,
Tim
I couldn't stand it any
I couldn't stand it any longer :)
I redid the template and hardwired the logo so it had compatability with IE browsers - also added 10px of outer glow for better readability.
The problem with the vertical menus wasn't a problem after all. I'd changed the sizing of the menus and not the parts that denoted the distance for the subsequent vertical menus. Once I tweaked to that, a few more CSS mods saw the 3rd level menus act as I'd hoped. Pretty happy with it now for it's first play in the real world which is being advertised in a few days.
In these new body.png i
In these new body.png i notice you all have the bg-content.png layered on top of body.png how did you do this and why ?
Its part of garland and
Its part of garland and means that the middle section header can expand and contract
Teaser image thumbnail and full image in full node?
What modules and how did you get the image on the teasures to be thumbnail and the full node view to be larger image. Did you use image cache and image asssist and add the image to the body or did you create a custom field for the image. I can't seem to get a thumbnail for the teaser and a full image on the actual page inserting in the body field. I can make it work with a custom field but then I have little control where the image is placed. Any thoughts?
Try this... Settings > image
Try this...
Settings > image cache > main > scale > 300 width
Thumbnail > scale > 100, 100, outside >
Crop > 100, 100, center center > weight 3
admin/content/types/story/add_field > image > 800x600
admin/content/types/story/display > hidden, thumbnail, main
Modules/system/defaults.css
.field-type-image img {
float: right;
margin-left: 10px;
margin-right: 0px;
margin-top: 4px;
margin-bottom: 0px;
border: 0px solid red;
Looking for a little more tweaking
Has anyone done this with a transparent type rotating image using transitions when image changes?
my body.png looks different
my body.png looks different in firefox browser, is there any extra settings we need to add to the image ? It appears that drupal does a good job of png format but once you make your own modifications it changes.
Colours might vary slightly,
Colours might vary slightly, but that is it what is different, have you got a url I could look at?
I'm very surprised nobody
I'm very surprised nobody addressed the fact that its virtually impossible to simply save a png image over the existing one without doing some adjustment to it, therefore the initial instructions left out some critical info. You have to turn your new body.png into a transparent otherwise it will look very different in other browsers and it won't be the same as the one generated from drupal.
Maybe it is the type of
Maybe it is the type of imape prog you are using because I have never had a problem using Paintshop Pro and I have now done about 10 mods