February 18, 2020 0

How to change font in thrive theme with CSS

How to change font in thrive theme with CSS

hi everyone so what I’m going to show
you now is I’m just going to show you how to set your thrive theme in
particular this one I’m using is the rise theme from thrive themes. I’m going to
show you how to set the top menu bar to bold and increase the font
size with some simple CSS code found on that I found on the internet. So
why do you want to do this so well I guess when you get your theme and you install the top of the menu doesn’t come bold
it doesn’t, it just comes standard so you can’t actually there’s nowhere in the
back end of the thrive theme to simply increase the font size or bold
the font in your top menu item and it kind of looks a little bit off when you
start mucking around with your homepage and want to change the structure of your
homepage you’ll see with my example here that some menu items on the right side
you know they’re in a larger bolder font then you look at the menu
items and they’re in a smaller non bold font and it kind of looks a little
bit off so yes that’s what I’m going to show you. So the first thing to do is to
jump in the back end of your WordPress of your wordpress site so it’s just
your domain name then forward slash WP dash admin and that will get
you there. Then we go login and apologies for some of the blurred
out parts of your screen this website is a little niche sort of website
that I’m just starting up now and editing and if unblurred
some of the stuff on your screen you would easily pick the niche that I’m in
and you would probably have a real good crack at stealing my traffic so…
Okay so let’s have a look here so all you do is go down the left hand
side of your WordPress back-end just go to your thrive dashboard plug-in,
you click on thrive themes and you click on style and layout settings, and you
just scroll down a little and you’ll see a box here with custom CSS.
So all custom CSS says you enter any custom CSS you want to add in the field
below, CSS added here will override the standard CSS rules of the theme which is
fine. So then all we do is we go and grab the code that I found in the
internet and it’s just in a word doc that I’ve kept and it’s just this code here. Copy it, throw it into the theme and save
changes. Now I’m one of those people that like to have a tab open for the front
end of my website as well so to check my work so
just go to the front tab you see here see how the menu
doesn’t really look good, it looks a little bit small little bit poxy versus some
of these larger menu item headings down here. So just refresh the screen
okay and you can see how it’s bolded it doesn’t look too bad
so a little bit more in sync with some of these menu items but I’m just
going to go back and I’m just going to see if we can increase the font size
here and you can do it here, currently it’s 16 I’m going to increase it to 20,
save that… Refresh the screen, okay so it does look
a little bit large now so I’m probably gonna go with
somewhere between 18 and 20 because I will end up with this site having one or
two more menu items at the top here which will push over to where my logo is so it’s around about here. So, okay just
by the way with your font weight you don’t have to
do bold I think they’re called normal, ones called
lighter, ones called bold and the fourth one even bolder I think so just try
those out, try those four out with your font weight and your CSS code there and
there you go if you’ve got any questions or anything throw them down in the
comments and feel free to follow me on youtube like my channel yeah okay have a
great day.

Leave a Reply

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

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.