California theme to maven project

Forum rules
Please note that response time for technical support is within 3-5 business days.
mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Sep 2018, 10:48

Please add this line into your template;

Code: Select all

<h:outputStylesheet name="fa/font-awesome.css" library="primefaces" />

techgeek
Posts: 38
Joined: 07 Sep 2018, 20:37

28 Sep 2018, 11:18

Thanks that worked :) I am just wondering as my project doesn't have font-awesome.css could you please explain.

I'll try remaining widgets tomorrow and post here, if any issue.

techgeek
Posts: 38
Joined: 07 Sep 2018, 20:37

28 Sep 2018, 20:58

I've tried couple more widgets and they are coming up fine. I've below questions, could you please clarify.

1. How to get sidebar background color same as top and footer ? - this is DONE with layout-sidebar-dark

But after adding sidebar, datatable pagination stop working. here is my sidebar.html (i've removed most of the code from actual sidebar as we don't need them all)

Code: Select all

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pc="http://primefaces.org/california">

    <div class="layout-sidebar  layout-sidebar-dark" >   
        <div id="nano-container" class="nano">
            <div class="nano-content sidebar-scroll-content">            
            <h:form id="menuform">
                <pc:menu>
                	<p:menuitem id="om_dashboard" value="Dashboard" icon="fa fa-fw fa-home" outcome="/dashboard1"/>
                </pc:menu>
            </h:form>                          
            </div>
        </div>
    </div>
</ui:composition>
2. I wanted to replace California logo at top/left corner with our logo along with some text (same text size like California). But text not fitting in, it showing up in main body area.

3. I want side bar hidden by default. how to do this ?

4. How to replace top/right corner with icons, look and feel like Poseidon theme. - this is DONE with the below snippet but they are not properly aligned and not able to add badge to bell icon.

Code: Select all

<a id="right-sidebar-button" href="#"> 
  			<i class="fa fa-cog" style="font-size:24px;color:white"></i>
        	<i class="fa fa-user" style="font-size:24px;color:white"></i>          
        	<i class="fa fa-bell"  style="font-size:24px;color:white"></i>
            <i class="fa fa-power-off" style="font-size:24px;color:white"></i>
        </a>
Thanks in advance.

techgeek
Posts: 38
Joined: 07 Sep 2018, 20:37

01 Oct 2018, 18:45

Could anybody please help on above questions ?

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

03 Oct 2018, 08:36

Hi,

For 1. and 3. questions, you could look GuestPreferences.java file. If you want to dark your sidebar, you could do darkMenu=true in the GuestPreferences.java file. And you could do menuLayout ="overlay" for side bar hidden by default.

Datatable pagination is working correctly, I don't see the issue (I tried your code).
But after adding sidebar, datatable pagination stop working. here is my sidebar.html (I've removed most of the code from the actual sidebar as we don't need them all)
And 2. question, we used img for the logo, not use text. I added some text with <span>. It showing up in the topbar. You could use margin etc. for your needs.

I think this code helps you.

Code: Select all

<a href="/california/dashboard.xhtml;jsessionid=node01l7l18wxqzoqg16fwilf8rmj7y562759.node0" class="logo"><img id="j_idt20" src="/california/javax.faces.resource/images/logo.png.xhtml;jsessionid=node01l7l18wxqzoqg16fwilf8rmj7y562759.node0?ln=california-layout" alt="">
<span style="
             color:white;
             position: absolute;
             top: 36px;
             left: 102px;
             ">Welcome
</span>
</a>
Please, you could try those, we'll send an answer for 4. questions.

Please, you could create a new post for a new issue, this question is not about 'theme to maven project' for after questions.

Greetings,

techgeek
Posts: 38
Joined: 07 Sep 2018, 20:37

03 Oct 2018, 10:21

Thank you huseyinT for you reply. I am still having issue with sidebar and as you suggested i've created new topic. Here is the link.

viewtopic.php?f=3&t=57026

this is happening with California theme. I've removed mega menu, footer and top/right corner menu from actual live version.

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

03 Oct 2018, 10:37

Glad to help,

But you opened the wrong form, this issue is about California, please you could open issue from California form.

Could you remove this post: viewtopic.php?f=3&t=57026?

And you could open again in California because the issue is about the California Theme.

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

03 Oct 2018, 13:53

This is not supported for California.
4. How to replace top/right corner with icons, look and feel like Poseidon theme. - this is DONE with the below snippet but they are not properly aligned and not able to add badge to bell icon.
You should create yourself. But I add some code for example.

CSS:

Code: Select all

.topbar-items {
            float: right;
            margin: 0;
            padding: 10px 60px 0 0;
            list-style-type: none;
        }

        .topbar-items>li {
            float: right;
            position: relative;
            margin-left: 25px;
        }

        .topbar-items>li>a {
            position: relative;
            display: block;
            color: #ffffff;
        }

        .topbar-items>li>a .topbar-item-name {
            display: none;
        }

        .topbar-items>li>a .topbar-badge {
            position: absolute;
            right: -5px;
            top: -5px;
            background-color: #2f8ee5;
            color: #ffffff;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            padding: 2px 4px;
            display: block;
            font-size: 12px;
            line-height: 12px;
        }

        .topbar-items>li .topbar-icon {
            font-size: 36px;
            -moz-transition: color 0.3s;
            -o-transition: color 0.3s;
            -webkit-transition: color 0.3s;
            transition: color 0.3s;
        }

        .topbar-items>li .topbar-icon:hover {
            color: #2f8ee5;
        }
HTML:

Code: Select all

<ul class="topbar-items ">
            <li>
                <a href="#">
                    <i class="topbar-icon material-icons swing fa fa-fw fa-envelope-o"></i>
                    <span class="topbar-badge rubberBand">5</span>
                    <span class="topbar-item-name">Messages</span>
                </a>

            </li>
            <li>
                <a href="#">
                    <i class="topbar-icon material-icons fa fa-fw fa-bell-o"></i>
                    <span class="topbar-badge rubberBand">4</span>
                    <span class="topbar-item-name">Notifications</span>
                </a>
            </li>
        </ul>
You could try this example code. And you could improve for yourself.

Greetings,

techgeek
Posts: 38
Joined: 07 Sep 2018, 20:37

03 Oct 2018, 18:40

Thanks much huseyinT, that worked :)

But still pagination not working with sidebar. I've shared my template.xhtml, topbar.xhtml, sidebar.xhtml and dashboard.xhtml in google drive. please let me know.

https://drive.google.com/drive/folders/ ... 1M3HO-BPTk

could please somebody help on this.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

04 Oct 2018, 14:33

I am just wondering as my project doesn't have font-awesome.css could you please explain.
- Fontawesome css/font files are in Primefaces jar.

Code: Select all

<h:outputStylesheet name="fa/font-awesome.css" library="primefaces" />
library="primefaces" -> folder name under resources folder in PrimeFaces.jar
name="fa/font-awesome.css" -> path

Please review; https://github.com/primefaces/primeface ... mefaces/fa

Post Reply

Return to “California - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests