Home Forums Weaver Xtreme Theme Page / Post title spacing

Viewing 16 posts - 1 through 16 (of 20 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

    How 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

    #69327
    plumcreek
    Participant

    You’re so cute, of course I need help with it. LOL. I get the concept now, just unsure how to use it to get what I need. I’ll get to it. But first…

    How do I get the Posts pages header text to wrap and have the shadow like the Pages? I’ve put it in the same place but it doesn’t override the default. I see the note “Custom styles will not be displayed by the Post Editor.”

    #69328
    scrambler
    Moderator

    On the SHop Page, I see you added inline CSS

    text-shadow: 2px 2px 4px #000000;

    To make the shadow.

    For the post pages, the title is inside the header HTML using some PHP code if I remember, and the rule you have in Custom CSS for that area is

    #header-html /* hide that area (page title) on the homepage */
    {text-align:center;position:absolute;bottom:10px;background:transparent;color:white;font-size:700%;font-weight: bold}

    If you want the shadow add it there.

    If you want the text to scale with the browser, you can change the font size to a calculated expression like below that uses a fixed 12px plus 5% of the browser width (adjust these as you see fit)

    #header-html /* hide that area (page title) on the homepage */
    {text-align:center;position:absolute;bottom:10px;background:transparent;color:white;font-size:calc(12px + 5vw);font-weight: bold;text-shadow: 2px 2px 4px #000000;}

    And you should probably reduce the bottom margin on the header HTML area that you have set at 110px, making the title way high

    Now regarding you remark on making the title wrap, are you saying you wish to limit the width of the post title so it forces them to get on two lines?

    If so, you will need to change the HTML that you placed in the Header HTML area to make it look like below

    <div style="max-width:700px;display:inline-block;"> Place your current HTML here </div>

    Adjusting the max-width to what you need

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