WordPress.org

Ready to get started?Download WordPress

Forums

Modifying h2 in TwentyTen (23 posts)

  1. MrNickSheppard
    Member
    Posted 1 year ago #

    Hello

    I'm setting up WordPress for my wife, porting her over from blogspot where she was using a font called calligraffiti for blog and post titles which I'm trying to emulate in TwentyTen...I think I should be able to do so by editing the CSS but had a look through the file and can't figure out how to style the relevant heading.

    Any help appreciated.

    Thanks!

    Nick

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Related:
    - http://wordpress.org/support/topic/how-do-i-change-the-site-title-font-to-segoe-script?replies=27&view=all#post-3680278
    - http://wordpress.org/support/topic/fonts-on-menu?replies=27

    You'll need to do these modifications within a Child Theme. So, you'll be editing the Child Theme style.css file and uploading your font files to your Child Theme directory.

  3. MrNickSheppard
    Member
    Posted 1 year ago #

    Thanks...followed instructions up to http://wordpress.org/support/topic/how-do-i-change-the-site-title-font-to-segoe-script?replies=27&view=all#post-3680204 but I'm a little bit stuck...created a dir called twentyten-child and included a sub-dir called fonts with font files from @font-face but not sure what needs to go in my style.css beyond:

    [ Moderator note: please wrap code in backticks or use the code button. ]

    /*
    Theme Name:     Twenty Ten Child
    Theme URI:      http://wordpress.org/extend/themes/twentyten
    Description:    Child theme for the Twenty Ten theme
    Author:         Nick Sheppard
    Author URI:     http://cardtherapy.co.uk
    Template:       twentyten-child
    Version:        0.1.0
    */
    
    Do I need to include the css from th e@font-face stylesheet.css?
    
    @font-face {
        font-family: 'calligraffitiregular';
        src: url('calligraffiti-webfont.eot');
        src: url('calligraffiti-webfont.eot?#iefix') format('embedded-opentype'),
             url('calligraffiti-webfont.woff') format('woff'),
             url('calligraffiti-webfont.ttf') format('truetype'),
             url('calligraffiti-webfont.svg#calligraffitiregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }

    But then I guess I need to reference the relevant headings...sorry not great with css!

  4. MrNickSheppard
    Member
    Posted 1 year ago #

    Now tried this...but can't get my head round how twentyten-child needs to be referenced:

    /*
    Theme Name:     Twenty Ten Child
    Theme URI:      http://wordpress.org/extend/themes/twentyten
    Description:    Child theme for the Twenty Ten theme
    Author:         Nick Sheppard
    Author URI:     http://cardtherapy.co.uk
    Template:       twentyten-child
    Version:        0.1.0
    */
    
    @font-face {
        font-family: 'calligraffitiregular';
        src: url('calligraffiti-webfont.eot');
        src: url('calligraffiti-webfont.eot?#iefix') format('embedded-opentype'),
             url('calligraffiti-webfont.woff') format('woff'),
             url('calligraffiti-webfont.ttf') format('truetype'),
             url('calligraffiti-webfont.svg#calligraffitiregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    #h2 {
     font-family: 'calligraffitiregular';
    }
  5. MrNickSheppard
    Member
    Posted 1 year ago #

    Ah it's still not working but I've added @import url("../twentyten/style.css"); and activared it in my dashboard...looks like it's not referencing any stylesheet now though...

    http://cardtherapy.co.uk/

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Got any caching plugins installed?

  7. MrNickSheppard
    Member
    Posted 1 year ago #

    Would Google Analytics count? Relatively fresh install and only Facebook like and GA were active. Both deactivated now.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    No, but thanks for deactivating all plugins to rule out any funny business :)

    Just to double-check, you followed this step:

    Activate the child theme. Log in to your site’s dashboard, and go to Administration Panels > Appearance > Themes. You will see your child theme listed there. Click Activate.

    Right?

    If you have, then try asking your hosting providers whether they provide any sort of caching facilities. If they do, could you ask them to deactivate that for now?

  9. MrNickSheppard
    Member
    Posted 1 year ago #

    Yep that's what I did...it looks to you like everything is referenced correctly then (get a bit confused with file paths!)? I'll check with my hosting provider as you suggest. Thanks for your help!

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    WordPress would start crying in the dashboard if you had wrong file paths, something like "Waah! Can't find the parent theme!".

    What I'm looking at is the code spat out by your home page - it continues to reference the Twenty Twelve theme. It should be saying the name of your Child Theme, e.g in file paths it would say ".../wp-content/themes/twentyten-child/...".

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This line is wrong:

    Template:       twentyten-child

    That must reference the parent theme - i.e. "twentyten"

  12. MrNickSheppard
    Member
    Posted 1 year ago #

    Doh...I think I might just have referenced the wrong theme then! 'Cos I was trying to do it while at work :-! I'll try again

  13. MrNickSheppard
    Member
    Posted 1 year ago #

    Oh...I'd failed to notice the error message "The active theme is broken. Reverting to the default theme." when I tried to activate which was why it had reverted to TwentyTwelve as default theme so presumably there is something wrong with my child theme. This is a screenshot of my fonts folder http://snag.gy/31OWX.jpg and my style css is below...occurred to me that I wasn't referencing the right urls for the fonts so had a stab but same result. Sorry to be such hard work!

    Theme URI:      http://wordpress.org/extend/themes/twentyten
    Description:    Child theme for the Twenty Ten theme
    Author:         Nick Sheppard
    Author URI:     http://cardtherapy.co.uk
    Template:       twentyten-child
    Version:        0.1.0
    */
    
    @import url("..twentyten/style.css");
    @font-face {
        font-family: '..fonts/calligraffitiregular';
        src: url('..fonts/calligraffiti-webfont.eot');
        src: url('..fonts/calligraffiti-webfont.eot?#iefix') format('embedded-opentype'),
             url('..fonts/calligraffiti-webfont.woff') format('woff'),
             url('..fonts/calligraffiti-webfont.ttf') format('truetype'),
             url('..fonts/calligraffiti-webfont.svg#calligraffitiregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This is wrong:

    Template:       twentyten-child

    it needs to be:

    Template:       twentyten
  15. MrNickSheppard
    Member
    Posted 1 year ago #

    Ah yes you said, sorry. Changed that and has activated successfully...but no style applied

  16. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You have a mistake here:

    @import url("..twentyten/style.css");

    it should be (missing the first backslash):

    @import url("../twentyten/style.css");
  17. MrNickSheppard
    Member
    Posted 1 year ago #

    Thanks. Getting closer I think...however, assuming I've done everything else correctly and though I just about understand the principles of CSS, I'm not sure how to style the elements I'm after...which are <h1 id="site-title"> and <h2 class="entry-title">

    I tried this which does seem to have some effect on the font though not the desired one:

    /*
    Theme Name:     Twenty Ten Child
    Theme URI:      http://wordpress.org/extend/themes/twentyten
    Description:    Child theme for the Twenty Ten theme
    Author:         Nick Sheppard
    Author URI:     http://cardtherapy.co.uk
    Template:       twentyten
    Version:        0.1.0
    */
    
    @import url("../twentyten/style.css");
    @font-face {
        font-family: '..fonts/calligraffitiregular';
        src: url('..fonts/calligraffiti-webfont.eot');
        src: url('..fonts/calligraffiti-webfont.eot?#iefix') format('embedded-opentype'),
             url('..fonts/calligraffiti-webfont.woff') format('woff'),
             url('..fonts/calligraffiti-webfont.ttf') format('truetype'),
             url('..fonts/calligraffiti-webfont.svg#calligraffitiregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    h1#site-title,
    h2.entry-title {
    	font-family: 'calligraffitiregular';
    }
  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    The font-family part:

    @font-face {
     font-family: '..fonts/calligraffitiregular';

    Is not asking for a URL, it's asking for the name of your font, e.g "calligraffitiregular":

    @font-face {
     font-family: 'calligraffitiregular';

    You can make this name up if you want.

  19. MrNickSheppard
    Member
    Posted 1 year ago #

    Yay it works thanks!

  20. MrNickSheppard
    Member
    Posted 1 year ago #

    One last thing! Any idea why the font I'm trying to emulate here http://cardtherapybyem.blogspot.co.uk appears finer than the one I've implemented?

    Many thanks for your help, much appreciated.

  21. Andrew
    Forum Moderator
    Posted 1 year ago #

    You have CSS that sets it to be bold.

  22. MrNickSheppard
    Member
    Posted 1 year ago #

    I do? From parent CSS? Tried adding font-weight: normal

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have Firebug or an equivalent browser developer tool?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags