Font outline/contour and text alignment – Venture Theme

  • Unknown's avatar
    anaobueno · Member ·

    Hi!

    I recently changed the theme of my site to Venture, and started to try minor changes with CSS tool.

    Years ago I learned a lot about HTML scripts, but today I forgot almost everything, and the differences in CSS confuses me. So, basically, I am almost a noob. :P

    I already could change one detail, witch is to remove of gray layer of the featured image, thanks to this forum!

    code:
    .overlay {
    background: none;
    }

    But now I have another little problem: the font in the titles and menu, witch is white, doesn’t show itself clearly if the featured photo is bright.

    Unfortunately, just changing the font color does not help. I would like to put a black outline in the white font, but I do not even know if this is possible …

    Someone could help me with that?

    Besides, another detail that I’d like to change:
    The Venture theme has a page of full width, but is too large for my taste. I wanted to change this, make smaller – without using the side bar.

    I found part of the solution here, with this code:

    .site-main {
    max-width: 75%!
    }

    (originally 100%, I changed to 75%)

    But this code just alters the width, but not the alignment. I would like to put it all in the center. I know that is probably the code “text-align: center;” but I do not know exactly how and where I should insert it.

    Aaaaand, for last, this change (of width) was also applied to the blog section of the site. But here I want to keep the original width, because there is a side bar! Hehehe

    Thanks for any help!

    The blog I need help with is: (visible only to logged in users)

  • desnum · Staff ·

    Hi anaobueno,

    If you end up changing out your hero image to something lighter, perhaps a font shadow will help your white title text stand out? If you wanted to test it out, try the following CSS in your theme customizer to tweak the page title: 

    #primary-header .entry-title {
text-shadow: 0 1px 4px rgba(0,0,0,.62);
}

    And you can play around with those number values to make the shadow more or less prominent.

    Desiree

  • desnum · Staff ·

    Also, to apply the same text-shadow to the menu before the menu turns into a sticky header when you scroll, you’d do the same code but with the following selector: 

    #masthead, #masthead a {
text-shadow: 0 1px 4px rgba(0,0,0,.62);
}
  • Unknown's avatar
    anaobueno · Member ·

    Hi Desiree!

    Thanks for your advice!

    I tryied the codes you suggested. In some things it worked very well, but in others don’t. :/
    I think an outline will work better… do you know if I even can apply this kind of thing?

    And well, actually this issue with the font is the minor problem, if I can’t found a code for this, I can change the featured images. It will gave more work, but at least I know how to do hehehehe

    But the issue with the alignment of the text is more important to me, now.
    I know that it’s probably just a “text-alignment: center”, but I don’t know the other caractheres of the CSS code….

  • desnum · Staff ·

    I think outlines are only supported by webkit browsers (not supported everywhere), and you’d replace the line containing text-shadow with

    -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;

    About your alignment issue, I was going to suggest a width and margin auto but I noticed that on your site it looks centered now! Do you still need help with this?

  • kokkieh · Staff ·

    Hi there,

    I see you’ve been getting excellent help from @desnum here. I just also wanted to mention that your Premium Plan includes live chat and email support via the help icon that appears bottom-right on all the My Sites pages where we’d also be happy to help you with CSS changes to your site.

    If you prefer the forums that’s fine, but wanted to make sure you’re aware of the other option, as you are paying for it :)

  • The topic ‘Font outline/contour and text alignment – Venture Theme’ is closed to new replies.