How To Change Header Color In WordPress? (Question)

For example: You can change the Header background color from Customize Header Header Header Background Color. To change the topbar Color go to Customize Header Topbar. To change the Footer Color go to Customize Footer Footer Style.


How do I change the color of my top header?

Change the color or image of the header

  1. Go to the Design tab.
  2. Click Customize to expand the set of choices for customizing your theme.
  3. Click Header Image to choose an image to be the background of the header.
  4. Click Header background to choose a color for the header section.

How do I customize my WordPress header?

The option to change the headers is usually present under Appearance » Customize, which is located in the left menu bar in the WordPress Admin Panel. The Header link will allow you to change the header as needed or upload your own custom header. The images can also be cropped as needed to fit the header.

How do I color my header in CSS?

Either Change ‘. header’ to ‘header’ in css, or add class=’header’ to header tag.. This should solve your problem.. header in css refers to a class in html.

How do I change the color of my text header in CSS?

To change text color in CSS, you can use the color keywords to achieve this. Color keywords are nothing but the names of the colors like red, blue, yellow etc. We will change the font color of the heading or the h1 tag in Index. html to red.

How do I customize my header?

Edit your existing headers and footers

  1. Double-click the header or footer you want to edit, or select Header or Footer, and then select Edit Header or Edit Footer.
  2. Add or change text for the header or footer or do any of the following:
  3. When you’re done, select Close Header and Footer or press Esc.

How do I style a header in WordPress?

Simply browser to Appearance -> Customize -> Header to select your header style under the “General” tab. Note: All header styles can be styled via the Customizer. You can change the header background, padding, menu colors, menu dropdowns, menu borders…etc.

How do I create a custom header?

In the Home pane, double-click HTTP Response Headers. In the HTTP Response Headers pane, click Add in the Actions pane. In the Add Custom HTTP Response Header dialog box, set the name and value for your custom header, and then click OK.

How do I change the color of my header in HTML?

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

How do you change the color of a header in HTML?

How do I add a section header with a color background?

  1. In the text editor, click the HTML button to view the page’s HTML code.
  2. Locate where you want to place your header.
  3. Type <h4 class=”colorblock”>
  4. Type in your header text.
  5. Type </h4>
  6. Now, save and preview your work.

How do you type in color text?

You can change the color of text in your Word document. Select the text that you want to change. On the Home tab, in the Font group, choose the arrow next to Font Color, and then select a color.

How do I change the color of text in CSS?

The colour of selected text can be easily changed by using the CSS |::selection Selector. In the below code, we have used CSS::selection on <h1> and <p> element and set its colour as yellow with green background.

What is background Colour and text Colour?

The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background color and a text color that makes the text easy to read. Default value: transparent.

How do you change the color of text without CSS?

In HTML, we can change the color of any text using the following different ways: Using HTML tag. Using an Inline style attribute. 2. Using an Inline Style attribute

  1. <! Doctype Html>
  2. <Html>
  3. <Head>
  4. <Title>
  5. Change color using style attribute.
  6. </Title>
  7. </Head>
  8. <Body>

How do I change the color of my header/site title?

  • AuthorPosts
  • I’d want to alter the color of the title header of my website from white to black, if that’s possible. Is there a solution? The blog I’m looking for assistance with is: Dear Sir or Madam, Logging into your account and changing the title of your blog is simple. My SitesSwitch to another site Navigate to the settingSite Title option after identifying the site in which you want to make alterations. Make any necessary changes to the title that you want to preserve. You may also go through our support documentation. Additionally, the Personalizethemecustomize option allows you to change the color of the header. I hope this has been of assistance. Every time I make a change to the color scheme and save it, it reverts to the default color combination. What is causing this to happen? @fabulex96, What is the best way to modify the color of my header/site title? Are you referring to the site that has been customized using the Book Lite theme? If this is the case, some themes allow you to choose the color of the site title while still using a free account. With theBook Litetheme, however, this is not the case. A custom CSS style sheet would be required
  • However, this is included in the Premium and Business Plans. For those of you who already have Custom CSS, I recommend that you either add a “modlook” tag to the sidebar at the top of this page or submit your request to the CSS Customization forum. Soup for the Soul, soloqueersoup – You were able to choose one of the featured color palettes on, which is great news. However, if you want additional assistance, could you kindly create a new topic and describe the steps you’re doing to modify the color scheme and where you’re getting stuck? Thanks. Does Sela allow me to modify the color of the title and header? If so, how do I go about doing so? nicolegriffin612 – nicolegriffin612 – Sela comes with six pre-installed color palettes from which you can pick by navigating to the ColorsBackgrounds tab in the Customizer and selecting “Palettes.” Custom CSS, which is only accessible with thePremium or Business subscriptions, will allow you to edit elements with greater precision. AuthorPosts

The discussion on ‘How can I change the color of my header/site title?’ is now closed to new responses.

How to Change Header Color in WordPress (2021) Easy Beginner Guide

This essay will go through some of the most straightforward strategies for learning. How to Change the Color of the Header in WordPress. There are a slew of reasons why you would want to alter the header color in WordPress. These days, it is simple to alter the color of the header. Changing the settings in the WordPress Customizer is all that’s needed to do this. This option, on the other hand, must be made available in your theme. As a result, if you’re using a WordPress theme that doesn’t enable you to customize the header and footer colors of your website, consider switching themes.

