• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Prefix Hover Effect on Thread Creation

Amaury

Well-known member
#1
I am trying to style the hover effect of prefixes when creating a thread the same way I did on the discussion list, but I am having a bit of trouble.

For reference, this is what I have for prefixes that appear in threads and forums. I want the hover effects to be the same on thread creation:
Code:
/* Thread Prefixes */

.prefix.prefixPrimary {
    color: @secondaryDarker !important;
    background: @secondaryLighter !important;
    border: 1px solid @secondaryLighter !important;
}

a.prefixLink:hover .prefixPrimary {
    color: @secondaryDarker !important;
    background-color: @inlineMod !important;
    border: 1px solid @inlineMod !important;
}

.prefix.prefixSecondary {
    color: @secondaryDarker !important;
    background-color: @secondaryLighter !important;
    border: 1px solid @secondaryLighter !important;
}

a.prefixLink:hover .prefixSecondary {
    color: @secondaryDarker !important;
    background-color: @inlineMod !important;
    border: 1px solid @inlineMod !important;
}

.prefix.prefixRed {
    border-color: #FF0000 !important;
}

a.prefixLink:hover .prefixRed {
    color: #FFFFFF !important;
    background: #CD0000 !important;
    border-color: #CD0000 !important;
}

a.prefixLink:hover .prefixGreen {
    color: #FFFFFF !important;
    background: #004E00 !important;
    border-color: #004E00 !important;
}

.prefix.prefixOlive {
    color: #FFFFFF !important;
}

a.prefixLink:hover .prefixOlive {
    color: #FFFFFF !important;
    background: #4E4E00 !important;
    border-color: #4E4E00 !important;
}

a.prefixLink:hover .prefixLightGreen {
    color: #000000 !important;
    background: #5EBC5E !important;
    border-color: #5EBC5E !important;
}

.prefix.prefixBlue {
    border-color: #0000FF !important;
}

a.prefixLink:hover .prefixBlue {
    color: #FFFFFF !important;
    background: #0000CD !important;
    border-color: #0000CD !important;
}

.prefix.prefixRoyalBlue {
    border-color: #4169E1 !important;
}

a.prefixLink:hover .prefixRoyalBlue {
    color: #FFFFFF !important;
    background: #0F37AF !important;
    border-color: #0F37AF !important;
}

a.prefixLink:hover .prefixSkyBlue {
    color: #FFFFFF !important;
    background: #559CB9 !important;
    border-color: #559CB9 !important;
}

.prefix.prefixGray {
    color: #FFFFFF !important;
    border-color: #808080 !important;
}

a.prefixLink:hover .prefixGray {
    color: #FFFFFF !important;
    background: #4E4E4E !important;
    border-color: #4E4E4E !important;
}

a.prefixLink:hover .prefixSilver {
    color: #000000 !important;
    background: #F2F2F2 !important;
    border-color: #F2F2F2 !important;
}

a.prefixLink:hover .prefixYellow {
    color: #000000 !important;
    background: #CDCD00 !important;
    border-color: #CDCD00 !important;
}

.prefix.prefixOrange {
    border-color: #FFA500 !important;
}

a.prefixLink:hover .prefixOrange {
    color: #FFFFFF !important;
    background: #CD7300 !important;
    border-color: #CD7300 !important;
}

/* Thread Prefixes */
Inspecting the element, it looks like it would have something to do with this:
Code:
.Popup .PopupControl:hover
I've tried the that, even being specific, to no avail:
Code:
.Popup .PopupControl:hover .prefixPrimary
If I remove the specificity, it'll style the hover effect of (No prefix), though, which I do want, but right now I want to get the prefixes themselves.

Here's a video showing what I'm trying to accomplish (watch in full screen and 1080p):
 

Amaury

Well-known member
#2
I think I'll make it different on the Create Thread page and just use this for everything:

Code:
.Popup .PopupControl:hover {
    background: @inlineMod !important;
}
That way there won't be conflicting border colors.