Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
nataliasavannah

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

Question

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

Edited by nataliasavannah

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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>



Edited by designhalffull
fixed wrong word in the code

Share this post


Link to post
  • 0

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

Edited by GRSM

X-Gen born digital. Food Enthusiast. Traveler.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...