[CleanPageDom]

Hi Scott

Sorry for not getting back to you. I don't seem to have received an email update.

Anyway, I've managed to remove the backgrounds using Chrome's Inspect.

For the top widget:
.ck_form.ck_vertical { background: transparent; }

For the recent posts:
.sidebar .widget_recent_entries li a { background: transparent }

You could combine those two rules as they're both doing the same thing.

Let me know how you get on with that.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Nicoletta

It looks like you need to remove the space on the .featured-content.featuredpost classes.

Try that for starters and let us know if it doesn't work.

Dom

---

Let’s build a website together…

[CleanPageDom]

OK. You could do h3 { outline: none; } or page-id-XXX { outline: none; } if you want to limit it to just one specific page, although that's not great for accessibility - see here.

---

Let’s build a website together…

[CleanPageDom]

OK, sorry about that.

Apologies for just linking to another tut, but I seem to remember that I've used this one before for a similar issue, and CSS-Tricks is pretty reliable:

https://css-tricks.com/hash-tag-links-padding/

You can see a demo here.

Hope that's more successful.

Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Alex

Did you get this figured out?

It's under .site-inner { background-color: #fff; }

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

Did you get this fixed? My PC has gone into meltdown, but this screen grab from Browserstack suggests IE 11 on Windows 10 looks fine.

If not, have you tried adding background-position to the image?

.home-top-slider { background-position: center top; }

Also, can I add, I ran a speed test on this site at Pingdom. There's no need for the three images on the home page to be such big files. There's over 4MB in those three images, and the page still loads in under three seconds (from Texas). If you even halved those (and ideally I'd get them down under 300kb apiece bare minimum) you would speed things up considerably.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Scott

Where am I looking? There's just some green left over as I see it.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Scott

Where am I looking? There's just a bit of green left as I see it:

https://ibb.co/fRBWMQ

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Harry

I believe it is because the .site-header has position: fixed; - so it is covering up your .top-bar.widget-area.

There are a number of ways around it, depending on how you want the header/nav to behave (ie if you are happy to leave it at the top or if you want it to follow you down the screen).

One solution may be to add this to .top-bar.widget-area:

position: fixed;
width: 100%;
z-index: 1001;

Then add this to .site-header:
border-top: 38px solid #fff; /*The 38px is the height of your top bar*/

You might also need to adjust .parallax-home .site-inner { margin-top: XXpx; } in order to get the slider to display fully. This might have a knock-on effect on your inner pages, which could probably be solved with some more margin/padding to .site-inner.

With this solution, the top bar follows you down the page like the header.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

I like Pop-up Maker as a plugin to handle the actual popup. Then you could place any form shortcode in there to handle the survey.

It can be triggered by time or through a button/link. It's pretty inoffensive and it looks good out of the box (IMO).

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Josie

I don't believe they can out of the box, no. It is possible. I've done it on a couple of sites using the bigvideo.js plugin and Sridhar Katakam's tutorial (premium content, and that tut's specifically for Parallax Pro theme, but can be adapted).

If you know your way around the code you could figure it out. I'm not good with jQuery so had to get someone else to help me out!

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Vincent

Did you try changing the width in .plan?

Just messing around in Chrome, if you change that to 33.333333333% it should make the plans 1/3 width as opposed to 1/4. Then you can ditch the fourth plan from the HTML in your widget.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Matt

I think this is to do with how you've formatted your anchors.

Looking at this tutorial I would try adding, above the h3:

<a href="growth"></a>

You could even add a class to that, eg:

<a class="anchor-bump" href="growth"></a>

You could then apply padding to that <a href>.

That said, without testing it I might be completely off.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Scott

Great. Sorry, do you mean you need help with those last bits?

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Oh, that's cool. Thanks, Victor. I'll add that to my list 🙂

---

Let’s build a website together…

[CleanPageDom]

Hi there

There's a margin-top: 170px; set on .site-inner {}

You need that to be there, though, or your pages without a Soliloquy slider will look odd.

I would try adding:

.site-inner .soliloquy-container { margin-top: -170px; }

in your child theme's style.css file to see if that solves it. It may not, as Soliloquy's own CSS might override it. But it's worth a go. Come back to me if it doesn't work.

---

Let’s build a website together…

[CleanPageDom]

You can use a plugin called Widget Logic. Install and activate it.

Now go to Appearance > Widgets, find your footer widget and expand. There should be a new field at the bottom of the widget called "Widget Logic". Depending on how your site's Reading settings are configured, you'll need to add ONE of the following:

If your settings are "Front page displays - Latest Posts" (if it's using a widgetised page, out of the box )
is_front_page()

If it's set to "A static page", you can use either:
is_home() or is_page(**INSERT PAGE ID HERE*)

To find your page ID, if you need to, view your page source (right click and select in Chrome) then do a find for "page-id-" and you should find it (actually I just did that on your home page and got nothing, so I'll assume you're using "Latest Posts").

Let me know if you need any help with it.

---

Let’s build a website together…

[CleanPageDom]

As well as the .sidebar-primary, you need to alter the ".sidebar .widget" as this has a background-color set to #fff.

There is also some additional styling going on on some of the widgets (such as Recent Posts) which you would need to account for.

And you'll notice that if you add a color/remove the background color then your widget text sits right up against the side of the widgets, so you'd perhaps need to add some left/right padding to shift that in some. Such as .sidebar .widget { padding: 0 40px; padding: 0 4rem; }

---

Let’s build a website together…

[CleanPageDom]

Hi Marcia

How are you with editing functions.php and style.css? I ask because Carrie Dils has a great tutorial on adding a widget area which you could adapt for your purpose.

She's edited it since I started using it, but the link is here: http://www.carriedils.com/add-widget-area-below-nav/

Thinking about it, you may need to edit front-page.php (if it exists in that theme) to get this to work on the front page.

This is what I have on my cheat sheet:

Add this to functions.php

/** Register widget area */
genesis_register_sidebar( array(
	'id'				=> 'cta-1',
	'name'			=> __( 'Call to Action #1', 'mp' ),
	'description'	=> __( 'This is the call to action section.', 'mp' ),
) );

/** …place that widget before the footer */
add_action( 'genesis_before_footer', 'mp_cta_genesis' );

/** …and display it site-wide */
function mp_cta_genesis() {
if ( is_single() ) {
		genesis_widget_area( 'cta-1', array(
			'before' => '<div id="cta"><div class="wrap">',
			'after' => '</div></div>',
		) );
 
	}
}

/* CSS FOR ABOVE */

#cta {
background-color: #333;
color: #fff;
clear: both;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.625;
overflow: hidden;
padding: 64px 0;
padding: 4rem 0;
}

#cta .wrap {
padding: 0 5%;
}

#cta a.cta-button:hover {
color: #222;
}

#cta a:hover {
color: #FFF;
}

---

Let’s build a website together…

[CleanPageDom]

Hi there

It looks like you're using too many column classes. So you have a one-half.first INSIDE another .one-half.first, essentially creating a .one-fourth.

Thanks
Dom

---

Let’s build a website together…

[Author]

Posts