Options Menu "Modes, Layout Colors and Theme Colors" in Topbar

Post Reply
User avatar
Jarciano
Posts: 29
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

20 Nov 2017, 15:25

Hello,

I would like to know how I put the customization features of thema that are in the sidebar menu for the topbar.

Thanks!
--
Jarciano Silva
CEO - Chief Executive Officer
AJ Desenvolvimento | http://www.ajdesenvolvimento.com

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

23 Nov 2017, 14:52

I think you can use overlay menu options. Exp;

in topbar.xhtml

Code: Select all

...
        <input type="text" class="topbar-search" placeholder="Type your search here" id="topbar-search" />

        <h:form>
            <p:commandButton id="dynaButton" value="Layout Options" type="button" icon="ui-icon-extlink" style="position: absolute; top: 20px; right: 170px;"/>
            <p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom" toggleable="true">
                <p:submenu id="pm_menu" label="Menu Modes" icon="fa fa-cog">
                    <p:menuitem id="pm_static_menu" value="Static Menu" icon="fa fa-bars" actionListener="#{guestPreferences.setOverlayMenu(false)}" ajax="false"/>
                    <p:menuitem id="pm_overlay_menu" value="Overlay Menu" icon="fa fa-bars" actionListener="#{guestPreferences.setOverlayMenu(true)}" ajax="false"/>
                    <p:menuitem id="pm_slim_menu" value="Slim Menu" icon="fa fa-bars" actionListener="#{guestPreferences.setSlimMenu(true)}" ajax="false"/>
                    <p:menuitem id="pm_light_menu" value="Light Menu" icon="fa fa-sun-o" actionListener="#{guestPreferences.setDarkMenu(false)}" ajax="false"/>
                    <p:menuitem id="pm_dark_menu" value="Dark Menu" icon="fa fa-moon-o" actionListener="#{guestPreferences.setDarkMenu(true)}" ajax="false"/>
                </p:submenu>
                <p:submenu id="pm_layout_colors_flat" label="Layout Colors - Flat" icon="fa fa-circle">
                    <p:menuitem id="pm_layout_default" value="Default" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('default')}" ajax="false"/>
                    <p:menuitem id="pm_layout_blue" value="Blue" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('blue')}" ajax="false"/>
                    <p:menuitem id="pm_layout_green" value="Green" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('green')}" ajax="false"/>
                    <p:menuitem id="pm_layout_turquoise" value="Turquoise" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('turquoise')}" ajax="false"/>
                    <p:menuitem id="pm_layout_purple" value="Purple" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('purple')}" ajax="false"/>
                    <p:menuitem id="pm_layout_orange" value="Orange" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('orange')}" ajax="false"/>
                    <p:menuitem id="pm_layout_deeppurple" value="Deep Purple" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('deeppurple')}" ajax="false"/>
                    <p:menuitem id="pm_layout_lime" value="Lime" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('lime')}" ajax="false"/>
                </p:submenu>
                <p:submenu id="pm_layout_colors_special" label="Layout Colors - Special" icon="fa fa-fire">
                    <p:menuitem id="pm_layout_horizon" value="Horizon" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('horizon')}" ajax="false"/>
                    <p:menuitem id="pm_layout_bliss" value="Bliss" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('bliss')}" ajax="false"/>
                    <p:menuitem id="pm_layout_crimson" value="Crimson" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('crimson')}" ajax="false"/>
                    <p:menuitem id="pm_layout_disco" value="Disco" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('disco')}" ajax="false"/>
                    <p:menuitem id="pm_layout_sunset" value="Sunset" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('sunset')}" ajax="false"/>
                    <p:menuitem id="pm_layout_deepsea" value="Deep Sea" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('deepsea')}" ajax="false"/>
                    <p:menuitem id="pm_layout_opa" value="Opa" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('opa')}" ajax="false"/>
                    <p:menuitem id="pm_layout_cheer" value="Cheer" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('cheer')}" ajax="false"/>
                    <p:menuitem id="pm_layout_smoke" value="Smoke" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setLayout('smoke')}" ajax="false"/>
                </p:submenu>
                <p:submenu id="pm_theme_colors" label="Theme Colors" icon="fa fa-paint-brush">
                    <p:menuitem id="pm_theme_blue" value="Blue Theme" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('blue')}" ajax="false"/>
                    <p:menuitem id="pm_theme_green" value="Green Theme" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('green')}" ajax="false"/>
                    <p:menuitem id="pm_theme_turquoise" value="Turquoise Theme" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('turquoise')}" ajax="false"/>
                    <p:menuitem id="pm_theme_purple" value="Purple Theme" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('purple')}" ajax="false"/>
                    <p:menuitem id="pm_theme_orange" value="Orange Theme" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('orange')}" ajax="false"/>
                    <p:menuitem id="pm_theme_deeppurple" value="Deep Purple Theme" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('deeppurple')}" ajax="false"/>
                    <p:menuitem id="pm_theme_lime" value="Lime Theme" icon="fa fa-paint-brush" actionListener="#{guestPreferences.setTheme('lime')}" ajax="false"/>
                </p:submenu>
            </p:menu>
        </h:form>

        <ul id="topbar-menu" class="fadeInDown animated">
...

Post Reply

Return to “Paradise - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest