Ruslan Suhar

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!

Thank you! ??

Hello polarte,

It’s been two days since my last message. I assume that you’ve managed to fix the issue, and I’m closing this topic.

In case the issue is not resolved yet, please let me know and provide more details about it.

Hello netbjarne,

Sure, it is! ??
The main CodeLights website runs on the latest master WordPress version (currently it’s 4.4).

CodeLights is made as much WordPress-native as possible, so in general it shouldn’t break during core updates.

At the same time if you ever experience some bugs I might have missed, feel free to create the relevant support topics here, and I will fix them asap.

1. Most probably, it’s overridden by your theme’s styles. I will make more strict rules for this in the next version. Till then you can define some of the CSS styles you need manually: CodeLights is absolutely great for that!

2. If I got you right, you’re looking for this button: https://prntscr.com/9bmqlg

3. Most probably, yes, it’s inherited from the theme. You can override the certain styles you need using CSS.

If you can catch the moment when the fade effect is actually finished (e.g. the theme has some API for it), you can trigger $cl.scroll.resize(); at that moment. If not, try setting a timeout to window load event with the same delay this fade effect actually lasts (or a bit more):

jQuery(window).load(function(){
	if (window.$cl === undefined || window.$cl.scroll === undefined) return;
	setTimeout($cl.scroll._events.resize, 500);
});

(Use your fade effect duration instead of “500”).

Please let me know, if this actually helped!

Glad to hear it helped!

If you need anything else from me, please let me know!

Hi once again,

Got the issue now. It happens because all the page counters start animating when they are above the 15% offset from the bottom of the page (that’s a kind of industry standard). And in certain screen resolutions your starting counters are located within this bottom 15%. In some future I’ll think about moving this to a certain option, till then you can use the next JavaScript code snippet to set the offset you want:

jQuery(function($){
	if (window.$cl === undefined || window.$cl.scroll === undefined) return;
	$.each($cl.scroll.waypoints, function(index, waypoint){
		waypoint.offset = '0%';
	});
	$cl.scroll.resize();
});

When you apply it, all the counters will start instantly when they just appear on page. (Or you can just move your starting counters a bit up instead of using the code snippet).

Please let me know if I actually helped you, or whether you need my further assistance!

Hello reneverschoor,

Unfortunately, at the moment there’s no one-click way to transfer separate examples to SiteOrigin Widgets representation at your website. That’s why I prepared for you a list of shortcodes for examples shown at the FlipBox showcase: https://gist.github.com/rsukhar/7704a09f5672aa13d2f0

I hope, you’ll figure out the separate values from the provided shortcodes, and will be able to recreate them at your environment.

I think about developing some convenient import tool for this in some future, but at the moment it’s not tier-1 priority, as I’m focused on a set of new really great elements, that are coming soon! Stay in touch! ??

By the way, regarding this concrete question: if you want, right now I can provide you a config form screenshots for one selected FlipBox example, so you could better understand it’s config.

So what do you think?

Hello polarte,

Can you please provide the relevant URL and your browser name and version, so I could investigate the issue better?

Hello Jan,

I implemented the option defining the elements order for both front and back FlipBox sides. Check out!

Hello Jan,

At the moment this idea seems to me a little distant from the original FlipBox purpose. At the same time, if I receive more of such requests, most likely, I’ll implement it as an option.
Till then for this purpose you can use a simple JavaScript, that will toggle “hover” class on every element click:

<script type="text/javascript">
jQuery(function($){
    $('.cl-flipbox').on('click', function(){
        $(this).toggleClass('hover');
    });
});
</script>

You can read more about using scripts on pages, for example, here.

Ah, got you now!

I like the idea! I’ll implement it with the next update that will be on this Saturday.

Stay in touch!

Hello Jan,

Thank you!

As for your question: if I got you right, here’s the option, you’re looking for https://prntscr.com/96u44p (Front Side -> Background Image).

If you have any additional questions, please let me know!