WordPress.org

Ready to get started?Download WordPress

Forums

Origin Theme - Header font and length of line (22 posts)

  1. Danilow
    Member
    Posted 1 year ago #

    Would someone help me change the font on my Header Title to Helvetica Light? And Let the line run the length of the header not break into two lines. That would be splendid.

    You may look at my blog at: http://saultman.com/blog

    Thanks for your help.
    I'm making fine progress thanks to those who are generous to help.

    Danilow

  2. Kase
    Member
    Posted 1 year ago #

    Hi Danilow,

    You need to modify the following css:

    #branding {
    width: 380px;
    }

    Assuming that you already have the Helvetica Light font in your site's 'font folder', you could then modify the Font Family for the Site title:

    #site-title {
    font-family: 'Helvetica Light, Helvetica Neue',Helvetica,Arial,sans-serif;
    }

    I hope this helps

    Kase

  3. Danilow
    Member
    Posted 1 year ago #

    Your suggestion does not work!
    I have tried every variation I could think of. The edits are being saved in the CSS folder but nothing is happening. I have tried using ftp - still no change.
    No matter how long I make the length (in the style.css code), the titles still breaks into two lines. Further, you mention a "fonts folder" where is it? I cannot find it. Any further help? Anyone?

    http://saultman.com/blog

    Danilow

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    First turn off minify CSS - that makes it much harder to work with.

    This CSS is the problem:

    #branding {
        float: left;
        margin-top: 20px;
        overflow: hidden;
        width: 25%;
    }

    Change that width. Are you making changes in a Child Theme or custom CSS (you should be - or all your changes will be lost when the theme is updated).

  5. Kase
    Member
    Posted 1 year ago #

    It seems that you are trying to use a Custom Font on your site (Helvetica Light).

    Here is a video tutorial that may help:

    http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-how-to-work-with-font-face/

  6. Danilow
    Member
    Posted 1 year ago #

    Here is what I have done to no avail.
    I will make a child theme as soon as I make this small change.
    I currently do not know how to make a child theme. I understand why I should and I will get to it right away, but for now can you help me just get this one ;ine of text to NOT BREAK into two lines?

    Thanks

    [CSS is all visible on your site - no need to post it here]

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Making a child theme later is MUCH more work...

    See: http://codex.wordpress.org/Child_Themes

    The code I posted above is what is creating two lines - change the 25% to 100%.

  8. Kase
    Member
    Posted 1 year ago #

    Hi,

    try:

    #branding {
    float: left;
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    }

  9. Danilow
    Member
    Posted 1 year ago #

    Nope!
    No change.

    Here's what I entered:

    =========================CSS modified==================

    /* Header
    -------------------------------------------------------------- */
    #header {
    clear: both;
    width: 100%;
    }
    #branding {
    float: left;
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    }
    #site-title {
    font-size: 2.307692307692308em; /* 30 / 13 = 2.307692307692308 */
    line-height: 1em;
    font-weight: bold;
    margin: 0 0 20px 0;
    text-transform: lowercase;
    letter-spacing: -2px;
    font-family: 'Helvetica Light,Helvetica Neue', Helvetica, Arial, sans-serif;
    word-wrap: none;
    }

    ========================end===========================

  10. Kase
    Member
    Posted 1 year ago #

    Are you making these changes directly in style.min.css?

    Also, it seems that your site has an input space for 'Custom CSS'.

    Maybe in the Theme Options Panel.

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Do you have caching (or minify) enabled on your site?

  12. Danilow
    Member
    Posted 1 year ago #

    Ok...I have created a child of the origin theme. It fixed the problem of the title breaking into two lines. But - the font is now all lower case. I want All Caps!. Any suggestions?

    Thanks

    Danilow

    http://saultman.com/blog

  13. paulwpxp
    Font hero
    Posted 1 year ago #

    ( Just FYI )

    The style.min.css is theme's feature.

    Theme also comes with Custom CSS option under WP Theme Customizer.

  14. paulwpxp
    Font hero
    Posted 1 year ago #

    But - the font is now all lower case

    The original one doesn't do that, so you had it edited which is wrong. All files in the parent theme must stay untouched, changes made in child theme or in theme's settings or via plugin only.

  15. Kase
    Member
    Posted 1 year ago #

    Try this:

    #site-title {
    text-transform: uppercase;
    }
  16. Danilow
    Member
    Posted 1 year ago #

    Do I copy the entire style.css file into the child file?
    How else can I edit it without editing the parent?

    Thanks

    Danilow

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No, you only put changes in the child theme - and add CSS there that OVERRIDES the styles in the parent theme. A browser tool like Firebug will be extremely helpful in finding (or creating) the code to add.

  18. esmi
    Forum Moderator
    Posted 1 year ago #

    Do I copy the entire style.css file into the child file?

    No. The child's style.css file should simply @import the parent's CSS file and then include only the new CSS.

  19. Danilow
    Member
    Posted 1 year ago #

    and then include only the new CSS. This is not clear. If I modify a line or section of the parent, then copy it to the child, do it just drop this line in after the initial css text? and then redo the parent css?
    I don't get it.

  20. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Download and learn how to use Firebug - http://getfirebug.com - see the info on their site as to how to use it. It shows you the CSS code to change - you don't ever changes anything in the parent theme.

  21. Danilow
    Member
    Posted 1 year ago #

    I have a web dev app. You did not answer my question. Nor did the firebug page answer it. Are only strings of modified code added to the child file? Where does modified code GO??

  22. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You can put any CSS code in the child style.css file - whatever code you need to make the changes you want. The parent theme may not have all the code you need - it just depends on what you are trying to do.

    It goes in the child theme style.css file - as to the order, that too MAY depend on what you are doing.

    How much CSS do you know? This is a good reference site:

    http://www.w3schools.com/css/default.asp

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.