1

Topic: Colour on title in latest blog like links

To get the members attention on new blogs, it would be fine if the colour on the title in latest blog on frontpage (ext.latest_blog.tpl) in dark_yellowish could change from one colour to another when the member has read the blog - like the colour on a link...
Do anyone know how to do this?

- From the beginning I was intelligent, but since I learn something every day, I'm sure I'll end up wise as well -

2

Re: Colour on title in latest blog like links

Freja, If I understand what you are asking, you would have to know how Pseudo-classes work in CSS.

:link      Applies to links that have not been visited.
:visited Applies to links that have been visited.
:hover     Applies to an element which the mouse is currently over.    
:active  Applies to an element currently being activated by the user (ie: the mouse is held down over)

The order is important. If you look at your sidebar.css you will see vlad's coding:

div#sidebar div.ext_blog div.content div.item a {
                    margin: 0px;
                    padding: 0px 0px 0px 5px;
                    display: block;
                    font: 12px/24px tahoma;
                    color: #ffffff;
                    text-decoration: none; }

                    
div#sidebar div.ext_blog div.content div.item a:hover {
    text-decoration: underline;}

In this case, vlad used a (link) and a:hover (hover) for the blog links. He did not use a:visited or a:active. To acheive the effect you want you would have to use the other states of the Psuedo-class. It would look something like this:

div#sidebar div.ext_blog div.content div.item a {
                    margin: 0px;
                    padding: 0px 0px 0px 5px;
                    display: block;
                    font: 12px/24px tahoma;
                    color: #ffffff;
                    text-decoration: none; }


div#sidebar div.ext_blog div.content div.item a:visited {
    text-decoration: underline;}

div#sidebar div.ext_blog div.content div.item a:hover {
    text-decoration: underline;}

div#sidebar div.ext_blog div.content div.item a:active {
    text-decoration: underline;}

Instead of using text-decoration: underline, use a different color for each state. For example:


div#sidebar div.ext_blog div.content div.item a:visited {
    color: #FF0000;}

In this case, the link text will turn red after visited. For your effect, use different colors for the states you want effected. You could use color and underline together for each state, but most webmaster usually don't.




cheers
dan

Last edited by db3204 (2008-04-20 22:12:19)

3

Re: Colour on title in latest blog like links

This is genius! Thank you so very much Dan! smile Through my playing with css, I have learned to look for hover and active, but haven't detectet the link and visited thing - but now I do understand much more smile
Af for now, you nearly don't notice when new blogs appears in the small latest blog box. I suppose I could use a glaring colour as a:link and the default colour as a:visited + default a:hover (the a:hover colour I use on other links) but without a:active smile This colouring of the link in latest blog, is important as long as I don't use "new blogs on frontpage" before I have members enough; I find that daily or weekly articles are much more interesting for my members than a nearly dead "New blog" on frontpage... smile
I give it a try later on.... Ohh...I look forward doing it big_smile
Have a nice sunny day (like here)

- From the beginning I was intelligent, but since I learn something every day, I'm sure I'll end up wise as well -

4

Re: Colour on title in latest blog like links

Freja. You can try different things to see what works best. Instead of changing the text color, some people change the background color, some change the text sizie, some use the overline v.s. the underline,  or a combination of these things.

cheers

5

Re: Colour on title in latest blog like links

Hello Dan, this is exactly what I have done smile I changed the colour and the size on a:link, and when a member have checked the blogs content, the title become same size and colour as the other read titles....
Lovely to know about this: From now it will be much more fun to costumize:)

- From the beginning I was intelligent, but since I learn something every day, I'm sure I'll end up wise as well -

6

Re: Colour on title in latest blog like links

Freja........I just checked it out....good show.

You know you can control the letter spacing for the orange sign up button as well. If you look at your site.css you will see this code:

div#header_main a.signup {
            width: 142px;
            height: 40px;
            top: 160px;
            left: 385px;
            position: absolute;
            display: block;
            font: bold 14px/40px tahoma;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 3px;
            background: url("header_signup.jpg") no-repeat; }

The element that says letter-spacing: 3px; is what is putting the space between the letters. If you delete the line all together, it will be normal spacing. If you change the 3 to some other number, be sure to check it out after cache has cleared. For example if you made it 1px, the letters may look crunched together. You can use .5 in your numerical value -- i.e. 1.5.

Last edited by db3204 (2008-04-21 13:48:03)

7

Re: Colour on title in latest blog like links

Ahhh..this I'll check out too smile The spacing in signup button have I not looked after, because I thought that it would give potentiel members attention, but now I'll can work with this too smile  I think I'll use another colour, or font insted of this spacing.. (I also need to make another button, but this is another story wink )
Thank you Dan again!

- From the beginning I was intelligent, but since I learn something every day, I'm sure I'll end up wise as well -