Code: Select all
<h:outputStylesheet name="fa/font-awesome.css" library="primefaces" />
Code: Select all
<h:outputStylesheet name="fa/font-awesome.css" library="primefaces" />
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>
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>
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.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)
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>
You should create yourself. But I add some code for example.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
.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;
}
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>
- Fontawesome css/font files are in Primefaces jar.I am just wondering as my project doesn't have font-awesome.css could you please explain.
Code: Select all
<h:outputStylesheet name="fa/font-awesome.css" library="primefaces" />
Users browsing this forum: No registered users and 3 guests