Jump to content

Archived

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

wattjrw1

Removing Padding from header and other sections.

Recommended Posts

wattjrw1    1
wattjrw1

How do bring the padding down to 0 in different sections of PageLines Framework and DMS Pro. I have a few different sites I'm building.  ;)   I know enough to be extremely dangerous.  Help please.  Thanks in advance.

  • Like 1

dblYOU

Share this post


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

Hi there,

 

Some section options and areas inside the DMS setup do have the option to set the padding value -

 

Other areas or to remove more specific padding/margins from inside a section will need to be done with css. For an overview on the process see http://docs.pagelines.com/customize/overriding-default-css.

 

Basically, using a web inspector tool like chrome dev tools or firebug you'll be able to see inside the page content and view which areas have the padding applied to them. You can then rewrite the css live in the editor and copy/paste back into the css/less panel inside DMS and save to effect the site. In firebug and chrome the padding/margins usually show if you scroll over the html as yellow/blue/orange highlighted sections depending on what you use, firebug or Chrome Dev tools etc.

 

I've recorded a short screencast to show you the process. http://screencast.com/t/Gr4StwO1n


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
wattjrw1    1
wattjrw1

ok great!  ill try it now.  stay tuned!  thanks!  this is awesome help.  


dblYOU

Share this post


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

You're welcome, let us know how you get on.


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
wattjrw1    1
wattjrw1

thank you so much for the video.  ill be able to breeze through dms now.  unfortunately have the same problem with PageLines Framework.  Im sure its really similar but I when I "inspect element" im able to locate the header and see the amount of padding but i dont know where to go from there.  i have a hard time locating the specific line for padding in the header.  more help please?  thanks!  


dblYOU

Share this post


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

Hi,

 

What I recommend is you use if you aren't already Google Chromes web dev tools, when inspecting any element in Chromes dev tools, padding is displayed as green and margin is displayed as a shade of orange. This should help you identify the class you want to target.

 

Then you can manipulate the sites padding/margin using chromes dev tools, then all you want to do then is add your changes to your custom CSS.

 

For example, let's say you want to remove the padding from the masthead section, you code would look something like this (please remember this is an example):

 

.section-masthead .content-pad { padding: 0px; }

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
wattjrw1    1
wattjrw1

ok great - now i would change that in the css.style folder on my cpanel?  also, i thought i have to use a "childs theme?"  i guess any changes will be overridden with theme updates?  sorry to be a pain.  


dblYOU

Share this post


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

Hi there, In DMS you can simply paste your new css changes in to a special area in the DMS control panel. See - http://screencast.com/t/HHDa3jzupxV you won't need to edit anything in c panel or via the core files.

 

There are three methods you can use for entering css changes, the css/less area, a child theme like the base theme or the customize plugin. More info on each of these can be found at http://docs.pagelines.com/customize/how-to-customize


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
kellyc214    1
kellyc214

Hi everyone,

 

I have the same issue and wanted some guidance as well. Here is a link to two screenshots of my masthead using inspector:

 

https://www.dropbox.com/sh/u1spx4z7jxfrxbo/AADF6ECCqkZxeTJ2_ZoEo0RBa?dl=0

 

Wondering if I adjust the 43.4px number or the padding-top and padding-bottom 20px in the screenshot?

 

media="all"
.masthead .inner{
  1. padding-top43.4px;
}
 
Once I make the adjustment, how do I save the adjustment to the screen? Or do I cut and paste the code into the custom CSS? The "20px" code doesn't appear to indicate "masthead," so how does the CSS know it refers to the masthead?
 
Thanks for guidance! 
 
Kelly

Share this post


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

kellyc214

 

As far as I can tell from your images, that padding is coming from the canvas area your Masthead has been placed in. Canvas sections have padding top/bottom control you can change via options. Try increasing there.

If that doesn't do the trick, what you will want to do is this:

 

1. Go to your Masthead section and in the styling classes field add the following with quotes "ptop-masthead"

2. Now go to your Custom panel > Custom CSS/LESS and add the following:

 

.ptop-masthead .masthead .inner {
padding-top: 100px;
}
 
3. Publish the CSS and refresh, upon reload the Masthead should have an increased padding:
 
If you do the opposite and use:
 
.ptop-masthead .masthead .inner {
padding-top: 0;
}
 
That masthead with the ptop-masthead class will have zero padding.

Hope this helps.

 


Please search our forums, before posting!

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