nataliasavannah 61 Share Posted May 7, 2015 (edited) 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 Edited May 18, 2015 by nataliasavannah Link to post
0 designhalffull 140 Share Posted May 7, 2015 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 post
0 nataliasavannah 61 Author Share Posted May 7, 2015 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 post
0 designhalffull 140 Share Posted May 7, 2015 (edited) 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 May 7, 2015 by designhalffull fixed wrong word in the code Link to post
0 GRSM 1,516 Share Posted May 18, 2015 (edited) 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 May 18, 2015 by GRSM X-Gen born digital. Food Enthusiast. Traveler. Link to post
0 designhalffull 140 Share Posted May 18, 2015 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. Link to post
0 Peter Rox of The Future 84 Share Posted May 18, 2015 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 Link to post
0 nataliasavannah 61 Author Share Posted May 18, 2015 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 Link to post
Question
nataliasavannah 61
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
Edited by nataliasavannahLink to post
Top Posters For This Question
3
3
1
1
Popular Days
May 7
4
May 18
4
Top Posters For This Question
nataliasavannah 3 posts
designhalffull 3 posts
GRSM 1 post
Peter Rox of The Future 1 post
Popular Days
May 7 2015
4 posts
May 18 2015
4 posts
7 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment