Jump to content

Archived

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

loiborg

Disable mediabox image padding when using href/links

Recommended Posts

loiborg    0
loiborg

I've tried putting a logo in a mediabox since I was following this guide. The weird thing is that a mediabox with the image has no padding, thus placing the logo on top of the page (0px from the top). But using the code included in the guide (a simple a href), it suddenly has a 20px padding.

 

Attatched is a screenshot showing the top of both embeds of the logo - the purple logo on the left is clickable while the logo on the right isn't.

 

Thanks for your time!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Can you provide a link to the site in question, as I have just this moment added a link to the mediabox and my image has no padding.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
loiborg    0
loiborg

Hi,

 

Can you provide a link to the site in question, as I have just this moment added a link to the mediabox and my image has no padding.

Hi Danny,

 

Thanks for the quick reply. It's the second (private) site on my profile.

Share this post


Link to post
Share on other sites
loiborg    0
loiborg

Danny The site isn't ready to go live. I disabled maintenance mode for three hours. Have enabled it now again. I've created an admin user for you with your regular e-mail.

Share this post


Link to post
Share on other sites
loiborg    0
loiborg

Post removed: wrong thread. Above is still relevant.

Share this post


Link to post
Share on other sites
Rob    547
Rob

The site is in maintenance mode. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
loiborg    0
loiborg

Hi Rob - yes - as I wrote the site isn't ready to go live. I had created a user for Danny, which is still active, and now I've also created one for you with admin rights.

I have removed the duplicate logo that does have a link, but it's basically the logo in the upper left corner that needs to be a link to the root.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Where did you send the login info?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
loiborg    0
loiborg

Rob It should have been sent to your mail robert (at) pagelines (dot) com. I tried sending the login info to your profile on this forum, but I wasn't allowed to do so.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Got it.  I will work on it Monday.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
loiborg    0
loiborg

Awesome, Rob - thanks a bunch. Have a good weekend!  :)

Share this post


Link to post
Share on other sites
Rob    547
Rob

You too!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

Okay,  Here's the scoop.

 

You didn't follow the instructions in this document  http://docs.pagelines.com/tutorials/creating-a-branding-area

 

And worse, you uploaded a very large image, expecting it to be scaled down by either DMS or WordPress.

 

Your image is set incorrectly, but the method you selected is letting the image go right to the screen top, but it appears large in Firefox.  Some browsers will not scale that image at all displaying it very large in IE, for example.

 

You need to make a scaled down version of that image for use in place of the very large one or, use the code Danny provided in the documents, adding inline sizing or wrapping it in a div with a class to which you may apply a fixed size.  However, the best method is graphic as using px in CSS will result in making the section unresponsive on mobile devices.

 

That is going to be a nice site once you've finished it!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
loiborg    0
loiborg

Hi Rob - thanks for the quick reply.

 

Yes and no. I followed the instructions from the document, but that was exactly the problem - that added a 'floating' logo instead of one that has 0px margin on the top. That's why I placed an image just in a mediabox without doing much about until I found a solution.

 

I've left the 'floating' logo as it is for now - can you please see if you can make it stick to the top?

 

- And thanks, I sure hope so too. Using DMS, it still shows that it is brand new, but other than a few hiccups (and a couple of issues I needed help with), it has been a joy to work with  :D

Share this post


Link to post
Share on other sites
Rob    547
Rob

The important bit was to use this method

<a class="logo" href="http://www.my-website.com/"><img src="Path To My Image" alt="My Logo"></a>

to add the branding logo.  This may not make sense, but, by doing it this way, you can add your site tag and name to the alt and can also add, if need be, inline CSS, though it shouldn't be necessary.  You can also wrap that whole thing in a unique class. That's something you can't do when uploading via the media uploader.

 

Those instructions were precise, and written that way for a reason, so best practice would be to follow them.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

It is stuck to the top now, with no margin, padding or spacing above it.

See the image below from Firefox.  Is there some other browser where it's not showing as below?

[attachment=1366:8-19-2013 10-43-05 AM.jpg]


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
loiborg    0
loiborg

Hi Rob. Had to change it back again. My company needed the site online with only a few hours notice, so I had to change it back quickly to work on the rest of the site (and I didn't have time to post an update here that I had removed the 'floating' logo.

 

So I'd like to stress that I did follow the instructions which were very precise indeed. It just didn't work and I can't show it on the site now as it's about to go live and get a lot of important traffic :mellow:

Share this post


Link to post
Share on other sites
Rob    547
Rob

Okay.  Understood.

 

You may want to experiment on a development server.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

×