Problem with margin of the blog portlet

[Marcos Laurito, modifié il y a 10 années.]

Im having problems trying to modify the left margin of the blog portlet content...
This margin is set by default as very big and my blog entry can't show all of its content because of that...
This next image ilustrates my problem...
Its a blog portlet inside a social office site...

Could anyone help me??

Thanks and sorry for my english..

[gerald hemmers, modifié il y a 10 années.]

Not running social office, but most of the time hunt down where the margin or padding is coming from with chrome insepct element or firefox.

Make sur that you override the class or element with the margin or padding is declared on a low level.
Css style difinition in Liferay are depenidng on othe classes so declaring it as specific as possible helped me a lot.

Greets,
gerald

[Punam Shah, modifié il y a 10 années.]

Hi,

Try to reset margins as -

.portlet-content {
padding-left: 2px;
}

Regards,
Punam Shah

[Marcos Laurito, modifié il y a 10 années.]

Punam Shah:

Hi,

Try to reset margins as -

.portlet-content {
padding-left: 2px;
}

Regards,
Punam Shah

ok, but where do i have to add this lines??
i assume that it is in some css file but i don't know wich one...

thanks

[Punam Shah, modifié il y a 10 années.]

Place the code snippet inside the custom.css

for More Info, Please visit : Create Liferay Theme ; It will help you to customize default liferay theme.

Good Luck !!!

[Suraj Bihari, modifié il y a 10 années.]

Hi Marcos,

Another option, without theme development, is to go to: Manage > Page. In the left pane select the Parent page "Public / Private pages". Afterwards make sure you're in the 'look and feel' section on the right side of the popup. You will find "Insert custom CSS that will be loaded after the theme." at the bottom. You can also add your css changes here.

These changes will be inherited by underlaying pages if these pages have "Use the same look and feel of the Public/Private Pages."

Then again, it's much more fun to create your own theme and put the changes in custom.css like Punam suggested, all roads lead to Rome.

Enjoy Liferay,
Suraj

[Marcos Laurito, modifié il y a 10 années.]

Suraj Bihari:

Hi Marcos,

Another option, without theme development, is to go to: Manage > Page. In the left pane select the Parent page "Public / Private pages". Afterwards make sure you're in the 'look and feel' section on the right side of the popup. You will find "Insert custom CSS that will be loaded after the theme." at the bottom. You can also add your css changes here.

These changes will be inherited by underlaying pages if these pages have "Use the same look and feel of the Public/Private Pages."

Then again, it's much more fun to create your own theme and put the changes in custom.css like Punam suggested, all roads lead to Rome.

Enjoy Liferay,
Suraj

Thanks man. I've tried this, putting the code posted above in the "Insert custom CSS that...." and checking that child pages of the site have the "Use the same look and feel.." option checked, but my blog portlet is not showing any change. The margin is not reseting to 2px...
The code that i've added is this:

.portlet-content {
padding-left: 2px;
}

Any suggestions? Any change to that code?

[Suraj Bihari, modifié il y a 10 années.]

Hi Marcos,

If you set the CSS to ...

.portlet-blogs .entry {
    width: 100%;
    margin: 0px;
    max-width:none;
    padding: 2px;
}

... you will see the styling change.
Add more properties to suit your needs.

Enjoy Liferay,
Suraj

[Suraj Bihari, modifié il y a 10 années.]

The max-width is a responsive property

HTH

[Joel Jackson, modifié il y a 9 années.]

To fix this, you have to know the difference between margin and padding. They behave themselves differently. First read the following tutorial: how to set margins and paddings in CSS. It has illustration on how it works and affects on each other.