Monday, March 8, 2010

CSS sprite example: Two rows images.

The iconic button given is;


Grid view for image above.

Result:

HTML code;



CSS style in custom.css

/*~~~~~~~~~~~~~~~~~~~~~~~CSS_sprite~~~~~start~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
ul#sprite_footer{
margin:0 -29px;
width:928px;
height:196px;
}
ul#sf_row_1 li a{
height:110px;
}
ul#sf_row_2 li a{
height:86px;
}
ul#sf_row_1 li a,ul#sf_row_2 li a{
background:url(../images/button_image.png) no-repeat;
display:block;
border:none;
padding:0;
text-indent:-9999px;
}
#sf_row_1 li, #sf_row_2 li{
float:left;
display:inline;
}
#sf_row_1 li a,#sf_row_2 li a{
margin-right:-40px;
}
#sf_row_1 li a#button_1_1{
background-position:0px 0px;
width:218px;
}
#sf_row_1 li a#button_1_2{
background-position:-218px 0px;
width:167px;
}
#sf_row_1 li a#button_1_3{
background-position:-385px 0px;
width:165px;
}
#sf_row_1 li a#button_1_4{
background-position:-551px 0px;
width:166px;
}
#sf_row_1 li a#button_1_5{
background-position:-718px 0px;
width:212px;
}
#sf_row_2 li a#button_2_1
{
background-position:0px -110px;
width:206px;
}
#sf_row_2 li a#button_2_2
{
background-position:-206px -110px;
width:144px;
}

#sf_row_2 li a#button_2_3{
background-position:-350px -110px;
width:130px;
}
#sf_row_2 li a#button_2_4{
background-position:-480px -110px;
width:150px;
}
#sf_row_2 li a#button_2_5{
background-position:-630px -110px;
width:110px; }
#sf_row_2 li a#button_2_6{
background-position:-740px -110px;
width:188px;
}
/*~~~~~~~~~~~~~~~~~~~~~~~CSS_sprite~~~~~finish~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

Sunday, March 7, 2010

Understanding CSS in liferay.


By default, CSS styles in liferay can be found in folder /css. Bundle liferay with Classic theme means that css folder path: ~/tomcat-6.0.18/webapps/ROOT/html/themes/classic.


There are few css styles file. Main css (main.css) located all styling files from the lowest to highest (in term of priority) from top to bottom.



Let say, I want to add a new css file (e.g mystyle.css). I must import this file in main.css – add this new line @import url(mystyle.css); - the styles in this new file will overwrite all styles in other files above it. For a standard practice, custom.css has the highest priority.


Sometimes, new developer understood this thing but when doing some customization in custom.css nothing changes. Why? It is because the server not refers to that changes. When developer inspected the element using firebugs, the css style reference maybe main.css or base.css only. How to overcome this problem?



For development purpose only, developer must add new properties in portal-ext.properties (/webapps/ROOT/WEB-INF/classes). The properties are shows as the following.



## FOR DEVELOPMENT PURPOSE, NEED TO REMOVE
##AT PRODUCTIONS ##


## Set this property to true to load the theme's merged CSS files
##for faster loading for production.

##

## Set this property to false for easier debugging for development.
##You can also disable fast loading by setting the
## URL parameter "css_fast_load" to "0".

theme.css.fast.load=false

##

## Set this to flase to disable the display of CSS logging.

##

theme.images.fast.load=false

##

## Set this property to true to load the packed version of
##files listed in the properties "javascript.barebone.files" or

## "javascript.everything.files".

##

## Set this property to false for easier debugging for development.
##You can also disable fast loading by setting the
## URL parameter "js_fast_load" to "0".

##

javascript.fast.load=false

##

## Set this to true to enable the display of JavaScript logging.

##

javascript.log.enabled=true

##

## Setting it to false is useful during development if you need
##to make a lot of changes.

layout.template.cache.enabled=false

##

## Disable Liferay from opening a new browser window
##everytime start the server

##
browser.launcher.url=
##

## Last Modified

##

## Set this to true to check last modified date on server side CSS and

## JavaScript. On Development purpose just set it false

##

last.modified.check=false

##

## Enabling OpenOffice integration allows the
##Document Library portlet and the Wiki
##portlet to provide conversion functionality. This is tested with
## OpenOffice 2.3.x and 2.4. To start OpenOffice as a service,
##run the command:

##

## soffice -headless -accept="socket,host=127.0.0.1,port=8100;urp;"

##

openoffice.cache.enabled=false

##

## Set the Velocity resource managers. We extend the
##Velocity's default resource managers for better scalability.

##

velocity.engine.resource.manager.cache.enabled=false

##

## The cache filter will cache content. See ehcache.xml to modify the cache

## expiration time to live.

##

com.liferay.portal.servlet.filters.cache.CacheFilter=false


##

## The theme preview filter generates a preview of the currently applied

## theme that can be used by the Dreamweaver Theming plugin.
##This is disabled by default.
##Set the "themePreview" parameter to "1" in the URL to access

## the theme preview for any page. For example, a URL can be

## http://localhost:8080/web/guest?themePreview=1.

##

com.liferay.portal.servlet.filters.theme.ThemePreviewFilter=true

Thursday, March 4, 2010

CSS sprite in liferay

I have six images, arranged in a row. I call these images one by one in theme. But it will increase the HTTPRequest value.

CSS Sprite technique is a way to reduce HTTPrequest by combining images and then adjust the position value for each image. It can be in horizontal (X-axis) or vertical (Y-axis).

Before using CSS sprite, the coding[2] for that images may be look like this;

And the CSS style looks like this;

After applying CSS sprite....
In this tutorial, I combined six images and named it as button.png.
I restructured my codes as shown below.


And the CSS style looks like this;

The output:



If your button image in vertical, just adjust the Y-axis in background-position (e.g background-position:0px, -70px).


Note: Click on image to enlarge.

1. CSS style is written in custom.css
2. Coding in this entry located in portal_normal.vm