Compatible w/ Elementor?

I can confirm I used the above method to get this working in Elementor. On the page I used the Custom Quote (pasting the shortcode into the Elementor ‘Shortcode’ widget) I used a layout of three cells (placing the shortcode widget into the middle cell) and simply adjusted the appearance of the quote box first, and then adjusted the cells to get it centred (roughly…). I also changed the code for the custom quote box to % to accommodate screen changes such as on a tablet or mobile device.

Because elementor uses a *shortcode widget*, I think some type of custom CSS would be required to centre the quote box in some other way. For a different shortcode element I used (3D FlipBook – thumbnails for the books used) that required pictures to be centred, I used this code I found on the internet (I don’t know how to code, so just pinched it and hoped it’d work – and it did!):

img {
display: block;
margin-left: auto;
margin-right: auto;
}

My images used by the shortcode centred perfectly. However, I wouldn’t have a clue what code you’d need to centre the shortcode quotebox using CSS. I’m pretty sure Mr O’Connell could help with that. Still, using the cells method has sufficed for me until now.

http://millennialdawn.net/daily-devotions/

• This reply was modified 7 years, 6 months ago by stvace.
• This reply was modified 7 years, 6 months ago by stvace.

Hi,

After a lot of faffing about, I think I might have a solution. I’m not a coder, but tried my hand at altering bits of code as follows:

1. In WordPress select Daily Quotes.
2. Click ‘Settings’.
3. You will see the box with the code for the Daily Quotes. Mine is as follows:

<div style=”text-align: right; width: 95%; padding: 0px; margin: 0px; border: 1px solid #000000; background-color: #000000; color: #ffffff; font-family: tahoma; font-size: 14px; font-weight: bold; text-align: center; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;”><div style=”padding: 1px;”>{{quote_title}}</div></div>
<div style=”text-align: right; width: 95%; padding: 0px; margin-bottom: 10px; border: 1px solid #000000; border-top: 0px; font-family: tahoma; color: #000000; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px;”><div style=”padding: 5px;”>{{quote}}</div></div>

I actually altered some of the code.

You need to add ‘text-align: left;‘ (or wherever you want the text to appear – left, right, or center) after Style=” in the two places seen in the code.

Save that and then go to your Elementor page.

Now, the way I have achieved the result of a CENTRED BOX and LEFT, RIGHT or CENTRED text is by inserting the SHORTCODE WIDGET into the page. Click ‘Search Widget’ and type ‘Shortcode’, and this will bring up the ShortCode widget – then drag and drop the widget into place.

In the ‘Shortcode’ widget, where it says ‘Enter your shortcode’, type:

<div align=”center”>
[cw_daily_quotes]
</div>

This should then centre the box, while still keeping the text aligned either, left, right or centred – as set in the code previously.

It’s working OK for me. No CSS required either.

PS

In the code make sure you spell centre (UK) as center (US).

• This reply was modified 7 years, 6 months ago by stvace.
• This reply was modified 7 years, 6 months ago by stvace.
• This reply was modified 7 years, 6 months ago by stvace.
• This reply was modified 7 years, 6 months ago by stvace.
• This reply was modified 7 years, 6 months ago by stvace.
• This reply was modified 7 years, 6 months ago by stvace.