Jump to content

Archived

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

bobbekaer

Bottom border on boxes?

Recommended Posts

bobbekaer    0
bobbekaer

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
Danny    1,327
Danny

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bobbekaer    0
bobbekaer

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
Danny    1,327
Danny

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bobbekaer    0
bobbekaer

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

 

:-D

Share this post


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

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bobbekaer    0
bobbekaer

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
Danny    1,327
Danny
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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bobbekaer    0
bobbekaer

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

Share this post


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

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×