Code for blog title font

  • 3
  • Question
  • Updated 5 years ago
  • Answered
Can anyone suggest what code I can add to my site to change the size of the blog title font? I use (or intend using) Tastlessly style which has the font in blue currently but is far too small.

Thanks.
Photo of dyfed

dyfed

  • 55 Posts
  • 0 Reply Likes
  • confident

Posted 7 years ago

  • 3
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi dyfed,

You can add the following code to the page using a HTML Widget:


<style type="text/css">
div.sys_blog div.post h2 a{
color: #990000 !important;
}

div.sys_blog div.post h2 a:hover {
color: #FF0000 !important;
}
</style>


You can change the

color: #990000
to any other colour that you fancy - color codes can be found here: http://www.colorpicker.com/

You can also change the font family by adding:

font-family: Arial, Helvetica, sans serif;

You can add any font name before the Arial (i.e. Verdana, or Lucida)

You can change the font size by adding:

font-size:14px;

You can add any number that you like.

The a:hover CSS Class is what happens when someone hovers their mouse over the title text. You can add the same variations as above aswell as:


text-decoration: underline;

You can add either: underline, bold, none. There are some others you can add but these are the main ones.

I hope this is useful information for you, if you need anymore help customising your blog please let me know!

Kind Regards,

Andi North
Photo of dyfed

dyfed

  • 55 Posts
  • 0 Reply Likes
Thanks for your help. Picked up some tips to add to some I had previously asked for.

Do you have your sign with tips on how to change code?
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi dyfed

I'm not sure I understand your question. Which code would you like to change other than what Andi has provided?
Photo of dyfed

dyfed

  • 55 Posts
  • 0 Reply Likes
Andi has answered the question. Thanks.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Glad I could help!
Photo of Danielle

Danielle

  • 3 Posts
  • 0 Reply Likes
Hi all,

I would like to reduce the font size of the heading on my blog page. Can this be done?

Any help very much appreciated.

Regards
Danielle x

This reply was created from a merged topic originally titled
Font size on my blog page.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Danielle,

Can you please try Andi's suggestion?

Let us know if you have any troubles.
Photo of Danielle

Danielle

  • 3 Posts
  • 0 Reply Likes
Hi,

I hope everyone is having a good weekend? The problem I'm having is my font size is different in various places. For example, I've managed to change the size of my blog header (so many thanks for your assistance with that one) but the header for my blog CATEGORIES and BLOG ARCHIVE is large :(

Also, when I search within my blog the results page has large text and subscribing to my RSS widget takes me to a page where the font is a different size, colour and size.

Any help much appreciated and thanks for your patience with me ;)

Danielle x
www.inkpixelfilms.com

PS I did this site in moonfruit but have changed over to Yola as I need these sites viewable on mobile media (www.ontheropes-themovie.com)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Danielle,

I will need to look into this and get back to you. I'll respond to you on the email thread once I've had an opportunity to investigate. Thanks for your patience.
Photo of John Yeoman

John Yeoman

  • 35 Posts
  • 10 Reply Likes
The above code suggestions work only if you know where, in that sequence, to put the code for font family and size! Here's the definitive code that Yola has just sent me. It works:

On your blog page, drag over an HTML Widget. Paste in the following code:

div.sys_blog div.post h2 a {
font-size: 24px;
font-family: Times New Roman;
color: #5dc4d3;
}
You can replace the following:
font-size
font-family
color