Serendipity Forums

Posted: **Sun Feb 17, 2008 10:52 pm**

I'm new to Serendipity and happy with the Artistic theme but the text links to other web pages in the top corner are feeble and obscure. I'd like them to stand out a little more either with graphics/tabs or move them to a new sidebar. Can I access templates to do this and where would they be? Thanks.

Posted: **Mon Feb 18, 2008 12:07 am**

You can create tabs by making whatever graphics you would like for the tab, and then change style.css to say:

Code: Select all

#nav a:link, #nav a:visited, #nav a:active {
	color: #000;
	background-image: url(yourimageurl.jpg);
	text-decoration: none; }

Posted: **Tue Feb 26, 2008 9:21 pm**

Ok, I tried this but the image I wish to use (a small heart) repeats behind the length of the tabs in two rows and also duplicates behind the title. Neither effect is what I'm looking for. I wish to add the image to the left of each tab with link text to the right, with nothing beside the title text, like this -

My Blog title text......................................................[png] text [png] text [png] text [png] text

How do I do this?

Posted: **Tue Feb 26, 2008 9:55 pm**

knessia wrote:My Blog title text......................................................[png] text [png] text [png] text [png] text

Assuming you're using the original index.tpl from the artistic theme and your image is in /templates/artistic/img/heart.png, add this to your style.css:

Code: Select all

#nav ul li a {
background: transparent url({TEMPLATE_PATH}img/heart.png) center left no-repeat;
padding-left: 20px;
}

Now, the exact value for padding-left depends on the width of your actual image (as well as the name heart.png, of course). Rule of thumb is width of the image + x - just play around with it a little.

Hope that helps.

YL

Posted: **Fri Feb 29, 2008 2:34 pm**

Hi yellowled.

Thanks for that code. Wonderful! Works perfectly.

But... the image occurs beneath the blog title text. Either I need to move/remove the image or I need the title text to be shuffled to the right. I've tried the latter but I can't get it to see spaces.

Posted: **Fri Feb 29, 2008 8:47 pm**

knessia wrote:Either I need to move/remove the image

Code: Select all

#hover h1 a { background-image: none; }

knessia wrote:or I need the title text to be shuffled to the right.

Code: Select all

#hover h1 a { padding-left: 20px; }

Pick whatever you prefer. You may have to adjust the padding-left a little to get the exact result.

YL

Posted: **Sat Mar 01, 2008 12:35 am**

Thanks for the suggestions but neither work. See the image below ~

The heart graphic appears in the top left corner under the title text. It is linked to the graphics for the tabs. I either need to unlink the title graphic or move the title text.

Posted: **Sun Mar 02, 2008 12:35 am**

knessia wrote:Thanks for the suggestions but neither work.

Try

Code: Select all

#hover h1 a { background-image: none!important; }

YL

Posted: **Sun Mar 02, 2008 3:49 pm**

Hah! I thought "none!important" was a joke. But it works.

Thanks very much for your help.

Posted: **Sun Mar 02, 2008 4:32 pm**

knessia wrote:Hah! I thought "none!important" was a joke. But it works. Thanks very much for your help.

Of course it does

You're welcome.

YL

Serendipity Forums

artistic theme page link mods

artistic theme page link mods