CSS

How to edit the css stylesheet of your WordPress theme without a plugin

October 30, 2019 by admin Leave a Comment

If you use WordPress for your website you may want to style the website using css and one way you can do that is by editing the css stylesheet on there. You can do that without a plugin if you follow these steps on there. You may want to backup your WordPress website before you make updates to the functions.php file on there.

From the left menu in your wordpress admin you can click on appearance > theme editor
The default is often the css stylesheet on there
You can then edit the stylesheet by typing into that and then clicking the update button on there

Now we recommend that you be very careful when you edit the stylesheet or items in the appearance editor on there.

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.

Update the WordPress visual editor with a new font without a plugin

October 30, 2019 by admin Leave a Comment

On your WordPress website the visual editor may be in a font that you do not like on there. You can update the font of the visual editor without a plugin if you add this code to your functions.php file. You may want to backup your WordPress website before you make updates to the functions.php file on it.

/**
 * Update the visual editor font
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
function change_editor_font(){
echo "<style type='text/css'>
#editorcontainer textarea#content {
font-family: YOURFONTHERE;
font-size: 14px;
color: #111;
}
</style>";
}
add_action("admin_print_styles", "the_editor_font");

You can then replace YOURFONTHERE with the font and the font size and font color that you want to use on it. Now if that works for you it would update the font of the visual editor on your WordPress website on there.

Update the WordPress text html editor font without a plugin

October 30, 2019 by admin Leave a Comment

The text html editor on your WordPress website may be in a font that you do not like on there. You can update the font of the text html editor without a plugin if you add this code to your functions.php file. You may want to backup your WordPress website before you make updates to the functions.php file.

/**
 * Update the text html editor font
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
function the_editor_font(){
echo "<style type='text/css'>
#editorcontainer textarea#content {
font-family: YOURFONTHERE;
font-size: 14px;
color: #111;
}
</style>";
} 
add_action("admin_print_styles", "the_editor_font");

You can then replace YOURFONTHERE with the font and the font size and font color that you want to use. Now if that works for you it would update the font of the html editor on your WordPress website on there.

How to style your custom widget area in a StudioPress Genesis theme on WordPress

October 29, 2019 by admin Leave a Comment

If your website uses a StudioPress Genesis theme for your WordPress website you may want to add your custom widget areas to the theme and you may want to style those widget areas in your css stylesheet. You can then add this code to your css stylesheet file to style your custom widget areas in your StudioPress Genesis theme without using a plugin on there.

.your-widget-name {
    width: 200px;
    height: 200px;
}

You would replace the .your-widget-name with the name you gave your custom widget area and then use css to style it on there.

How to add an underline to the links on your website when someone hovers over it in WordPress

October 26, 2019 by admin Leave a Comment

If your website is a WordPress website or even a regular website you may want to underline links on your website when people use the mouse to hover over the link. Just add this a:hover WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to add an underline to links that are hovered on in WordPress.

/**
 * Change link to underline on hover
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
a:hover {
	 text-decoration: underline;
}

Your theme may likely already have the link code listed in the CSS stylesheet so you may want to search the stylesheet for that first and if it does then you can update that to the one you want.

How to change the color of links when you hover over them using CSS in your WordPress theme

October 26, 2019 by admin Leave a Comment

If you are using WordPress for your website, you may want to change the color of the links on your website when someone uses the mouse to hover over it. Just add this a:hover WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to change the color of links when hovered over in WordPress.

/**
 * Change link color on hover
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
a:hover {
	 color: #000000;
}

Just replace #000000 with the hex color code that you want to use for links. Your theme may likely already have the link color hover listed in the CSS stylesheet so you may want to search the stylesheet for that first and if it does then you can update the hex color code to the one you want. Hope this helps with your WordPress problem, enjoy.

How to change the color of links using CSS in your WordPress theme

October 26, 2019 by admin Leave a Comment

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

/**
 * Change link color
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
a {
	 color: #000000;
}

Just replace #000000 with the hex color code that you want to use for links. Your theme may likely already have the link color listed in the CSS stylesheet so you may want to search the stylesheet for that first and if it does then you can update the hex color code to the one you want. Hope this helps with your WordPress problem, enjoy.

How to hide result count display in WooCommerce in WordPress

May 3, 2016 by admin Leave a Comment

If you are using WooCommerce for an online store on your WordPress site, you may want to hide the result count “showing the single result” or however many products you display 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 product result count display on product archive pages in WooCommerce.

/**
 * Hide WooCommerce Product Result Count Display
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
.archive .woocommerce-result-count {
	display: none;
}

That’s it, now the product result count display should be hidden from your product archive pages. Hope this helps, enjoy.

How to change the width of something using CSS in WordPress

April 30, 2016 by admin Leave a Comment

If you are using WordPress for your website, you may want to change the width 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 width of an item in WordPress.

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

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

How to hide something on the Home page in WordPress

April 25, 2016 by admin Leave a Comment

If you are using WordPress for your website, you may want to hide something, some element, on the Home page. Just add this WordPress Code Snippet to your CSS stylesheet in your current WordPress theme in order to hide something from the Home page in WordPress.

/**
 * Hide something on Home page
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
.home #yourdivname {
	 display: none;
}

Just replace #yourdivname with whatever element, either a id(#) or class(.) that you want to hide on the Home page. Hope this helps with your WordPress problem, enjoy.