Liferay 6.1 alternative delete page “x” styling
BEFORE:
AFTER:
Create CSS Arrows
Create arrows with only CSS
Liferay 6.1 Compass and Sass
to use these features in Liferay 6.1 just add
@import “compass”;
at the top of your custom.css file in your theme.
here are some things I like about it:
COMPASS:
@include border-radius(4px);
OUTPUTTED CSS:
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
SASS lets you set variables and use them throughout your code:
$dark-blue: #2C4762;
$mobile-view-width: 300px;
$default-margin: 20px;
$calc-width: $mobile-view-width - $default-margin;
Debug with un-minified CSS or Javascript code in Liferay
To View un-minified CSS add “css_fast_load=0” to your url
To View un-minified JS add “js_fast_load=0” to your url
http://localhost:8080/web/guest/?css_fast_load=0
Modify Navigation portlet to style selected links
By Default the Navigation Portlet doesn’t traverse the selected class up to the root element; only to the current page that is selected.
If the Nav tree is deep of levels, if set to add the selected class by default it could cause some loading time issues
Notice in this picture Page1 isn’t bold, because the selected class isn’t added to it.
This is the html markup of the navigation portlet by default with the following Customizations:
- Display Style: Custom
- Header: Root Layout
- Root Layout: Parent at Level
- Root Layout Level: 0
- Included Layouts: All
- Nested Children: Yes
Solution:
Use Javascript to target selected link and add the selected class on parent “li”
This is what the result looks like:
Here is the final html mark code, see that the parent “li” has selected class name.
Hide Localized Check Box within Web Content
.journal-article-localized-checkbox {
clip: rect(0 0 0 0);
}
hides the localized checkbox when editing Web Content
