Support » Plugin: Quotes Collection » Idea for formatting quote presentation

  • stevejonesmo

    (@stevejonesmo)


    Folks:

    Just wanted to share a couple of quick&dirty css tweaks I used to format the quote presentation. You can see it on the right panel (link at the bottom).

    I’m sure someone with more css skills than me can take this concept and run with it.

    I put this in the theme “appearance/customize/additional css” area:

    /* quote section, using an image for my title */
    #quotescollection-3 {
    background-image: url(../wp-content/uploads/qheader.png);
    background-repeat: no-repeat; }

    /* quote div, using a custom background and a rounded corner */
    #w_quotescollection_3 {
    font-weight:bold;
    color: black;
    border-style: solid;
    border-width: thin;
    border-radius: 10px;
    padding: 10px;
    background-image: url(../wp-content/uploads/2016/06/bark3-1.png);
    }

    The only gotcha is that to use a background image for the title you still need to put something in the title, or no space is made available to display an image. A non-breaking space works (& n b s p ;). If you need more vertical height to accommodate your desired image, just add more non-breaking spaces, each followed by a regular space. Every thirty or so pairs of them will force a new line, increasing the space available for your image.

    I hope someone finds this useful.

    Steve Jones

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • I was looking for that thanks a lot ! Would you know by any chance how to customize the quote text as well ? I would like for example to change the style and the line height. Thank you !

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.