In this post I am going to give the basic steps or to get basic design to create a custom theme.The following screen shows the theme done by my own hands
Steps to create a theme in Eclipse IDE
1. Open the Elcipse IDE
2. Goto File | New | LiferayPlugInProject
3. Give the ProjectName as GreenTheme. Automaticaaly DisplayName become as GreenTheme
4. Put the defaults for Build Type,Plugins SDK and Liferay runtime.
5. Check the Plugin Type as Theme then click on Finish.
6. Then in the next dialogue box it asks for Theme parent and Theme Framework.Give
Theme parent as classic
Theme framework as Velocity
A custom theme inherits the _styled theme by default.Liferay portal by default uses the Velocity template files
7. Then click on Finish and observe project explorer
To get the above screen we are taking consideration of two files.Those are
portal_normal.vm:It contains the rendering code which fragment has to show in which place of the page
custom.css: To apply our CSS Styles
Theme Creation Introduction
1. Go through the Anatomy of Theme
2. The name _diffs stands for differences. The files in this directory will override the files in
docroot/css, docroot/images , docroot/js , docroot/templates
3. By defult _diffs is empty.to override existing theme we need to add the css folder,images folder,js
folder, templates folder.
4. If you want to change existing style class definitions in other CSS files,You can redefine them in
docroot/_diffs/css/custom.css file.
Why custom.css file will override the styles defined in other CSS files?
Ans: This is because the custom.css file is imported last as specified in docroot/css/main.css.(If you open and see then you can get exactly what i am saying).
There are four basic folders in theme css/ , images/ , js/ and templates/
Ans: This is because the custom.css file is imported last as specified in docroot/css/main.css.(If you open and see then you can get exactly what i am saying).
There are four basic folders in theme css/ , images/ , js/ and templates/
As compared to Liferay 6.0.6 the the syntax is variant in Liferay6.2. It uses the Saas.
Saas is an extension of Css
Saas is a scripting language for writing Css
Compass is an open source CSS authoring tool.
How to add a new div to the page
1. Create css and templates folders in _diffs
2. Copy custom.css from docroot/css/ to the docroot/_diffs/css/
Copy portal_normal.vm from docroot/templates to the docroot/_diffs/templates
3. Now get to the our point adding new div to the page
4. Open docroot/_diffs/templates/portal_normal.vm and add the following code after the <body>
tag it self as follows
5. Save the file
6. Now apply the Styles to that particular divs in the file custom.css in the directory
_diffs/css/custom.css
#top{
width: 100%;
font-size: 10px;
background-color: #036;
height: 45px;
}
#topbottom{
width: 100%;
height: 8px;
background-color: #FF0000;
}
7. Save the file and run ant-deploy
8. Apply our theme to the Page or Organization
9. Observe the screen.You will get the following output
 |
