Colour coding blog posts
-
I have two categories of blog post, and would like to colour code the links, so viewers can see which posts are relevant to them. I’ve spent hours searching the internet to find out how to do this, but no luck. Is it possible? And can anyone point me in the right direction?
I’m afraid my site is currently offline because I am still building it.
Thanks
Martha
-
If you can arrange your permalinks so that you can categories your links based upon then matching a specific phrase, then you will be able to have a filter add a distinct class to the link, and with custom css you will be able to add a distinct color to each category.
For example suppose my categories were: animal / vegetable / mineral, then have each post have a permalink which contained “-an-” / “-ve-” / “-mi-“, register a filter upon links, find any of the above snippets in the link and then add a class or “link_an” / “link_ve” / “link_mi” to the link classes. Then in your custom css have sections like:a.link_an { color: red; } a.link_ve { color: green; } a.link_mi { color: orange; }Thank you so much, I’ll give that a go.
Can I ask where I would find the coding for the links? I’m still finding my way around.
First from your dashboard set your permalink style, Dashboard > Settings > Permalinks, choose a style which includes the post title, OR the category name (which has your recognizable text in it). Click SAVE
Then when you edit each POST there is up near the TOP the permalink, you can EDIT it and incorporate the snippet of code the filter will sense, and save it, OR you could assign CATEGORIES. You use this link text anywhere you want to create a link to that POST, the same applies to PAGES too except that they don’t have categories.
Thank you so much for this. I’ve been having a play around, but am not getting very far. Can I use the simple CSS plugin to do this? And if not, where do I find the custom css page? When I have it, do I just add:
a.link_an { color: red; }
a.link_ve { color: green; }
a.link_mi { color: orange; }
or do I need to increase the rest of the link, eg. http://www.localhost/martha etcSorry if I’m asking very basic questions, but I’m not used to using code.
Thanks
Martha
Hi
Thank you so much for your help. Can I use the Simple CSS plugin? Or if not, where do I find Custom CSS? Could it be the Editor tab under appearance? I’ve heard about it a lot but have been unable to find it.
Also, I’ve tried going into editor and copying
a.link_an { color: red; }
a.link_ve { color: green; }
a.link_mi { color: orange; }into the bottom, and I’ve tried including the rest of the link, eg, http://www.localhost/martha etc, but neither has worked so I guess that’s not right. Is there something I’m missing or am I just doing it completely wrong?
Sorry to ask basic questions.
Thanks again.
Martha
Sorry for asking basic questions, but
Sorry for the strange post, I’ve had some problems getting my comment to register.
The topic ‘Colour coding blog posts’ is closed to new replies.