1 - Criar pastas css, template no diretório src
2 - Criar o arquivo portal_normal.ftl na pasta template
3 - Criar o _custom.scss na pasta css
2. Modificação e Criação do NavBar
body {
background-color : #ccc ;
}
2.1 Modifica bg color do Liferay navBar
.control-menu.control-menu-level-1 {
background-color : #7b9a0b ;
background-image : - webkit- lin ear- gradient(left , #9bc911 , #9e0707 );
background-image : lin ear- gradient(to right ,#a29e23 , #9e0707 );
}
3. Criando uma nova navBar
3.1 Criar um arquivo chamado custom-navbar.ftl
< nav class ="navbar navbar-default ">
< div class ="container-fluid ">
<!-- Brand and toggle get grouped for better mobile display -->
< div class ="navbar-header ">
< button type ="button " class ="navbar-toggle collapsed " data-toggle ="collapse " data-target ="#bs-example-navbar-collapse-1 " aria-expanded ="false ">
< span class ="sr-only "> Toggle navigation</ span >
< span class ="icon-bar "> </ span >
< span class ="icon-bar "> </ span >
< span class ="icon-bar "> </ span >
</ button >
< a class ="navbar-brand " href ="# "> Brand</ a >
</ div >
<!-- Collect the nav links, forms, and other content for toggling -->
< div class ="collapse navbar-collapse " id ="bs-example-navbar-collapse-1 ">
< ul class ="nav navbar-nav ">
< li class ="active "> < a href ="# "> Link < span class ="sr-only "> (current)</ span > </ a > </ li >
< li > < a href ="# "> Link</ a > </ li >
< li class ="dropdown ">
< a href ="# " class ="dropdown-toggle " data-toggle ="dropdown " role ="button " aria-haspopup ="true " aria-expanded ="false "> Dropdown < span class ="caret "> </ span > </ a >
< ul class ="dropdown-menu ">
< li > < a href ="# "> Action</ a > </ li >
< li > < a href ="# "> Another action</ a > </ li >
< li > < a href ="# "> Something else here</ a > </ li >
< li role ="separator " class ="divider "> </ li >
< li > < a href ="# "> Separated link</ a > </ li >
< li role ="separator " class ="divider "> </ li >
< li > < a href ="# "> One more separated link</ a > </ li >
</ ul >
</ li >
</ ul >
< form class ="navbar-form navbar-left ">
< div class ="form-group ">
< input type ="text " class ="form-control " placeholder ="Search ">
</ div >
< button type ="submit " class ="btn btn-default "> Submit</ button >
</ form >
< ul class ="nav navbar-nav navbar-right ">
< li > < a href ="# "> Link</ a > </ li >
< li class ="dropdown ">
< a href ="# " class ="dropdown-toggle " data-toggle ="dropdown " role ="button " aria-haspopup ="true " aria-expanded ="false "> Dropdown < span class ="caret "> </ span > </ a >
< ul class ="dropdown-menu ">
< li > < a href ="# "> Action</ a > </ li >
< li > < a href ="# "> Another action</ a > </ li >
< li > < a href ="# "> Something else here</ a > </ li >
< li role ="separator " class ="divider "> </ li >
< li > < a href ="# "> Separated link</ a > </ li >
</ ul >
</ li >
</ ul >
</ div > <!-- /.navbar-collapse -->
</ div > <!-- /.container-fluid -->
</ nav >
3.2 Adicionar a classe navbar-custom a tag nav
3.3 no _custom.scss add a classe para mudar o margin top
.navbar-custom {
margin-top : 65px ;
}
3.4 Add o seguinte trecho de código ao portal_normal.ftl logo abaixo da tag <@liferay.control_menu />
<#if is_signed_in >
<#include "${full_templates_path}/custom_navbar.ftl" / >
</#if >
4.1 Criar a pasta portlet em src/css
4.2 Abrir e copiar o conteúdo do arquivo _variables.scss que está em build/css/portlet
/* ---------- Portlet topper ---------- */
$portlet-topper-bg : $navbar-default-bg !default ;
$portlet-topper-border : $navbar-default-border !default ;
$portlet-topper-color : $navbar-default-color !default ;
$portlet-topper-link-color : $navbar-default-link-color !default ;
$portlet-topper-link-hover-color : $navbar-default-link-hover-color !default ;
$portlet-topper-border-radius : $navbar-border-radius $navbar-border-radius 0 0 !default ;
$portlet-topper-border-bottom-width : 1px !default ;
$portlet-topper-border-left-width : 1px !default ;
$portlet-topper-border-right-width : 1px !default ;
$portlet-topper-border-top-width : 1px !default ;
$portlet-topper-border-width : $portlet-topper-border-top-width $portlet-topper-border-right-width $portlet-topper-border-bottom-width $portlet-topper-border-left-width !default ;
$portlet-content-border-radius : 0 0 $navbar-border-radius $navbar-border-radius !default ;
$portlet-content-border-bottom-width : 1px !default ;
$portlet-content-border-left-width : 1px !default ;
$portlet-content-border-right-width : 1px !default ;
$portlet-content-border-top-width : 1px !default ;
$portlet-content-border-width : $portlet-content-border-top-width $portlet-content-border-right-width $portlet-content-border-bottom-width $portlet-content-border-left-width !default ;
/* ---------- Portlet decorator ---------- */
$portlet-decorate-bg : $body-bg !default ;
$portlet-decorate-border-color : $navbar-default-border !default ;
$portlet-decorate-border-style : solid !default ;
$portlet-decorate-border-width : $portlet-content-border-width !default ;
4.3 Criar o arquivo _variables.scss em src/css/portlet com o conteúdo copiado