Is it possible to change size / colour / font of blog post titles

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I would like to change the size / colour and font of my blog post Titles. I can see it is possible for the text in the content, but the Title seems to be stuck at Black 16px ?
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Alec,

Please see this thread for tips on doing this
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
That was quick, thanks very much, will try it out and report back.
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
Brilliant !

This was my eventual code;

div.sys_blog div.post h2 a{
color: #800080 !important; font-family: Lucida, Arial, Helvetica, sans serif; font-size:15px;
}

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

(I might just change the hover colour)

and this is the link to the blog posting;

http://www.tallulahward.com/interior-...

Thanks again for your help on this, I am enormously grateful, it has been bugging me for ages.
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
oops I didn't copy all the code;

div.sys_blog div.post h2 a{
color: #800080!important; font-family: Lucida, Arial, Helvetica, sans serif; font-size:15px;
}

div.sys_blog div.post h2 a:hover {
color: #FF0000 !important;
}
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Looks good. Well done.
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
Thanks.

Now the title has improved, the text looks as if it could do with an upgrade. I know it can be done manually for every post but I don't suppose you have a code for changing font / colour / size automatically in the body of the blog text.

Hope I'm not pushing my request for help !,

Alec
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That's fine Alec. Can you publish your site and let me know the URL?
I can then check as I go using FireBug.

PS: Do you have the Silver subscription. Not really an issue for Blogs but can affect the way I mark it out ?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
If you place this in an HTML widget on your blog page only, this will allow you the changes you wish I think.

<style="text/css">
.sys_txt {
color: #hex-code;
font-family: "font-name","font-backup",font-style;
font-size: nnpx;
}
</style>


The #hex-code needs to be selected and is a 6 code for your colour selection.

The font-name is that but should be one of the common web-friendly fonts unless you install a custom font into your site. This is more than a font name.

The "font-back-up" should be a second common web-friendly font.

The "font-style is either "serif" or "sans-serif" Generally web-fonts should be selected without serif ie: sans-serif

The font-size can be any pixel size your choose. Normally 12 -13 px minimum or greater.

This code will effect all the common system text on your page and not only the blog text for the body of the post but it probably will be OK unless you have a lot of other text in a non-blog part of that page. It won't affect any other page.
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
Sorry for delay, had to suddenly go out and then it took me a while to sort out the code you gave.

I decided to see if I could incorporate it into the widget for the title and after playing around for a bit it's done !!!

So the total code in one HTML widget for blog title and blog text looks like this

div.sys_blog div.post h2 a{
color: #800080!important; font-family: Lucida, Arial, Helvetica, sans serif; font-size:16px; text-decoration: none;
}

div.sys_blog div.post h2 a:hover {
color: #444444 !important; text-decoration: underline;
}

.sys_txt {
color: #808080;
font-family: Lucida Grande,Lucida Sans Unicode,sans-serif;
font-size: 13px;
}

(Interestingly it didn't affect the text on the remainder of the page, only the blog text)

Here is the final result

http://www.tallulahward.com/interior-...

I am so pleased with the result and again thank you very much for your help.

Alec
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It looks good.

May I make a criticism?

I think that the grey type looks elegant but it really is quite difficult for any sight impeded person to really see this clearly. The contrast between the grey and the white causes a few problems for many viewers, this typically increases above the age of 40 (or until they are scoped with lasers :) ). You could rack it up a couple of darkness points without losing the clean effect and it would then be inclusive.

The second point is that the font size is really too small in the text on your Right hand side of your page. It should be about 13 px minimum for significant size blocks of text to make this easily viewable for >99% of viewers. These are easy fixes without a negative effect. Content readability always is more important than aesthetics for information rich sites such as yours.
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
Thanks for the comment, I have changed the font to Verdana and increased the size. Lucida looks bold in anything above tiny in Yola.

See what you think;

http://www.tallulahward.com/interior-...
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You may like to try #666666 and see what you think of this contrast?
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
That's bizarre it didnt show all the code, so here it is again after copying / pasting through notepad;

div.sys_blog div.post h2 a{
color: #800080!important; font-family: Lucida, Arial, Helvetica, sans serif; font-size:16px; text-decoration: none;
}

div.sys_blog div.post h2 a:hover {
color: #444444 !important; text-decoration: underline;
}

.sys_txt {
color: #808080;
font-family: Lucida Grande,Lucida Sans Unicode,sans-serif;
font-size: 13px;
}
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
Not sure why it won't show the piece of code but if you look at Gop's original suggestion above you will see...... </Style....

Hope that all makes sense to anyone wanting to use.
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
Oh dear, not as perfect as I had hoped, had a quick look at the other posts and some have the new text in the body of the blog post and some don't !!!
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
I have redone the post that disappeared and it's now showing in it's new finery !

Tried out 666666 but for me it's just a tad too dark, so I will stick with 808080 at the larger font. I really appreciate your comments, website building is a bit like I have been told about writing, it's a very lonely occupation and sometimes just getting someone else who understands the pain of the creative process to pass an informed criticism is just whats needed.
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
I just hope my daughter is grateful !!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Glad that you were able to see the processes and be able to work it all out. Have you created the whole site for your daughter? It's a lovely creation and a great resource for your daughters business. I'm sure that she would be grateful for your work on this.
Photo of Alec Ward

Alec Ward

  • 29 Posts
  • 0 Reply Likes
You are very kind and yes she is very grateful, and what's more important the site is now showing up in search results for phrases like architects plans norwich, architect norwich, architectural services norwich etc. with the consequence that she is now starting to get busy in her business in spite of the continuing UK recession.

Every now and then when no ones looking I give myself a little pat on the back for having got so far when just eighteen months ago I didn't know how to turn on a computer on let alone make a website.

Thanks again for all your help, if you are ever in Central France (where I live) please drop by and let me offer you a glass of extremely fine local Sauvignon.

Alec
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
A very kind invitation.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Alec,

The reason your code isn't showing completely is because the forum itself is trying to interpret and render your code for the display here.

To show code you can wrap it in a couple of tags:



There are other tags useful for this forum as well and you can see them by clicking on (some HTML allowed) at the top of any Reply to This Topic window