Jump to content


Photo
- - - - -

Removing Padding from header and other sections.

padding removingpadding wheredoiinputcss? remove padding

  • Please log in to reply
7 replies to this topic

#1 wattjrw1

wattjrw1

    Newbie

  • Members
  • Pip
  • 4 posts
  • Framework Version:PageLines Pro and DMS Pro
  • Country: Country Flag

Posted 18 February 2014 - 09:03 PM

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.


  • Tibag3wv likes this

#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 February 2014 - 12:36 AM

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.pageline...ing-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



#3 wattjrw1

wattjrw1

    Newbie

  • Members
  • Pip
  • 4 posts
  • Framework Version:PageLines Pro and DMS Pro
  • Country: Country Flag

Posted 19 February 2014 - 02:32 AM

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



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 February 2014 - 02:52 AM

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



#5 wattjrw1

wattjrw1

    Newbie

  • Members
  • Pip
  • 4 posts
  • Framework Version:PageLines Pro and DMS Pro
  • Country: Country Flag

Posted 19 February 2014 - 03:12 AM

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!  



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15682 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 19 February 2014 - 12:58 PM

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; }


  • wattjrw1 likes this

#7 wattjrw1

wattjrw1

    Newbie

  • Members
  • Pip
  • 4 posts
  • Framework Version:PageLines Pro and DMS Pro
  • Country: Country Flag

Posted 19 February 2014 - 03:25 PM

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.  



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 February 2014 - 06:23 AM

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.pageline...ow-to-customize







Also tagged with one or more of these keywords: padding, removingpadding, wheredoiinputcss?, remove padding