Learn How to Change Header Color in WordPress

There are a variety of reasons why you might want to alter the color of the text in your posts or pages. Perhaps you’d want to draw attention to a specific term or utilize colored subheadings on a particular page. There are some fundamental procedures that you can follow:

Method 1: Using the Visual Editor (Gutenberg editor) to change header color in WordPress

The Visual Editor may be used to adjust the color of the WordPress header. This tutorial will show you how to change the color of your text using the block editor.

  • Access the WordPress Dashboard by logging in. Navigate to the post where you want to modify the color of the header
  • Click on the “Color Settings” link on the right side of the page after selecting the “Header” link.
  • You may simply alter the color of the background by selecting “Background Color.”

In this section, we will discuss another method of changing the header color in WordPress using the Visual Editor (Gutenberg editor).

  • Access the WordPress Dashboard by logging in. Navigate to the post where you want to modify the color of the header
  • It is necessary to pick the text in this section.
  • Then click on the drop-down arrow
  • Last, select the text color choice from the drop-down menu. Last but not least, choose a color.

Method 2: Using the Visual Editor (Classic editor) to change header color in WordPress

It is possible to alter font color using the toolbar in the traditional Word Press Editor: if you are still using it.

  • Access the WordPress Dashboard by logging in. Navigate to the post where you want to modify the color of the header
  • It is necessary to pick the text in this section.
  • Then, from the top toolbar, click on the “Toolbar Toggle” button to expand the toolbar even further. After that, select “Text Color” from the drop-down menu.
  • Finally, choose a color and then click on the “Publish” or “Update” button to finish.

Sum Up

To recap, WordPress is simple to set up and modify from scratch. We’ve gone through two different techniques to changing the color of the header in WordPress. You have the option to travel in any way. Here’s a quick rundown of each of these approaches:

  • How to Alter the Header Color in WordPress: Method 1: Using the Visual Editor (Gutenberg editor) to change the header color in WordPress
  • Method 2: Changing the color of the header in WordPress by using the Visual Editor (also known as the Classic Editor)

In any case, we hope that this comprehensive article has assisted you in understanding how to change the header color in WordPress. For the visitor who requested that we produce an article on how to add a search box to the WordPress header, we did it. This topic is covered in detail in another article. In case you liked this content, you should subscribe to our WordPress video lessons on our YouTube channel. Keep in mind to follow us on Pinterest as well. We welcome any and all recommendations from our visitors since it always serves as a motivator for us to grow.

3,414 people have looked at this post.

WordPress Header Background Image, Title, Font & Color Modifications

When it comes to customizing their WordPress header, newbies and amateur bloggers frequently require assistance with changes such as changing the header background color, altering the background image, altering the header font size, modifying the header title font and color, and making numerous other changes to make their site more visually appealing. This tutorial, which is organized into sections, will cover everything relevant to Header Modifications and will be updated regularly. Please select the section that you want assistance with from the drop-down menu below.

  1. How to Change the Background Color of the WordPress Theme’s Header
  2. How to Change the Font Size and Color of the WordPress Header
  3. How To Change Or Add A Header Image To A WordPress Site
  4. What is the best way to make a custom header image/logo clickable?

The default WordPress theme is undoubtedly the most well-known, and it serves as the foundation for many other themes that have been developed since. Changing the color of the default WordPress theme header is a simple and effective approach to maintain a clean, uncomplicated appearance while making it stick out and appear distinct.

You may use the following approach to change the background color of any theme’s header. If you encounter any difficulties, please let us know in the comments section below.

Steps to Change Theme Header Background Color

The following instructions will show you how to alter the background color of the header of your WordPress theme.

  1. In the Appearancemenu, select theHeader sub-menu
  2. There are five options available in this submenu, as indicated below: The gradient header is comprised of three colors, a typeface, an upper and lower portion, and an upper and lower portion. Colors may be simply changed by selecting the appropriate tabs and clicking on the color you want. To return it to its default blue hue, selectRevert from the menu bar. Ahex color code may be specified in the Advancedtab to allow for even more fine-tuning of the appearance. If you want to discover a hex color code, you may search for hex colors on the internet and obtain the codes for the colors you desire
  3. You may then copy and paste the hex color code into the appropriate regions of the Advancedtab and click Update Header.
You might be interested:  How To Make A Table In Wordpress? (Solution)

If you don’t like the new appearance, go back to the previous version of your site and start again from the beginning. Making changes to the header colors of the basic WordPress theme is a quick and simple approach to personalize your website without having to go through the bother of finding new and different themes. In case you don’t know what files to update, changing the font in the header of your WordPress blog theme is possible. The code to be edited, on the other hand, can (and will) differ between themes.

  • The following are the procedures to take in order to adjust the Header Font size.
  • The first step is to make the files that make up your WordPress theme readable.
  • I recommend using an FTP software to connect to your hosting account and navigate to the theme folder, where you can change the permissions on the whole theme folder and all of the files included within it to 777.
  • The theme’s directory is located in the blogs directory, which is thenwp-content/themes/your-theme.
  • Step 2: From within the WordPress dashboard, navigate to Appearance > Editor > Save Changes.
  • The exceptions to this rule are many and beyond the scope of this WordPress article.
  • Before you begin editing the file, copy the contents of the file and paste them into a text file, such as Notepad, for safekeeping.

If you make a mistake, you may simply copy and paste the original back into the file to recover your work.

All of the files linked with your active theme are displayed on the right-hand side of the Theme Editor.

While you do not need to make any changes to this file, the header.php file contains information on what the header is requesting from the theme’s stylesheet and how to change it.

In between theh1tags is the code that contains the hint that will bring up the name of the blog we are looking for.

Now that we know what is styling these two things, we can make changes to the style.css file in order to modify the way these two items are presented.

Most of the time, the “description” or “Tagline” is the blog’s name, however it may be called virtually anything else in other circumstances as well.

If you wish to modify the hue, you may do so by adding extra styles in the manner shown below:.

It is also possible to modify the font color by including the codecolor:666666; and adjusting the color code number to your preference.

Then visit your blog to appreciate your efforts.

It is impossible to list all of the CSS styles that can be applied to text in a stylesheet in one piece since there are just too many.

Replace any information with your own and then click Update File.

It is possible that you may need to reload your browser to notice any changes.

The process of changing or adding a new header picture to a WordPress theme is one of the first things that most people want to do when they want to modify the appearance of their blog’s appearance.

Because each theme is programmed differently, it’s difficult to describe how to accomplish this for each one individually, but here are the fundamentals.

First and foremost, you must discover which picture or images, if any, your theme is employing and how they are displayed.

Some WordPress themes can make use of numerous photos for the header, a small repeating image, or even a bigger image that serves as both the header and the background image for another portion of the theme, depending on the developer.

The first step is to figure out which header picture, if any, is currently being used by your theme.

The ideal case scenario for changing a header picture is when the theme uses a single huge header image as the background image.

If you have only a basic understanding of how to work with WordPress themes, dealing with these issues might be quite difficult.

Another reason to use Firefox as your web browser rather than Internet Explorer is that it is the quickest and most accurate way to determine if your WordPress theme is using a header image.

If you see a menu option that says View Background Image, select it and you will be taken to the actual header image.

Right click on the actual header image once more and select properties to see the actual size and type of the header image that was originally displayed.

Users of Internet Explorer should switch to Firefox!

ChoseSave Background Asand open it on your computer with your image editing software to get the information.

Make sure your new header is the same size, or smaller than your current header image.

Now upload the new image to your themes image folder.

Remember when you right clicked the image to find its name in the address bar?

It is almost always in the themes image folder like this: With the new header uploaded into the themes images folder next you need to change the theme’s stylesheet (style.css) to point to the new header image.

In the WordPress dashboard open the Theme Editor menu, click the stylesheet to load it in the editor.

Before editing this file you may need to change its file permissions in your hosting account to 777.

Now just change the file name to the newly uploaded header and click Update File.

Now just change the file name to the newly uploaded header and click Update File.

If you don’t have a header image and want to add one follow the steps to upload a header image and after the code that specifies the background color add this part: url(‘images/header.jpg’) no-repeat left; You may need to play with the positioning, sizing or other settings to get it properly aligned.

  • We really just scratches the surface and tries to explain the easiest circumstance to change or add a WordPress header image.
  • You may also need to add or remove the blogs title and description in the header.
  • Wow, now I know why I never wanted to write this post, there can be so many variables involved and yours can be as easy as I explained or a big pain in the butt!
  • Now, you have successfully changed the header image of your choice and want’s to make it clickable.
  • Well not so fast.
  • Make sure it fits and appears nicely proportioned on your WordPress blog.
  • This is sort of backward but when you change your header picture it will generally cover the name of your blog that is linked to main blogs URL and now there is now way for your visitors to click it to get back to the main blog page.
  • Open the header.php file in the theme’s root directory.
  • div id=”page” class=”page” div id=”header”div id=”headerimg”h1a href=”?php echo get option(‘home’);?

div class=”header” onclick=”location.href=’Blogs URL’;” style=”cursor: pointer;” div class=”header” onclick=”location.href=’Blogs URL’;”/div The code should be formatted as follows: div id=”page”div class=”header” onclick=”location.href=’ style=”cursor: pointer;”/div div id=”page”div class=”header” onclick=”location.href=’ style=”cursor: pointer;”/div div id=”header”div id=”headerimg”h1a href=”?php echo get option(‘home’);?

/”?php bloginfo(‘name’);?/a”?php bloginfo(‘name’);?/a/h1a href=”?php echo get option(‘home’);? /”?php bloginfo(‘name’);?/a/h1a This means that your entire WordPress header image will be linked to your primary blog’s URL or to the blog’s home page.


The alteration of the WordPress header might be a straightforward process if you pay only passing regard to a few styles and HTML. I have attempted to cover virtually everything relevant to WordPress Header alteration, but if there is anything particular to WordPress headers that you require, please let me know in the comments area of this article.

How to Change Your WordPress Website’s Header Font

With the correct theme for your WordPress website, you may change a wide range of various aspects on your site. Many parts of the website, from the layout to the background picture and even the text color in the header, may be modified to your desire. Figuring out how to crawl beneath the hood of your WordPress website and execute all of these tasks, on the other hand, can be a little challenging. Today, we’re going to walk you through the process of changing the font color in your WordPress header for the vast majority of WordPress themes, and even show you those that do, just in case your current theme doesn’t offer the option.

