How to change the style of your blog post titles.

  • 3
  • Idea
  • Updated 7 years ago
I have heard loads of people ask this in this forum so its time for a UKDuke tutorial.

This will allow you to change the colour, size, font and other style attributes of the blog titles and dates.

See my new blog page (its a bit different) here - http://hexham.info/forum
I have changed the date style and the style of the blog title to match in with the rest of the page.

All you have to do is add this code to a html widget at the top of the blog page (not the individual blog post... the main blog page. ) <!--

--------------------------------------------------------------------------------------------------------------------

<style type="text/css">

div.sys_blog div.post small{
font-size: 12px;
font-family: arial;
font-weight : normal;
color: #ff0000;
display:block;
margin:0 0 5px 5px;
padding:0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: #3b5998; font-family: 'arial'; font-weight: bold; font-size: 20px;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{color: #ff0000; text-decoration: none;}
}

</style>

--------------------------------------------------------------------------------------------------------------------

--> The top section is for the date and the bottom is for the post title.

You can do almost anything you like to the style - if you need more help changing fonts or sizes or colours just ask on this thread and i or someone will tell you how to achieve it.

Enjoy.

Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
  • happy

Posted 9 years ago

  • 3
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Thanks Lee,

One day if I ever start a Blog (or understand the relevance ;-)
I'll be sure to look this thread up :-)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
you should make 1 - they really help get visitors (help seo) -- You can draw in search visitors from other topics /keywords than what your normal site content allows.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
my comment below was meant for you Boomer just as much as Lee... Additionally, LittleYou will always have a special place in my heart for all she has done for herself and others ;)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I definitely will one day, Lee.
I need to look into the whole Twitter thingy as well.
At the moment I 'm trying to "fly below the radar" so to speak, while I'm data collecting and page building. I have a long way to go still.

It's a bit of a catch 22. Do I concentrate on SEO on an incomplete site or do I try get to 80% and then start SEO. I'm doing the latter...
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
UKDuke tutorial Love it... Keep those tips coming my friend...

I say that all the Champs should start their own Tips thread where they can add their stuff to keep it organized for those interested... The reason that I switched from a site located tips page to a GS thread long ago was because here my tips will always remain but who knows about a website or myself ;) A website or a person can be deleted in an instant and here it takes a bit of house cleaning to delete an unusable thread. Plus if we keep it a GS related tip then not only are we wishing to promote without a monetary gain but also ensure that it will always be there to help those countless members who search the YOLA GS forums for an answer.

I highly recommend that we all try to help all those that we can... On a personal note I am so very proud of you Lee and all the other Champs, helpful future Champs and each and every one of the most helpful company Reps... I am simply proud to have been a part of it all... Those helpful members who have been a integral cog in the collective unity that has been created here have truly shown their colors and what kind of an individual they are...

Good job each and every one of you...and "Yes Lee there is a Santa Claus" ;) LOL

Happy site building
Ed

You can find me with my head in the honey pot here...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hhmm, I might actually do so...I see CMCTut's coming along :D
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
sniff sniff.. Ed.. *can someone pass me a kleenex?* You are totally awesome!
Photo of Santa Claus

Santa Claus

  • 22 Posts
  • 0 Reply Likes
Ho, Ho, Ho... A crying bear what a sight... LittleYou right back atcha girl... You and all the helpful people here are so on the Nice list...



Ho, Ho, Ho... Happy site building...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
So nice of you to say Mr Ed -- i know me boomer and littleus have always looked up to your site building skills as something to aim towards - you should think of us as your babies who you have nurtured and who have now spread their wings and flown :) Your legacy of site builders.

You'll always be the god father :) Lee.

Happy site building and a happy christmas 2 santa ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
The Bear Father says



All of you...
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
From other posts that i have seen on this forum, doesn't editing CSS effect the site in a bad way?

Is it safe to add it?
Also how would edit the color of links/hyperlinks?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Adam

It's always wise to create a test page whenever dealing with custom codes. This way you do not risk losing all your hard work due to an incorrect code.

The color of your links is set by the style, but you can change the color of each link individually using the Edit Toolbar; here is how:

1. Create the link in a Text Widget using the link icon

2. You have to change the link in two parts; highlight part of the of the link and change the color using the Edit Toolbar option "Font Color" to choose a different color; then highlight the other part and repeat.

The style designates a blanket color for all of the links within your site, if you want all of your links to be a different color, you will need to repeat the above steps for each of them.

There is a way to do this with .css as well. I'm sure that one of our champs can jump onboard and offer this alternative.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Very good question Adam, i should have and normally would have added at the end 'to use a test page first and that if incorrectly added could perhaps cause a page break'.

Saying that it seems to work fine, if your using H tags on your page it will probably effect all the H tags, you could remove all but the H2 code from the css, the blog seems to use them alot.

<!--

Links on a page are controlled by this,

