Widget Width in Progress Theme

[Lara Marsh]

Bill –
Hi! I am now working on another site using the Progress theme. You can see it at http://www.runningfarther.com.php53-5.dfw1-1.websitetestlink.com/

I have a question similar to the one posted here:

Double-wide widget on home page

I would like the countdown timer to be the full width of the page and possibly moved to the top. I tried adding this to the theme CSS editor:

#home-widgets .shailan_CountdownWidget {
width: 100%;
}

but it didn’t work. I tried various pixel sizes as well. All had no effect. So I have a feeling I’m referencing the widget wrong.

If it doesn’t work to do it this way, I’m also thinking it might look best in the header but I don’t know how to put a shortcode in the php header.

Thanks for your help.

Lara

[Bill Robbins]

Lara,

Great question. I took a look and it appears that the CSS you’d want to use to change that countdown timer is something like this:

.home-widgets .CountDownTimer {
	width: 100%;
}

That should make it full width inside your home widget area.

You can add in a shortcode via a WordPress php tag. They look like this:

Just replace the [shortcode] with the actual shortcode you want to use. You can also wrap it a bit of HTML to help you style too if you need to.

If you run into any questions or trouble, let me know,
Bill

[Lara Marsh]

Thanks, Bill. The echo code in the header worked great and this will come in handy in the future!

Best,
Lara

[Bill Robbins]

That is hugely helpful snippet. I’ve often used it to insert a Gravity Forms powered sign up into headers or footers of sites I’ve worked on.

[Author]

Posts