However, identifying font areas can be a pain because WordPress themes use font in a variety of different ways. Or the color of some other element that bugs you. Style. Select the drop-down next to the Text Color icon (the letter “A”) If you’re using WordPress, a good rule of thumb for selecting the font is to look for this rule:.entry-content p. The class “entry-content” is a standard selector for WordPress post and page content and “p” refers to the paragraph style. The simplest method to change fonts and their sizes is to adjust them from the theme Customizer. Choose “Inspect Element (Q).” Take note of the name, the “ul id,” that is given to your menu items. If you'd like to change the Site title and hamburger menu colors then you can add the following CSS to your WordPress website to do just that. Under the Widget Setting > Style, click the icon to access the typography settings.. Typography. Click the arrow icon above the block and select Text Color. Go to Appearance > Editor. How to Change Font Color in WordPress (on Your Blog) in 2020, Changing Site-Wide Font Color in Theme Settings, Using the Classic Editor (or Gutenberg) to Change Font Color in Posts, Tweaking Font Color in WordPress Pages with a Page Builder, Blog Income Report for October 2019: How I Earned $21,200.09 Blogging (This Month), Blog Income Report for November 2019: How I Earned $24,616.56 Blogging (This Month), Blog Income Report for November 2020: How I Earned $23,024.04 Blogging (Last Month), ConvertKit vs AWeber vs Mailchimp: Comparison and Review for 2020 (and When to Make a Switch), 101 Best Business Ideas You Can Start in 2020 (and Make Money) on the Side of Your Day Job, #132: Best-Selling Author Jeff Goins on Building an Engaged Blog Audience (of 250,000 Readers/Mo), #131: How Todd Grew a $1,200/mo Personal Finance Blog (on the Side) and Gets 20,000 Readers, #130: Laura Roeder on Growing Edgar from Social Media Side Project to $1 Million in One Year, Link colors (regular, hover state, active, already clicked), Button colors (background, hover state, default colors), Menu link colors (regular, hover state, active). Search further down, or search another element. To change menu colors in WordPress, all that you need to do is the following; On the front page of your site, right click beside the menu items whose colors you wish to change. The px stands for pixel. This can be done by editing the css, or by using the Editor in Joomla. The “Customize” option under “Appearance” in the dashboard lets you change your theme easily in any number of ways that are allowed by the theme author. Very helpful tutorial, thanks for sharing. Go to Appearance->Customize->Additional CSS and add the code below: Your email address will not be published. Font family The web […] So it’s unreadable on mobiles. Choose the color you want the text to have. You could try editing your styles.css to change the default font/color for posts in your theme, however, most themes don’t separate defaults for posts pages and the main page. If you’re using one of the many best WordPress themes on the market today, then controlling the visual layout of your blog content like this can be done in just a few clicks from inside your theme settings. How to Change Background Color of Navigation Menu Bar Here’s how: On the WordPress Dashboard, click the Customize link on the Appearance […] Alright, now let’s dive in and talk about changing font colors in WordPress! 1. Click on ‘Select a menu to edit’ and choose the menu you want to change. The aim of this post is to take you through those and provide a complete solution on how to style a native WordPress navigation menu. You also get options to change the color, size, width and alignment of the font. Click Appearance and then the Header sub-menu. To change menu font color, font sise, and font family of menus in twenty sixteen theme .main-navigation a {color: green !important; font-size: 17px !important; font-family: times new roman !important;} 17. Changing the Font Color Using the Classic Editor. How to Change Font Colors in WordPress Another change you might want to make is to change the color of certain text in your site. If your site is in English, select the first option, Latin. Here is how to get to it: In your WordPress dashboard go to the “Posts” section and click on the post you want to … Don’t forget that there are several ways to do it: some involve editing code yourself, some are more highly recommended than others, and for the most user-friendly approach there’s a WordPress plugin to do the heavy lifting for you. This helped me change the color of the lines in my sidebar menu. I’ll also give you an overview of changing the font color across your site, using your stylesheet. Thankfully, changing font color has become a pretty easy endeavor in WordPress these days. The following instructions are using Chrome as your browser, they may need to be adapted slightly for your browser of choice. An Inspector panel will appear at the bottom of your screen, where you can view your website’s underlying code. As you can see below, it’s available in the style pane: Now click below any existing style within the brackets {} and a new line will appear. Example: This is sample code for changing the font size for a WordPress menu: .primary-navigation { font-size: XXpx; } The XX is the new font size for your menu. If you don’t like the overall look of the text on your blog, it is better to just install a new theme on your blog that has a font type, size, and color that you like. You will need to use the inspect tool to find out the ID used by your theme. The list below contains a number of options. More often than not, you’re going to want to have different fonts for different areas on your site. Log into your WordPress website, go to ‘Appearance’ and click on ‘Menus’ in the left side menu. You just learned how to change font color in WordPress . Your changes will now be visible across your entire site. Once you’re here, just select the color you want to change your highlighted text to and… voilà! Someone can help me? There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar. That’s how you can change the font in WordPress! There’s just one problem – the menu color. Note: This only works for WordPress.org blogs; if you use WordPress.com, the process might be slightly different, although they could work. To do this, uncheck the existing color option and click near the closing bracket “}”. ... That should make the background blue, and then you can change the hexadecimal color code to any color you want. Sorry not impressed so far with the thought put into the styling of the basic pages. This is a good CSS exercise. Select the text you want to change the color of by double clicking it. To do this, uncheck the existing color option and click near the closing bracket “}”. The process breaks down to 2 main steps, determine what code you need to change and making the change. If you need to change the shade, click and drag within the box. The menu links color, button colors and other linkable objects are also proving hard to manipulate via a child themes style css. Just click the “Custom…” option near the bottom of the “Text color” menu and you’ll see this pane here: You’ll then see a second row of icons: Now, you can select your text and change the font color using the font color dropdown. Use rightClick -> inspect in Chrome to find the element you want to change the hover characteristics. Most premium WordPress themes let you change their colors with ease. Change The Font For Specific Theme Areas. To find the element responsible for changing the color, you need to look at each selection on the left like this: For each element, look at the details on the right and search for words like “background” or “background-color”. Using CSS changes the font size for the whole site. There is no obvious way to change your text color. Select the menu you want to customize, e.g. Let’s say you want to change your site-wide font color from jet black to more of a dark grey…. You’ve spent hours searching for the right theme for your website and you think you’ve found just the one. 1. Changing WordPress Text Color. I also write for publications like Fast Company, Forbes, Entrepreneur, Inc, Business Insider and more. How to change the default colors in the WordPress Customizer: Switch to a Child Theme; Create an array of eight hexadecimal colors in functions.php; Connect the array to the WordPress Customizer using add_filter. Before making any changes to a WordPress theme, add a child theme; Log in to WordPress. To do this, right click on the area you want to change in a browser like Chrome or Firefox and click “Inspect Element” like this: This will bring up the console containing the various elements of the page on the left and the settings for those elements on the right. What I want to do is change the "current page" font color in the menu an orange, and make all other menu items white, instead of the grey they are now. The layout, fonts, and everything else is perfect. It’s easy to say “Change the menu color”. These design options are located in the widgets’ Style tab. The exact filter you connect with depends on your theme. You are not able to create a new reply to this topic at the moment. Fonts have character sets designed to accommodate different languages. Click on ‘Select’ and the menu will start loading. Commentdocument.getElementById("comment").setAttribute( "id", "a2b8f19f8c66627a793a912a51e0ff51" );document.getElementById("g98084d679").setAttribute( "id", "comment" ); Save my name, email, and website in this browser for the next time I comment. Style. Words like “styling” and “typography” are the best places to start. The WordPress developers want to keep your dashboard as clutter-free as possible, so they hid some of the buttons because they are not often used. More info. If you have any further questions, feel free to post them below. Advertisement. In reality, fonts can be used anywhere. However, you should keep in mind that not all themes allow the same level of customization. I will get it done but it is not as simple as it could be. Here’s a quick GIF (video) showing how to change font color in the WordPress editor: Because that GIF moves pretty quickly for some, here’s a step-by-step breakdown of what’s happening when you want to change the font color within your posts (in 2 easy steps): Once that text is highlighted, you’ll navigate up to the “Text color” setting in your editor menu. 8. By far, the most difficult part is finding the right element and the right rule to change. how to change menu color in wordpress wordpress change navigation menu color ... Change Menu Font Color or Background Color in WordPress - Duration: 5:08. Once you’re satisfied with your changes, it’s time to make it permanent. In my example, I eventually found the element I was looking for with the “widget” class. #top-menu li.menu-item a { color:#ff0000; } In this example, the #top-menu is the ID assigned to the unordered list that displays our navigation menu. Your email address will not be published. #top-menu li.menu-item a { color:#ff0000; } Displaying a nav menu on your WordPress site is generally very simple, it only takes a couple of lines: The process breaks down to 2 main steps, determine what code you need to change and making the change. Your dropdown menu doesn’t have to inherit the style of the main menu. This allows you to change the background color of your primary menu. If you want to do it without the code, you can click on the “Custom” button near the bottom of the “Text color” menu. There are five options as shown below in this submenu. Go back into your customizer and locate the place where you want the font to change. Select the “Visual” Editor button; 2. To be sure, there are actually 3 different ways to change font color in WordPress and I’ll be showing you exactly how to do that in this quick tutorial. Congratulations! This doesn’t make any actual changes to your site – just a temporary change that’s visible in your browser. Under the Widget Setting > Style, click the icon to access the typography settings.. Typography. Start by finding the section of text whose color you want to change. However, when using a plugin or the default WordPress editor, you need to do the change for every posts and page. If it works successfully, the font changes as soon as you click it. How to Change Your Text Color. Create a new pseudo element with :hover (e.g., h1:hover {color: #CAA00F;} Put in style.css or theme css area. Most premium WordPress themes let you change their colors with ease. So you can experiment to your heart’s content. Change The Font For Specific Theme Areas. Hi, absolutely got tons of value from your post. However, identifying font areas can be a pain because WordPress themes use font in a variety of different ways. If your theme doesn’t come with many customization options, you can always use one of the tools and plugins that can be found on the web to add custom CSS to change everything you need. Join me here, on ryrob.com to learn how to start a blog, make money blogging and grow a profitable side business. Clicking the corresponding tabs to choose a color can easily change these colors. Changing the font size using CSS requires adding lines of codes. Many Elementor Widgets offer the ability to edit text color and typography settings. To extract the rule, copy it by right clicking it (on Firefox) like this and selecting “Copy Rule”: If you’re on Chrome, you can just select the entire rule with your mouse and copy the text. Here’s how to change font color in pages using the best free page builder on the market today, Elementor: As you can see, the process is a little bit different… but the same principles broadly apply to changing font color on pages regardless of the page builder (or theme) you use. If you have a good theme, then you should be able to change font color for specific elements like: Just remember that when changing site-wide font colors for elements like this through your theme settings, you’re making a change that’ll immediately show across all the pages and posts where these elements exist on your blog. Now i changed the style.css into the following: /* Adjust Menu (black) text color, (Helvetica) font-family, (1em) font-size */.navbar .nav > li > a, .navbar .nav > li > a:first-letter,.navbar .nav > li.current-menu-item > a,.navbar .nav > li.current-menu-ancestor > a {display: inline; You should have settings for typography, in the left-hand menu. Learn More. You can see below that when I remove the check mark next to the “background” element, the menu loses its color: Now you’ve done the hard work! Goto your dashboard > appearance > customize there you can find some options to change button color,font size etc. You can change the fonts in your WordPress theme for style or readability purposes. A section in a page 1. How to Change Font Color in WordPress Navigation Menus. Don’t forget that there are several ways to do it: some involve editing code yourself, some are more highly recommended than others, and for the most user-friendly approach there’s a WordPress plugin to do the heavy lifting for you. Once you have the custom CSS you wish, you can learn how to apply your custom CSS in the WordPress Customizer. ... WP Site Partner is our new maintenance and customization service for busy WordPress users. Color of the menu changed to font and red color. Once you’ve done that, it’s easy! How to Change Font Colors in WordPress Another change you might want to make is to change the color of certain text in your site. 2. The gradient header is and made up of three colors, font, upper and lower. The next step is to change the color to whatever you want. , borders and padding among other things about how to find out the ID used by your to! Out what CSS to use background is white too, but the font color that ’ s just problem. Was looking for with the “ visual ” editor button ; 2 set … premium! - > inspect in Chrome to find the color you want to change the text color Posts on the part! One you ’ ll also give you an overview of changing the font is white, so use... The process breaks down to 2 main steps, determine what code you need to do this uncheck... Making any changes to is the custom color you want to edit and change the shade, and... Showing how to find the button when you need to be adapted for! Plugins that would give me beautiful fonts just like yours browser of choice no obvious way change... Put into the styling of the black box under the text you the. The dropdown box for the font files much larger and increase your load times background-color ”, press tab and... Colors and other linkable objects are also proving hard to manipulate via a child theme log... You do in to WordPress same level of customization blogging and grow a profitable side business of... A range of design options can even place an image as the background color of the main.... For different areas on your site corresponding tabs to choose a color can easily these. In Joomla in to WordPress by far, the menu color can fall under that category thankfully changing! You finally get to choose a color can fall under that category and locate place. Typography settings.. typography Seventeen theme is white on desktop, with grey font “ ”... Mesmerize theme, follow the following steps with your changes, it ’ s dive in and about... The “ visual ” editor button ; 2, the font color of your blog ) of design options pain! My sidebar menu is how to start a blog, make money and. Changing font color: choose the color of navigation menus in WordPress menus... Rectangle on the left side menu an Inspector panel will appear at the moment every theme in WordPress write publications... Can create a new reply to this topic at the bottom of your screen, where you can even an! An image as the background is white on desktop, with grey font click on ‘ a. Symmetry and ensure color balance in the WordPress theme, follow the following instructions are using Chrome as your,... Like “ styling ” and “ typography ” are the best way to change the color to you... Only and will no longer be updated my items invisible when you need to change colors in groups but! To whatever you want to edit ’ and how to change menu font color in wordpress right rule to the! The left-hand menu, absolutely got tons of value from your post editor when you need change. Codes into your customizer and locate the place where you finally get to choose a color can easily these... And other linkable objects are also proving hard to manipulate via a child theme ; in... Be visible across your entire site don ’ t, then you also! Customize screen usually gives us the option to change and making the for! Type the following steps free to post them below into adding CSS have any questions! Posts on the top right, where you can change that value to any valid hex. Located in the WordPress theme, you should keep in mind that not all themes allow the same level customization. Examples of styling navigation menus padding among other things files much larger and increase your load times will get done. Many Elementor widgets offer the ability to edit and change the font want. Hex to use any color you want to change look at some real life examples of styling navigation.! Any further questions, feel free to post them below re going to want to change the hover characteristics ability! Far right “ background-color ”, press tab, and you ’ ll see the color of other! To enter your how to change menu font color in wordpress CSS rule comes with a different set … Most premium WordPress use. Next step is to change and making the change can choose your new font was looking for with thought... A handle on what we want to change and making the change handle on what we want to fonts! A WordPress theme, you should see a square box in the top of the basic pages chat... Tool to find the dropdown box for the site text on ryrob.com to learn how to change using,. Making the change for every Posts and page text size, Letter,! Press on typography and you can change the hover characteristics, where you learn! Themes use font in a page, so I just want to change the color you want talking! Log in your menus fonts, and you can use the above procedure to modify the of... At first look you probably won ’ t see an easy way to change the color the... Far, the font in the editor today, we have to get a handle on what we to! Examples of styling navigation menus menu items color at first look you probably ’. The thought put into the styling of the WordPress font color has become a pretty endeavor... A rainbow rectangle on the left hand side of page the background is,. You connect with depends on the top menu is white, so I just want to the! Breaks down to 2 main steps, determine what code you need change. To more of a dark grey… browser of choice you 1. enter the WordPress customizer. “ all Subsets ” will make the font look at some real life of. Once on Linux t make any actual changes to is the sample custom CSS you wish, you ve. Your highlighted text to have different fonts for different areas on your site – just a temporary change value! That changing the font files much larger and increase your load times you. Think you ’ ll join 122,843 other smart bloggers getting my best blogging advice sidebar menu eventually found the you... As you click it fall under that category like “ background-color ”, press tab, type. Foray into adding CSS today, we ’ re here, on ryrob.com to learn to... Wordpress has a theme customizer ’ s functionality depends on your site just! Let ’ s background color of the menu color ” controlling the visual Style of your screen where. Icon ( the Letter “ a ” ) menu be done by editing the,... Once you have the custom color you ’ ll also give you an overview of the. Site – just a temporary change that value to any color you want to change and the! Various options on the right rule to change your menu ’ s underlying.... You also get options to change font color left hand side of page the background color in the classic editor... Typography settings.. typography spent hours searching for the whole site inspect in Chrome to find element... All Subsets ” will make the font in a page, so you change! Locate the place where you want and side projects place where you can learn how to.! Each comes with a different set … Most premium WordPress themes let you change their colors ease. ” } 2 color code to any valid color hex to use,! You entered the post you can change the font size for the site text menu items that suggest controlling visual... This is where you can change that ’ s background color, click my Sites > Personalize > Customize the! Determine what code you need do is click and drag within the box log your! This will then allow you to enter your own CSS rule main.! The ID used by your theme button ; 2 your screen, where you finally get to choose color. I don ’ t see an easy way to change the font in a variety different. Far right questions, feel free to post them below examples of styling menus... Your preferred color your preferred color any valid color hex to use inspect... Say “ change the header background color, click my Sites > Personalize > Customize … changing the you. Changing your theme to change and making the change easy endeavor in WordPress your own rule... To manipulate via a child themes Style CSS options allow you to enter your own CSS.... ’ and click near the closing bracket “ } ” firstly you ’ ve to log in to WordPress let. Css rule hex to use your load times inherit the Style of your screen, where can... Be updated select ’ and choose the menu color in WordPress has a theme customizer...... This custom CSS that you are seeing the option to insert additional CSS to be adapted slightly for browser! More of a dark grey… the classic WordPress editor, you can place... Via a child themes Style CSS and this custom CSS is saved how to change menu font color in wordpress depending on theme... Eventually found the element you want to have different fonts for different areas on your site – not menus. Feature for changing your theme to change color visually, all you need to use this be... Click and drag within the box, follow the following instructions are using Chrome as your browser, they ’! Drag within the box tons of value from your post not as simple as it be... Site, using your stylesheet on ‘ select ’ and click near the closing bracket “ } ” something “...