Link to site is preferred as can reference directly.
What exactly do you want to put in that area? For example, it is easy to foul up the zooming circles/squares if you are not careful. Static color? Image?
Yes, a static color; background-color: #abc123; but where to put it?
Firstly, try adding to Custom CSS panel or Child Theme style.css
.marketing {
background-color: #abc123;
}
You’ll then see the zooming circles that can be fixed with:
.round-div {
border-color: #abc123;
}
Depending on your site, you may need more to finish off.
It works fine with the zooming effect (Safari) but it includes the widget above; http://insights.nu
Do you know how to make it full (screen) width, and not to include the widget?
How to get rid of the horizontal divider beneath the same area?
To remove the white around the zoom, use:
.round-div {
border-radius: 0;
border-color: #fafafa;
}
Not sure which widget you mean?
This Snippet sets full-width (but do you need ALL content full-width?)
Do you mean between the yellow/green bands?
#pg-4178-0 {
margin-bottom: -10px;
}
1. Thanks for the code #pg-4321-0 … I didn’t have a clue!
2. I mean the widget above the featured pages as you find on http://presscustomizr.com/snippet/add-content-above-featured-pages/
What code streches it to full width?
3. And my main point: How to set a background to the featured pages area and make it full width? I mean the section between the above mentioned widget and the yellow section. You could also call it a row (SiteOrigin) with 3 columns (the 3 ”zooms”). Isn’t there a css-definition of that section (area, row)? See my screenshot ill No. 1 The widget and No. 2 The Featured Pages Area at http://insights.nu/om-oss/
4. The divider is fixed.
If you solve these problems, that I’ve been struggling with for weeks, it’ll be my best christmas gift!
Thank you very mutch!
Kjell
The image helped me understand.
2. It is caused by this in your style sheet:
#main-wrapper {
padding: 0 10px;
}
Change 10px to 0px, but you’ll need to add padding back to each segment (easy in Page Builder)
3. Depending on how you’ve built the sections in PB, you should be able to Edit the section and on rhs Widget Styles>Attributes you can add a class name eg class1, in case you need to add any styling. Then Widget Styles>Design and add a Background Image. (You need PB support, not Czr!!)
4. Not sure what you mean?
Happy Christmas (nearly there).
Thanks for quick answer! BUT … we’r not on the same line. Neither of these sections
2. the widget above the featured pages area and
3. the featured pages area itself
are built in PB!
As far as I understand the featured pages (3 zooming buttons on a row) are a speciality of the theme Customizr and the widget is an exception; it shouldn’t be possible to build something between the heder and the featured pages area except with http://presscustomizr.com/snippet/add-content-above-featured-pages/
Or can you tell me how it can be handled with PB? I’m not a programmer, I have to trust ‘trial n error’ and here is something I definitely don’t understand.
4. It was an earlier question.
Pls tell me how the special Customizr area/section/row that contains the 3 zooming buttons is defined in css-code so that I can try to set a full-width background.
Is this such a weird question?
Haha, we’ll get there by Christmas I promise!
There is something from SiteOrigin in your code. SO CSS maybe? Anyway. Let’s try again.
2. Widget – Full-width (but affects everything)
.marketing {
background-color: pink; /* Use to identify the area */
width: 100%;
margin-bottom: -10px;
}
This element needs to have some padding-left added, but without knowing how you’ve done it, it needs a class to identify it.
3. FP block
/* Center it */
.row.widget-area {
margin: 20px 18%;
}
/* Zoom surround */
.round-div {
border-radius: 0;
border-color: transparent !important;
}
Try that and then we’ll change the pink to an image.
.marketing {
background: url("/wp-content/uploads/yourfile.png") repeat fixed 0 0 !important;
width: 100%;
margin-bottom: -10px;
}
2. The widget is based on http://presscustomizr.com/snippet/add-content-above-featured-pages/
Then I go to Appearance/Widgets and there it is, a new widget field and there I use the SiteOrigin Editor: <div style=”width: 100%; …
3. With this code
/* Zoom surround */
.round-div {
border-radius: 0;
border-color: pink !important;
}
.marketing {
background: pink !important; (I don’t want an image)
width: 100%;
margin-bottom: -22px;
padding-bottom: 20px;
padding-top: 10px;
}
it now looks like this: http://insights.nu
The border-color must be a color otherwise the zoom effect disappears.
As you can se .marketing includes the widget also.
This code
/* Center it */
.row.widget-area {
margin: 20px 18%;
}
arranges the zoom buttons on top of eachother in one column!
I’ve found the max width of 1170px in to places:
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
}
.span12 {
width: 1170px;
}
Is that a hint?
Otherwise I suggest we leave the widget behind and concentrate on the featured area. I just want a full-width color background!
We need to work outside .container, so try
body {
background-color: pink;
}
Would look better if you removed the white squares with:
.round-div {
border: 104px solid pink;
}
If you’re happy, then please mark as [resolved] in the rhs sidebar
Happy Christmas!!
No, no, no … not at all happy, rather unhappy, sir. And disappointed if you would show a site designed this way to the world?
Obviously I have’nt been able to convey my intentions to you and you have’nt red what I’ve written and tried to illustrate.
1. Will you PLS look at http://insights.nu/om-oss/ again: Apart from the fact that every page now is pink there are two screenshots. No. 2 shows that I want to be able to set the background (the grey area) of the section that holds the three featured pages (those buttons with the zooming effect and some text beneath)!
2. I don’t want round buttons, that’s why they are square.
3. Could you pls consult or hand me over to someone who knows the theme Customizr.
4. I can delete the pink and leave it as it is now. Then there is no difference between the widget and the area I’m referring to and we’re back to square one!
Sorry to have to complain but I have’nt got an answer to my question.
Good night!
1) Every page is pink (pink was an example color btw):
body.home {
background-color:pink;
}
2) Square: don’t use the code I suggested
3) I have used Czr for 3 years, and most consider me to be one of the experts. As you’re not happy with my support, I shall ignore further posts from you!