| Basic Navigation Controls |
If we want to set the width of the page add the below snippet to the _diffs/css/custom.css
#wrapper {
position: relative;
width:100%;
padding:0;
}
Save the file & Run ant-deployObserve the changes in the screen
How to hide the breadcrumbs in the theme
Open the file _diffs/css/custom.css and add the following code
#breadcrumbs{
display:none;
}
How to change the color of Navigation barOpen the file _diffs/css/custom.css and add the following code
You no need to define newly .navbar-inner class.It is already there in the file.
Just search for this class and add the code.
.navbar-inner {
background-color: #FFF;
li a {
color:#333333;
}
}
In the above i just changed the color of the navigation bar but we can set width and height of the bar.
Sample image:
How to adjust the padding for Navigation bar menu items
1.Open the file _diffs/css/custom.css and add the following code
2.Just search for
li>aand add the your own code.
.nav {
li {
&.dropdown {
> .dropdown-toggle {
.caret {
border-bottom-color: #FFF;
border-top-color: #FFF;
}
}
}
&.open {
> a {
background-color: #036;
color: #FFF;
border-top: 2px solid #FF0000;
}
}
&.active > a {
background-color: #036;
color: #FFF;
border-top: 2px solid #FF0000;
}
}
> li > a {
padding: 4px 15px 5px;
}
How to change the navigation menu item on hover color in the Navigation bar
1.Open the file _diffs/css/custom.css and add the following code
2.Just search for
&.open {
> a
and add the your own code..nav {
li {
&.dropdown {
> .dropdown-toggle {
.caret {
border-bottom-color: #FFF;
border-top-color: #FFF;
}
}
}
/* Here add your own code to change the on hover color*/
&.open {
> a {
background-color: #036;
color: #FFF;
border-top: 2px solid #FF0000;
}
}
&.active > a {
background-color: #036;
color: #FFF;
border-top: 2px solid #FF0000;
}
}
Observe the comments i specified.Sample Image
 |
| Observe the "Home" on hover i changed the color. |
How to change the highlighting color of current/active page navigation menu item in the Navigation bar
1.Open the file _diffs/css/custom.css and add the following code
2.Just search for
active > aand add the your own code.
.nav {
li {
&.dropdown {
> .dropdown-toggle {
.caret {
border-bottom-color: #FFF;
border-top-color: #FFF;
}
}
}
/* Here add your own code to change the on hover color*/
&.open {
> a {
background-color: #036;
color: #FFF;
border-top: 2px solid #FF0000;
}
}
/* Here add your own code to change the active page color*/
&.active > a {
background-color: #036;
color: #FFF;
border-top: 2px solid #FF0000;
}
}
Observe the comments i specified.Sample Image
 |
| Changing the Active page/Current page highlighting color |
How to change the sub menu items color of main menu item in navigation bar
1.Open the file _diffs/css/custom.css and add the following code
2.Just search for .dropdown-menu class and add the your own code.
/*Changing the color of submenu items of main menu of Navigation bar*/
.dropdown-menu {
background: #036;
opacity:1.0;
border-width: 0;
margin: 0;
...............
...............
Observe the comments i specified.Sample Image
 |
| Changing the color of sub menu items |
How to change the sub menu items on hover color of main menu item in navigation bar
1.Open the file _diffs/css/custom.css and add the following code
2.Just search for :hover class and add the your own code.
/*Changing the color of submenu items of main menu of Navigation bar*/
a {
color: #fff;
border-bottom: 1px solid #FFF;
...............
...............
}
/*Changing the submenu items on hover color of main menu of Navigation bar*/
&:hover {
background: #036;
text-decoration: none;
border-left-color:transparent;
border-right-color: transparent;
border-bottom: 1px solid #FFF;
opacity:0.2;
z-index:1000;
}
}
Observe the comments i specified.How to remove the company name
1.Open the file _diffs/css/custom.css and remove the following code
$the_title
Dockbar related styles
How to change the color of dock bar
1.Open the file _diffs/css/custom.css and add the following code
2.Change the values of following these three four variables
$dockbarGradientEnd: #036;
$dockbarGradientStart: #036;
$dockbarOpenGradientEnd: #036;
$dockbarOpenGradientStart: #036;
$dockbarGradientStart: #036;
$dockbarOpenGradientEnd: #036;
$dockbarOpenGradientStart: #036;
Sample Image
Before:
After:
How to change the dockbar menu item on hover color in Dock bar
1.Open the file _diffs/css/custom.css and add the following code
2.Search for :hover which is under .docbar class defination & change the on hover color
.dockbar {
..............
..............
/*Change the on hover color of menu item*/
&:hover {
background-color: #184D83;
opacity:0.8;
}
...............
...............
}
How to change the submenu items color of dockbar menu item1.Copy custom_common.css form docroot/css to docroot/_diffs/css
2.Open the file _diffs/css/custom_common.css
3.Search for .dropdown-menu and change the value of background
/*Chnage the dropdown toggle color*/
.dropdown-menu , .site-administration-menu {
background: #036;
-moz-box-shadow: inset 0 0 8px #000000;
-webkit-box-shadow: inset 0 0 8px #000000;
box-shadow: inset 0 0 8px #000000;
.................
.................
}
Sample Image:
How to change the submenu items on hover color of dockbar menu item
1.Copy custom_common.css form docroot/css to docroot/_diffs/css
2.Open the file _diffs/css/custom_common.css
3.Search for :hover which is under .dropdown-menu class definition
.dropdown-menu , .site-administration-menu {
.................
.................
/*changing the color of sub menu items on hover color of menu item of dockbar*/
&:hover {
background: #184D83;
@include filter-gradient(#2FA4F5, #2FA4F5, vertical);
}
..................
..................
}
Portlet related styles
How to change the portlet header color
1.Open the file _diffs/css/custom.css
2.Search for .portlet-topper class and change the value of background attribute as you want.
.portlet-topper {
background: #036;
color: #FFF;
padding: 0;
............
............
}
I just changed the portlet topper color if you go through the custom.css portlet related styles section you can do changes as your need.
Toogle Controls(which are in the left side of the page)
How to change the background color of toogle controls
1. Open custom.css in _diffs/css
2. Search for > a which is under the .nav-add-controls class definition
3. Change the value of background attribute as you need
.nav-add-controls {
...................
...................
li > a{
background: #036;
border-bottom:3px solid #FF0000;
line-height: inherit;
...........
}
.............
}
Sample Image
How to change the on hover color of toogle controls
1. Open custom.css in _diffs/css
2. Search for :hover which is under >a in turn it is under .nav-add-controls class definition
3. Change the value of background attribute as you need
.nav-add-controls {
...................
...................
li > a{
background: #036;
border-bottom:3px solid #FF0000;
line-height: inherit;
...........
...........
&:hover {
background: #184D83;
}
..............
}
.............
}
Suggested Links
How-to-unsplit-Toggle-controls-and-Dockbar
No comments:
Post a Comment