-
Posts
-
Is there a way to add a box-shadow around a Text Block?
I’m trying to achieve something like this site.
Look under “Upcoming Events”.
Any suggestions or guidance would be greatly appreciated
JulesHey Julio,
Thanks for the link to your example page the box shadow used isbox-shadow: 0 8px 8px #e3e3e3;but I don’t think you will want to add it to a text element but probably the column that the text element is in.
If we could see your test page we could advise better.Best regards,
MikeHey Mike,
It’s been awhile. Hope all is well. Below is a link to my site and credentials.
I’ve tried incorporating image + text to a single column, but doesn’t appear to work. Now I’m try two separate columns; one for image & one for text. I figured I could add the box-shadow around the text without impacting the image, but they’re not close enough like the example.
THANK YOU!Julio
Hi,
Thanks for the login I hope you don’t mind that I tinkered a little on the last column.
I removed the theme settings for the column and image, moved the text element into the column under the image and added the custom class class-padding to add padding around the text, then I added the custom class class-column to the column for the box shadow then in a code block at the bottom of the page I added this css:.class-padding { padding: 0 20px; } .class-column { box-shadow: 0 8px 8px #e3e3e3; }just as a temp example, I believe this looks very close to your example page, please check.
Best regards,
MikeMike,
It looks phenomenal!!! Thank you!!!
Just want to confirm a few things regarding the CSS.
> Under the Column that you graciously adjusted for me, under Developer Settings, I do see that you added the Custom CSS Class – class-column
I looked under the Enfold Child – Theme Options – General Styling, and Appearance – Customize – Additional CSS, but I’m not seeing the CSS snippet that you added. Is it somewhere else?One other related question, how can I make the three columns on my test page the same size?
Sorry for the naive questions, but I truly appreciate the assistance and education opportunity. THANK YOU!!!!!!!
Julio
Mike,
My apologies. If I read your last response “completely”, I would have seen that you added the CSS to a Code Block at the bottom of the test page. Is this just for a test or would the CSS normally get added to the “Quick CSS”?Also, I would appreciate input for my other question:
One other related question, how can I make the three columns on my test page the same size?
UPDATE: I figured out the solution here :) Edit first column, Row Settings – Row Layout – “Equal Height”Thank you again.
JulioHi,
Glad to hear that this helped and it looks like you were able to reproduce it for the other columns.
The css I added in the code block was just for testing, please move to the Quick CSS.
I see that you found the equal height option in the column.
Unless there is anything else we can assist with on this issue, shall we close this then?Best regards,
MikeMike,
Again, thank you so very much for your assistance!!! Please close this issueBest Regards,
JulioHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Add Box-Shadow to Text Block’ is closed to new replies.