Home » Forum » Web Design Forum » Free Web Templates

Gazetteer - Customization Help

Post your questions regarding Gazetteer template customization here.

Reply to this post, adding a new comment.

‹ Editing esellout template The Gallery - Customization Help ›
Working on Gazetteer style
Submitted by Gunny@www.drupal.org on August 4, 2005 - 19:12.

Working on Gazetteer style integration with drupal 4.6 phptemplate.
Referred eferraiuolo snippet (2nd method) at
http://drupal.org/node/24827

i got the following output,

weblog

catalogue

etre

I didnt get the desired output so i peeped in to Gazetteer HTML output,

Editorial

Features

Reviews


"a" is replaced by "span" when a tab is selected.
Normal primary_links output of phptemplate has "a" for every links, how do i replace the same "span" on tab selection ?

Adapting the template to drupal's output
Submitted by Edgard Durand on August 5, 2005 - 12:16.

It's easier to adapt the template to drupal's output. You just need to modify the css file called default.css.

Find the following declarations:
.subHeader .navigation .tab {
color: rgb(175,175,175);
background-color: rgb(248,248,248);
text-decoration: none;
font-weight: bold;
margin: 0;
padding: 0.5ex 1.25em 1ex 1.25em;
border-top: 1px solid rgb(231,231,231);
border-right: 1px solid rgb(97,97,97);
border-left: 1px solid rgb(231,231,231);
}

.subHeader .navigation a.tab:hover {
color: steelblue;
background-color: rgb(248,248,248);
text-decoration: none;
padding-bottom: 0.8ex;
border-top: 1px solid rgb(97,97,97);
border-right: 1px solid rgb(231,231,231);
border-left: 1px solid rgb(97,97,97);
position: relative;
left: 1px;
top: 1px;
}

.subHeader .navigation .highlighted {
color: white;
background-color: steelblue;
border-top-color: steelblue;
border-right-color: steelblue;
border-left-color: steelblue;
}

And change them to:

.subHeader .navigation a {
color: rgb(175,175,175);
background-color: rgb(248,248,248);
text-decoration: none;
font-weight: bold;
margin: 0;
padding: 0.5ex 1.25em 1ex 1.25em;
border-top: 1px solid rgb(231,231,231);
border-right: 1px solid rgb(97,97,97);
border-left: 1px solid rgb(231,231,231);
}

.subHeader .navigation a:hover {
color: steelblue;
background-color: rgb(248,248,248);
text-decoration: none;
padding-bottom: 0.8ex;
border-top: 1px solid rgb(97,97,97);
border-right: 1px solid rgb(231,231,231);
border-left: 1px solid rgb(97,97,97);
position: relative;
left: 1px;
top: 1px;
}

.subHeader .navigation .active {
color: white;
background-color: steelblue;
border-top-color: steelblue;
border-right-color: steelblue;
border-left-color: steelblue;
}
The elements to apply the tab styles were changed, not any of the attributes. This works fine even if you remove the span elements, and unless you are using the css sliding doors effect or a similar technique, spans are not needed at all to create the effect.

Good luck with your project and welcome to our community. If you need further help feel free to post your questions in our forums.

Thanks for the snippet.
Submitted by Anonymous (not verified) on August 5, 2005 - 18:42.

Thanks for the code. It works.
aadl.org has a similar tab implementation.