How to apply advanced styling for all portlets of one kind


Tags: css,liferay,portlet

Problem :

I want to apply my advanced styling for asset-publisher portlet for all the instances which is created and will be created in feature. (I want to update the width of the preview of the document not the width of the portlet) This is my code:

.yui3-dd-draggable.yui3-resize{
width: 75% !important;
}

I tried like this

.portlet-borderless.portlet-asset-publisher.yui3-dd-draggable.yui3-resize{
width: 75% !important;
}

or

.portlet-borderless.portlet-asset-publisher. yui3-dd-draggable.yui3-resize{
width: 75% !important;
}

or

.portlet-borderless.portlet-asset-publisher
.yui3-dd-draggable.yui3-resize{
width: 75% !important;
}
}

or

.yui3-dd-draggable.yui3-resize{
.portlet-borderless.portlet-asset-publisher
width: 75% !important;
}
}

or all this variants but with .portlet-borderless.portlet-document-library instead of .portlet-borderless.portlet-asset-publisher but nothing succeed.

So do u have any suggestions how to make my css default for all asset-publisher portlets in my site ?



Solution :

By default, all Asset Publisher instances use this class in the wrapping div element, as specified in the platform liferay-portlet.xml:

<portlet>
    <portlet-name>101</portlet-name>
    ...
    <css-class-wrapper>portlet-asset-publisher</css-class-wrapper>
    ...
</portlet>

Styling of every Asset Publisher instance

CSS selector .portlet-asset-publisher is enough.

.portlet-asset-publisher {
    width: 75% !important;
}

Styling of the asset detail only

By default, Liferay wraps the asset content to a div with asset-full-content class.

.portlet-asset-publisher.asset-full-content {
    width: 75% !important;
}

If you need more control

Both the list and the detail can be customized with ADT templates or JSP hooks. If you need complete control over the HTML output, I suggest to implement custom ADT template for the list (see Rich Summary) and custom display style for the detail (ie. JSP hook - in LR 6.2, the detail still cannot be customized with ADT; see example).


    CSS Howto..

    How to align a flash movie to center with “overflow: hidden”?

    How to Create 3 Column Layout with CSS Only?

    how to style this via css in Bootstrap

    How to automatically style HTML output of kramdown converter?

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    CSS - how to dry up?

    CSS: How to drill all the underlying layers up to the background?

    How can i overlay an 10x10px image on top of another image?

    how to fix height:auto css

    How to send an HTML file with css?

    How to fade, animate and change text, word in title / sentence

    How to get cropped image with gray/ sepia in my editor.?

    How to remove hover state

    How to change transparency of background image using javascript?

    Css: How to make position fixed 100% resizable with bottom padding? - JS Fiddle provded

    • centered, not moving down.. unsure why / how to fix

    How to to change CSS double class properties through script

    CSS! Horizontal resizable menu ul li, how to spread it on full width of the display?

    How to reset default styling of input[type=“text”]:focus in Chrome and Safari?

    Why my easypie number don't show inside?

    Change Class or CSS “display” property of a DIV and show it smoothly

    How to Create Diagonal Heading Line with Pure CSS

    How to specify correct output folder for CSS using SASS & LiveReload?

    How to put horizontal dropdown menu bar

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    How is Facebook's website front-end and it's right sidebar designed?

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    CSS: How to get lines to “line up” accross different columns?

    CSS - How to float correctly into pseudocolumns

    How to make “button-like appearance” with CSS