How to add the option of changing board themes in the header of the default style?

[angle4cor]

Hello,

 

I would like to be able to change the theme of the board in the header of the forums. It should also be possible on the mobile skin. My theme is based on the default Invision style. 

 

Can't find any widget to do that. Any help would be greatly appreciated!

[Dreadknux]

The theme select should already be available on mobile view, at the bottom of the page like on desktop by default. But if you want to move it to the header, and are familiar with template editing on the HTML level, you can find the code for displaying the theme select dropdown in the 'footer' template bit. This is the code:

	{{$themes = \IPS\Theme::getThemesWithAccessPermission();}}
	{{if \count( $themes ) > 1 }}
		<li>
			<a href='#elNavTheme_menu' id='elNavTheme' data-ipsMenu data-ipsMenu-above>{lang='skin'} <i class='fa fa-caret-down'></i></a>
			<ul id='elNavTheme_menu' class='ipsMenu ipsMenu_selectable ipsHide'>
			{{foreach $themes as $id => $set }}
				<li class='ipsMenu_item{{if \IPS\Theme::i()->id == $id}} ipsMenu_itemChecked{{endif}}'>
					<form action="{url="app=core&module=system&controller=theme" noprotocol="true" csrf="true" seoTemplate="theme"}" method="post">
					<input type="hidden" name="ref" value="{expression="base64_encode( (string) request.url() )"}">
					<button type='submit' name='id' value='{$id}' class='ipsButton ipsButton_link ipsButton_link_secondary'>{lang="$set->_title"} {{if $set->is_default}}{lang="default"}{{endif}}</button>
					</form>
				</li>
			{{endforeach}}
			</ul>
		</li>
	{{endif}}

You could feasibly copy this code and paste it into the mobileNavBar template bit. You would probably need to work with it a little bit to get it the way you like it - perhaps nest it in the UL list tag for best results - but that should offer the same drop-down functionality as on desktop.

[angle4cor]

I pasted it in the header and it works, so I am super thankful for that! 😉

 

I am curious though if it would be possible to change the "Theme" to a font awesome icon istead? How should I change the code above to accomplish that?

[Daniel F]

You’ll need to replace

{lang='skin'}

With the FA icon which you want to display.