Block Colour Margins

  • Question
  • Updated 8 years ago
  • Answered
Is there any way you can have 2 grey blocks down both the right hand side and left hand side of the Cleanslate template in order for it to look more like the design is sitting in a box template rather than the whole screen being white??
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 8 years ago

Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
If you have access to the css (Yola Pro) you can add a border property to the page.

You can also set borders in individual html widget boxes, but that's a lot more work.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Margie.. just to let you know... you don't actually need Yola Pro to upload CSS files! :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Craig

You can give this a try:

<style type="text/css">
.container {
width: 900px;
margin: 0px auto;
border: 5px solid green;
}
</style>

I hope this works for you!
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Thanks, Sanja for explaining what I was trying to say much better than I did. I used the word, "page," when it should have been, "container."

btw how do you post code like that in the forum? I tried both code tags and the HTML encoder but neither worked for me.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja,

Nearly what im looking for but not quite, its more two solid banks of colour out side that container both to the left and right as if there was two blocks of colour down both side not an actual border round my page!!
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Craig, don't know if of any help to you. but I did this many years ago on a site, at least I think it is the same as what you are after, not sure tho. I did a background in PShop, and did the borders either side of the site (ie both sides), fiddled with it a bit until it was exactly the right distance from either side.
This was the only way I could do it then, but maybe there is coding now.
It looked great and the person was really happy. Cannot give their site as no longer around. Will this be what you were enquiring on?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Yip exactly what I need Jen!! Trying to make the website a bit more non white at both sides!!
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Craig, I did this on my site......nzartclasses.co.nz
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ahhh. sorry Craig for the misunderstanding! I would do the same as what JenC suggested.

Alternatively, you can use a style which has a white column down the middle such as "KidsCorner". Then, upload a background which will fill the whole site, probably 1200px-1500px.

Then, use the Watermark background script code provided here:

<script language="JavaScript1.2">

/*
Watermark Backgound Image Script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS,
visit dynamicdrive.com
*/

if (document.all||document.getElementById)
document.body.style.background="url('resources/yourimagefile..jpg') white center no-repeat fixed"

</script>

*replace the 'resources/yourimagefile.jpg' with the name of your background image.

I did this on my previous site and it seemed to work well.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja,

If doing what Jen explained would I also be able to make this a watermark to dull down the image I insert at both sides?

C
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

The "Watermarking' script does not dull down the image you insert. What it does it places the image into the background. So when you use a style such as KidsCorner, map background gets replaced but the column stays white. You can achieve the same kind of effect by using a style which has a changeable background but the column is still white. Tastelessly will have this as well as Burlap. These will not require the watermark script background.