Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Vinod Kumar Nair
Customizing look and feel on portal homepage
August 14, 2012 11:27 AM
Answer

Vinod Kumar Nair

Rank: Junior Member

Posts: 59

Join Date: July 13, 2012

Recent Posts

Hi,

On homepage of my portal there is login portlet which I want to customize it by its look. I tried to put portlet color and also portlet border by overriding custom.css file but none is affecting. My code was:-
 1body {
 2    background: white;
 3    font-size: 11px;
 4}
 5
 6body.portlet {
 7    color: blue;
 8    border-color: navy;
 9   
10}
11
12.portlet-topper {
13    background: red;
14}


There are five things which I want to achieve(Please refer the attached screen shot):-
(1) The same Grey horizontal bar on top should also come down after the portlet(as shown diagrammatically)

(2) I tried to add portlet border in custom.css file but not working. I want to achieve this(as shown diagrammatically)

(3) Page 'SDP Portal' has been created using liferay UI(and not with the help of code), so it is coming by default on screen. I have achieved already the navigation to this page after successful login. I want this page tab to be hidden on grey bar by default until no user has logged in.

(4) Want to replace/remove breadcrumb liferay but don't know how to. I think something needs to be done in portal_normal.vm file.

(5) Want to add a narrow horizontal line above forgot password link.
Attachment

Attachments: Login screen.jpg (41.7k)
David H Nebinger
RE: Customizing look and feel on portal homepage
August 14, 2012 12:07 PM
Answer

David H Nebinger

Community Moderator

Rank: Liferay Legend

Posts: 8385

Join Date: September 1, 2006

Recent Posts

Vinod Kumar Nair:
(1) The same Grey horizontal bar on top should also come down after the portlet(as shown diagrammatically)


This would just be a matter of including navigation at the bottom of the portal_normal.vm file as it is at the top.

(2) I tried to add portlet border in custom.css file but not working. I want to achieve this(as shown diagrammatically)


You would have to indicate how you 'added' this. Did you make changes directly to a deployed theme (bad!)? Do you have a custom theme you're using? Is the theme built correctly? Is the main page set to use your custom theme? Did you clear your cache to ensure that what you're looking at isn't a cache artifact?

(3) Page 'SDP Portal' has been created using liferay UI(and not with the help of code), so it is coming by default on screen. I have achieved already the navigation to this page after successful login. I want this page tab to be hidden on grey bar by default until no user has logged in.


Go to the permissions of the page and remove the guest view access and it will go away.

(4) Want to replace/remove breadcrumb liferay but don't know how to. I think something needs to be done in portal_normal.vm file.


Yes, delete the lines that refer to the <nav class="site-breadcrumbs" id="breadcrumbs"></nav> stuff.

(5) Want to add a narrow horizontal line above forgot password link.


That you will need to do using CSS. You may want to apply it using the "Look And Feel" option for the portlet, identify the element that needs the border (top or bottom) and add it under the Advanced Styling tab as a custom CSS rule.
Anonymous
RE: Customizing look and feel on portal homepage
August 14, 2012 12:38 PM
Answer

Anonymous

(4) Want to replace/remove breadcrumb liferay but don't know how to. I think something needs to be done in portal_normal.vm file.


If you want to give the admin the choice of showing breadcrumbs you can instead of deleting is add a liferay-look-and-feel.xml setting.

<setting configurable="true" key="show-breadcrumbs" type="checkbox" value="false" />

Then in the portal_normal.vm wrap it with a if statement

#set ($show_breadcrumbs = $getterUtil.getBoolean($!theme_display.getThemeSetting('show-breadcrumbs')))
#if ($show_breadcrumbs)
<nav class="site-breadcrumbs" id="breadcrumbs">
<h1>
<span>#language("breadcrumbs")</span>
</h1>

#breadcrumbs()
</nav>
#end
Vinod Kumar Nair
RE: Customizing look and feel on portal homepage
August 15, 2012 5:50 AM
Answer

Vinod Kumar Nair

Rank: Junior Member

Posts: 59

Join Date: July 13, 2012

Recent Posts

@David H Nebinger

I'm trying to achieve this by overriding in custom.css file as :-
 1body.portlet {
 2    color: blue;
 3    border-color: navy;
 4   
 5}
 6
 7.portlet-topper {
 8    background: red;
 9    background-color: pink;
10}


Why it is not working? these css classes applied on every portlets of liferay by default should get impacted?


Yes, delete the lines that refer to the <nav class="site-breadcrumbs" id="breadcrumbs"></nav> stuff.

This has removed the whole bar(where breadcrumbs are residing). I just want to remove or replace first one where 'liferay' is written before 'welcome'.

------------------------------------------------
@Bradley Wood
If you want to give the admin the choice of showing breadcrumbs you can instead of deleting is add a liferay-look-and-feel.xml setting.
<setting configurable="true" key="show-breadcrumbs" type="checkbox" value="false" />

I think <setting> element is not applicable in liferay-look-and-feel.xml. It is throwing error while using it. I'm working with liferay 6.1 ce GA1
David H Nebinger
RE: Customizing look and feel on portal homepage
August 15, 2012 9:49 AM
Answer

David H Nebinger

Community Moderator

Rank: Liferay Legend

Posts: 8385

Join Date: September 1, 2006

Recent Posts

Vinod Kumar Nair:
@David H Nebinger

I'm trying to achieve this by overriding in custom.css file as :-
 1body.portlet {
 2    color: blue;
 3    border-color: navy;
 4   
 5}
 6
 7.portlet-topper {
 8    background: red;
 9    background-color: pink;
10}


