Loading...
 
Features / Usability

Features / Usability


How do I make actual wiki links more obvious

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?

posts: 4652 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

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


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


posts: 4652 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

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.


Upcoming Events

1)  21 Mar 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
8) 
Tiki birthday
9)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting