Jump to content


Photo

Need help removing space around a banner

banner padding

  • Please log in to reply
15 replies to this topic

#1 blankslatepress

blankslatepress

    Newbie

  • Members
  • Pip
  • 9 posts
  • Country: Country Flag

Posted 17 April 2013 - 03:14 PM

I don't know css, that is why I wanted to use a drag and drop theme--and I've used PageLines on 3 other websites. But now I'm trying to place a banner at the top (and eventually will need one at the bottom) of the page. I've got the banner placed, but there's too much padding.  Here's the site: http://ccusers.org/

 

 



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 17 April 2013 - 03:28 PM

You’ll need to use Custom CSS (in PageLines > Site Options > Custom Code > Custom CSS/LESS). To find the Custom CSS you need, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please review this entire documentation and follow the instructions: http://support.pagel...ion/custom-css. In your case, you'll need to reduce the padding of the area, so you'll need to use this property: http://www.w3schools...css_padding.asp (there's an example for reducing padding at the bottom of the instructions for your reference).



#3 blankslatepress

blankslatepress

    Newbie

  • Members
  • Pip
  • 9 posts
  • Country: Country Flag

Posted 17 April 2013 - 03:37 PM

I hate to sounds stupid, but I tried all last evening to figure this out and I used Chrome inspector, then I tried to find the padding code on the pagelines section banner template, but couldn't find it. 



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 17 April 2013 - 04:29 PM

Can you please take a screenshot (with the Chrome inspector enabled and the banner section selected) and upload it here? That way, I can point out what exactly you need to do for that step in the process.



#5 blankslatepress

blankslatepress

    Newbie

  • Members
  • Pip
  • 9 posts
  • Country: Country Flag

Posted 17 April 2013 - 04:31 PM

Okay...i'm going to try to post something in the custom codes section, but do I put it in the header?



#6 blankslatepress

blankslatepress

    Newbie

  • Members
  • Pip
  • 9 posts
  • Country: Country Flag

Posted 17 April 2013 - 04:31 PM

Yes...I'll do the screenshot now.



#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 17 April 2013 - 04:38 PM

Okay thank you.



#8 blankslatepress

blankslatepress

    Newbie

  • Members
  • Pip
  • 9 posts
  • Country: Country Flag

Posted 17 April 2013 - 04:40 PM

 Okay...I really am an idiot. How do I upload the jpg? I tried to paste it. When I click on the image file icon above, it asks me for a url. I tried My media to upload, but there's no option to select the file.



#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 17 April 2013 - 04:43 PM

Please upload your image to imgur.com and paste direct image URL here.



#10 blankslatepress

blankslatepress

    Newbie

  • Members
  • Pip
  • 9 posts
  • Country: Country Flag

Posted 17 April 2013 - 04:56 PM



#11 blankslatepress

blankslatepress

    Newbie

  • Members
  • Pip
  • 9 posts
  • Country: Country Flag

Posted 17 April 2013 - 05:13 PM

Hello?



#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 17 April 2013 - 06:20 PM

Okay, in the Chrome inspector, you see this code:

 
<div id="banners"

banners is the selector name for the banners (it is what identifies the banners in the page). Does that make sense so far?



#13 blankslatepress

blankslatepress

    Newbie

  • Members
  • Pip
  • 9 posts
  • Country: Country Flag

Posted 17 April 2013 - 07:42 PM

Please just send all the directions at once. I've given up and hired someone to help me. I need to send the directions to her. 



#14 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 April 2013 - 08:14 PM

Hi there,

 

I've copied this from a previous post which might be able to assist you further.

 

"I use firebug as it shows the areas which have padding/margins as a highlighted blue or yellow block, i find that's the quickest and easiest way to track them down. I would imagine chrome has something similar.

 

So when you inspect the element, scroll up and down in the html just above and below the element you land on, if you see a block of thick dark blue/yellow appear that indicates that that div you're hovering over has the padding/margin applied to it.

 

So click on that div and you'll see the css load up in the right hand window and you'll be able to track it down.

 

Recorded you a short video to show this process live - http://screencast.com/t/QdC5BCs3"



#15 blankslatepress

blankslatepress

    Newbie

  • Members
  • Pip
  • 9 posts
  • Country: Country Flag

Posted 17 April 2013 - 08:18 PM

Thanks, but it doesn't really help me. I'll forward it to the programmer I hired. Why isn't there a function for controlling padding in the easy-to-use interface on the page when you set up the banner in the first place? There's a spot for controlling padding around the text, but that doesn't do anything. Seems like this is something that a lot of people would need if they are using banner ads on their sites.



#16 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 April 2013 - 08:32 PM

Hi there, each section inside the platform is given its own padding/margins to make it as easy as possible for clients to make a site without having to code in all the additional styles. If you're looking to remove that styling for something custom then currently the only way is to use css unfortunately. Platform is one of our older themes, so this is something we're looking to improve on in newer versions of the Pagelines Framework, but adding lots of additional options inside of each of the section panels tend to confuse people, so they've tried to keep everything as user friendly as possible.

 

If you've hired a developer to assist then they'll be able to track down the css selectors using that method above, using a web developer tools to look up and adjust the css elements on a site will probably be something they do daily, so they'll be able to correct that quickly for you.

 

Unfortunately we're unable to assist directly with css customizations as it's classed as site design, but we can always point you to the correct resources when you get stuck to learn the correct way to make the adjustments or offer assistance if we notice something obvious or incorrect in the code you've found to make the adjustments.







Also tagged with one or more of these keywords: banner, padding