[NaturalifeParticipant]

Hello themeco support,

I was wondering if it’s possible to format the blockquote shortcode to appear like this quote as seen here: https://snag.gy/qjL4yE.jpg

Thanks for the help ahead of time!

Regards,

Cameron

Site: Naturalife.org

[JoaoModerator]

Hi Cameron,

Would you mind pointing where you have placed the blockquote ?

Thanks

Joao

[NaturalifeParticipant]

Sure thing.

I have an example of my blockquote here: http://naturalife.org/health/reasons-cant-lose-weight

It’s located before the list starts.

It may be slightly formatted in my custom css but if it is, I can look into finding where its formatted and overwrite it with the new css (if that’s all it takes to make it look the way I want).

Regards,

Cameron

[NicoModerator]

Hi There,

You could modify it using your customizer > Custom > CSS.

For example, Add class to the blockquote to easily identify the blockquote you want to customize.

Then add this in your Customizer > Custom > CSS.

.yourclass .x-blockquote{
//CSS changes to the blockquote
}

Hope it helps.

Let us know how it goes.

Thanks.

[NaturalifeParticipant]

Thanks for the help so far 🙂

I know how to modify the text, spacing, and such. But is there anyway you could tell me how to set 2 (or 1) images as a background to the blockquote?

To explain it further:

I have two images (png) that are just enlarged quotes. One image for each quotation mark ( ” “).

Any idea how I can add one image to the background of the blockquote that’s on the left side and have the other reside on the right side (if possible). If it’s not, I would settle for just one quote on the left side.

Here is a screenshot if what I want to do: https://snag.gy/qxsW1L.jpg

So all I want to do is add quote images to the background of the block quote. It would be greatly appreciated if you can help me out!

Be well,

Cameron

[Nabeel AModerator]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-blockquote:before {
    position: absolute;
    content: '';
    background: rgba(0,0,0,0.4) !important;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
}

.x-blockquote {
    background-image: url('http://naturalife.org/wp-content/uploads/2016/07/Running.jpg') !important;
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    color: white;
    padding: 20px;
    z-index: 1;
}

Let us know how this goes!

[NaturalifeParticipant]

It didnt seem to work quite as planned.

A sample of the block quote can be seen on this article: http://naturalife.org/natural-product-reviews/best-organic-green-superfood-juice-powder

Here is the code I used:

.x-blockquote:before {
    position: absolute;
    content: '';
    background: rgba(0,0,0,0) !important;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
}

.x-blockquote {
    background-image: url('http://naturalife.org/wp-content/uploads/2016/08/bg-blockquote-blog-open.png') !important;
    position: top;
    background-attachment: fixed;
  	background-repeat: no-repeat;
    background-size: auto;
    color: grey;
    padding: 20px;
    z-index: 1;
}

I would like to note that the image quotes appear in the correct location on mobile view but not desktop view for some reason.

[FriechModerator]

Hi There,

Would you mind removing that custom CSS you applied on the blockquote in the meantime, and just add this instead.

.x-blockquote:before {
	content: url('http://naturalife.org/wp-content/uploads/2016/08/bg-blockquote-blog-open.png') !important;
}

And please provide us the site where you get this screenshot – https://snag.gy/qjL4yE.jpg

Thanks.

[NaturalifeParticipant]

Sure thing. The link to the sample quote is here: http://wellnessmama.com/124092/camel-milk/

Your suggestion got the quote placement where I want it. I just need to reduce the size of the quote image and get the paragraph to have a padding on the left to be aligned with the first sentence. If your not sure what I mean, you will see when you compare mine with the sample quote.

Thanks for the help so far!

[ChristopherModerator]

Hi there,

Please update previous code to :

.x-blockquote:before {
    font-size: 46px;
    content: "\f10d";
    font-family: fontawesome;
    color: rgb(218, 218, 218);
}
.x-blockquote {
    font-size: 0.856em;
    color: #9e9e9e;
}

Hope it helps.

[NaturalifeParticipant]

Thank you for the suggestion but I think this made it worse. Now the line spacing is variable (it wasn’t before) and the paragraph formatting is still indented compared to the other lines–as I want to have all of the paragraph left justified.

That and I’m not a huge fan of the ” mark appearance compared to the image I used. But I can deal with that appearance if using this opposed to an image offers performance benefits and its easier to format it the way I want it.

Any suggestions?

Note, you can revisit this link to see what the block quote currently looks like: http://naturalife.org/natural-product-reviews/best-organic-green-superfood-juice-powder

[RadModerator]

Hi there,

The icon is affecting the spacing since it’s inline. Line spacing should be fix if you remove it, or by changing it to this

.x-blockquote:before {
    font-size: 46px;
    content: "\f10d";
    font-family: fontawesome;
    color: rgb(218, 218, 218);
    float: left;
    margin-top: 10px;
    position: absolute;
    left: 0;
    top: 0;
}
.x-blockquote {
    font-size: 0.856em;
    color: #9e9e9e;
    padding-left: 59px;
    position: relative;
}

Hope this helps.

[NaturalifeParticipant]

I figured it out. Thank you for your help!

[Prasant RaiModerator]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts