full width background colour
Permalink Browser Info Environment
I am loving the fundamental theme and am wondering how to add a background colour that extends full width of the screen to a layout area with two columns centred in the main content. A good example is the 'what it's all about' area on the c5hub.com home page. I have tried experimenting with negative margins but can't get it working properly. Can you suggest the best way of going about this?
| Type: | Discussion |
|---|---|
| Status: | Resolved |
I managed to achieve this by adding an html block containing a div with a large amount of padding left and right, and an equal negative margin left and right like so:
Also had to add to the body to get rid of the horizontal scroll bar. I would be interested to know if there is a neater way of doing this, maybe with a custom block template?
<div style="background-color: gray; padding: 0 3000px; margin: 0 -3000px;"> <p style="text-align: center; padding: 20px;">Content goes here</p></div>
Also had to add
overflow-x: hidden
If you have fix working for you in a html block, there's potentially no reason you (if you know the block you want to use there) can't create a custom template for the block.
The concrete5 docs can provide more info on creating custom templates but the basic idea follows:-
Decide which block, recreate it's path folder path in /application/blocks/ folder and add a templates folder
i.e /application/blocks/image_slider/templates/
Copy the contents of the block's view.php from the /concrete/blocks/ folder into a file in the above templates folder naming it as you wish. i.e my_template.php
Prefix the block output code with your code before the "content goes here" piece.
Suffix the block output code with your code after the "content goes here" piece.
Select that custom template when you need to implement your workaround.
The concrete5 docs can provide more info on creating custom templates but the basic idea follows:-
Decide which block, recreate it's path folder path in /application/blocks/ folder and add a templates folder
i.e /application/blocks/image_slider/templates/
Copy the contents of the block's view.php from the /concrete/blocks/ folder into a file in the above templates folder naming it as you wish. i.e my_template.php
Prefix the block output code with your code before the "content goes here" piece.
Suffix the block output code with your code after the "content goes here" piece.
Select that custom template when you need to implement your workaround.
Thanks, I will give that a try. It would be great if that functionality was built into the theme, and maybe option to add parallax backgrounds too :-)
Just noticed you have launched a new theme called Equinox that looks really nice :-) Does the section block do what I am trying to do, if so any plans on releasing it to the Marketplace?
This block probably does do a lot of what you are looking for. We have not tested it within Fundamental so there may be more work required to get this working here. Not sure we would release it as a stand alone block as it requires the foundation 5 framework for some of its functionality - a lot of our themes use this but others may not. We will put an enhancement note on our Fundamental theme with the view to see if this can be integrated in the next version.
Just been looking at this, this afternoon and I think that this should work OK with one small caveat...
There will need to be an additional page type added to the theme where you need to create all the structure using the layout tool - this is the only way to allow for a full width 'section' to place the block but still have some layouts that are contained to the grid.
I will look to create/add the new page type to the theme and test the block in Fundamental to see if it can be shipped with the next version.
There will need to be an additional page type added to the theme where you need to create all the structure using the layout tool - this is the only way to allow for a full width 'section' to place the block but still have some layouts that are contained to the grid.
I will look to create/add the new page type to the theme and test the block in Fundamental to see if it can be shipped with the next version.
Thanks for the awesome support - one of the best things about the Fundamental theme is the Foundation 5 framework, love it :-)
As soon as a sensible way of handling this with the system arises we will be sure to see how we can fit this in to Fundamental.