Archived

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

  • 0

Resolved Box Border And Box Background Colour


Question

Posted · Report post

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!!

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

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.


.fbox {
border: 1px solid red;
}[/CODE]

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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,

hello
then you add custom CSS for that class in your custom code for example,
.hello { background-color: red; }[/code]




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.





[code]padding: 15px;[/code]
So your code should look something like this:
[CODE]
.fbox {
border: 1px solid #E1E1E1;
padding: 15px;
}[/code]

Share this post


Link to post
Share on other sites

Posted · Report post

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

Thanks it works perfectly.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites