Editing front page title and colour
-
This is my first time using CSS. All I want to do is change the font and colour of my site’s front page. How do I do this?
The blog I need help with is: (visible only to logged in users)
-
Hi, you can set fonts and colours for your entire site from the customiser, look at the Fonts and Colours & Backgrounds sections.
If you want to change a style just for a specific section of your homepage then let me know which bit. Here’s an example that targets the main title in the box with the background image:
body.home .hero .entry-title { color: #791426; } -
Thank you for getting back to me!
I was thinking about the main “site title” and “tagline”.
-
Hi there, I see that you have deleted your text-based site title and the tagline. It is always a good idea to have those for the search engines, but you can hide them from display at Customize > Site Identity. Go there and uncheck “Display Site Title and Tagline” and then add in your site title and tagline. They will be there for search engines to find, but not visible to your visitors.
Are you happy with things the way the header area looks now, or would you like to make additional changes?
-
Hello,
I am still trying to work out how to use CSS to change font and colour of the site title to match the header image. I sent in a request with the Happiness Engineers but was redirected here.
-
On the font family for the site title, we aren’t going to be able to match what you have in the header image. The only custom fonts available are the ones under Headings at Customize > Fonts, and I’m not seeing one that looks like what you have in the image. We cannot add fonts from other sources, we are limited to the ones there. We could declare a font that is installed on all computer systems, but as you can see here, there isn’t a font that matches what you have in the image.
I would suggest looking through the fonts available in the Customizer to see if you can find something that will work for you for the site title. When you change that, it will change other heading fonts on your site as well, but we can override those and change them back to the original if you desired.
On the color for the site title, the following CSS would be what you would need.
.site-title a { color: #791426; }If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.
I do have a suggestion on your site title though. If you make a smaller one, perhaps about half the size of the image you have now, and then crop it pretty closely to the text within, we can use CSS to add that image into the site title div instead of doing it as a header image. I think we may be able to come up with something that works on all screen/window sizes and let’s you keep the font that you have in the header image. If you create that image and upload it to your media library and then let me know, I can work on the code for you.
-
I’ve managed to make the font work. Is there a way to make the title upper and lower case?
-
-
- The topic ‘Editing front page title and colour’ is closed to new replies.
WordPress.com Forums 