Simple but effective mod of Garland theme

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/

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!!

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

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! :)

checking to see if in the time that has passed... Has anyone done a garland mod with the gimp?

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;
}

Thanks for the tip, I will investigate and apply it accordingly.

Thanks for your time and have good Xmas.

Stephen

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.

I have used this garland mod tutorial with faqing's graland drop menu http://www.thanhsiang.org/faqing/node/59

Still on localhost though.

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.

For some reason, body.png is visible now.
Problem is solved, looked like a cache issue.

Regards,
Peter

Ok, so my code was a little off. I changed the above style.css lines to:

#wrapper #container #center #squeeze {
  background: #ffffff url(bg-content.png) repeat-x 34px 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 80px;
  background: transparent url(bg-content-left.png) no-repeat 0 0;
  margin-left: -10px;
  position: relative;
  left: -10px;
  min-height: 400px;
}

and it's almost fixed....

There is just one little piece that is offset 30-45 px to the left. I assume it has something to do with the total depth of bg-content.png. It was originally 200 and I adjusted it to 240 to match the 20% increase throughout.... I'll keep tinkering lol