How to make layout with fixed sized column in Liferay?


Tags: html,css,layout,liferay

Problem :

How to make layout with fixed sized column in Liferay?

I know how it is possible to style it with CSS, but where to put CSS files in Layout project?

May be there are matching styles in aui.css already and I can just use them somehow?

What is better: to embed style into .tpl file or use CSS files?

FINALLY

I just redefined styles for columns by id in my theme:

.columns-3 #column-1 {
    width: auto;
}

.columns-3 #column-2 {
    width: 840px;
}

.columns-3 #column-3 {
    width: auto;
}


Solution :

How to make layout with fixed sized column in Liferay?

You can use inline styles to fix the width of the columns within the .tpl file. Crude but works :-)

I know how it is possible to style it with CSS, but where to put CSS files in Layout project?

I don't think you can have CSS files in a Layout. CSS files can go in theme. You can modify the .tpl with your custom CSS classes which will be present in your theme's CSS.

May be there are matching styles in aui.css already and I can just use them somehow?

I don't think there are styles having fixed width which you can use and also this theme seems to be automatically generated when using AUI javascripts (as mentioned in this post).

What is better: to embed style into .tpl file or use CSS files?

CSS files are always better since it gives you a lot of flexibility in changing the styles through different themes. So your layout would be dynamic based on the theme applied. Since styling basically is the job of the theme.


    CSS Howto..

    How to place an HTML element over another using CSS

    MVC How make a logout button

    Add background to first letter of a row of text. How?

    How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

    In GWT, how to create a Style object and associate it with a Widget WITHOUT using a CSS file and WITHOUT UiBinder

    How to move the jQueryUI close button on the dialog over the top of top right corner?

    How to add a mobile optimised external CSS to a Shopify site

    how to align button radio in css

    How to center absolute div horizontally using CSS?

    How to achive this design CSS

    How to set the css properties with its own data-attributes?

    How to make children auto fit parent's width only with CSS?

    CSS - How to change backgound colour for item avatar in ionicframework?

    How to build a dashed line that has borders on both sides, using CSS

    how to display background color in outlook 2010 html email?

    How to align columns in bootstrap to center?

    How to use CSS Class and ID selectors

    How to center navigation bar items CSS

    How do you style an android app?

    How to use :hover for one element and chnage another class css proprties

    How to align like-buttons on my website between
    elements and put a white background to them?

    How can I get this toggled drop down menu to be open by default - rather than having to have someone click it to initialize it?

    How to remove css from DOM

    How can I make all table cell sizes the same width in css?

    How to always make page content appear beneath navigation bar?

    How to add border for html tr

    css how to make text align bottom?

    How can I hide a style element in html

    How to target itemid=“” in CSS

    Why does my progress bar shows full progress value before it start loading