Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Kiran Kumar Boyini
Not able to work with advanced styling option in liferay 6.1
February 5, 2013 7:07 AM
Answer

Kiran Kumar Boyini

Rank: Expert

Posts: 277

Join Date: June 2, 2011

Recent Posts

Hi All,

I am trying to change the look and feel of login.jsp page of liferay(sign-in portlet) using advanced styling option.

I have entered the below code in that configuration portlet. Please see the attachment .
 1
 2              #portlet_58{
 3.[b]login-wrapper[/b]{
 4    margin:0;
 5    padding:0;
 6    width:100%;
 7    height:auto;
 8    min-height:600px;
 9    overflow:hidden;   
10    background:#3461b8 url(../images/login-bg.png) repeat-x left bottom;   
11    }
12.[b]login-box{[/b]
13    margin:140px auto;
14    padding:50px 0;
15    width:742px;
16    height:314px;
17    background:#ADD6FF;
18    } 


But here when I am saving this css after that I am not seeing the effects.

I have following doubts, Please clarify me.
1) How to apply the css for specific portlet with out touching the source code of sign-in portlet.
2) Can I able to enter the more than css class names in this configuration.

Regards,

Kiran
Attachments: advancedstyling.bmp (625.5k)
David H Nebinger
RE: Not able to work with advanced styling option in liferay 6.1
February 5, 2013 10:59 AM
Answer

David H Nebinger

Community Moderator

Rank: Liferay Legend

Posts: 11046

Join Date: September 1, 2006

Recent Posts

You cannot nest CSS classes that way.

You'd have to have two separate rules:

1 #portlet_58 .login-wrapper {
2 }
3
4 #portlet_58 .login-box {
5 }
Kiran Kumar Boyini
RE: Not able to work with advanced styling option in liferay 6.1
February 5, 2013 9:56 PM
Answer

Kiran Kumar Boyini

Rank: Expert

Posts: 277

Join Date: June 2, 2011

Recent Posts

Thank you for helping me a lot,

As you said I am trying to apply the only one css class name "login-wrapper".

But it is not applying the style.

in Login.jsp page:
1
2<div class="login-wrapper" >  // This is my coustom div id to apply the my style effectively.
3               <aui:fieldset>
4                ...............................
5               ................................
6
7               </aui:>
8</div>

Configuration page in advanced styling option:
 1
 2#portlet_58{
 3.login-wrapper{
 4    margin:0;
 5    padding:0;
 6    width:100%;
 7    height:auto;
 8    min-height:600px;
 9    overflow:hidden;   
10    background:#3461b8 url(../images/login-bg.png) repeat-x left bottom;   
11    }   
12}


I have one concern : we have main. css file for sign in portlet

In that I find that code :
 1
 2.portlet-login {
 3    .aui-form {
 4        fieldset {
 5            border-width: 0;
 6            margin-bottom: 0;
 7            padding: 0;
 8        }
 9
10        .aui-button-holder, .aui-form-column {
11            margin-bottom: 10px;
12            margin-right: 400px;
13        }
14    }


Can I able to apply the my styles with out touching the source code of the login.jsp with out effecting the other functionality and look and feel, using the above file.

Now I am using the <div>s in login.jsp to apply my own styles..I do nt want to touch the source code. Any Ideas ?

Regards,
Kiran
Attachments: advancedstyling1.bmp (1,113.5k)