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

XF 1.4 Styling Prefix Dropdown on Thread Create

Discussion in 'Styling and Customization Questions' started by Amaury, Feb 3, 2015.

  1. Amaury

    Amaury Well-Known Member

    So I still cannot figure out how to style this.

    If you look at the discussion list here and hover over the prefixes, you'll see how they look in terms of the hover color. However, I cannot figure out how to get the same styling done on the thread create page:

    upload_2015-2-2_21-38-54.png upload_2015-2-2_21-39-17.png

    I want the prefixes to have the same styling as they do on the discussion list when being hovered over or just being active, but I cannot figure out what area to target with Inspect Element. As you can see from the screenshots, when Prefix Green is being hovered over, the styling comes from @inlineMod (the dark-ish blue), and when it's not being hovered over, but the menu is left open, the border changes to green, but the rest of the prefix stays as @inlineMod. When the menu is closed, everything displays properly.

    @mike406 had a look and thinks it may not be possible with just CSS. To quote him:

    Any ideas? Thanks!


    If someone wants to give it a go and see if they can get something, you can use the following info:
    • Username: Test Account
    • Password: test

    (Maybe you can help, @Steve F?)
     
  2. Steve F

    Steve F Well-Known Member

    For the prefix menu group

    Code:
    a.prefix.prefixGreen:hover {
            background: red;
    }
    
    You will need to replace prefixGreen with the others as you go.
     
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    Thing is I already have all that, but the CSS for the hover state doesn't seem to apply to the thread create page, only the discussion list.

    Code:
    /* Thread Prefixes */
    
    .prefix.prefixPrimary {
        @property "titlePrefix";
        color: @secondaryDarker;
        background-color: @secondaryLighter;
        padding: 0px 6px;
        margin: -1px 0;
        border: 1px solid @secondaryLighter;
        border-radius: 5px;
        display: inline-block;
        @property "/titlePrefix";
    }
    
    a.prefixLink:hover .prefixPrimary {
        @property "titlePrefixHover";
        text-decoration: none;
        background-color: @inlineMod;
        padding: 0 6px;
        border: 1px solid @inlineMod;
        @property "/titlePrefixHover";
    }
    
    .prefix.prefixSecondary {
        @property "titlePrefix";
        color: @secondaryDarker;
        background-color: @secondaryLighter;
        padding: 0px 6px;
        margin: -1px 0;
        border: 1px solid @secondaryLighter;
        border-radius: 5px;
        display: inline-block;
        @property "/titlePrefix";
    }
    
    a.prefixLink:hover .prefixSecondary {
        @property "titlePrefixHover";
        text-decoration: none;
        background-color: @inlineMod;
        padding: 0 6px;
        border: 1px solid @inlineMod;
        @property "/titlePrefixHover";
    }
    
    a.prefixLink:hover .prefixGreen {
        background-color: #006700;
        border-color: #006700;
    }
    
    .prefix.prefixOlive {
        color: #FFFFFF;
    }
    
    a.prefixLink:hover .prefixOlive {
        background-color: #676700;
        border-color: #676700;
    }
    
    a.prefixLink:hover .prefixLightGreen {
        background-color: #77D577;
        border-color: #77D577;
    }
    
    .prefix.prefixBlue {
        border-color: #0000FF;
    }
    
    a.prefixLink:hover .prefixBlue {
        background-color: #0000E6;
        border-color: #0000E6;
    }
    
    .prefix.prefixRoyalBlue {
        border-color: #4169E1;
    }
    
    a.prefixLink:hover .prefixRoyalBlue {
        background-color: #2850C8;
        border-color: #2850C8;
    }
    
    a.prefixLink:hover .prefixSkyBlue {
        background-color: #6EB5D2;
        border-color: #6EB5D2;
    }
    
    .prefix.prefixRed {
        border-color: #FF0000;
    }
    
    a.prefixLink:hover .prefixRed {
        background-color: #E60000;
        border-color: #E60000;
    }
    
    .prefix.prefixOrange {
        color: #FFFFFF;
        border-color: #FFA500;
    }
    
    a.prefixLink:hover .prefixOrange {
        background-color: #FF8C00;
        border-color: #FF8C00;
    }
    
    .prefix.prefixYellow {
        border-color: #FFFF00;
    }
    
    a.prefixLink:hover .prefixYellow {
        background-color: #FFE600;
        border-color: #FFE600;
    }
    
    .prefix.prefixGray {
        color: #FFFFFF;
        border-color: #808080;
    }
    
    a.prefixLink:hover .prefixGray {
        background: #676767;
        border-color: #676767;
    }
    
    a.prefixLink:hover .prefixSilver {
        background: #A7A7A7;
        border-color: #A7A7A7;
    }
    
    .heading span.prefix {
        display: none;
    }
    
    .breadcrumb span.prefix {
        display: none;
    }
    
    /* Thread Prefixes */
     
  4. Steve F

    Steve F Well-Known Member

    .prefixLink is not a class exposed to the menu group is the problem. The cascade of the classes is different in the menu than on the discussion list. Look at the code I posted closer ;)
     
    Amaury likes this.
  5. Steve F

    Steve F Well-Known Member

    Easily solved really..

    Code:
    a.prefixLink:hover .prefixSilver,
    a.prefix.prefixSilver:hover
    {
        background: #A7A7A7;
        border-color: #A7A7A7;
    }
     
    Amaury likes this.
  6. Amaury

    Amaury Well-Known Member

    I tried your code, but it didn't work. I even tried adding !important.
     
  7. Steve F

    Steve F Well-Known Member

    It shows working for me...Do a hard refresh.
     
  8. Amaury

    Amaury Well-Known Member

    Oh, I think you misunderstood me, though I actually like that now. :) However, I was referring to this part, not the selection menu:

    Prefixes.png

    Sorry if I didn't make that clear.
     
    Last edited: Feb 3, 2015
  9. Steve F

    Steve F Well-Known Member

    Lol yeah it wasn't clear..or could have just been me waking up :p
     
  10. Amaury

    Amaury Well-Known Member

    I've had my fair share of those moments. -_-

    Anyway, that's the part Mike thought would need custom JavaScript and couldn't be done with just CSS.
     
  11. Steve F

    Steve F Well-Known Member

    Not sure you are aware or not but there is not a direct way to log in unless you are viewing the forum index or happen to know about the links in thread view. ;)
     
    Amaury likes this.
  12. Amaury

    Amaury Well-Known Member

    That was an intentional change. I hid the login handle and changed the Sign Up Now! button to an overlay, but I guess I should revert the handle hiding. I'll do it first thing in the morning.
     
  13. Amaury

    Amaury Well-Known Member

    @Steve F, regarding the login handle, I've reverted the change that hid it now.
     

Share This Page