<style type="text/css">
a:link {color:#FF0000}
</style>

All the links (unless they have a colour attached to them in the page code) should go red.

css could damage a page, test it on a test page but these are just little tweaks they dont effect the main structure of the page so i'm postivie if applied and edited correctly they'll be fine.

-->
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
Thanks guys. Its worked. Thanks for help
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
I changed my style to no frills, and the code works with the date colour, and size. and the size of the title. But i can't change the title colour. How would i change the colour in the style no frills.

Also the recent posts and stuff boxs, how do i change their titles, and links?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Adam i'm glad you got it working,

You should be able to change the colour, could you change it in the old style you had?

check the code is still intact, the heading colour is here
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: #3b5998; font-family: 'arial'; font-weight: bold; font-size: 20px;}

make sure the ; comes after it and the colour code is correct.

It might be worth pasting all the code in again from here just to test it.

Lee.
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
I got it working in the sporty style, in fact i have it on a friends site working right now. But for some reason it refuses to work on nofrills, or cleanslate.
screenshot:
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
give me the url of site builder preview page, i'll try to work out why.
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
http://sitebuilder.yola.com/sites/Dc5... ... btw i am using a friends account as we are working on the one site together..
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!-- Adam

That took a bit of finding, add this it should work...

<style type="text/css">

div.sys_blog div.post small{

font-size: 12px;
font-family: arial;
font-weight : normal;
color: #ff0000;
display:block;
margin:0 0 5px 5px;
padding:0;
}

.sys_txt a:link {
text-decoration:underline;
color: #ff0000;
font-family: arial;
}

.sys_txt a:visited {
text-decoration:underline;
}

.sys_txt a:hover {
text-decoration:underline;
color: #0000ff;
font-family: arial;
}

</style>

Enjoy.

Lee.

-->
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
Thanks it worked, Next thing is would you know how i would edit the title on the blogging widgets example: recent posts
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
it depends on the style your using, for the example above add this at the bottom of the code i gave you above (before the )

h2 {
font-family: arial;
font-size: 26px;
color: #3b5998
}
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
@UKDuke

I just went to use this one http://www.vertexwerks.com/tests/side... and for some reason the code doesn't work, what happens is it just displays the code as text. And i double checked i was using the HTML widget from the sidebar
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
the css if its added straight to the page will need to be wrapped in these

css goes here.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
and you'll need to change the image urls to resources/...
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
I Did it, after mucking around on a test page. Than applied it to someone elses site (with permission of course)



I want to do the same for Recent Post, BlogRoll, and Categorys. Would you know how i could get the html codes for them? so i can embed them into the sidebox
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
it looks amazing - well done.

It would look even better with transaprent images - theres a good collection here http://www.smashingmagazine.com/2009/...

Don't forget me when your a high paid web designer :)

I know a little code trick to get rid of the google cutom search text so its just a clean box if you want it ask.

As for the codes, im currently working on the same thing - i have the codes in a custom box but they will not dynamically update although they should -- as soon as i figure it out i'll let you know.

Lee.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
what sites it on?? i wanna see a live version, it looks awesome!!
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
@UK Duke
Somewhat more interesting with the ones i added.
But at least there is hardly no white on the right side of the blog. But i am going to edit the color. I know some tricks with google search as well ;) . Just have to edit it out of the html code.

@Alex
Its on my friends shaq site, see it here http://www.ateensblog.com/
I do not own the site, i am only adding some designs to it. (at a slow pace)
Photo of Adam

Adam

  • 33 Posts
  • 0 Reply Likes
@UK Duke
Somewhat more interesting with the ones i added.
But at least there is hardly no white on the right side of the blog. But i am going to edit the color. I know some tricks with google search as well ;) . Just have to edit it out of the html code.

@Alex
Its on my friends shaq site, see it here http://www.ateensblog.com/
I do not own the site, i am only adding some designs to it. (at a slow pace)
Photo of dyfed

dyfed

  • 55 Posts
  • 0 Reply Likes
This is great. I've tweaked it a little - getting rid of the bold eg. But I still have the underline. How can I get rid of that aspect?
The date etc is also still in the original font.
My site is http://dyfedwynroberts.org.uk
Thanks.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
add this to the top of the page -

<!--

<style type="text/css">
body {
font-family: Arial, Georgia, "Times New Roman", Times, serif;
}

a:link {
text-decoration: none;
}
</style>

-->

Should fix the date issue as well.

Let me know how it goes - I haven't been able to test it.

Lee.
Photo of dyfed

dyfed

  • 55 Posts
  • 0 Reply Likes
Thanks. Underlines gone within the editor but still there on published site.
I've tried it as an additional HTML box and within the original HTML that changed the titles but same result.

Dyfed.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
have you re published the site? If you have It sounds like a browser cache issue - try holding shift when you refresh the page.
Photo of dyfed

dyfed

  • 55 Posts
  • 0 Reply Likes
You're a genius, sir! A big thank you. really looking forward to your tips site!
Photo of Karen

Karen

  • 100 Posts
  • 7 Reply Likes
This worked perfectly as I knew there had to be a way to do it.