XF 1.x Lights on/off style switcher

I found this link http://jsfiddle.net/ubAAt/ that gives you some code to create such a template edit for making a switch to add on a style for members to easy turn from light style to dark.

How could i implement on my site with using a fontawesome light bulb?
wanted to put it right side of navbar image below. red circular


  • Untitled.png
    94.1 KB · Views: 10


Pixel Exit Staff
Would take far too much time using that method :D.

Best bet would be to create a child style, and adjust the color palette in it. To get a light bulb effect, we do it on one of our sites, open navigation_visitor_tab_after on your light style

<li class="navTab lightsoutLink"><a href="{xen:link 'misc/style', '', 'style_id=9999', '_xfToken={$visitor.csrf_token_page}', 'redirect={$requestPaths.requestUri}'}" class="navLink"><i class="fa fa-lightbulb-o"></i></a></li>

Replace the 9999 with your dark style id. Then go to the same template on your dark style and replace that style ID # with your light style id.
alright i got it to display but can we make it so it says lights on for light style like a tooltip? then same for dark?
Also i would like to place it outside that area more to the right side of the navbar? at the moment its grouped together


you use the class attribute "Tooltip" for the tooltip to appear and then use "title" to add info into the tooltip. You may have to experiment where to place but I believe that this will do the trick.
on light style:
<li class="navTab lightsoutLink Tooltip" title="lights out" ><a href="{xen:link 'misc/style', '', 'style_id=9999', '_xfToken={$visitor.csrf_token_page}', 'redirect={$requestPaths.requestUri}'}" class="navLink"><i class="fa fa-lightbulb-o"></i></a></li>

dark style:
<li class="navTab lightsoutLink Tooltip" title="lights on"><a href="{xen:link 'misc/style', '', 'style_id=9999', '_xfToken={$visitor.csrf_token_page}', 'redirect={$requestPaths.requestUri}'}" class="navLink"><i class="fa fa-lightbulb-o"></i></a></li>
Last edited by a moderator:


try adding the bolded text:
<li class="navTab lightsoutLink Tooltip" title="lights on"><a href="{xen:link 'misc/style', '', 'style_id=9999', '_xfToken={$visitor.csrf_token_page}', 'redirect={$requestPaths.requestUri}'}" class="navLink"><span style=" float:right;"><i class="fa fa-lightbulb-o"></i></span></a></li>

to do it with CSS
<li class="navTab lightsoutLink Tooltip" title="lights on"><a href="{xen:link 'misc/style', '', 'style_id=9999', '_xfToken={$visitor.csrf_token_page}', 'redirect={$requestPaths.requestUri}'}" class="navLink"><span class="bulb"><i class="fa fa-lightbulb-o"></i></span></a></li>

in extra.css:
.bulb {
float: right;
Last edited:


Pixel Exit Staff
how to show this to all users aka logged out users/guests? It only shows when logged in.

You'll need to add it to the: navigation_visitor_guest template, right before the </ul>

Additionally if you add it to the navigation_public_tab_after it'll show after the main nav tabs on all pages.


these are the only navigation templates I see

but regardless it still works for logged in members & guests when placing in the navigation_visitor_tab_after template

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.