• 0
Sign in to follow this  
Followers 0

Bottom border on boxes?

Question

Posted · Report post

I am finally close to the Finish line on this project :-) The last thing is giving me grey hair! My client designed this page with a HR in the bottom of the page:

 

http://www.manometer.dk/job/PLOfrederiksberg/plo_forside.html

 

I rebuild the site in Pagelines Framework on http://plo-frederiksberg.dk/ and wanted to add a border to the bottom of the boxes. I tried fx with 


#boxes.container.clone_2.section-boxes{
bottom-border: 10px #CCCCCC;
 
}
 

but I can't figure it out... I have tried a lot of combination after using inspect element via Firefox.

 

:-D

 

Bolette

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

You can just use the .home class, which will mean that the CSS will only effect Boxes on the homepage.

 

.home .section-boxes .plgrid {
border-bottom: 1px solid #CCC;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

It's probably difficult because you have customized the Boxes slightly.
 

What you will need to do first is add some padding to the bottom of the boxes, you have the following code, you can add 30px to it to give you padding at the bottom.

 

body #boxes .content-pad {
padding: 0px 30px 30px;
}

 

http://d.pr/i/Luvt

 

Then add the following CSS:

.section-boxes .plgrid {
border-bottom: 1px solid #CCC;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great Danny

 

That worked. And then I realized I have other boxes on the site -and they should not have the border. Can you please help with the id for the boxes on the homepage? 

 

:-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you! I was looking for the clone of the boxes....

 

:-D

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

 

Also, you could have used the clone class. However, the class isn't unique to the Boxes section, meaning that if you had cloned another set of Boxes elsewhere, such as another page or post, it too may have had the class id and therefore the styling would have effected it.

Thats why the .home class is the better option.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

But if I wanted to show these boxes on several pages - and in Drag & Drop had to instances of boxes - I guess the smart thing would be to use the clone class?

 

And thanks :-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can use the Clone class. However, the clone class has an numeric ID, this means that your styling would only style that clone. In using the clone class, you would probably require numerous lines of code to target specific boxes. Therefore, imo it would be less hassle to just target the specific boxes you want to have a border bottom on, via the page-id-X, post-id-X, class. These can be found in your body element.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you Danny :-) I can understand why this is the better way.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

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  
Followers 0