Loading...
 
Skip to main content

Features / Usability

Forum List Topic List

 
Thread actions
Print this page
  • Print all pages

    • CSS: how to make hyperlinks IN titlebar different colour

    Posted by WillemB

    Hi,

    I'm struggling a bit with this one. I'm using a modified olive.css. Hyperlinks in wiki pages are black. This causes a problem when I want to have hyperlinks inside a titlebar on the wiki page. Titlebars have white text, but the hyperlink coding overrides this to black, which is ugly.

    I would like to make a new class (to seperate standard hyperlinks from hyperlinks in titlebars), but I don't know how to go about this. Can anyone help me?

    Regards,
    WillemB

    Reads: 1404

    Posted by WillemB

    Thanks for your reply Mykk. It might be that you have just handed me the raw solution but if that is so, I have no clue on how to use it... I don't understand.

    Can you or someone else elaborate?


    Posted by Mykk

    Well, Willem, this is where you and I would have to struggle together. Me, because although I'm pretty good with HTML and CSS I'm new at TikiWiki, and you're sounding new too.

    To really help you, I'd have to know the .tpl file you are editing for your wiki page. I read somewhere that the name of the tpl file should match the name of the php file. Can you tell me that so I can look at it?

    In that file, you should be able to find where your title bar is. Let's say you have in the title bar of the Wiki page "My Site Rocks .com". Somewhere in the code you should find something that looks like a href="http://www.mysiterocks.com/" class="pagetitle" My Site Rocks.com

    It's the 'class' attribute that tells the olive.css file how to present the title. So in my example, the 'class' would be 'pagetitle' (class="pagetitle").

    In the olive.css file, scroll down about a third of the way, and you will see -When the page title is a link this is the style-, and underneath that you will see 'a.pagetitle'. In that you will see 'color: black'. This is where you could change the color to red or blue or whatever.

    In the next 'paragraph' you will see 'a.pagetitle:hover' which is what happens when you hold your mouse over the link. I see the default is again 'color: black'.

    If you change the first one to blue, and the second one to white, it would become a blue link that turns to white when you hold the mouse over it.

    Between the above information, and the tutorial link I provided in my first reply, hopefully you can piece it together. You talk of "modified olive.css" and all the right lingo, so hopefully you can find a file and edit it.

    If you wanted to create a totally specific style to that hyperlink, copy the whole 'a.pagetitle' section and paste it right below it. Change 'pagetitle' to something like 'mytitlestyle' so it would read 'a.mytitlestyle'. The go back into the original tpl file and change where it says "class="pagetitle" to "class="mytitlestyle".

    I don't mind helpingit's nice to be able to actually answer a question since I know I'll have many of my own down the linebut hopefully this helps you because if it doesn't, we're in trouble 😉

    --Mykk