Jump to content

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

Recommended Posts

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

I am trying to achieve this:alt text

My site currently looks like this:alt text

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

Link to comment
  • Replies 7
  • Created
  • Last Reply

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.

Link to comment

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!

Link to comment

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>



Link to comment
  • 2 weeks later...

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

X-Gen born digital. Food Enthusiast. Traveler.

Link to comment

Archived

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.