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
 

Attachments

  • Untitled.png
    Untitled.png
    94.1 KB · Views: 10

Russ

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

Code:
<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
upload_2016-8-31_19-7-45.png
 

OUTL4W

Customer
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:
Code:
<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:
Code:
<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:

OUTL4W

Customer
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:

Russ

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.
 

OUTL4W

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

Sorry but searched and searched but couldn't find the navigation_visitor_guest template in either XenBase framework nor the fusion gamer theme.
 

OUTL4W

Customer
these are the only navigation templates I see
upload_2016-9-26_18-53-53.jpeg

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.