artistic theme page link mods

[knessia]

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.

[TopDawg]

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

[knessia]

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?

[yellowled]

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

[knessia]

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.

[yellowled]

Either I need to move/remove the image

Code: Select all

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

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

[knessia]

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.

[yellowled]

Thanks for the suggestions but neither work.

Try

Code: Select all

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

YL

[knessia]

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

Thanks very much for your help.

[yellowled]

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