CSS

How to change the height of something using CSS in WordPress

April 11, 2016 by admin Leave a Comment

If you are using WordPress for your website, you may want to change the height of an element or item on your website. Just add this WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to change the height of an item in WordPress.

/**
 * Change item height
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
#yourdivname {
	 height: 100px;
}

Just replace #yourdivname with whatever element, either a id(#) or class(.) that you want to change the height for and change the height to whatever size you want, either in pixels(px) or percentage(%). Hope this helps with your WordPress problem, enjoy.

Disclosure: There are affiliate links on posts and throughout the website and if you use the links to make a purchase we may earn a commission from it. We link to these companies and their products because of the quality of the companies and not because of the commission we may receive from it.

Disclaimer: The information contained in this website is for general information purposes only and in no event will this website or its owners be liable for any losses or damages associated with your use of our website or content. We recommend that you make a backup of your website before you make updates to it. Click here to see our full Disclaimer.

How to make hidden content pop up only when an object is hovered over with mouse

April 10, 2016 by admin 3 Comments

There may come a time when you need to create content that you want to have stay hidden until an object or image is hovered over with the mouse. An example of a way to use this is in making a map with map pins that when the mouse hovers over a map pin, it creates a pop up with information about that location or a project that was completed for that location. Just follow these steps to make hidden content pop up when an object or image is hovered over with the mouse on your WordPress site.
[Read more…] about How to make hidden content pop up only when an object is hovered over with mouse

How to change width of Contact Form 7 text fields in WordPress

October 29, 2015 by admin Leave a Comment

If you are using the Contact Form 7 plugin for WordPress for your contact forms, you may want to change the width of the text entry fields. Just add this WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to change the width of the text entry fields in Contact Form 7 forms.

/**
 * Change Contact Form 7 input width
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
.wpcf7-form .wpcf7-form-control-wrap input.wpcf7-form-control {
	width: 250px;
}

Just change the width I listed above with whatever width you want your input text entry fields in Contact Form 7 forms to be. That’s it, now the width of your input text fields should be changed. Hope this helps, enjoy.

How to left align text/items in div/other element using CSS in WordPress

October 22, 2015 by admin Leave a Comment

If you are using WordPress for your website, you may want to left align a div or other element or item on your website. Just add this WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to left align a div or other item in WordPress.

/**
 * Left align element
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
#yourdivname {
	 text-align: left;
}

Just replace #yourdivname with whatever element, either a id(#) or class(.) that you want to have it’s interior elements left aligned. Hope this helps with your WordPress problem, enjoy.

How to hide remove description tab on WooCommerce Product Page

October 20, 2015 by admin 1 Comment

If you are using WooCommerce for an online store plugin for your WordPress site, you may want to hide or remove the description tab on the WooCommerce Product Page. Just add this WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to hide the description tab on product pages in WooCommerce.

/**
 * Remove/Hide WooCommerce Product Page description tab
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
.single .woocommerce-tabs ul.tabs li.description_tab {
	 display: none;
}

Hope this helps with your WordPress problem, enjoy.

How to hide product sort by dropdown in WooCommerce in WordPress

August 28, 2015 by admin Leave a Comment

If you are using WooCommerce for an online store on your WordPress site, you may want to hide the product dropdown sort by box shown on your Shop page and other product archive pages. Just add this WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to hide the sort by drop down in WooCommerce.

/**
 * Hide WooCommerce Product Sort by dropdown
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
.archive .woocommerce-ordering {
	display: none;
}

That’s it, now the product sort by dropdown should be hidden from your product archive pages. Hope this helps, enjoy.

How to fix Custom Post Class not saving in StudioPress Genesis 1.8

August 23, 2015 by admin Leave a Comment

If you use the StudioPress Genesis Framework for your WordPress site, you may also use the included Custom Post Class option inside the post pages. This option allows you to specify the post class of a specific post or page by simply typing the name of the post class in the provided field inside the post editor screen. With the latest update, StudioPress Genesis 1.8, the Custom Post Class field does not update and save when you save the page. Today’s snack will show you how to fix it so that the Custom Post Class field updates when you hit save.
[Read more…] about How to fix Custom Post Class not saving in StudioPress Genesis 1.8

How to hide remove reviews tab on WooCommerce Product Page

July 10, 2015 by admin Leave a Comment

If you are using WooCommerce for an online store plugin for your WordPress site, you may want to hide or remove the reviews tab on the WooCommerce Product Page. Just add this WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to hide the reviews tab on product pages in WooCommerce.

/**
 * Remove/Hide WooCommerce Product Page reviews tab
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
.single .woocommerce-tabs ul.tabs li.reviews_tab {
	display: none;
}

Hope this helps with your WordPress problem, enjoy.

How to right align text/items in div/other element using CSS in WordPress

July 10, 2015 by admin Leave a Comment

If you are using WordPress for your website, you may want to right align a div or other element or item on your website. Just add this WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to right align a div or other item in WordPress.

/**
 * Right align element
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
#yourdivname {
	 text-align: right;
}

Just replace #yourdivname with whatever element, either a id(#) or class(.) that you want to have it’s interior elements right aligned. Hope this helps with your WordPress problem, enjoy.

How to change width of Contact Form 7 textarea fields in WordPress

July 9, 2015 by admin Leave a Comment

If you are using the Contact Form 7 plugin for WordPress for your contact forms, you may want to change the width of the textarea entry fields. Just add this WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to change the width of the textarea entry fields in Contact Form 7 forms.

/**
 * Change Contact Form 7 textarea width
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
.wpcf7-form .wpcf7-form-control-wrap textarea.wpcf7-form-control {
	width: 250px;
}

Just change the width I listed above with whatever width you want your textarea entry fields in Contact Form 7 forms to be. That’s it, now the width of your textarea fields should be changed. Hope this helps, enjoy.