Jump to content


Photo
- - - - -
Resolved

Box Border And Box Background Colour

Box border box background colour individual box border box border colour

  • Please log in to reply
5 replies to this topic

#1 sladestudios

sladestudios

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 15 November 2012 - 05:15 AM

Hello, I'm using Pagelines 2.3.5 I'm very new at websites and my CSS is absolute beginner!

If anyone could please help with the code I'd need to create an individual box border on each box in a box set I'd be very happy.
Currently I have 3 boxes in a box set sitting next to each other. I wish to put a border around each one. Is this possible.

So far I've used the custom code
#boxes{border:1px solid #ffffff;}

This puts a border around all 3 boxes as one. Not a border around each box.

Also is it possible to change the background colour of the box? I'm using black as the content colour and would like to create white boxes with grey borders around each one.

Any help would be great. Thanks!!

#2 Danny

Danny

    Is Awesome!

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

Posted 15 November 2012 - 08:15 AM

Hi,

Each box created can be given a custom class, you can use the custom class option to add individual styling to each box.

To add a border to each box, use the following code and change the color to your preferred choice.


Please Login or Register to see this Hidden Content



#3 sladestudios

sladestudios

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 15 November 2012 - 08:54 AM

Hi, I just put that code into the box custom class and nothing happens. Also tried it in the page itself in the custom class for the boxes on that page also nothing happens.
It does work if I put it in the in the Global Setting Custom Code. So thank you!

Only thing now is the text within the box sits up against the border, how do I indent the text off the border?

Also did you know of the code that would change the background colour of the box?

Thanks for helping.

#4 Danny

Danny

    Is Awesome!

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

Posted 15 November 2012 - 09:01 AM

What you added to the custom class option is CSS and not a class, thats why it didn't work. The way that option works, is you add a custom class for example,

Please Login or Register to see this Hidden Content


then you add custom CSS for that class in your custom code for example,

Please Login or Register to see this Hidden Content


So this means that any box which has the hello class will have a background color of red.

If you wish to increase the space between the text and your border, add the following to the code I gave you above.


Please Login or Register to see this Hidden Content


So your code should look something like this:


Please Login or Register to see this Hidden Content



#5 sladestudios

sladestudios

    Member

  • Members
  • 14 posts
  • Country: Country Flag

Posted 15 November 2012 - 09:26 AM

Yes that's it I've got it!!

Thanks it works perfectly.

#6 Danny

Danny

    Is Awesome!

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

Posted 15 November 2012 - 09:42 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, Box border, box background colour, individual box border, box border colour