Idea for formatting quote presentation

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

• This topic was modified 5 years, 4 months ago by stevejonesmo.
• This topic was modified 5 years, 4 months ago by stevejonesmo.

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