The Importance of Font Selection for your Website

Before we get into the mechanics of how to alter the font color in your header, let’s take a look at why you may want to do so in the first instance. The legibility of the typefaces and the visual structure and design of the website, according to recent research findings, are more essential to many people than the use of flashy photographs or photos. The typefaces you use for your distinct parts should be around three to four in number — one for the header/title, one for the headings (and potentially another for the subheadings), and one for the main content.

Fonts should express the personality and spirit of your company, and when picking them, make sure you are doing it with the long term in mind as well as the immediate future.

How to Select Fonts for Your WordPress Website

It’s critical to choose typefaces that look well together as well as ones that complement the overall design of your company. If you don’t, you run the danger of your site not correctly expressing who you are or coming off as unprofessional. Google fonts are the quickest and most convenient method to experiment with fonts online. Due to the fact that it is free and simple to connect with a WordPress website, the Google font collection is quite popular. While all Google fonts are optimized for the web, not all fonts are optimized out of the box, which means your site will load quicker if you use Google fonts.

Font Pairing Guidelines

Generally speaking, you should use one font for your website’s headings and another for the body of the website’s primary content. Unfortunately, we are unable to advise you on which typefaces are the most appropriate for usage on your website.

Choosing typefaces that are representative of your brand is important because each website has its own personality. Using typefaces that are similar yet different may sound tough, but we assure you that it is not. Consider these principles while making your font selections, is our recommendation.

Use a Serif and Sans Serif

Let’s start by discussing what serif and sans serif fonts are and how they differ. The term serif refers to a decorative flourish on the extremities of letters, which is also referred to as feet or tails in some instances. Serif typefaces have traditionally been employed in print media such as books, newspapers, and magazines. The use of a serif font on your website will add a touch of vintage refinement to your overall design. The following illustration displays a serif font at the top and a sans serif font at the bottom.

  1. Sans serif typefaces are regarded to be contemporary, minimalistic, and cutting-edge in their design and use.
  2. Several big firms, including Yahoo, Burberry, HSBC, Spotify, and Google, have updated their logos in recent years to transition from serif to sans serif typefaces.
  3. The letter F is seen in both serif and sans serif form in the illustration below.
  4. The sans serif letter on the right has fewer strokes than the left, giving it a more minimalist appearance in contrast.
  5. The reason for this is that you want as much contrast between your typefaces as you can get away with.
  6. This will make it readily evident to your user which sections are headers, which sections are major body material, and which sections are your corporate logo.

Use Contrasting Font Sizes and Weights

It is recommended that the key headings of your website (H1 through H4) be larger than the rest of the content. The visual hierarchy of your website is established as a result of this. Your visitors will be able to scan the headers to identify the section that they are most interested in. Remember to be selective with the language you use in the headers and to avoid using heading tags just for the sake of style. Search engines employ header tags to assist them discern what kind of information is on a page, which is important for SEO rankings.

However, many Google fonts have alternative options available, such as light 300 or bold 700, in addition to the usual 400.

We do not suggest that you make the body of your text bold.

Use Fonts from the Same Typeface

If you’re not comfortable combining serif and sans serif fonts, there is an alternative solution available. It is possible to combine two typefaces from the same typeface. The term “typeface” refers to a collection of typefaces that are used together.

In the case of Arial, it is a Typeface, while Arial Bold is a Font. When used in conjunction with different font sizes and weights, a single typeface may be used while still maintaining the visual hierarchy of your website.

Branding Color Considerations for your Website

Another key component of your website’s typography is color. If you’ve ever been in a crowded parking lot and attempted to find a bland white car amid the slew of other nondescript white cars, you’ll understand how crucial color can be in certain situations. If your website is merely black text on a white backdrop, with no accents or other uses of color, you run the danger of alienating visitors with a stale design. The same goes for going too far in one direction: using maroon text on a black backdrop, for example, might cause problems with reading and accessibility.

  • To avoid this, pick colors that do not blend into the backdrop but instead create a striking contrast with the background hue.
  • Although black is typically used as the default, you might choose another darker hue if you want.
  • Instead, choose a lighter hue or even white to let it stand out with a strong contrast from the backdrop, which will make it simpler to read and understand.
  • To assist reinforce the connection between your brand and the color you choose for your font, you may wish to utilize it as a font color, or use a color from the same color family, to help the reader’s subconscious mind make the connection between your brand and that color.
You might be interested:  Why Not Use Wordpress? (Solution)

WCAG Web Accessibility and Font Colors

When designing the header typefaces for your WordPress website, it’s crucial to keep accessibility rules in mind at all times. The number of lawsuits involving web accessibility is on the rise, and you’ll want to make sure you’re protected. According to Title III of the Americans with Disabilities Act, the legal basis for these actions is based on discrimination (ADA). The exact text indicates that “activities of places of public accommodation” must be made available to the public. Despite the fact that the internet did not exist in its current form when the ADA was passed, websites are today considered public places under the legislation.

The Web Content Accessibility Guidelines (WCAG) are the current standard, which was developed by the World Wide Web Consortium (W3C) (The World Wide Web Consortium).

WCAG Levels

