How to add a strip of color in the background? Montauk

I'm wanting to add a strip of colour behind some of my content on my site.

I am trying to achieve this:

My site currently looks like this:

I have set up the main content using a combination of text blocks, spacers and markdown blocks.

Any help would be much appreciated as I have no idea how to do this! Or if it is even possible with the Montauk template.

Thank you in advanceNatalia

Use a code block instead of a text block. Past the following inside of it and replace the text between the paragraph tags with your text:

<div style="background-color: grey;">
 <p style="color: white">
   YOUR TEXT GOES HERE
 </p>
</div>

Based on your content, you will probably need to use an unordered list

<ul>

for the bulleted items.

Hi @designhalffull, thank you for your answer.

I have just tried this out all with the use of 2 x code blocks, however a problem arises as I want the background colour to be full width — ie. outside of the Page Content area.

As I want text to sit side by side, I have had to use a table. This is what I have gotten to:

http://www.rakoservices.com.au/home-duplicatepass: RAKO

I am not sure how to get around the white space between the two code blocks, as well as getting the colour strip to expand to the edges of the white area.

Thank you so much!

Ok, code is not my forte, so I don't know if this is the most ideal way to do it but try this. Use one code block instead of 2 and paste this in there:

 <style>
.grey-strip {
 background-color: grey;
 margin-left: -1000px;
 margin-right: -1000px;
 padding: 50px;
 color: white;
}
#left-column {
 float: left;
 margin-left: 1000px;
}
#right-column {
 float: right;
 margin-right: 1000px;
}
</style>

<div class="grey-strip">

   <p id="left-column">YOUR LEFT SECTION OF TEXT GOES HERE</p>
 <p id="right-column">YOUR RIGHT SECTION OF TEXT GOES HERE</p>
</div>

Then, go to the design section in the left sidebar, choose "Custom CSS" and paste this:

#siteWrapper { overflow-x: hidden !important; }

Please if someone more knowledgeable than me and sees anything wrong with this, jump in! Let me know how it goes Natalia.

ETA: it might be this instead if you only want the grey to go to the edge of the canvas:

  padding: 50px;
 color: white;
}
#left-column {
 float: left;
}
#right-column {
 float: right;
}
</style>

<div class="grey-strip">

   <p id="left-column">YOUR LEFT SIDE TEXT GOES HERE</p>
 <p id="right-column">YOUR RIGHT SIDE TEXT GOES HERE</p>
</div>

I'd use an index page with 3 subpages -apply a background only for the second page where you place your content - simple fast and reliable

for the background all you have to do is paste this into CSS:

    #name-of-subpage
   {
background-color: #91D3D9;
   }

Example of how it works here - http://bit.ly/1QWrkZo

Can you do this with the Montauk template though? I thought the index page on Montauk is like a gallery grid. I agree though, there are templates that already have this feature built in, like Shift and Fulton I believe... This would make a much simpler solution.

Perhaps there is another solution that might work better for you... please see my q&a here:

http://answers.squarespace.com/questions/82151/how-do-i-change-the-background-of-a-page-or-block-in-a-page

-peter rox of the future

Hi all, I was able to get someone who is great at coding to help me with this — it wasn't easy at all and took a lot of custom css to get it working. Yes the Montauk index is a grid layout, I had already tried that approach.

Thanks for all your answers and help