XF 1.4 Styling Prefix Dropdown on Thread Create

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.webp upload_2015-2-2_21-39-17.webp

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:

[3:07:05 PM] Mike: I don't think you can really fix it without modifying their javascript code and that's probably more painful than worth it LOL

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?)
 
For the prefix menu group

Code:
a.prefix.prefixGreen:hover {
        background: red;
}

You will need to replace prefixGreen with the others as you go.

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 */
 
.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 ;)
 
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. ;)
 
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. ;)

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.
 
Back
Top Bottom