XF 1.4 How do you hide a secret theme in the style chooser

[Barnstable]

I have a custom theme for my forum that is designed to be an Easter egg if members can find it. To that end I don't want it to be too hard to find, but I also don't want it to be very easy. My idea is to hide the button for the theme, but I'm also open to any suggestions on the best way to implement this.

Is it possible to have the button to change a theme placed outside of the style chooser box, and have the button be invisible until it's moused over?

Here is a link for my forum:

http://lakersball.com/forums/

Here is a screenshot of my stylechooser. The one labled as "Hidden" is the one I want to not show up in the stylechooser list, but be a hidden button somewhere on the screen while the style chooser is open:



Thanks in advance for any help with this.

 

[Russ]

Just go to Appearance -> Styles -> Uncheck the box next to the style name.

Admins will still be able to view the style chooser link if you have 1 active and 1 non-active style.

 

[Barnstable]

Just go to Appearance -> Styles -> Uncheck the box next to the style name.

Admins will still be able to view the style chooser link if you have 1 active and 1 non-active style.

I want my community to be able to choose the style not just the admins. I just don't want this style easily found in the list of available styles. It's supposed to be an easter egg, surprise hidden theme.

Unchecking that box just completely removes it from the available styles list for my members.

 

[Paul B]

There isn't a unique class or ID applied to the li, so it's not possible to hide or move a specific style.

 

[James]

You might be able to target it with CSS if you did something like:

.footer .chooserColumns li a[href^="misc/style?style_id=YOURSTYLEID"]
{
    display: none !important;
}

That should target the hyperlink inside the LI where the href begins with "misc/style?style_id=X".

 

[Barnstable]

You might be able to target it with CSS if you did something like:

.footer .chooserColumns li a[href^="misc/style?style_id=YOURSTYLEID"]
{
    display: none !important;
}

That should target the hyperlink inside the LI where the href begins with "misc/style?style_id=X".

I tried this but this code didn't work

(FYI, yes I replaced "YOURSTYLEID" with my correct style name)

 

[Russ]

You could do something like this in extra.css:

.chooserColumns li:nth-child(4) {
opacity: 0;
}
.chooserColumns li:nth-child(4):hover {
opacity: 1;
}

For XenForo' case:



4 being the last one in the list.

 

[Cyb3r]

You could do something like this in extra.css:

.chooserColumns li:nth-child(4) {
opacity: 0;
}
.chooserColumns li:nth-child(4):hover {
opacity: 1;
}

For XenForo' case:

View attachment 116866

4 being the last one in the list.

Genius.

 

[rafass]

You could do something like this in extra.css:

.chooserColumns li:nth-child(4) {
opacity: 0;
}
.chooserColumns li:nth-child(4):hover {
opacity: 1;
}

For XenForo' case:

View attachment 116866

4 being the last one in the list.

Cool solution

 

[Barnstable]

You could do something like this in extra.css:

.chooserColumns li:nth-child(4) {
opacity: 0;
}
.chooserColumns li:nth-child(4):hover {
opacity: 1;
}

For XenForo' case:

View attachment 116866

4 being the last one in the list.

This would be perfect, but I tried it, and so far it didn't work. I tested it viewing the site as both an admin, and a general member.

Am I implementing the code correctly? I think the "Hidden" theme is child 2, so I changed it in this code:



Here is my list of templates:



What did I do wrong?

 

[Cyb3r]

This would be perfect, but I tried it, and so far it didn't work. I tested it viewing the site as both an admin, and a general member.

Am I implementing the code correctly? I think the "Hidden" theme is child 2, so I changed it in this code:

View attachment 117015

Here is my list of templates:

View attachment 117018

What did I do wrong?

Nothing wrong with the code, maybe you are using another style than the one you made the change on it, make sure you add that to all styles in extra.css.

 

[Barnstable]

I added it to all the styles and saw no change

 

[Cyb3r]

I added it to all the styles and saw no change

I just viewed the source of your site, you added it to the media block so it won't work unless you are on the media view, you have to move it out of the media block.

 

[Barnstable]

I just viewed the source of your site, you added it to the media block so it won't work unless you are on the media view, you have to move it out of the media block.

I was trying to just put it at the bottom of the list of code because I didn't see anything in the list above that pertained to the style chooser.

Where should I insert the code?

 

[Steve F]

Just add it to the top.

 

[Cyb3r]

I was trying to just put it at the bottom of the list of code because I didn't see anything in the list above that pertained to the style chooser.

Where should I insert the code?

You didn't add it to the bottom, actually you added before the last curly brackets and that was for the media, just add to the top, or move that last curly bracket before the code.

 

[Barnstable]

That worked!!!

Thanks so much everyone!

 

[Arty]

I tried this but this code didn't work

(FYI, yes I replaced "YOURSTYLEID" with my correct style name)

You should use style id, not style name. In style chooser move mouse over link for style you want to hide, look at link, find its number after style_id=

Using nth-child is not a good idea because styles list is different for normal users and admins. See asterisk near "hidden" style on screenshot? It is visible only to admins and might ruin whole nth-child targeting.

 

[Cyb3r]

That worked!!!

Thanks so much everyone!

You can use this for accurate result as @Arty said:

.chooserColumns li a[href*="misc/style&style_id=25"]
{
    opacity: 0;
}
.chooserColumns li a[href*="misc/style&style_id=25"]:hover
{
    opacity: 1;
}

Change the id 25 to your style id number: