Forums

Home » Liferay Social Office

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Marcos Laurito
Problem with margin of the blog portlet
November 15, 2013 11:44 AM
Answer

Marcos Laurito

Rank: Junior Member

Posts: 83

Join Date: April 18, 2013

Recent Posts

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..
Attachment

Attachments: margin.JPG (103.0k)
gerald hemmers
RE: Problem with margin of the blog portlet
November 16, 2013 6:45 AM
Answer

gerald hemmers

Rank: Junior Member

Posts: 92

Join Date: May 13, 2008

Recent Posts

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
RE: Problem with margin of the blog portlet
November 18, 2013 1:07 AM
Answer

Punam Shah

Rank: Regular Member

Posts: 115

Join Date: January 19, 2012

Recent Posts

Hi,

Try to reset margins as -

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

Regards,
Punam Shah
Marcos Laurito
RE: Problem with margin of the blog portlet
November 18, 2013 4:39 AM
Answer

Marcos Laurito

Rank: Junior Member

Posts: 83

Join Date: April 18, 2013

Recent Posts

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
RE: Problem with margin of the blog portlet
November 18, 2013 10:34 PM
Answer

Punam Shah

Rank: Regular Member

Posts: 115

Join Date: January 19, 2012

Recent Posts

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
RE: Problem with margin of the blog portlet
November 19, 2013 1:47 PM
Answer

Suraj Bihari

Rank: Junior Member

Posts: 42

Join Date: May 20, 2011

Recent Posts

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
RE: Problem with margin of the blog portlet
January 10, 2014 5:20 AM
Answer

Marcos Laurito

Rank: Junior Member

Posts: 83

Join Date: April 18, 2013

Recent Posts

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
RE: Problem with margin of the blog portlet
January 10, 2014 12:30 PM
Answer

Suraj Bihari

Rank: Junior Member

Posts: 38

Join Date: December 20, 2013

Recent Posts

Hi Marcos,

If you set the CSS to ...

1.portlet-blogs .entry {
2    width: 100%;
3    margin: 0px;
4    max-width:none;
5    padding: 2px;
6}


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

Enjoy Liferay,
Suraj
Suraj Bihari
RE: Problem with margin of the blog portlet
January 10, 2014 1:04 PM
Answer

Suraj Bihari

Rank: Junior Member

Posts: 42

Join Date: May 20, 2011

Recent Posts

The max-width is a responsive property

HTH
Joel Jackson
RE: Problem with margin of the blog portlet
November 23, 2014 1:32 AM
Answer

Joel Jackson

Rank: New Member

Posts: 2

Join Date: November 23, 2014

Recent Posts

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.