Loading...
 
Features / Usability

Features / Usability

Forum List Topic List

Forums » Features / Usability » How do I make actual wiki links more obvious
 
Thread actions
PDF Print this page
  • Print all pages

    • How do I make actual wiki links more obvious

    Posted by macrocystis posts: 11

    I'm using the theme Tikinewt (without shadows).

    When you create a link that doesn't go anywhere, it's highlighted in red.

    Once you have created the page it links to, the link is almost indistinguishable from unlinked text. So users don't know they can click on the carefully-created hyperlinks!

    I guess it's something I can fix by editing the underlying CSS, but I can't find where in the CSS to fix it. I can see that 'uncreated' wiki links have class="wiki wikinew text-danger tips" whereas 'already created' wiki links have class="wiki wiki_page". But I can't find these classes iin the CSS anywhere.

    What should I do to make real links more visible?

    Reads: 2280
    Link
    Posted by Gary Cunningham-Lee posts: 4656 Japan

    You can add this rule in the Custom CSS text area under the Customization tab on tiki-admin.php?page=look:

    Copy to clipboard
    a.wiki { color: #2b68a5; }
    .


    I just picked that as a brighter blue than the one that's currently used for links in the Tikinewt theme. You can of course use another color by adjusting the color code. I'm suggesting using a custom setting on the Look and Feel admin page rather than modifying the stylesheet, since it will be overwritten when you update the site. Plus it's easier to use this admin gui than to edit the theme stylesheet.

    You're right that the links aren't very distinct. I'll modify the color in the next release.

    -- Gary

    Link
    Posted by macrocystis posts: 11

    Gary,

    I would also like to make the hyperlinks in search results more obvious to my users.

    Again, looking at the CSS makes me think that class objectname could be overridden to make this work; but putting Custom CSS in like
    objectname {color: #aaaaaa; }
    makes no obvious difference; so once again I am looking in the wrong spot.

    Can you tell me what class I need to override with Custom CSS to make this work?

    Is there a general way to know what classes to work on so I don't have to keep asking here?

    Thanks
    Graham

    Link

    Posted by macrocystis posts: 11

    Thanks Gary

    Actually I put this in:
    a.wiki_page { color: #2b68a5; }

    That way, I still see the difference between links to existing pages and links to pages yet to be created,

    Best
    Graham

    Link

    Posted by Gary Cunningham-Lee posts: 4656 Japan

    That's a good solution, Graham.

    Maybe the best way to find the CSS class of a page element is to use the DOM inspector that's available in your web browser. For example, in Chrome, in the menu go to "More Tools", then "Developer Tools" (or use Control + Shift + I keys - on Windows anyway). This brings up a pane that shows the page source code and CSS styles. There's an icon to click (looks like a rectangle or rectangle with a pointer on it) that enables you to hover over the page and click elements to select them, to get their CSS class or id and properties.

    I think all browsers - or at least the most common ones - have this feature.

    -- Gary

    Link
    Posted by macrocystis posts: 11

    Thanks Gary,

    In Firefox, I use the Inspector which does this.

    I eventually created this Custom CSS:
    a { color: #2b68a5; }

    This generally makes links stand out from content.

    Link