• 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

Amaury

Well-known member
#1
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:

[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

Well-known member
#2
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

Well-known member
#3
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 */
 

Steve F

Well-known member
#4
.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

Well-known member
#5
Easily solved really..

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

Amaury

Well-known member
#6
.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.
 

Amaury

Well-known member
#8
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:

Prefixes.png

Sorry if I didn't make that clear.
 
Last edited:

Steve F

Well-known member
#11
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

Well-known member
#12
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.