5 replies to this topic

[sladestudios]

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

[Danny]

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

[sladestudios]

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.

[Danny]

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

[sladestudios]

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

Thanks it works perfectly.

[Danny]

The topic was marked as resolved.