There are three degrees of compliance that you may achieve: A, AA, and AAA, with AAA being the greatest level of achievement. Each level is more difficult to attain, but each one will make your website more accessible to the broadest possible audience. We recommend that you concentrate on passing level AA, which is often sufficient for the majority of websites. Clearing Level AA necessitates making certain that every text adheres to color contrast specifications.

You may use a variety of tools to check the contrast between text and background colors. Each tool may provide a different result; we recommend testing on at least two different tools to ensure you get the best results possible.

The ultimate Level AAA is really demanding. It will be necessary to utilize a dark hue on a light backdrop, or vice versa, in order to attain AAA compliance. Using a different color for your text will almost certainly result in a failing for AAA.

WCAG Versions

There are presently two versions of the World Wide Web Consortium’s Web Content Accessibility Guidelines, with a third in the works:

  • WCAG 2.0 was launched on December 11, 2008
  • WCAG 2.1 was released on June 5, 2018
  • And WCAG 2.2 is planned to be issued in 2021.

Other WCAG Criteria

There are a few more considerations to bear in mind while designing an accessible website. It’s also crucial to keep in mind the alt text for photos and the field names on forms. We urge that you study the whole WCAG 2.1 material and, if you feel it is essential, talk with an attorney about your options.

How to Change Your WordPress Website Header Font

Once you’ve decided on the color you want to use for your typefaces, go to your WordPress Dashboard and make the adjustment. Select “Customize” from the left-hand sidebar of the interface to begin customizing it. Navigate to the “Site TitleLogo” tab at the top of the page. You should be able to modify the actual text of your header, as well as the font family, from this point on. It is common for the font picker to have the option to modify the color of your header text beside it. Choose the one that best meets your specific requirements.

You may experiment with a range of various color combinations.

Help! I am not Seeing These Options on My WordPress Website?

There is no need to be concerned if you do not see the customization choices for your website indicated above. Assuming that the theme you are using has the option built in, changing the font color of your WordPress header is usually a straightforward process. A WordPress Theme from BoldGrid will provide you with the ability to modify your font, its color, and its size, allowing you to personalize your website exactly as you want it. There are also possibilities to apply various text effects and adjust the padding and margin till you achieve the desired appearance, however you should avoid getting carried away with this.

WordPress is designed with search engine optimization in mind, making it a fantastic platform for your website to run on.


If you’re having trouble finding two typefaces that you believe look excellent together, Google’s page might be of assistance. They have popular font pairings for each of their fonts, and you can see the font designs in real time by clicking on the font designs in the live preview. First, visit to get fonts. You may customize the preview by entering a sentence, adjusting the font size, and using the drop-down menus to limit the types of typefaces that are displayed. Next, decide which font you’d want to use for the main body of your website; this may be either the heading font or the main body font.

The typeface page has a navigation bar at the top — select Pairings from the drop-down menu on the right.

You will now be able to see the most popular font combinations for your selected font. You may experiment with several combinations in real time to find the one that appeals to you the most, confident that it will be a good fit.

How can I find colors that work together?

Creating website palettes may be accomplished with the use of several internet tools accessible today. is the website that we enjoy the most. Fill up the blanks with your preferred bright and dark colors and save your work using the lock option. To cycle through the several accent color selections, use the spacebar. Using the undo button above the color palette will allow you to go back to a previous selection if you make a mistake. If you have any issues or are unclear of how to proceed, please feel free to visit our WordPress Support Forum for assistance.

In the meanwhile, best of luck with your website construction!

How to Change the Text Color in WordPress (3 Easy Methods)

Recently, one of our readers inquired as to whether there was a simple way to alter the color of the text in WordPress. Yes, it is correct. When you use WordPress, you may quickly change the color of the font throughout your entire site, or even just for a single word inside your article content. We’ll walk you through the process of changing the text color in WordPress step by step in this article. There are a variety of reasons why you might wish to alter the color of the text in your posts or web pages.

Alternatively, you could wish to modify the color of the text throughout the entire website.

In this lesson, we’ll go through the following techniques in more detail:

  • Altering the color of text using the visual editor (this is particularly useful for changing the color of a few words, a paragraph, or a heading when composing material)
  • Customizing your site’s font colors with the theme customizer (this is the most effective method of changing font colors throughout your entire site, but it is not supported by all themes)
  • The text color may be changed by utilizing CSS code (this is useful for altering the font color throughout your entire site with any theme)

Simply click on one of the links to be taken directly to that method’s page.

Video Tutorial

Subscribe to WPBeginner’s newsletter. Continue reading if you’d prefer textual instructions instead of audio.

Method 1. Changing the Text Color Using the Visual Editor

The default WordPress editor allows you to choose a distinct color for words, paragraphs, and even subheadings in contrast to the rest of your content. This tutorial will show you how to alter the color of your text using the block editor. The first step is to either update the article or page that needs to be changed, or create a new one entirely. After that, enter your text. You’ll need to build either a paragraph block or a header block, depending on the situation. Take a look at our guide on how to utilize the WordPress block editor if you need assistance with this.

  • Changing the color of the text in a block In this first example, we’re going to modify the color of the text throughout the entire block.
  • Then, to expand the ‘Color options’ tab, click on the arrow to the right of it.
  • You now have the option of changing the color of the text.
  • To change the color of your text, simply click on one of the options below.
  • This will bring up a color picker, where you may manually choose a color from the palette.
  • Changing your mind and wanting to return to the default text color is as simple as clicking this button, which is located below the color options: ‘Clear’ Pro Tip: If you wish to alter the background color of a block, you may do it here as well as in the editor.
  • That is also simple to accomplish with the block editor.

