• 0

Padding in Header Image


Question

Posted · Report post

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 (http://go2ilhagrande.com/wp-content/uploads/2013/08/Go2-Header-1200.png) 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="http://go2ilhagrande.com"><img src="http://go2ilhagrande.com/wp-content/uploads/2013/08/Go2-Header-1200.png" 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

5 answers to this question

  • 0

Posted · Report post

Eugenio

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Eugenio

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
  • 0

Posted · Report post

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now