• 0

DMS 2 trying to remove padding from quickslider


Question

Posted · Report post

Hi, I am trying to remove padding from quickslider so that it lines up with contact form on this page and other pages throughout the site that have this layout. This initially worked, but then stopped working

 

Created this in custom css

 

body .pl-area .pl-section {
.pl-section-pad
.paddingrotatingpics {
.pl-section-pad {
      padding-right: 0px;
      padding-left: 0px;
}
}
  }
 
I then added paddingrotatingpics to the Custom Styling Classes  for quickslider on each page that has that layout.
 
It worked initially, but is no longer working.
 
 
Thanks for any ideas you may have!
 

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted · Report post

Hi There 

 

You have the right idea but the code may be wrong. 

 

Remove what you have (and back up the code so you do not lose it) 

.section-quickslider .pl-section-pad {
padding: 8px 0;
}

this should work for all Quicksliders

 

This should give this effect http://screencast.com/t/JTaZRZNYj

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Martin,

 

Thank you for your reply, really appreciate it. I added that code to custom css. I also got rid of the paddingrotatingpics custom css. The quickslider still doesn't line up perfectly with the contact us box below. I am trying to get rid of the side padding. Unfortunately, it still doesn't work. If you inspect element on this page http://www.selborneproperties.com/about/ ,  you will find that your custom css is being overridden by this code  body .pl-area .pl-section .pl-section > .pl-section-pad {

  1. padding8px;
  2. margin-bottom1em;
}
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think my solution, posted above, ran into the same override...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can see from my screenshot this does work - Can you try running all your Custom Code through the validator here http://jigsaw.w3.org/css-validator/

 

You will need to correct any issues the validator returns for your code. 

 

Please feel free to post your results 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Martin, 

 

Thanks. Here are the results that I got. 

 

 

187 .my-boxshadow-area Parse Error .box-shadow(0 15px 60px black); 188 .my-boxshadow-area Parse Error } 201 body .pl-area .pl-section Parse Error .pl-section-pad .nopaddingbottom { .pl-section-pad { margin-bottom: 0px; padding-bottom: 0px; padding-top: 13px; } } 202 body .pl-area .pl-section Parse Error } 210 body .pl-area .pl-section Parse Error .pl-section-pad .paddingrightleft { .pl-section-pad { padding-right: 40px; } } 211 body .pl-area .pl-section Parse Error }

 

 

I took CSS stuff out, and now the quickslider is the correct width. 

 

However, I lost some of the styling that I had from that code. For example, that boxshadow gave my contact form a border. I am not understanding why there were parse errors with this code. Do you have any ideas? Thanks so much for your help. Here is the code that corresponds with the parse errors--

 

/* boxshadow */

.my-boxshadow-area{

    .box-shadow(0 15px 60px black);

}

 

body .pl-area .pl-section {

.pl-section-pad

.paddingrightleft {

.pl-section-pad {

      padding-right: 40px;

}

}

  }

 

body .pl-area .pl-section {

.pl-section-pad

.nopaddingbottom {

.pl-section-pad {

margin-bottom: 0px;

      padding-bottom: 0px;

      padding-top: 13px;

}

}

  }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You need to fix each parse error otherwise your CSS wil not work to some extent

 

.my-boxshadow-area Parse Error .box-shadow(0 15px 60px black); 

188 .my-boxshadow-area Parse Error } 

201 body .pl-area .pl-section Parse Error .pl-section-pad .nopaddingbottom { .pl-section-pad { margin-bottom: 0px; padding-bottom: 0px; padding-top: 13px; } } 

202 body .pl-area .pl-section Parse Error } 

210 body .pl-area .pl-section Parse Error .pl-section-pad .paddingrightleft { .pl-section-pad { padding-right: 40px; } } 

211 body .pl-area .pl-section Parse Error }

 

All these lines need correcting. Your code is malformed. 

 

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Take ALL of your Custom CSS and place your code in the pastebin and then share the link and i will take a look. 

 

Pastebin is here http://forum.pagelines.com/pst/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Martin,

 

Thank you for your help with this. I posted all original code in the pastebin. Here is the link.

 

http://forum.pagelines.com/pst/p/103-ttxhff/

 

Please note that I deleted the following code after seeing the parse errors. I'd love to get /* boxshadow */ back in there but that code seemed to have an error --

 

/* boxshadow */

.my-boxshadow-area{

    .box-shadow(0 15px 60px black);

}

 

body .pl-area .pl-section {

.pl-section-pad

.paddingrightleft {

.pl-section-pad {

      padding-right: 40px;

}

}

  }

 

body .pl-area .pl-section {

.pl-section-pad

.nopaddingbottom {

.pl-section-pad {

margin-bottom: 0px;

      padding-bottom: 0px;

      padding-top: 13px;

}

}

  }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, I am not sure I received a reply to my last post. I am hoping I can get some help with this....

Thanks!

--David

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You need to fix the CSS errors in your 'paste-binned' CSS first 

 

The validator produced the following errors to start with (the validator may produce more once these are in fact corrected) 

 

Sorry! We found the following errors (6)
URI : TextArea 187 .my-boxshadow-area Parse Error .box-shadow(0 15px 60px black); 188 .my-boxshadow-area Parse Error } 201 body .pl-area .pl-section Parse Error .pl-section-pad .nopaddingbottom { .pl-section-pad { margin-bottom: 0px; padding-bottom: 0px; padding-top: 13px; } } 202 body .pl-area .pl-section Parse Error } 210 body .pl-area .pl-section Parse Error .pl-section-pad .paddingrightleft { .pl-section-pad { padding-right: 40px; } } 211 body .pl-area .pl-section Parse Error }
 

 

so 

/* boxshadow */
.my-boxshadow-area{
    .box-shadow(0 15px 60px black);
}

Your box shadow CSS should be more like this in structure 

div
{
box-shadow: 10px 10px 5px #888888;
}

remove the . and the  ( ) and restructure to be more like this 

/* boxshadow */
.my-boxshadow-area{
    box-shadow: 0 15px 60px 000000;
}

on lines 200 & 209 just remove the extra brackets }

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