Then, on the content editor toolbar, click on the little downward arrow to close it.

Once again, you have the choice of selecting one of the basic colors or using the ‘Custom color’ tab to select whatever color you like.

You may also alter the color of the text within header blocks.

Additionally, you may highlight specific words and modify the color of their highlights.

You may also alter the color of text in a list block, but only after you have highlighted the word(s) and used the toolbar to make the change.

Changing the Color of the Font Making Use of the Classic Editor While still using the conventional WordPress editor, you may change the font color by utilizing the toolbar on the right side of the screen.

In the old editor, select the Toolbar Toggle button on the far right of the screen. Following that, you’ll see a second row of icons: You may now choose your text and modify the font color by selecting it from the font color dropdown menu.

Method 2. Changing the Text Color in the Theme Customizer

What if you want to alter the color of the text throughout your entire website? A large number of the top WordPress themes will allow you to accomplish this using the theme customizer. TheOceanWPtheme is being used as an example in this section. It’s one of the best free WordPress themes available, and it’s easy to see why. Navigate to Appearance » Customize in your WordPress dashboard in order to use the Theme Customizer. Following that, you must seek for an option such as ‘Typography.’ The options that are accessible, as well as what they are called, will differ based on your theme.

  • After that, search for an option that allows you to customize the wording of your posts and pages.
  • You must click on this in order to be able to adjust the font color and other options.
  • For your text, choose whatever color you want it to be.
  • Using the choices to modify H1, H2, and so on, you can also change the colors of your headings in a similar manner.
  • The use of black or dark gray text on a white or very light backdrop is typically the most readable combination for readability purposes.

Method 3. Changing the Text Color Using CSS Code

Is there anything you can do if your theme does not allow you to change the color of the text? You may still alter font color across a complete site by using the theme customizer. In the WordPress dashboard, navigate to Appearance » Customizer. You’ll see a tab labeled ‘Additional CSS’ at the bottom of the list of options. Click on it to open it. After that, select the Additional CSS tab, where you’ll find some instructions as well as a text field in which you may insert CSS code. To begin, simply copy and paste the following code into the box.

p This will change the font color of the normal text in all of your posts and pages to dark red (or whatever color you choose), as shown in the following example: If you wish to alter the color of the headlines inside your article, you may use the following code instead of adding it: A second time, you can use a different color by changing the hex code.

  • If you are unfamiliar with CSS or are searching for a CSS editor that is user-friendly and allows you to effortlessly alter the complete look and feel of your website, we propose that you check at CSS Hero.
  • We hope that this guide was useful in teaching you how to alter the text color in WordPress.
  • We encourage you to subscribe to our YouTube Channel for more WordPress video tutorials if you enjoyed this post.
  • Disclosure: Our work is made possible by donations from our readers.

See how WPBeginner is supported, why it is important, and how you can help us by donating. The Editorial Staff at WPBeginner is a group of WordPress specialists, lead by Syed Balkhi, who provides guidance and support. Over 1.3 million readers around the world put their trust in us.

How to change header background color in WordPress free Astra theme?

The free version of the Astra theme does not have the ability to modify the color of the header background. You have two simple alternatives when it comes to changing the background color of the header with the WordPress Astra theme. As a first step, you can acquire the “Astra Pro!” expansion pack. With Astra Pro, you can adjust the background color of the header by selecting it from the theme header customizer choices. Alternatively, if you want to alter the background color of your header without purchasing an Astra Pro plugin, then the following technique is for you.

NOTE: The default background color in CSS code is 336699, and the default text color is ffffff.

Change Astra header background color

The background color of the theme header section will be changed by the CSS code provided. Copy the following CSS code and paste it into the Additional CSSoption.ast-primary-header-bar section of your theme. The background color is 336 699. Check out the preview on the right-hand side of the page. Additionally, if the update appears to be satisfactory in the preview, click the “Publish” option.

You might be interested:  How To Change Header In Wordpress? (Perfect answer)

Change Astra header background and site title name color

The following CSS code will modify the color of the theme header background and the color of the site title text. Copy the following CSS code and paste it into your theme’s Additional CSSoption.ast-primary-header-barbackground-color:336699; section. site-title a,.site-title a:hover; color:ffffff; site-title a:hover; Check out the preview on the right-hand side of the page. Additionally, if the update appears to be satisfactory in the preview, click the “Publish” option.

Change Astra header background and header menu link text color

The color of the header backdrop, site title text, and desktop site header menu link will be changed by the CSS code provided. On addition, this code will alter the color of the toggle header menu icon (three line icon) in mobile view. Copy the CSS code below and paste it into your theme. CSS stylesheets have been added. ast-primary-header-bar The background color is 336 699.;;; Check out the preview on the right-hand side of the page.

Change Astra header background, site title name and menu link text color

