WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Making a font bold in Coraline (19 posts)

  1. vvr
    Member
    Posted 1 year ago #

    I am trying to make my page and post writing bold in the Coraline theme.
    I ahve added a background I really like, but it makes the normal text hard to read. I need the page text to be bold. I have tried all of the suggestions offered on other queries like this, but there is no change to my site when I modify the code as suggested. I am not fluent in HTML, but I need some help with this.
    My website is http://www.vernalviberise.com if you want to check it out and see what I mean.
    Thanks!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Where are you making changes to the CSS? Do you have custom CSS (via a plugin such as jetpack or perhaps the theme has that option built in?) set up? You should not be modifying theme filee - your changes will be lost when the theme is updated.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Once you have that set up, you'll need to use a tool such as Firebug to identify the CSS for any element on the page that you want to make bold. Then add those selectors to the custom CSS section and add the font-weight code. This will do some, but probably not all of it:

    p {
        font-weight: bold;
    }

    BTW, IMHO, I'd really suggest you rethink using that background under text areas - even with bold, it's quite hard to read. You could still use the background outside of the text areas.

  4. vvr
    Member
    Posted 1 year ago #

    I do not know about a custom css. How do I find that out?
    I have been modifying the style sheet html wherever it mentions fonts, but it makes no difference/no change.
    Can you tell me a better way to do it?

  5. vvr
    Member
    Posted 1 year ago #

    Is there a way to make my text area less transparent, like you can with a text box in publisher or something? That, way I can have the background in the back but have the text more readable. Any ideas?
    Thanks a lot!

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, as noted above, use a plugin such as jetpack -- and move all your changes to that new custom CSS file. As is, you are going to lose all your changes when the theme is updated. If you are changing any other theme files, you must use a Child Theme:
    http://codex.wordpress.org/Child_Themes

    If your changes are not working, you may not be using specific enough CSS or you have caching on your site or browser, or you have CSS errors.

    But all that's irrelevant - you really need to go back and set this up correctly or you will have major problems down the road when you update (or can't update) your theme.

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, there are ways to use a partially transparent background in the text area - but set this up correctly first :).

  8. vvr
    Member
    Posted 1 year ago #

    I have gone through my stylesheet and set all of the font-weights at bold, but there is no change, as before.
    Am I missing something?

  9. vvr
    Member
    Posted 1 year ago #

    Okay. I just installed the jetpack plugin, but I don't understand any of your other instructions, can you explain it again?

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You need to go back and set this up correctly - do not modify theme files.

    I don't know what you have changed - this is another reason to use a child theme or custom CSS - it's much easier to manage your changes. As you can see above, the p tag is what needs to be changed, but that has nothing existing about fonts - so your approach is not going to do what you want (and it's likely to create a mess for you).

    Good CSS reference site: http://www.w3schools.com/css/

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

  12. vvr
    Member
    Posted 1 year ago #

    Yes. Like I mentioned, I understand how to install a plugin and I have already done so.
    I have copied your short html from your second reply into my css and it has changes some of my wording to bold. Thank you. This jetpack is really great. Is it a new feature?
    Do you know why some of the wording on a given page may be bold and some may not? ex: http://www.vernalviberise.com/heritage-swinery/gloucestershire-old-spots/
    I am also interested in learning how to do the semi-transparent text box thing if you have the patience to help me with that. You were right, the bold lettering helps, but it is still a little hard to read.
    Thanks

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, jetpack is cool. If some text is not bold, it's because it is not using only the p tags -- so that selector won't change it. But I'd suggest you try fixing the background and then decide about the bold or not - it's probably not ideal to have a whole site in bold text (from readability or SEO perspectives).

    Add this code to the new custom CSS section:

    #container {
        background: none repeat scroll 0 0 white;
        opacity: 0.8;
    }
  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Add this too:

    #content-box {
      margin: 0 20px;
    }

    Are you adding this code to the Appearances >> Edit CSS? You should no longer be changing anything in the style.css file.

  15. vvr
    Member
    Posted 1 year ago #

    yes. i am changing the edit css.
    This is working well, thank you. I want less white than .8 opacity provides, so i tried reducing it to .6 and .4 but I noticed that the entire site gets dimmer as I do this. Is there a way to have the opacity figure control only the white scroll, and to leave my text and header photos untouched?
    Thanks again for your help.
    I also prefer not to have the white scroll begin below my header photo, and not extend upward. I think that the header text is large enough to stand out against the background without white behind it.
    IS there a way to do this?

  16. vvr
    Member
    Posted 1 year ago #

    Part of what I mean is that I don't want the heading/pictures to be opaque at all. As it is now, you can see the background pattern through the pictures, which is not good.
    Thank you!

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Opacity is inherited by any contained elements - so the only way to get around that problem is to create a transparent image (using a program such as photoshop - there are many free or cheaper options) and using that as a background in the container div. The image can be repeated, so it does not have to be large -- see:

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

    To leave the header alone, put the background image in this div:

    #content-container {
    
    }

    You'll likely need to adjust margins and padding so the background fills the space...

  18. vvr
    Member
    Posted 1 year ago #

    okay. i did not add the background image in the css or the stylesheet, but in the background section under appearances, so i am unsure about how to do as you suggested. help?

  19. vvr
    Member
    Posted 1 year ago #

    i played around with it and got it to work!
    thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic