Area with colored bkg and centered image

Permalink
Hello

I'm trying to create simple colored area that holds a centered image with url (see attached for example).

Been playing around with this for hours and cannot seem to get it to work. How should go about this? Do I need to buy an add-on?

I'm using 5.7.4.2 and the theme Fundamental.

Thanks!

1 Attachment

HeinoM
 
Steevb replied on at Permalink Reply
Steevb
One way would be to add a content block, then image, then choose text 'align center' and save. Click on block again and choose 'Design & Custom Template', then click on the image icon and choose a background colour.

Does that help?
HeinoM replied on at Permalink Reply
HeinoM
Thanks for the reply! Yes, I had tried that, but I can't get the size of the content area to be taller than the image file (i.e. the image "floating" in the center of the colored background like in the sample image I attached above.) Any ideas on how to accomplish that?
Steevb replied on at Permalink Reply
Steevb
Have you tried clicking the arrow icon and adding some padding?
HeinoM replied on at Permalink Reply
HeinoM
Duh. Well, when you put it that way, it's simple! :) Can't believe I missed that. Thanks for the reminder.

Any way to make that block full width?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@HeinoM

In the upcoming 5.7.5 release, you can disable the grid container for blocks through the concrete5 UI (not in code). This will allow the block to use the full width of the page.
HeinoM replied on at Permalink Reply
HeinoM
That's great news. One last question (is there ever really one last question?): My header Nav area is full width, which I want. But when I add a social icons block, I want it constrained to the body area margins rather than way out to the left of the screen. Is there a way to do that other than playing with the padding and margins in the custom template screen?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@HeinoM

To answer this question, a link to your site is needed.
HeinoM replied on at Permalink Reply
HeinoM
Here's my temp url:

http://vps16276.inmotionhosting.com/~bluehi9/...

You'll notice that when you re-size the screen, the social links can go WAAAY off to the left. For that matter, the problem also exists with the overlay text in my slider, though I think that may be an issue with that particular add-on. I'd like those elements confined to the margins of the body content, even though the area is full-width. Your thoughts are appreciated!
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
@HeinoM

You have multiple issues on your site.

Regarding the social links, they will always be pushed away 200px from the left side of the page. As the page becomes more narrow, they overlap your logo. The social links have nothing but the page boundary to contain them.
- the style that adds margin-left to the social links
.ccm-custom-style-container.ccm-custom-style-main-320 {
    margin-left: 200px;
}

Your logo has negative margin-bottom applied to it. The negative margin is causing the social links to overlap it, because the logo is a link, this prevents the bottom half from being clickable.
- the style that adds negative margin-bottom to the logo
.ccm-custom-style-container.ccm-custom-style-main-429 {
    margin-bottom: -30px;
}

Unless you want to stack your logo, social links, and navigation menu vertically, I recommend using the grid system provided with the theme.

I have attached a screenshot of your site with overlays for columns and rows. This should help with creating or modifying areas.
- the logo is in a row and uses eight grid columns
- the social links (uses two grid columns) and navigation (uses six grid columns) are in another row

Your theme uses Zurb Foundation:
http://foundation.zurb.com/grid.html...
HeinoM replied on at Permalink Reply
HeinoM
Oh boy. I've made a mess of things. I confess, I'm just trying to mimic the header nav of this site: http://www.fyi.tv/shows/married-at-first-sight-the-first-year...

That's what I'm trying to do with mine. Obviously everything works on their site when re-sized. How would you go about do that? I'm not sure (being fairly new at this) of how to use the grid system.

BTW, I really appreciate you taking the time to answer my abundant questions!