This section provides all of the CSS code necessary to alter the color of the Astra theme’s header. The color of the header background, site title, header menu link, and mobile view menu symbol will be changed by the code provided. Copy the CSS code below and paste it into the Additional CSS section of your theme. ast-primary-header-bar .site-title a,.site-title a:hover;.background-color:336699;.site-title a,.site-title a:hover; color:ffffff; text-align:center;;; ffffff; fill: fffffff; Check out the preview on the right-hand side of the page.

Additionally, if the update appears to be satisfactory in the preview, click the “Publish” option.

Can’t get header color to change

Can’t seem to get the header color to change.bronsky192019-10-03T00:34:23+00:00Can’t seem to get the header color to change. 1 through 4 of 4 posts are currently being displayed (of 4 total)

  • Hello, The theme that came pre-installed featured a purple color scheme and a purple backdrop in the header, which I found to be rather appealing. I’d like everything to be white, and I’ve changed everything to white in an attempt to figure out what the problem is. Despite the fact that I went to Header Styling and changed the ‘header background color,’ ‘archive header background color,’ and ‘header top background color’ ALL to white, the purple is still there! And, sure, I have saved the modifications and re-opened the browser window. I’m at a loss on what to do
  • Please advise! Thank you very much. [email protected], It appears that you have made changes to your global choices. In this case, I’m wondering that your website header and title bar settings may be the source of the problem (s). Have you double-checked them? These page-level settings will take precedence over any global option settings that you may have made. Fusion Page Settings will take precedence over any similar global options defined in the Fusion Theme Options, unless otherwise specified. [email protected], Thank you so much for taking the time to respond! I double-checked and found that the header page settings are also set to white. So I’m at a loss as to why they’re still that color. Do you have any further thoughts? Thank you very much! [email protected], Ok. Thank you for validating my suspicions. This is when things start to get interesting. There are three or (now) four areas where you may look for any overriding custom CSS
  1. Hello, It was the purple color scheme and backdrop of the header that attracted me to the theme when I first started using it. My preference is for white, and I’ve changed everything to white in an attempt to determine what’s wrong. I went to Header Styling and changed the colors of the ‘header background color,’ ‘archive header background color,’ and ‘header top background color’ to white, but the purple is still there! As for saving the changes and refreshing, sure, I have done that. Could you possibly assist me? I’m stumped. Greetings and thanks for your assistance. [email protected], According to your globaloptions, you have made some changes. As a result, I’m suspecting that your website header and title bar settings are to blame (s). Is it possible for you to look them over? If you have any global option settings in place, these page-level settings will take precedence over them. In the Fusion Theme Settings, Fusion Page Options will take precedence over any similar global options defined in Fusion Theme Options. [email protected], Your response has been quite helpful. Also, the header page settings are set to white, according to my investigation. So I’m at a loss as to why they’re still that hue. You’ve got anything more to say? I appreciate your help tremendously. [email protected], Ok. Your confirmation is greatly appreciated. Things start to get interesting from here. Three or (currently) four locations exist where you may look for overriding customized CSS
  • You should opt for a color that is similar to this for the header background. /* Adapted from the Avada Law demo */.fusion-top-header.fusion-header /* Adapted from the Avada Law demo */.fusion-top-header.fusion-header This is the hexadecimal representation of the color white. If you see anything else, please correct it. The background color is FFFFFFF and the text is in the color FFFFFFF. More information may be found in this useful how-to. Best of luck

1 through 4 of 4 posts are currently being displayed (of 4 total) Voting has been submitted. Thank you for taking the time to vote! a link to the page’s load

How To Change Header And Footer Colors In WordPress Without Code

Changing the colors of the header and footer in WordPress has gotten fairly simple in recent years. It is just a question of entering the appropriate values in the WordPress Customizer Settings. Your theme, on the other hand, must include this feature. So, if you are using a WordPress theme that does not allow you to customize the header and footer colors of your website, just switch to a different WordPress theme. There are a plethora of excellent themes available nowadays that allow you to customize the colors of the header and footer.

3 Steps To Change Header And Footer Colors In WordPress

I’m going to use the freeTwenty Twentytheme that is packed with WordPress for this tutorial, which you can get here. If you are using a different theme, simply follow the instructions. You should be able to view options identical to the ones I’m going to show you with your theme as well. If your theme does not give any choices for changing the colors of the header and footer, you might consider switching themes. Now, to alter the color of your website’s header, navigate to the front-end of your website and click on the Customize option in the top-right WordPress Administration Bar.

  • Select Colors from the drop-down menu.
  • Unlike other themes, the Twenty Twenty theme does not allow you to customize the colors of your header and footer.
  • For example, I use the Astra theme in conjunction with the Astra Pro plugin, which enables me to customize the colors of my header and footer separately.
  • You can find a complete list of the features of the Astra theme and the Astra Pro plugin on this page.
  • So, what do you do now?

What’s Next?

If your theme does not allow you to make easy changes to things like colors and fonts, it is time to switch to a different theme altogether. Making changes to fonts, colors, and a variety of design components is really simple with WordPress. No reason exists why your theme developer should not provide you with such alternatives to further customize the look and feel of your website.

How To Change Menu Color In WordPress

You’ve customized your WordPress theme design, changing the fonts, colors, images, and everything else, but you haven’t been able to figure out how to change the color of the menu in the platform. If this situation sounds familiar to you, you’re not alone in your feelings. The majority of WordPress themes do not give you the option to change the colors that are used in the menu. And, in some cases, it can completely detract from the branding of your entire website design. Fortunately, there is a way to edit the menu design and change the color of the buttons.

