Changing color of blog name

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Computer5
Regular
Posts: 37
Joined: Fri Oct 09, 2009 6:51 pm

Changing color of blog name

Post by Computer5 »

Hi!

Iam using the idea style. I like to change the color of headline from grey to red and black. E.g. the word bird as a headline, should consist of two red and two black letters. Also I like to know how I can change the color of the undertitle of the headline. Can i find the codes in the Css.sheet?

Thanks for your help!
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Changing color of blog name

Post by yellowled »

Computer5 wrote:Iam using the idea style. I like to change the color of headline from grey to red and black. E.g. the word bird as a headline, should consist of two red and two black letters. Also I like to know how I can change the color of the undertitle of the headline. Can i find the codes in the Css.sheet?
Basically: Yes.

The question is which headline you're talking about. The blog's title? The entry titles? Same thing with "undertitle of the headline" -- please try to express clearer what you refer to.

YL
Computer5
Regular
Posts: 37
Joined: Fri Oct 09, 2009 6:51 pm

Re: Changing color of blog name

Post by Computer5 »

I mean the title of the blog.
e.g.
http://supergarv.de/serendipity/

Like changing the color of "garvin hicking :: blog" to "garvin (in green) hicking (blue):: blog"
Thanks for your help!
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Changing color of blog name

Post by yellowled »

Computer5 wrote:I mean the title of the blog.
Okay. First, you need an index.tpl. You're not gonna find one in /templates/idea/ of your s9y installation, so you're gonna have to copy /templates/default/index.tpl to /templates/idea/index.tpl (copy, not move!)

Now you'll have to modify /templates/idea/index.tpl using the text editor of your choice. (Get notepad++ if you don't have one, assuming you're working on windows. It works, and it's free.)

Find the following piece of code in that file:

Code: Select all

<h1><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
{$head_title|@default:$blogTitle} is a dynamic title, which unfortunately you're gonna have to replace with a static title. This means that the blog title will no longer change depending on where you or your visitors are in your blog. It will be the same on every page. There is no way around that. The good news is, you're free to pick a title. You're gonna have to replace the dynamic title with your static one, i.e. if you want your blog to be titled "My Awesome Blog", you're gonna have to edit said line like this:

Code: Select all

<h1><a class="homelink1" href="{$serendipityBaseURL}">My Awesome Blog</a></h1>
Don't forget to save the edited index.tpl. Oh, wait, you're not done yet :) Pick the part(s) of the static title you want to display in a different color and mark them like this:

Code: Select all

<h1><a class="homelink1" href="{$serendipityBaseURL}"><span>My</span> Awesome <span>Blog</span></a></h1>
Now save the file.

The characters within any pair of <span> and </span> will later be displayed in a different color than the rest. Let's assume you want those to be black whereas the rest of the title should be red. Open /templates/idea/style.css with your trusty text editor and add the following code at the very end of the file:

Code: Select all

a.homelink { color: #f00; }

a.homelink span { color: #000; }
(Yes, you can also use other colors to your liking. You just need to find the proper CSS color values.)

Save it again, and upload the edited files to /templates/idea/ via FTP. You should be done :)

YL
Post Reply