Custom categories and tags mention

css

(Daniela) #1

I have some css issue in my custom mentions about categories and tags.

We use a few line of css to custom all mentions, so users and groups look like this:

  • users:

  • groups:

I’d like to do the same thing for categories and tags but the results are strange, some categories and tags remain still in black:

Surely it is something stupid that I forgot to change but any help is much appreciated.

Here the Css I’m using

USERS

/*Menzioni User*/
a.mention {
    color: #337AB7;
    background: rgba(51, 121, 182, 0.1) none repeat scroll 0% 0%;
    border-radius: 4px;
    border: 1px solid #337AB7;
    padding-top: 1px;
    padding-right: 6px;
    padding-bottom: 1px;
    padding-left: 6px;
    font-weight: bold
}
a.mention:hover {
    color: #001A8E;
    border: 1px solid #001A8E;
    font-weight: bold
}

GROUPS

/*Menzioni gruppi*/
a.mention-group {
    color: #FC5D00;
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0% 0%;
    border-radius: 4px;
    border: 1px solid #FC5D00;
    padding-top: 1px;
    padding-right: 6px;
    padding-bottom: 1px;
    padding-left: 6px;
    font-weight: bold
}
a.mention-group:hover {
    color: #BE0303;
    border: 1px solid #BE0303;
    font-weight: bold
}

CATEGORIES AND TAGS

/*Menzioni Categorie e Tags*/
a.hashtag {
    color: #29BF00;
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0% 0%;
    border-radius: 4px;
    border: 1px solid #29BF00;
    padding-top: 1px;
    padding-right: 6px;
    padding-bottom: 1px;
    padding-left: 6px;
    font-weight: bold
}
a.hashtag:hover span {
    text-decoration: none;
}
a.hashtag:hover {
    color: #1E8C00;
    border: 1px solid #1E8C00;
    font-weight: bold
}

Plus, it would be great if tags mention would use a different class from categories mention so that you can customize them easily


(Daniela) #2

I’ ve said I lost something stupid… I forgot to add !important and a line of css too:

a.hashtag:visited {
    color: #29BF00;
}

BTW I’d like to use a different color for tags mentions if it is possible.


(Joe) #3

I’m on a bit of an archaeology trip here and just had this come up :sweat_smile:

I was trying to do the same thing, here’s what I ended up with:

a {
	// User mention
	&.mention {
		color: red;
	}
	// Group mention
	&.mention-group {
		color: green;
	}
	// Category mention
	&.hashtag[href*="/c/"],
	&.hashtag[href*="/c/"]:visited {
		color: blue;
	}
	// Tag mention
	&.hashtag,
	&.hashtag:visited {
		color: orange;
	}
}

Capture