In this post, we’ll walk you through the process of doing just that in a few simple steps. Better better, we’ll even teach you how to add links to your menu, adjust the menu font, and personalize the mobile menu. Continue reading to learn how to do so.

How To Edit Menu in WordPress

Directly from the WordPress administration dashboard, you may make simple changes to your menu. Adding a new category, page, or link to your menu is as simple as following these instructions.

How To Add Custom Link to WordPress Menu

It is not possible to modify the names of categories or pages once they have been added to your website menu in WordPress. When you have categories with lengthy titles, this might be an issue. The creation of a custom link is an excellent remedy for this situation. You’ll be able to title the link whatever you like this way. Then pick Custom Links from the AppearanceMenus menu bar at the top of the screen. Enter the URL for the custom link, as well as the wording for the link, and then click Add To Menu.

How To Add a Category to WordPress Menu

Adding a category or a page to the menu is accomplished in the same manner as before. Simply navigate to the Categories or Pages sections of the website. Select an item by checking the box next to it and clicking theAdd To Menubutton.

How To Change Menu Background Color in WordPress

Changing the color of the menu backdrop takes a little bit of time and effort to complete. In addition, you’ll be dealing with some CSS code. It’s a straightforward procedure. However, we urge that you make a backup of your theme files just to be safe. Alternatively, you may backup your website to a cloud storage service via a plugin or by downloading the theme files via FTP.

Step 1: Find the CSS ID

In order to update the menu’s styles, you must first identify which CSS ID codes are associated with your theme’s menu and header. To accomplish this, simply open your page in Chrome or Firefox and click on the “Refresh” button. Then, with your mouse pointer on the menu, choose it. Now, right-click and pick Inspect from the context menu. Here’s an example of a line of code that looks somewhat like header id=”site-header” The ID of your website’s header is contained within the text enclosed in quotation marks.

The IDs for the header and menu will change from one theme to the next depending on the developer.

Alternatively, you might get in touch with the theme’s developer and ask them.

Step 2: Define Menu Background Colors

Following the discovery of the header’s ID, you may proceed to adjust the background colors. You’ll need to add custom CSS code to your website in order to do this. Access AppearanceCustomizeand choose Additional CSS, after which you should copy and paste the following code into the CSS code box. The background color of the web header is DD33FF. It is essential that you replace the ID code with the ID from your theme. In addition, you may replace the Hex color code with your own color of choice.

Step 3: Change Menu Link Color

You’ll see that the color of the entire header area has been changed as a result. It’s the most effective method of making changes to the design.

If you wish to alter the colors of the links as well, copy and paste the following code into your Additional CSS area of your website. site-header li a color:fff; style=”text-align: center;” Of course, you’ll need to modify the code to include the ID tags that are specific to your theme.

Step 4: Change Mobile Menu Background Color

In addition, you’ll have to manually modify the colors of the menu for the mobile version of the site. To find the ID numbers for the mobile menu, use the same processes as described above. A mobile-menu or a responsive-menu is typically used in this context. Then, to change the background colors, copy and paste the following code into your browser. .mobile-menu {background-color:DD33FF;}

How To Change Menu Font in WordPress

You may also replace the typeface that is currently being used in the menu with a completely other font. Here’s how to go about it.

Step 1: Pick a Google Font

To begin, go to Google Fonts and select a typeface that you wish to utilize. Then copy the HTML embed code as well as the CSS rules from the page.

Step 2: Embed the Font

Return to the WordPress admin dashboard and choose AppearanceTheme Editor from the drop-down menu. To add the font’s HTML embed code to the theme header (header.php), edit the file and paste it exactly before the closing/headtag. To save the changes, click on theSavebutton on the toolbar.

Step 3: Define New Menu Font in CSS

Now navigate to the CustomizerAdditional CSSsection of your theme. In addition, copy and paste the following code into your menu to make changes to the typeface used. Font family: ‘Cinzel’, serif; menu item: ‘font-family: Cinzel’, serif; Make careful to replace the typeface’s rules with the ones you copied from the Google Fonts website when customizing the font.

How To Install Custom WordPress Menu

Using a plugin to entirely modify the style of your menu is a simple and beginner-friendly option if you want a more straightforward approach. In WordPress, you can create a custom menu with a few clicks thanks to free plugins like as Groovy Menu and Max Mega Menu, which are both available for download. Using the Groovy Menu plugin, for example, you can quickly alter the design of your menu and change the colors of your menu more easily. It’s a lot less difficult than altering the theme’s source code.

In order to get more specific instructions, please see ourhow to design a menu guide.


Never underestimate the value of providing your consumers with a memorable brand experience. Making little changes to the menu to make it more visually appealing may appear to be a simple chore, but it will go a long way toward improving the user experience. In the event that you are having difficulty upgrading the style of your website, it may be time to update and move to a more visually appealing theme. Check out our unique themes package for a chance to get over 60 premium WordPress themes for the price of a single theme.

If so, look no further.

They provide world-class WordPress hosting that is designed to keep your website up and running quickly, securely, and continuously.

Leave a Comment

Your email address will not be published. Required fields are marked *