| igor kotlov kim | : | Custom them Navigation Portlet |
| How to change designing the Navigation Portlet? | ||
| Bavithra Rajendran | : | Hi ! |
| You can use the look and feel feature for designing the Navigation portlet or you can modify the css file of your theme. | ||
| Thanks, | ||
| Bavithra Rajendran | ||
| igor kotlov kim | : | 1.On a screenshot the standard Navigation Portlet. |
| Custom CSS: | ||
| /*------ Navigation portlet ------*/ | ||
| .nav-menu li a.ancestor { font-weight: bold; } | ||
| nav-menu li a.selected { color: #00FF00; font-weight: bold; text-decoration: none; } | ||
| .nav-menu ul { padding-left: 10px; } | ||
| I Do changes it does not work.!? 2.Changes occur if I do them in base. Base CSS: | ||
| /* ---------- Links ---------- */ | ||
| a { color: #08294C; text-decoration: underline; } | ||
| a:hover { color: #FF0000; text-decoration: none; } | ||
| a:visited { } | ||
| 3.But it mentions all links, and I should make only in Navigation Portlet!(color/font-size/hover/background...) | ||
 | ||
| Attachments: | ||
| Bavithra Rajendran | : | Hi ! |
| You should not modify in the base.css file. For a single portlet, you have to mention the particular portlet id and add the required code in your custom.css file. Here is the sample for your reference (Use your navigation portlet id) : | ||
Let me know for any concern  | ||
| Thanks, | ||
| Bavithra Rajendran | ||
| igor kotlov kim | : | Hi! |
| I change custom CSS: | ||
| /*------ Navigation portlet ------*/ | ||
| #portlet-wrapper-71_INSTANCE_goE5 { | ||
| background-color: blue; color: green; font:bold; text-decoration: underline; font-size: 12px; } | ||
| There are no changes in Navigation portlet ! | ||
| Or I should add it a code in custom CSS: /* ---------- Portlets ---------- */ #portlet-wrapper-71_INSTANCE_goE5 { background-color: blue; color: green; font:bold; text-decoration: underline; font-size: 12px; } | ||
| Bavithra Rajendran | : | Hi ! |
| Don't change the name under /*------ Navigation portlet ------*/. Try to add that code under custom.css and make sure that you are giving your navigation portlet id. You can use the Look and Feel(Advanced Styling) Option too. | ||
| Thanks, | ||
| Bavithra Rajendran | ||
| Babu Janarthanan | : | Hi, |
| You can include custom css using Advanced Styling which is available under Navigation's portlet Look and feel --> advanced Styling. | ||
| hope it helps you... | ||
| Thx, | ||
| Babu | ||
| igor kotlov kim | : | I added code under custom.css: |
| #portlet-wrapper-71_INSTANCE_goE5 { background-color: blue; color: green; font:bold; text-decoration: underline; font-size: 12px; } | ||
| It does not work there are no changes in navigation portlet It is probably linked with portal_normal.vm??? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
| #parse ($init) | ||
| <html dir="#language ("lang.dir")" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> <title>$the_title - $company_name</title> | ||
| $theme.include($top_head_include) </head> | ||
| <body class="$css_class"> | ||
| $theme.include($top_messages_include) | ||
| <div id="wrapper"> <div id="banner"> <h1 class="logo"> <a class="png" href="$company_url">$company_name</a> | ||
| <span class="current-community"> $community_name </span> </h1> | ||
| #parse ("$full_templates_path/dock.vm") | ||
| #if ($update_available_url) <div class="popup-alert-notice"> <a class="update-available" href="$update_available_url">#language ("updates-are-available-for-liferay")</a> </div> #end </div> | ||
| #if ($has_navigation) #parse ("$full_templates_path/navigation.vm") #end | ||
| #if ($selectable) $theme.include($content_include) #else $portletDisplay.recycle() | ||
| $portletDisplay.setTitle($the_title) | ||
| $theme.wrapPortlet("portlet.vm", $content_include) #end | ||
| <div id="footer"> <p class="copyright-notice">© 2004-$the_year $company_name</p> | ||
| <div class="footer-award-images"> #set ($journalArticleLocalService = $serviceLocator.findService("com.liferay.portlet.journal.service.JournalArticleLocalService")) | ||
| #set ($journalArticleId = $theme_settings.getProperty("footer-article-id")) | ||
| #if ($journalArticleLocalService.hasArticle($guestGroup.getGroupId(), $journalArticleId)) $velocityPortletPreferences.setValue("portlet-setup-show-borders", "false") $velocityPortletPreferences.setValue("group-id", "$guestGroup.getGroupId()") $velocityPortletPreferences.setValue("article-id", $journalArticleId) | ||
| $theme.runtime("56_INSTANCE_a453", "", $velocityPortletPreferences.toString()) | ||
| $velocityPortletPreferences.reset() #end </div> | ||
| #if ($has_navigation) #parse ("$full_templates_path/bottom_navigation.vm") #end </div> </div> </div> | ||
| </body> | ||
| #js ($js_main_file) | ||
| $theme.include($bottom_include) | ||
| </html> | ||
| Mazhar Anwar | : | Hi, |
| Are you using navigation portlet on one page only? | ||
| I think to change #portlet-wrapper-71_INSTANCE_goE5 is not a good option. You can change the background of the portlet from look and feel by using controls on top right corner of the portlet. | ||
| Other option is to add one div tag in navigation portlet's view.jsp. and apply your style what you can define in custom.css of your theme. | ||
| You can change navigation portlet's view.jsp using ext environment or using hooks in plugins. | ||
| Regards, | ||
| igor kotlov kim | : | Hi! |
| To make on each page, approximately so-example more low. | ||
| Thanks | ||
 | ||
| Attachments: | ||
| DarshanKumar N Bhatia | : | HI EVERYONE |
| SO CAN ANYONE EXPLAIN HOW TO MAKE NAVIGATION PORTLET TO LOOK LIKE LEFT SIDE MENU,WHICH AFFECTS WEB CONTENTS DYNAMICALLY ON SAME PAGE. | ||
| I AM TRYING TU USE | ||
| CATEGORY NAVIGATION PORTLET AND ASSET PUBLISHER TO MAKE SAME FUNCTIONALITY. | ||
| PLEASE GIVE EXAMPLE/RESOURCE | ||
| (IN ANY VERSION OF LIFERAY 5+,6+) | ||
| HOW TO ACHIEVE THIS. | ||
| Purba Chowdhury | : | Hi, |
In custom.css u can change the navigation part to achieve the drop down.Any way you achieve the page link by making webcontent.You can place the webcontent at left and the webcontent should have a structure of "link to page".  |
Laliwala IT Services
Website Development
Monday, February 21, 2011
Custom them Navigation Portlet
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment