1. 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

Discussion in 'Styling and Customization Questions' started by Amaury, Feb 19, 2014.

  1. Amaury

    Amaury Well-Known Member

    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):
     
  2. Amaury

    Amaury Well-Known Member

    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.
     
  3. Amaury

    Amaury Well-Known Member

    I'm just going to give up for now. I've tried everything I could find, and it's just not working.

    Any help?
     

Share This Page