Jump to content
Sign in to follow this  
blankslatepress

Need help removing space around a banner

Recommended Posts

blankslatepress    0
blankslatepress

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/

 

 

Share this post


Link to post
Share on other sites
catrina    103
catrina

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.pagelines.me/docs/customization/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.com/css/css_padding.asp (there's an example for reducing padding at the bottom of the instructions for your reference).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
blankslatepress    0
blankslatepress

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. 

Share this post


Link to post
Share on other sites
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
blankslatepress    0
blankslatepress

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

Share this post


Link to post
Share on other sites
blankslatepress    0
blankslatepress

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

Share this post


Link to post
Share on other sites
blankslatepress    0
blankslatepress

 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.

Share this post


Link to post
Share on other sites
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
blankslatepress    0
blankslatepress

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. 

Share this post


Link to post
Share on other sites
James B    436
James B

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"


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
blankslatepress    0
blankslatepress

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.

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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

Sign in to follow this  

  • 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
    • 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?
    • Kempston
      By Kempston+
      Good day
      How do I indent textbox content so that it's not flush against the side of the screen on mobile devices?
      When I view Kempston Truck Hire East London on my phone, the text is aligned against the side of the screen and doesn't look right.
      Many thanks
      Rob
    • pagelines_45
      By pagelines_45
      I am trying to remove the bottom padding from a media box.  When I inspect and change the value it works but I can not for the right css section names to change it in either the page css or custom code area.  I have even tried custom style for the page, but no luck.  Here is the site http://wordpress.howard-boats.com/  on the home page I am trying to get the wide sailboat image to touch the foot.  bottom-padding:0px  but I cant get it to work.  Thank you for your help I'm sure I am doing something stupid.
       
      David
       
×