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
View Replies:
c5hub replied on at Permalink Reply
c5hub
There is currently no way to set full width background colors/images with the content contained to the regular grid. There have been discussions on the concret5 forums and GitHub about potentially creating the functionality within the concrete5 app - but nothing as of yet.

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.
misterant replied on at Permalink Reply
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:
<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
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?
c5hub replied on at Permalink Reply
c5hub
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.
misterant replied on at Permalink Reply
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 :-)
misterant replied on at Permalink Reply
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?
c5hub replied on at Permalink Reply
c5hub
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.
c5hub replied on at Permalink Reply
c5hub
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.
misterant replied on at Permalink Reply
Thanks for the awesome support - one of the best things about the Fundamental theme is the Foundation 5 framework, love it :-)

concrete5 Environment Information

# concrete5 Version
5.7.2.1

# concrete5 Packages
Fruitful (1.1.1), Fundamental (1.0.4), Simple Slider (0.9.2).

# concrete5 Overrides
languages/de_DE, languages/sv_SE, languages/da_DK, languages/ru_RU, languages/ja_JP, languages/fi_FI, languages/el_GR, languages/nl_NL, languages/it_IT, languages/fr_FR, languages/tr_TR, languages/sl_SI, themes/gdocinspired, themes/inspired

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache Helicopter

# Server API
apache2handler

# PHP Version
5.5.5

# PHP Extensions
apache2handler, bcmath, bz2, calendar, Core, ctype, curl, date, dba, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, json, ldap, libxml, mbstring, mcrypt, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, session, SimpleXML, soap, sockets, SPL, standard, sysvmsg, sysvsem, sysvshm, tokenizer, xml, xmlwriter, xsl, Zend OPcache, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 128M
post_max_size - 32M
sql.safe_mode - Off
upload_max_filesize - 32M
ldap.max_links - Unlimited
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 4000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.