Home Forums Weaver Xtreme Theme Page / Post title spacing

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #69098
    plumcreek
    Participant

    ABOUTMILKMAN.

    Ok, now I need to tighten the spacing – how does one do a soft carriage return in HTML? LOL

    I used a <br> in the title and that worked fine except the spacing. This is what we have in Custom CSS:

    /* position page title inside header image*/
    {text-align:center;position:absolute;bottom:10px;background:transparent;color:white;font-size:700%;font-weight: bold}

    Thank you!!!

    #69099
    scrambler
    Moderator

    You should not use <br> to finely control spacing, instead use HTML and CSS.

    But you are not explaining where you want to reduce space, above both line, between both lines, or below them?

    Also, your titles are white on a white background and therefore invisible….

     

    #69100
    plumcreek
    Participant

    You helped me move the page title onto the header image and they are white to show up against the brown milk background. The design calls for the pages to wrap, specifically and it varies (damn marketing people) from page to page. So I thought I needed a break in there to make it happen the way they want it, and there would be some way to decrease the space between the two lines. I got how to move the title within the space but am stuck now.

    Here’s how they want it to look:

    And this is what I have:

    ABOUTMILKMAN.

    Thanks.

    #69101
    scrambler
    Moderator

    What confused me is that you have the title inserted twice. Once visible on to of the header, and once under the header white on white causing that big gap 🙂

    This is because when I gave you the way to insert the title centered on top of the header background, you forgot to check the hide page title option in the page editing page option. So to get rid of the big gap below the header, remember to do that…

    Now about your text, here the HTML CSS way to do it

    <span>ABOUT</span>
    <span style="display:block;clear:both;line-height:.5;">MILKMAN.</span>

    Then you will need to adjust the bottom value in the CSS you added for the header html

    #69103
    plumcreek
    Participant

    So it has to be done on a per page basis then. Ok, thanks.

    #69104
    scrambler
    Moderator

    If you have a huge number of pages to do that in, we could use a general CSS rule to not display them.

    Otherwise using the hide option in each page editing page is the most efficient way

    #69111
    plumcreek
    Participant

    Is there a way to put drop shadows on text using CSS? Otherwise I’m going to have to use images to get it. Also that box in the upper left corner for the logo, I need to have it overlay rather than what I did so I’ll work on that and come back if (when) I get stuck again.

    Thanks.

    #69113
    scrambler
    Moderator

    You can google that 🙂

    CSS Shadow Effects (w3schools.com)

    And I don’t see any box in the upper left corner, so you will need to elaborate

    #69115
    plumcreek
    Participant

    Crap, I hate when I make you ask clarifying questions.

    The box with the logo in the upper left is supposed to also be over the menu http://bethtest.com/ but I don’t know how to place an image there. Instead I included it as part of the home page image. No one had said it needed to be on ALL the pages until now.

    Thanks.

    #69116
    scrambler
    Moderator

    Put the image in Advanced options > HTML Insertion area > Pre Wrapper area box

    Add The rule below to its BG CSS+ box below it, tweak and add properties you want to it like the drop shadow.

    {position:absolute;top:0;left:10%;z-index:20000;}

    Check option if you want it only on home page below that

    #69121
    plumcreek
    Participant

    This is great, except I’m trying to do two things with that Prewrapper injection area and it’s getting muddled and my messing around isn’t fixing it. Can I just hire you to do it for me? I’ve lost the line about the discount. ARGH!

    And then this in Custom CSS.

    {max-width: 1100px;margin: 0 auto;text-align: center;}

    And yes, I know I don’t have the box shadow right yet on the logo.

    I’ll keep messing with it but putting this in in case you’re around. Thanks.

    #69122
    scrambler
    Moderator

    I forgot we were already using the are, but before going any further you need to clarify what should happen when the browser gets smaller.

    But we can still make that work.

    Add position relative to the pre wrapper rule

    {max-width: 1100px;margin: 0 auto;text-align: center;position: relative;}

    Then change the left position in your first span to zero instead of 18%

    That will make the top left image be in the left of the 1100px area, which will make it not too far left on large browser, but all the way to the left on smaller browser, so it does not interfere with the menu.

    If you do want the image more to the right on small browser, you can add some left positioning value, but then the image will interfere with the menu when the browser gets smaller.

    You can make the image go under the menu by changing its z-index to 1000 instead of 20000, but you may need to add a semi transparent background on the menu to keep it readable when over the image.

    Try these and let me know how it should behave if not good for you

    #69129
    plumcreek
    Participant

    Yeah, I’m going to do some more work on the phone layout.

    How do I do this on the posts pages? Talking about formatting the page title. http://bethtest.com/powdered-milk-recipes/kefir-yoghurt/

    #69130
    scrambler
    Moderator

    Ho do you do what on the post page 🙂

    If you mean deal with the big text size on top of the header, below is an article on the way to scale text progressively using CSS

    Scroll down to responsive text section

    Responsive Sizing: Two little known CSS properties – Weaver Xtreme Guide (weavertheme.com)

    Let me know if you need more help with it

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