This topic is now archived and is closed to further replies.

Padding in Header Image

6 posts in this topic

Hello, I´ve followed the steps of the tutorial "Creating a Branding Area"


In mediabox there are two ways for setting the image:

1.- Mediabox image.

2.- Text and Embed HTML.


I´ve inserted the image url ( in the "mediabox image" field: The image looks ok, but, of course, it has no link.


I want the image link to home, so i deleted that field and tried the second alternative (as descripted in the tutorial)


I´ve inserted next line in the "Text and Embed HTML" field


<a href=""><img src="" alt="Home"></a>


The image was set and the link works but a top padding of 20px appeared in header.


I want the image with the link and without top-padding.


Anyone can help me?

Thanks, Eugenio

Share this post

Link to post
Share on other sites

Hi Eugenio,

Hmmm... I inspected your site with Google DevTools &  Firefox Firebug: your top & bottom header paddings are already set to 0px.

I think I understand what you mean and happened to you though: a top & bottom margin of ~20px appearead in your MediaBox when you switched from linking/uploading an image to embedding the same image with a HTML link. Correct?

Actually, when you use "Text and Embed HTML", the DMS class the-media-html adds a top & bottom margin of 1.55em to your content (here: 21,7px, inherited from default DMS base font size of 14px).

To get rid of this top margin, try this:

.section-mediabox .the-media-html p {

    margin-top: 0px !important;


Hope it will help!

Share this post

Link to post
Share on other sites

Thank you Erwan but it didn´t work. I inserted that lines in the "LESS/CSS Fallback", is that right?


Before DMS, i inspected with firebug, changed the code, copy the rule and paste in "pagelines - site options - custom code". How can i do with DMS?

Thanks again, Eugenio

Share this post

Link to post
Share on other sites


In DMS like in Framework, there are three methods for adding customization: see DMS "How to customize" doc.


If I understand you correctly, you use the first one aka "DMS Customize Options". As explained in this dedicated doc, just navigate with the frontend visual editor to DMS Toolbar → Custom Code → LESS/CSS tab and insert your code.

FYI, this is equivalent to Framework backend Pagelines → Site Options → Custom Code → Custom CSS / LESS. And actually, your code will appear too in DMS backend Pagelines  → DMS tools  → DMS LESS Fallback, but I wouldn't recommend to add it here (it's supposed to be used "to fix LESS if you change something that breaks the front end editor".

And my code above does work when put there. I just checked your site: it seems it finally worked for you too, am I right?

Please note: of course, my code applies to all "
Text and Embed HTML" contents of all MediaBoxes of your site. You can of course be more specific, for instance by adding a styling class in your header MediaBox options and defining it in your custom LESS/CSS.




Share this post

Link to post
Share on other sites

I´ve been proving and finally i get it. It´s more efficient to work like you said.

thanks, Eugenio

Share this post

Link to post
Share on other sites


Great :)

[Mods of this forum can mark the topic as solved: users can't anymore, if i understand well]

Share this post

Link to post
Share on other sites

  • Similar Content

    • Header Image in Whitehousepro 6
      By lbhansen
      I am not a web pro and I've been away from DMS for more then six months so I'm almost at square one. This may be a general question but I happen to be working with the Whitehousepro 6 theme.
      Where is the header image defined. I want to replace it with my company logo. By "header image" I am referring to the PageLines leaf with "WhiteHousePro 6" as an image the has an underlying link to the site's home page.
      (Am I asking this question in the right place? Are there some fundamentals I should learn about how to properly use the forum?)
    • Trying to creat a page with full size header image
      By bfrye26
      I have been working with DMS since it came out. It does almost everything I want to see in a themeing system. The only issue I have found is when trying to create a layout that has a full size featured image with the text coming over it slightly. I have achieved something close, although I am sure with some help I can get the full effect. 
      So far my site looks like this:
      I am trying to achieve a look that is more similar to this:
      If anyone has any ideas how I could do this that would be amazing!
    • Making header image taller
      By vanessacallaway
      Hi there,
      I've read a lot of other posts on this topic but can't figure it out.
      Thanks for reading this in advance!
      Is there a way I can make my header image taller? Is there a custom code I can plug into my CSS section?
      here's my site:
    • Global Header
      By usxmarine
      I'm stuck at the very basics of this platform. How do I add a global header image. The only option I seen was to edit the preinstalled "Header" bar but that did nothing. Already frustrated and this should be a simple task. HELP!
    • functions php wont take code but works on chat lady site - header
      By kate1000
      Hello when I added code I kept getting erros for changing the link on my header image to point to the map page rather than home page ( as it has the address and emial on it )
      When I added code - from forum - with her help it shut donw my site and I had to re-load functoins php
      file over and over again.
      we did several things and then she asked me to load the paste below to my page - just re-do the entire thing as it worked fo rher on her site. 
      it shut my site down and made it a mess - so I reloaded the php file and it came back - thank goodness!
      funny thing is - the site was a mess but the top image linked as it should -
      here is the link to hte php - that i discussed.
      this is the code that just wont work on my pagelines customeize functoins file
      here is the screen shot of how to entner it and I did just that.
      Thank you for help - I could sure like to get htis header to link to that page and keep the site in order