Home – New Forums Tech talk How do I reduce the size of the wordpress blog titles font here:-

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #977793
    @HeatherSmithAU
    Member
    • Total posts: 525
    Up
    0
    ::

    How do I reduce the size of the wordpress blog titles font here:-

    http://www.heathersmithsmallbusiness.com/

    I thought I would go to Appearance – Edit Themes and change the number I have bolded below – but I tried that and I can not see any difference. Any suggestions?

    .page-title {
    color: #e2e2e2;
    font: bold 15px Trebuchet MS;
    letter-spacing: -2px;
    text-decoration:none;
    font-weight: bold;
    margin: 0 0 36px 0;

    #1101478
    marketingweb
    Member
    • Total posts: 625
    Up
    0
    ::

    Hi Heather,

    If you are doing any sort of development work on the web, the tool Firebug is your best friend. This add on for Firefox browser allows you to right click on any bit of text or image or anything, click “Inspect Element With Firebug” and it will tell you exactly which line(s) of code are controlling the output of the element, or at least give you a strong indication where to look. You will sometimes noticed there are some “crossed out”, this means that this would apply, but some other rule is taking precedence, which is how CSS works.

    Using Firebug, it tells me that it’s probably being set by your style.css file, line 643, which reads:

    .entry-title a:link, .entry-title a:visited {
    color: #A69C91;
    font: bold 39px Trebuchet MS;
    letter-spacing: -2px;
    text-decoration: none;

    This would make sense, at 39px would be a big font, so this is probably correct.

    NOW, how to fix this – the answer to this will depend on the WordPress theme you are using. If you let me know I may be able to help further. Some WordPress themes let you edit these settings within the WordPress back end via theme settings, others you need to edit the code. Do bear in mind though that many themes will overwrite all your changes if you upgrade the theme – this is a good reason to use Parent/Child themes, but that’s beyond this discussion.

    Hope this helps!

    Matt

    #1101557
    marketingweb
    Member
    • Total posts: 625
    Up
    0
    ::

    Hi Heather,

    If you are doing any sort of development work on the web, the tool Firebug is your best friend. This add on for Firefox browser allows you to right click on any bit of text or image or anything, click “Inspect Element With Firebug” and it will tell you exactly which line(s) of code are controlling the output of the element, or at least give you a strong indication where to look. You will sometimes noticed there are some “crossed out”, this means that this would apply, but some other rule is taking precedence, which is how CSS works.

    Using Firebug, it tells me that it’s probably being set by your style.css file, line 643, which reads:

    .entry-title a:link, .entry-title a:visited {
    color: #A69C91;
    font: bold 39px Trebuchet MS;
    letter-spacing: -2px;
    text-decoration: none;

    This would make sense, at 39px would be a big font, so this is probably correct.

    NOW, how to fix this – the answer to this will depend on the WordPress theme you are using. If you let me know I may be able to help further. Some WordPress themes let you edit these settings within the WordPress back end via theme settings, others you need to edit the code. Do bear in mind though that many themes will overwrite all your changes if you upgrade the theme – this is a good reason to use Parent/Child themes, but that’s beyond this discussion.

    Hope this helps!

    Matt

    #1101559
    @HeatherSmithAU
    Member
    • Total posts: 525
    Up
    0
    ::

    Matt – thank-you so much for those tips – I really appreciate it – I will have a go.

    #1101480
    @HeatherSmithAU
    Member
    • Total posts: 525
    Up
    0
    ::

    Matt – thank-you so much for those tips – I really appreciate it – I will have a go.

    #1101561
    MatthewKeath
    Member
    • Total posts: 3,184
    Up
    0
    ::

    Try this:

    .entry-title a:link, .entry-title a:visited {
    color:
    #A69C91;
    font: bold 15px Trebuchet MS;
    letter-spacing: -2px;
    text-decoration: none;
    }

    It worked for me – http://i.imgur.com/YYrX5.jpg

    If you plan to do a lot of custom CSS, use Chrome. You can right click on any element in a page, select inspect element, and then manipulate the CSS live on the page. It makes it very easy to find the right CSS for the job.

    #1101482
    MatthewKeath
    Member
    • Total posts: 3,184
    Up
    0
    ::

    Try this:

    .entry-title a:link, .entry-title a:visited {
    color:
    #A69C91;
    font: bold 15px Trebuchet MS;
    letter-spacing: -2px;
    text-decoration: none;
    }

    It worked for me – http://i.imgur.com/YYrX5.jpg

    If you plan to do a lot of custom CSS, use Chrome. You can right click on any element in a page, select inspect element, and then manipulate the CSS live on the page. It makes it very easy to find the right CSS for the job.

    #1101484
    marketingweb
    Member
    • Total posts: 625
    Up
    0
    ::
    MatthewKeath, post: 113604 wrote:
    Try this:

    .entry-title a:link, .entry-title a:visited {
    color:
    #A69C91;
    font: bold 15px Trebuchet MS;
    letter-spacing: -2px;
    text-decoration: none;
    }

    It worked for me – http://i.imgur.com/YYrX5.jpg

    If you plan to do a lot of custom CSS, use Chrome. You can right click on any element in a page, select inspect element, and then manipulate the CSS live on the page. It makes it very easy to find the right CSS for the job.

    Hey Matthew,

    I thought you were basically just copying my answer, but then noticed your little snippet about test editing in Chrome. It does ring a bell somewhere in the back of my mind that i had seen it before, but not something I’ve really thought to use. So thanks for pointing that technique out.

    Note to Heather – what the other Matt suggests won’t perminently change your site, but is great for making test changes to see what the effect would be when you make the real change.

    Matt

    #1101563
    marketingweb
    Member
    • Total posts: 625
    Up
    0
    ::
    MatthewKeath, post: 113604 wrote:
    Try this:

    .entry-title a:link, .entry-title a:visited {
    color:
    #A69C91;
    font: bold 15px Trebuchet MS;
    letter-spacing: -2px;
    text-decoration: none;
    }

    It worked for me – http://i.imgur.com/YYrX5.jpg

    If you plan to do a lot of custom CSS, use Chrome. You can right click on any element in a page, select inspect element, and then manipulate the CSS live on the page. It makes it very easy to find the right CSS for the job.

    Hey Matthew,

    I thought you were basically just copying my answer, but then noticed your little snippet about test editing in Chrome. It does ring a bell somewhere in the back of my mind that i had seen it before, but not something I’ve really thought to use. So thanks for pointing that technique out.

    Note to Heather – what the other Matt suggests won’t perminently change your site, but is great for making test changes to see what the effect would be when you make the real change.

    Matt

    #1101486
    MatthewKeath
    Member
    • Total posts: 3,184
    Up
    0
    ::
    marketingweb, post: 113611 wrote:
    Hey Matthew,

    I thought you were basically just copying my answer, but then noticed your little snippet about test editing in Chrome. It does ring a bell somewhere in the back of my mind that i had seen it before, but not something I’ve really thought to use. So thanks for pointing that technique out.

    Note to Heather – what the other Matt suggests won’t perminently change your site, but is great for making test changes to see what the effect would be when you make the real change.

    MattI think we posted about the same time.

    Chrome is awesome to make quick changes – if your theme supports custom CSS, I can make quick changes in the browser, then when I am happy, cut and paste into the custom CSS file. I am much more a designer and business person than a coder, and this helps me a lot.

    #1101565
    MatthewKeath
    Member
    • Total posts: 3,184
    Up
    0
    ::
    marketingweb, post: 113611 wrote:
    Hey Matthew,

    I thought you were basically just copying my answer, but then noticed your little snippet about test editing in Chrome. It does ring a bell somewhere in the back of my mind that i had seen it before, but not something I’ve really thought to use. So thanks for pointing that technique out.

    Note to Heather – what the other Matt suggests won’t perminently change your site, but is great for making test changes to see what the effect would be when you make the real change.

    MattI think we posted about the same time.

    Chrome is awesome to make quick changes – if your theme supports custom CSS, I can make quick changes in the browser, then when I am happy, cut and paste into the custom CSS file. I am much more a designer and business person than a coder, and this helps me a lot.

    #1101566
    marketingweb
    Member
    • Total posts: 625
    Up
    0
    ::
    MatthewKeath, post: 113612 wrote:
    I think we posted about the same time.

    Chrome is awesome to make quick changes – if your theme supports custom CSS, I can make quick changes in the browser, then when I am happy, cut and paste into the custom CSS file. I am much more a designer and business person than a coder, and this helps me a lot.

    No problems Matthew – I wasn’t accusing you of anything, just having a joke. I realised you were probably posting at the same time.

    I’ve always used Firebug to find the line, change in Dreamweaver, load page in browser to test (rinse, repeat). But the way you suggest is much neater and quicker, so can’t believe I’d missed it. So thankyou!

    Matt

    #1101488
    marketingweb
    Member
    • Total posts: 625
    Up
    0
    ::
    MatthewKeath, post: 113612 wrote:
    I think we posted about the same time.

    Chrome is awesome to make quick changes – if your theme supports custom CSS, I can make quick changes in the browser, then when I am happy, cut and paste into the custom CSS file. I am much more a designer and business person than a coder, and this helps me a lot.

    No problems Matthew – I wasn’t accusing you of anything, just having a joke. I realised you were probably posting at the same time.

    I’ve always used Firebug to find the line, change in Dreamweaver, load page in browser to test (rinse, repeat). But the way you suggest is much neater and quicker, so can’t believe I’d missed it. So thankyou!

    Matt

    #1101568
    MatthewKeath
    Member
    • Total posts: 3,184
    Up
    0
    ::
    marketingweb, post: 113613 wrote:
    No problems Matthew – I wasn’t accusing you of anything, just having a joke. I realised you were probably posting at the same time.

    I’ve always used Firebug to find the line, change in Dreamweaver, load page in browser to test (rinse, repeat). But the way you suggest is much neater and quicker, so can’t believe I’d missed it. So thankyou!

    MattThat was how I used to do it to :)

    #1101490
    MatthewKeath
    Member
    • Total posts: 3,184
    Up
    0
    ::
    marketingweb, post: 113613 wrote:
    No problems Matthew – I wasn’t accusing you of anything, just having a joke. I realised you were probably posting at the same time.

    I’ve always used Firebug to find the line, change in Dreamweaver, load page in browser to test (rinse, repeat). But the way you suggest is much neater and quicker, so can’t believe I’d missed it. So thankyou!

    MattThat was how I used to do it to :)

Viewing 15 posts - 1 through 15 (of 33 total)
  • You must be logged in to reply to this topic.