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

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

Discussion in 'Styling and Customization Questions' started by Barnstable, Sep 13, 2015.

  1. Barnstable

    Barnstable Member

    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:


    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.
    Last edited: Sep 14, 2015
  2. Russ

    Russ Well-Known Member

    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.
  3. Barnstable

    Barnstable Member

    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.
  4. Brogan

    Brogan XenForo Moderator Staff Member

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

    James Well-Known Member

    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=
  6. Barnstable

    Barnstable Member

    I tried this but this code didn't work

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

    Russ Well-Known Member

    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.
    CyclingTribe, rafass and Cyb3r like this.
  8. Cyb3r

    Cyb3r Well-Known Member

    Genius. :D
  9. rafass

    rafass Well-Known Member

    Cool solution;)
  10. Barnstable

    Barnstable Member

    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?
  11. Cyb3r

    Cyb3r Well-Known Member

    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.
  12. Barnstable

    Barnstable Member

    I added it to all the styles and saw no change
  13. Cyb3r

    Cyb3r Well-Known Member

    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.

    Last edited: Sep 16, 2015
  14. Barnstable

    Barnstable Member

    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?
  15. Steve F

    Steve F Well-Known Member

    Just add it to the top.
  16. Cyb3r

    Cyb3r Well-Known Member

    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.
  17. Barnstable

    Barnstable Member

    That worked!!!

    Thanks so much everyone!:D
  18. Arty

    Arty Well-Known Member

    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.
    Russ likes this.
  19. Cyb3r

    Cyb3r Well-Known Member

    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:


Share This Page