Why it is not working? these css classes applied on every portlets of liferay by default should get impacted?


Again, it probably depends on just how you made the changes. Do you have a custom theme? Did you try changing the custom.css directly under the webapps/ROOT directory? Etc.

All of these questions need to be answered before we could address why it's not working...

Yes, delete the lines that refer to the <nav class="site-breadcrumbs" id="breadcrumbs"></nav> stuff.

This has removed the whole bar(where breadcrumbs are residing). I just want to remove or replace first one where 'liferay' is written before 'welcome'.


That's a different request all together. The breadcrumbs represent your path through the site. Looks like you didn't change your default from "Liferay" to whatever your company name is. That's where the "Liferay" is coming from, and you would change this in the control panel.
Vinod Kumar Nair
RE: Customizing look and feel on portal homepage
August 15, 2012 12:28 PM
Answer

Vinod Kumar Nair

Rank: Junior Member

Posts: 59

Join Date: July 13, 2012

Recent Posts

David H Nebinger:

Again, it probably depends on just how you made the changes. Do you have a custom theme? Did you try changing the custom.css directly under the webapps/ROOT directory? Etc.

All of these questions need to be answered before we could address why it's not working...

Hi David, the code which I have shown you above is written in custom.css file under _diffs folder as I'm overriding the original class of CSS file by creating a custom theme. I don;t know what you are asking about 'changing under webapps/ROOT' directory directly as I'm not doing that. Is something else needs to be done?
David H Nebinger
RE: Customizing look and feel on portal homepage
August 15, 2012 1:41 PM
Answer

David H Nebinger

Community Moderator

Rank: Liferay Legend

Posts: 8385

Join Date: September 1, 2006

Recent Posts

Vinod Kumar Nair:
Hi David, the code which I have shown you above is written in custom.css file under _diffs folder as I'm overriding the original class of CSS file by creating a custom theme. I don;t know what you are asking about 'changing under webapps/ROOT' directory directly as I'm not doing that. Is something else needs to be done?


No, that was really the question. Sometimes new folks just edit the CSS files directly inline on the application server w/o understanding the consequences...

Okay, so a couple of more questions. On the welcome page, did you change it to use your custom theme, or is it still using the default theme?

Have you tried clearing your cache, just to ensure you don't have an old version of the file that is being used?

And you should check out the actual styles assigned using something like the "Inspect Element" option of Chrome. Sometimes CSS will use a different rule when a better match applies. Using "Inspect Element" in chrome, you'll see which CSS file has the definition(s) being applied that may be superseding your definitions.
Vinod Kumar Nair
RE: Customizing look and feel on portal homepage
August 15, 2012 8:28 PM
Answer

Vinod Kumar Nair

Rank: Junior Member

Posts: 59

Join Date: July 13, 2012

Recent Posts

David H Nebinger:
No, that was really the question. Sometimes new folks just edit the CSS files directly inline on the application server w/o understanding the consequences...

Okay, so a couple of more questions. On the welcome page, did you change it to use your custom theme, or is it still using the default theme?

Have you tried clearing your cache, just to ensure you don't have an old version of the file that is being used?

And you should check out the actual styles assigned using something like the "Inspect Element" option of Chrome. Sometimes CSS will use a different rule when a better match applies. Using "Inspect Element" in chrome, you'll see which CSS file has the definition(s) being applied that may be superseding your definitions.


Yes, I have selected my own custom theme from 'look & feel option' for that page & using it. By clearing cache, do you mean clearing internet browsing history and all temporary files associated with that?
I have never used 'Inspect Element'. I will use this to inspect and get back to you with the results emoticon
Khanh Pham
RE: Customizing look and feel on portal homepage
October 15, 2012 8:49 AM
Answer

Khanh Pham

Rank: New Member

Posts: 1

Join Date: October 15, 2012

Recent Posts

Vinod Kumar Nair:
David H Nebinger:
No, that was really the question. Sometimes new folks just edit the CSS files directly inline on the application server w/o understanding the consequences...

Okay, so a couple of more questions. On the welcome page, did you change it to use your custom theme, or is it still using the default theme?

Have you tried clearing your cache, just to ensure you don't have an old version of the file that is being used?

And you should check out the actual styles assigned using something like the "Inspect Element" option of Chrome. Sometimes CSS will use a different rule when a better match applies. Using "Inspect Element" in chrome, you'll see which CSS file has the definition(s) being applied that may be superseding your definitions.


Yes, I have selected my own custom theme from 'look & feel option' for that page & using it. By clearing cache, do you mean clearing internet browsing history and all temporary files associated with that?
I have never used 'Inspect Element'. I will use this to inspect and get back to you with the results emoticon


I am interested in this issue and I am curious to know about your results. Did you succeed with it?
Antoine Comble
RE: Customizing look and feel on portal homepage
October 16, 2012 7:20 AM
Answer

Antoine Comble

Rank: Regular Member

Posts: 221

Join Date: September 7, 2012

Recent Posts

Try adding this following lines in your portal-ext.properties :
# Disable caching in Liferay 6.1
theme.css.fast.load=false
theme.images.fast.load=false
javascript.fast.load=true
javascript.log.enabled=false
layout.template.cache.enabled=false
browser.launcher.url=
combo.check.timestamp=true
freemarker.engine.cache.storage=soft:1
freemarker.engine.modification.check.interval=0
openoffice.cache.enabled=false
velocity.engine.resource.manager.cache.enabled=false
com.liferay.portal.servlet.filters.cache.CacheFilter=false
com.liferay.portal.servlet.filters.themepreview.ThemePreviewFilter=true