Jump to content
Sign in to follow this  
justinec19

Remove padding when you don't know CSS

Recommended Posts

justinec19

Hi, Having used Thesis before where removing padding was literally done at the touch of a button, I'm having trouble doing the same on PageLines. From previous threads on the subject it looks like I need to add some CSS coding but I don't know any CSS - eek! - can anyone advise what CSS coding I need to add to: 1. remove the padding above my header 2. remove the padding between my nav menu and page content 3. remove the padding between my page content and footer Site is www.charityfrockshop.com Additionally can you also advise if I literally copy and paste the CSS coding into Pagelines>Settings>Custom Code in the CSS rules box below the'body{}' tag? Apologies if this is all really obvious - I hunted for an answer all over the forums - but everyone seems a lot more knowledgeable on CSS than me! ;-)

Share this post


Link to post
Share on other sites
Jenny
CSS sounds scary but it's really not. There are several tools that can help you. We have a couple docs that I suggest you look over. First, here's a [url="http://www.pagelines.com/docs/customization-tips"]video on Firebug[/url]. And second, here are two docs that will help: [url="http://www.pagelines.com/wiki/Custom_CSS"]Custom CSS[/url] and [url="http://www.pagelines.com/wiki/How_to_use_CSS_Inspection_Tools"]How to use CSS Inspection Tools[/url].

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
justinec19
Hi Jenny, Thanks - ok so I downloaded firefox and firebug and watched the tutorials and removed the pagelines credit logo at the bottom of pages which boosted my confidence with CSS. :-) I've ascertained that the elements with a lot of padding are:
but then I tried all the following combinations to remove the padding above my header and nothing seemed to have any effect - any tips as to what I'm doing wrong? I tried all of these: #branding .content-pad {padding-top: -10px !important; } #branding.content-pad {padding-bottom: 0} #header #branding .content-pad {padding: 0px;} #brandnav.content-pad{padding: 0px;} #feature { margin: 0em 0 !important; } #feature-area { margin-top: 0px !important; } #content-pad{padding:0px;} Additionally when I preview my site in Firefox - the header is massive - everything else is unaffected. On both IE and Safari - my header is fine - any clue why that might be? Thanks

Share this post


Link to post
Share on other sites
justinec19
WAHOO - After an afternoon of trial and error - I've finally cracked the padding issue. Here's what worked for me: #brandnav{margin-top: -25px;} #brandnav{margin-bottom: -35px;} #content .content-pad {padding-top: 10px;} #content{margin-bottom: -50px;} The only issue I have outstanding is the oversized Firefox header, when IE and Safari are ok - any ideas? Thanks again

Share this post


Link to post
Share on other sites
justinec19
Hi Catrina - this is everything: body{} #cred{display:none;} #brandnav{margin-top: -25px;} #brandnav{margin-bottom: -35px;} #content .content-pad {padding-top: 10px;} #content{margin-bottom: -15px;} Any ideas why firefox is not loving my header: [url="http://www.charityfrockshop.com"]charityfrockshop.com[/url] ? Thanks

Share this post


Link to post
Share on other sites
catrina
I'm not sure why Firefox is making your header image behave that way. Do you have any plugins that can possibly be causing this?

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
poseyg
justinec19, the issue is your image which is 2400px wide and the css states: #brandnav .mainlogo-link img { max-width: 100%; } change max-width to about 40%

Share this post


Link to post
Share on other sites
justinec19
Hi @poseyg - thanks for your tip. However when I amend the max-width of my header - my header becomes ridiculously small on I.E and Safari. How do I create a header that works on all three internet browsers? Thanks

Share this post


Link to post
Share on other sites
Rob
You can use a graphics editor such as Photoshop or PaintShopPro to reduce the size of your header to match the size of your site's dimensions. For example, if the Global Content Width is set in Dashboard > PageLines > Settings > Layout Editor to 1000px then your image should be no wider than 1000px.

Former PageLines Moderator, Food Expert and Raconteur

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  

×