Need help? Check out our Support site, then


Two lines of text on front page header?

  1. mostlovingmoments
    Member

    Good morning,

    Would it be possible to have two lines of text on my front page? Ideally I would like the front page intro to read:

    Launching a global conversation about everyday acts of love.
    (space line)
    "What are some of your most loving moments?"

    Thanks in advance for all your help,
    Lori

    The blog I need help with is mostlovingmoments.org.

  2. Hi there,

    Where would these lines of text appear? Is this something different from the mission statement I had helped you with in this post?

    Thanks for clarifying.

  3. mostlovingmoments
    Member

    Good morning,

    The new line of text would appear directly underneath the mission statement. I wasn't sure how to add another line (essentially put in a hard return in the CSS text you graciously wrote for me so I could have two lines of text vs. one).

    Thanks so much,
    Lori

  4. Thanks for clarifying.

    You'd have to add '\A' as a line break at the end of the first sentence and a few extra lines of CSS to the snippet for that to work. So the full snippet would look like this:

    .site-header:after {
        content: "Launching a global conversation about everyday acts of love. \A Another line of text.";
        margin: auto;
        padding: 0 2em 2em;
        display: block;
        white-space: pre;
        text-align: center;
    }

    That should do the trick!

  5. mostlovingmoments
    Member

    Hi,

    Thanks so much for your quick response!

    The only trouble is that when I tried it just now, I was attempting to put actual quotation marks in the second line, but that appears to change the code.

    In other words, I'm hoping to have the second line on the front page read,
    "What are your most loving moments?" (with the actual quotation marks on the line)
    Ideally I would also like to have the "your" be italicized for emphasis.

    Do you know of a way we could do that?

    Warmly,
    Lori

  6. Hi there,

    The following CSS should work:

    .site-header:after {
    	content: "Launching a global conversation about everyday acts of love. \A \201cWhat are your most loving moments?\201d";
    	margin: auto;
    	padding: 0 2em 2em;
    	display: block;
    	white-space: pre;
    	text-align: center;
    }

    Unfortunately, italic won't work here because it's not HTML. We can italicize the entire text but not just one word.

    Hope that helps!

  7. mostlovingmoments
    Member

    Hi,

    Thank you - although what's strange is that I put the CSS in as shown above, and it looked fine when I hit "Save and Publish." But now it is showing the 201c and 201d at the end of the second line of text. I left it on the site so you could see it if need be.

    Thanks!
    Lori

  8. mostlovingmoments
    Member

    Also, if we can try a version of CSS that italicizes the entire second line, "What are your most loving moments?" - that would be great.

    Thank you so much!
    Lori

  9. Hi Lori,

    If the above CSS isn't working, you can try replacing the content line with the following:

    content: 'Launching a global conversation about everyday acts of love. \A “What are your most loving moments?”';

    As for the italic, I think you missed my previous reply. It's not possible to make just one line italic. It's either the entire block of text or none of it. If you want the entire block then you can add the following into the CSS I've already provided on a new line right after text-align:....

    font-style: italic;

    Sonia

  10. mostlovingmoments
    Member

    Hi Sonia,

    Thanks so much! Sorry for my confusion. Yes, I see now that I can't make just one line italicized.

    I inserted the new CSS content you shared above, and it worked to put the quotation marks on the second line. Although it made the quotation marks a different font than the rest of the text, which looked a little strange. So I left it as is. Ah well, we tried!

    Many thanks for all your help and support,
    Lori

  11. Glad you got it mostly working! Happy I was able to help.

  12. mostlovingmoments
    Member

    Thank you so much Sonia! I'm loving the way it is coming together. Such fun!

Topic Closed

This topic has been closed to new replies.

About this Topic