Content between footer and grids?

  • Unknown's avatar
    pagestaltcenter · Member ·

    Is there a way to add some content between the footer and content of each page?

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, we have some tricks to do that, but whether we can or not depends on what you want to add. If you can let me know, I can see what I can do for you.

  • Unknown's avatar
    pagestaltcenter · Member ·

    Something like a quote like this “This is a privileged position that I have, sharing so many heartwarming moments of laughter and tears with people working toward healing.”

    Thanks for your help!

  • Unknown's avatar
    siobhyb · Member ·

    Hi there!

    Could you give the following custom CSS a try? It’ll add your quote just above your footer:

    .site-footer:before {
    content: "This is a privileged position that I have, sharing so many heartwarming moments of laughter and tears with people working toward healing.";
    display: block;
    text-align: center;
    padding-top: 20px;
}

    Let us know how that goes or if you’d like to change the positioning/style of the quote in any way. The more specific you are about exactly how you want the quote to look, the better we can help out. :)

  • Unknown's avatar
    pagestaltcenter · Member ·

    This worked but is there any way to get the quote between the testimonials and the footer? And is there any way to get different quotes to show on different pages? Thanks

  • kathrynwp · Staff ·

    This worked but is there any way to get the quote between the testimonials and the footer?

    Siobhan tied into the site footer element in her example, but you can experiment with hooking into any element you like, using the “before” or “after” pseudo-element.

    For example:

    .footer-widget-area::before {
     content: "This is a privileged position that I have, sharing so many heartwarming moments of laughter and tears with people working toward healing.";
     display: block;
     padding-bottom: 50px;
     text-align: center;
}

    And is there any way to get different quotes to show on different pages?

    You can do this by prefacing your CSS element with a unique page ID.

    For example,

    .home .footer-widget-area::before

    …would affect just the homepage, since WordPress gives the front page a unique class of “home.”

    Other pages have unique class that you can find by viewing the browser source and looking at the body tag.

    For example, your About US page has the unique class page-id-226 so you could target it with:

    .page-id-226 .footer-widget-area::before

    Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

    An Intro to CSS: Finding CSS Selectors

    An Intro to CSS, or How to Make Things Look Like You Like

    Intro to CSS: Previewing Changes with the Matched Rule Pane

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    https://thewc.co/articles/view/web-inspector-tutorial

    https://cssworkshop.wordpress.com/

  • Unknown's avatar
    pagestaltcenter · Member ·

    One more question that I can’t seem to find. How would I alter the font to italics or add quotes? Thanks!

  • kathrynwp · Staff ·

    You can add italics with another line of CSS. To add quotes, use single quotes on the outside and double on the inside: 

    .home .front-page-widget-area::after {
     content: '"This is a privileged position that I have, sharing so many heartwarming moments of laughter and tears with people working toward healing."';
     display: block;
     padding-bottom: 50px;
     text-align: center;
    font-style: italic;
}

    If you have any additional questions, please start a new thread. Thanks!

  • Unknown's avatar
    pagestaltcenter · Member ·

    Thank you, this worked.

  • kathrynwp · Staff ·

    Great, glad that did the trick!

  • Unknown's avatar
    pagestaltcenter · Member ·

    Sorry, a few more questions. How would I change the color of the quote and if I wanted to add the author without italicizing, would I add a new chunk of the code under the quote? Thanks!

  • Unknown's avatar
    eallas · Member ·

    Hey pagestaltcenter!

    How would I change the color of the quote

    You would utilize the same code that Kathryn provided with an addition of the color attribute. The code below has it added for you. Feel free to change the color to a name, HEX, or RGB. 

    .home .front-page-widget-area::after {
     content: '"This is a privileged position that I have, sharing so many heartwarming moments of laughter and tears with people working toward healing."';
     display: block;
     padding-bottom: 50px;
     text-align: center;
    font-style: italic;
    color: red;
}

    if I wanted to add the author without italicizing, would I add a new chunk of the code under the quote?

    I’ll see if we can modify the current code. I’ll get back to you on this unless someone else does before me.

  • kathrynwp · Staff ·

    Erick – thanks for chiming in with the technique to change the colour on the last piece of CSS.

    I can’t see a way to add another piece of text with different formatting (i.e. non-italics) to the current block.

    If you help with anything else, could you please start a new thread:

    https://en.forums.wordpress.com/forum/css-customization

  • The topic ‘Content between footer and grids?’ is closed to new replies.