Formatting

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.

Define the default visual or text html editor in your WordPress website for posts and pages

October 30, 2019 by admin Leave a Comment

The WordPress website often has two options for the editor which is the default visual editor and the text or html editor. You can define which editor is default 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.

Do the visual editor as the default editor

/**
 * Define visual editor as default editor
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );

Do the text html editor as the default editor

/**
 * Define text html editor as default editor
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
add_filter( 'wp_default_editor', create_function('', 'return "html";') );

Now if that works for you it would define the default editor on your WordPress website on there.

How to add the sidebar to the front page of your StudioPress Genesis theme on WordPress

October 29, 2019 by admin Leave a Comment

Do you want to add the sidebar to the front page of your WordPress website on your StudioPress Genesis theme on there? If you do you can then add this code to your functions.php file. You may want to backup your WordPress website before you make updates to it.

/**
 * Add sidebar to front page
 *
 * @author WPSnacks.com
 * @link https://www.wpsnacks.com
 */
function add_sidebar_to_front_page() {
    if ( is_home() ) {
        return 'content-sidebar';
    }
}
add_filter( 'genesis_pre_get_option_site_layout', 'add_sidebar_to_front_page' );

Now if that works for you it would add the sidebar to the front page of your StudioPress Genesis theme 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.