You can use this code snippet to add to your Custom CSS to alter how your Bump Elements appear in a bump offer when using ClickFunnels.
This can be used with Bump Content and other bump offers when using ClickFunnels, and is specificly created using a ONE STEP ORDER BUMP.
This probably will not work if you use this with a 2-Step Order Element, but hey, maybe it'll work for you, give it a shot.
The following CUSTOM CSS will make your BUMP ELEMENT look like this:
Use the following CUSTOM CSS For a Stand Alone BUMP ELEMENT:
/* Following syntax removes blinking arrow */
#tmp_orb-20080 > div.dashed.orderFormBump > div > div:nth-child(1) > label:nth-child(1) > img
{
display: none
}
/* Moves Bump Text UP to top */
#tmp_orb-20080 > div > div > div.text-center > p > font > span
{
position: relative;
top: -40px;
}
/* Moves 'One Time Offer' Text up to match bump text... */
#tmp_orb-20080 > div > div > div.text-center > p > font > u
{
position: relative;
top: -40px;
}
/* Moves Checkbox To Left Justify, Adjust As Necessary */
#tmp_orb-20080 > div > div > div:nth-child(1) > label:nth-child(1)
{
position: relative;
left: -85px;
}
/* Moves 'Yes, I will Take It!' Text left to match Checkbox, adjust
as necessary, if you change the text dramatically, this will alter the look */
#tmp_orb-20080 > div > div > div:nth-child(1) > label:nth-child(2) > b > font
{
position: relative;
left: -85px;
}
/* Moves ENTIRE HIGHLIGHTED CHECKBOX AND TEXT AREA DOWN BELOW OTO TEXT
Adjust pixel hight as necessary, everyone's bump text will be different height */
#tmp_orb-20080 > div > div > div:nth-child(1)
{
position: relative;
top: 100px;
}
/* One final note, you will most likely need to change your CSS SELECTOR from #tmp_orb-20080 to the unique selector in your editor. Look at the bump element in your editor, check the settings and click the # button to see your specific bump element selector. */
Use the following CUSTOM CSS For a 2-Step Order Element:
/* Moves ENTIRE HIGHLIGHTED CHECKBOX AND TEXT AREA DOWN BELOW OTO TEXT
Adjust pixel hight as necessary, everyone's bump text will be different height */
#tmp_order2step-15469 > div.o2step_step2.o2step_wrapper.drpZone > div.dashed.orderFormBump > div > div:nth-child(1) {
position: relative;
margin-top: 85px;
}
/* Following syntax removes blinking arrow */
#tmp_order2step-15469 > div.o2step_step2.o2step_wrapper.drpZone > div.dashed.orderFormBump > div > div:nth-child(1) > label:nth-child(1) > img {
display:none;
}
/* Moves Checkbox To Left Justify, Adjust As Necessary */
#tmp_order2step-15469 > div.o2step_step2.o2step_wrapper.drpZone > div.dashed.orderFormBump > div > div:nth-child(1) > label:nth-child(1) {
position: relative;
margin-left: -250px;
padding-left: 0px;
}
/* Moves 'Yes, I will Take It!' Text left to match Checkbox, adjust
as necessary, if you change the text dramatically, this will alter the look */
#tmp_order2step-15469 > div.o2step_step2.o2step_wrapper.drpZone > div.dashed.orderFormBump > div > div.text-center {
position: relative;
margin-top: -127px;
}
/******** Order Bump Background Padding **************/
#tmp_order2step-15469 > div.o2step_step2.o2step_wrapper.drpZone > div.dashed.orderFormBump {
padding-bottom: 30px !important;
}