Hello Mac,
The best way to customize CodeLights elements is to use special classes that will be connected with the customizations. In this case let’s add ‘btn_bottom’ class to the element (Custom > Extra class name).
And after that I would use something like this to make its back button stick to bottom:
.cl-flipbox.btn_bottom .cl-flipbox-back-h {
padding-bottom: 40px; /* button overall height */
}
.cl-flipbox.btn_bottom .cl-btn {
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
}
It’s not a ready recipe, use it as a blank to make your own customization with the details you need.
Please let me know if it actually helped you!
Hello once again,
It’s been a while since my last answer. I guess, it helped, so I’m closing the topic. In case you need any further assistance, just write your replies below.
Hey Ruslan sorry I didn’t reply before.
I loved your css and it worked like a charm. There’s only one thing which I wanted to ask just because I’m a little OCD. The button once aligned to the bottom takes the width of the flip box. I tried changing the code myself to keep the button centered and with the adaptive size as it was before. If this can’t be done, its ok. I still REALLY love how the button looks aligned to the bottom.
Thanks.
MAC
Hey Mac,
This question is connected with the CSS itself rather than the CodeLights plugin, so I recommend to check one of the relevant pages over the web, like this one: http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div
The new version is coming soon! Stay in touch! And if you enjoy the plugin, please rate it ★★★★★!
