Links in Andreas00?

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
siringo
Regular
Posts: 92
Joined: Fri Jul 28, 2006 5:39 am
Location: Australia
Contact:

Links in Andreas00?

Post by siringo »

Can anyone help me with this? I've just found the Andreas00 theme and it is just about perfect for what I want but ...

I have a few questions.
1 - How can I change the backgound color, and
2 - How can I put some links under the image? Eg: a persistant link/button to the homepage and links to other pages/areas.

This is a great theme, thanks in advance.
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Links in Andreas00?

Post by garvinhicking »

Hi!

I think the easiest way to achieve this is by editing the "index.tpl" template of that file and inserting your required HTML there. Then you might also need to edit your style.css to change the background-color of the correspondig elements?

Best regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway »

The background for andreas00 is a grey image with gradients and this needs to be edited in photoshop or some other image editing program. Alternatively, replace the background style in the body section of the stylesheet. So instead of

Code: Select all

background:#eaeaea url({TEMPLATE_PATH}img/bg.gif) top center repeat-y;
you might change it to a white background like this

Code: Select all

background-color:#ffffff;
Adding a navbar is more complicated, the header part of the design needs a new div added after the $head_subtitle code but before the closing </div>
Try this to begin with

Code: Select all

	<div id="navbar">
				<ul>
    				<li><a href="#">About</a></li>
    				<li><a href="#">Photos</a></li>
    				<li><a href="#">Projects</a></li>
    				<li><a href="#">Music</a></li>
    				<li><a href="#">Contact</a></li>
				</ul>
			</div>
Then in your stylesheet, add the following basic properties

Code: Select all

#navbar {top:220px; position:absolute;height: 30px; padding: 0px; width:100%; margin:0px; }
#navbar ul {list-style-type: none; padding: 0px 0 0 5px;margin: 0px;}
#navbar li {float: left; margin: 0px 10px 0 0 ; padding: 0px; display: block; }
#navbar li a, #navbar li a:link {text-decoration: none; padding: 0px 5px;
	display: block; border: 0px; }
#navbar li a:hover {text-decoration: underline; }
With a little bit of luck that should give the basics, then you will need to adjust your margins and paddings, and add your own colors nd backgrounds.

Good luck

Carl
siringo
Regular
Posts: 92
Joined: Fri Jul 28, 2006 5:39 am
Location: Australia
Contact:

Post by siringo »

Thanks for your help fella's I'll get into over the weekend I hope. :D
Post Reply