Adding Widget

[Philippine Seven]

Hi Bill,

I’m currently adding a count down timer widget to my site. Unfortunately, it’s only being added in one of the boxes at the bottom of the page. I’d like to position it on the upper right hand corner of the page, across the logo but I don’t know how to do and where to edit it.

Also, I’d just like to ask if it is possible to add a widget to a slideshow? Hoping for your immediate and positive response. Thanks.

[Bill Robbins]

Good question. You could add the countdown widget to the header, but it will take a bit of editing to do so. Here’s how to go about it:

1. Go to the appearance section and select edit to open up the theme editor.
2. From the list of files on your right, choose functions.php
3. Look for this spot:

4. Paste this right below that:

5. Save your changes.
6. Next edit header.php and look for this spot:

   
   <header class="primary clearfix">
   

7. Right below that paste in this:

8. Save your changes.
9. Lastly edit the style.css file and scroll down to the very bottom.
10. Paste this:

    
    header.primary .widget {
    float: right;
    }

11. Save your changes.

That should add in support in the header for your countdown widget.

---

Unfortunately there really is no easy way to add a widget into a slideshow slide. With quite a bit of editing it could be done, but would also fall outside of the scope of the included support.

One option you might consider is using the video option and pasting the HTML you’d like to use into the box for the video embed code. You could use that to display the content that is generated by the widget. To get the code, just add the widget to a sidebar area and then view the source code of that page. Find the bit of code that relates to your widget and then paste it in the theme options page where the embed code would go.

---

I hope that helps. If you have any trouble, let me know,
Bill

[Philippine Seven]

Hi Bill,

Thanks for the feedback. I’ve already done what you’ve instructed. The count down timer was positioned at the top of the page but it covers the entire width of the page. I’d just like to ask if there’s a way to position it just at the upper right hand corner, across the logo. Like about half of the width of the page. Thanks again.

[Bill Robbins]

Most likely that can be done. If you’ll send me a link to where you’re working on this, I’ll send back some more specific instructions.

Thanks,
Bill

[Philippine Seven]

Hi Bill,

This is the site that I am working on:

http://www.run711.com/

Also, if you could help me on how to change the font, I’d appreciate it. Thank you so much.

[Bill Robbins]

Thanks for the link. Instead of the snippet above for the style.css file, you might try this:

header.primary .widget {
	float: right;
	width: 370px;
	margin-top: 35px;
}

You can also hide the header title make the countdown a bit more streamlined by adding this to the style.css file also:

header.primary .widget-title {
	display: none;
}

---

For changing fonts, WP Google Fonts is a easy to use plugin that lets you choose from the many fonts that Google provides on your site. I’d suggest starting there. If you have any questions or trouble, let me know.

Bill

[Philippine Seven]

Hi Bill,

I’ve hidden the header by just editing the details of the widget itself. As for the positioning of the count down timer, I’ve followed your instruction but the position is still the same, still in the upper left corner. I’d try the WP Google Fonts later. Thanks.

[Bill Robbins]

I took a quick again in Chrome and Firefox and it’s showing up in the top right for me. You might try clearing out your browser’s cache and see if that helps.

If it doesn’t, let me know.

[Philippine Seven]

Hi Bill,

It’s now working. The WP Google Fonts that you’ve suggested is also great. Thank you so much!

[Philippine Seven]

Hi Bill,

Just one last question. I’ve noticed that there’s a box for the widget. Is there a way to delete it. I want the count down timer to have a transparent background. Thanks.

[Bill Robbins]

You can set the widget background to be transparent. This is how you’d go about that:

header.primary .widget {
	float: right;
	width: 370px;
	margin-top: 35px;
	background: transparent;
}

If you do that, you’ll probably want to hide the widget title as well. Otherwise it will leave a line floating above the countdown.

header.primary .widget-title {
	display: none;
}

I hope that helps,
Bill

[Philippine Seven]

Hi Bill,

Thank you. Another question, is there a way to make the widgets at the bottom of the screen to have similar heights? Thanks.

[Philippine Seven]

Hi Bill,

I already found out how to edit the height. Thanks.

[Bill Robbins]

Glad you found your answer. If you have any other questions, just let me know.

[Author]

Posts