XF 1.4 Styling Prefix Dropdown on Thread Create

[Amaury]

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:



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?)

 

[Steve F]

For the prefix menu group

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

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

 

[Amaury]

For the prefix menu group

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.

/* 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 */

 

[Steve F]

.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

 

[Steve F]

Easily solved really..

a.prefixLink:hover .prefixSilver,
a.prefix.prefixSilver:hover
{
    background: #A7A7A7;
    border-color: #A7A7A7;
}

 

[Amaury]

.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

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

 

[Steve F]

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

 

[Amaury]

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

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



Sorry if I didn't make that clear.

 

[Steve F]

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

 

[Amaury]

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

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.

 

[Steve F]

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]

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.

 

[Amaury]

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