Tagged: x
-
AuthorPosts
-
March 9, 2017 at 6:04 pm #1401221
designerkenParticipantI want to mimic the output of the recent post shortcode hover over an image and have the color overlay, but want to have text instead of an icon.
I also want this to be borderless and with 2 rows and 2 columns so that I can have a total of 4 images.
What is the best way to build this in cornerstone? I have attached a mock-up of what I am describing.
March 9, 2017 at 11:42 pm #1401544
RupokMemberHey there,
Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.
Thank you for your understanding.
March 10, 2017 at 12:52 pm #1402184
designerkenParticipantIs that because it cannot be done with cornerstone?
March 10, 2017 at 8:45 pm #1402666
FriechModeratorHi There,
It can be done in Cornerstone, but that will require a complex custom CSS. Please provide us the page URL where we can see that section, maybe there is something we can do about it.
Thanks.
March 13, 2017 at 4:44 pm #1405534
designerkenParticipantThere is no section, I am just trying to figure out how to replicate that mockup in cornerstone.
So would I make two rows with 2 columns. Then add a background image to those each of the 4 columns?
Then what? how do I create the haver state and text to mimic the recent posts css.
March 14, 2017 at 1:46 am #1405960
LelyModeratorHi There,
Yes, correct on the first part. Just enable Marginless column option.
Inside each of those column, add Custom Headline element for the text and choose center text alignment.
Add col-with-hover on each of those columns class field.
Also add the following CSS:.col-with-hover { vertical-align: middle !important; height: 500px; /*Feel free to adjust this height*/ position: relative !important; } .col-with-hover .h-custom-headline { margin: 0 !important; display: none; } .col-with-hover:hover:after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,0,,0.5); } .col-with-hover:hover .h-custom-headline { display: block; transition: all 5s ease; }Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.
-
AuthorPosts
- <script> jQuery(function($){ $("#no-reply-1401221 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
