Adding backround colour and logo to tagged posts

• 

  ralphlowerson · Member · Nov 20, 2018 at 1:00 pm

  • Copy link
  • Add topic to favorites

  Hello
  Is it possible to add colour and an icon to tagged posts? For example, if we tag a number of posts with Webinar, we want users to see all posts tagged with Webinar and for those posts to have a certain HTML colour with a relevant logo placed inside each post.

  I’ve tried this so far but to no avail

  .tag-blackboard {
  background #d4dfac;
  border: 3px solid black;
  padding: 10px;

  }

  .tag-blackboard {
  background:url(https://uocltteam.files.wordpress.com/2017/02/blackboard_thumbnail.png) no-repeat top right;
  }

  many thanks

  The blog I need help with is: (visible only to logged in users)

• 

  amylynnlock · Member · Nov 24, 2018 at 5:19 pm

  • Copy link

  Try this code:

  
.tag-background {
background:url(https://uocltteam.files.wordpress.com/2017/02/blackboard_thumbnail.png)
top right
no-repeat
#d4dfac;
border: 3px solid black;
padding: 10px;
}

  Your code had the background property called twice for the same selector so the second calls defaults (which includes a background color or transparent) would override the earlier one.

  Hope this helps!

• 

  ralphlowerson · Member · Nov 26, 2018 at 10:08 am

  • Copy link

  Thanks Amy, I’ll try this later today and let you know how I get on. Have a great day.

  Ralph

• 

  ralphlowerson · Member · Nov 26, 2018 at 10:48 am

  • Copy link

  Hi Amy

  That worked, but is it possible to add multiple thumbnails in a post using CSS depending on the tags associated with that post? For example. If we wrote a post on Identification but tagged the post with, “identity” and “security” could we use CSS to pull in 2 thumbnails from the media gallery and have the aligned?

  Many thanks

  Ralph

• 

  amylynnlock · Member · Nov 26, 2018 at 6:57 pm

  • Copy link

  Yes, you can do that. You can make a CSS rule for each tag and add the image in that rule for the associated tag. Any post with multiple tags will have a class associated with each tag so all the CSS rules that apply to a given post will be called.

  I hope that makes sense.

  As for getting them to line up properly, I am sure this can be done but I have never had to do this. If you add another thumbnail and add the associated tag to a post (so that a given post would have two thumbnails associated with it), I would be happy to play a bit. I think I could figure it out but I don’t know till I try. :)

  If I can’t line them up nice I bet someone on here can.