Customize the optincrusher to match your brand

August 23, 2010

in Training

A while ago I held a webcast and installed the optincrusher live for a few websites, including customizations to make it fit with the colors and logos.

More than just teaching you how to customize the optincrusher it turned out to be a fantastic tutorial about using a free graphics program (Inkscape) to create custom images for your website. I actually show you how to use Photoshop a little too.

You can download the HD version below the video. If you watch it here on this site, click the full screen button so that you get all the details.

Download in HD

Integration

{ 48 comments… read them below or add one }

Barry January 19, 2011 at 2:51 pm

Hi,

Great tutorial but I am not seeing exactly how you retype the headline text and get the background to fit behind it. I am trying to re-write ‘Newsletter’ and the white text changes but I cant alter the shadow. it is a little quicjk on the video and what you do is just off screen

Daniel January 19, 2011 at 9:23 pm: It’s basically two text items. One is in front and the other behind. The one behind has a blur applied and is offset a bit to look like a shadow. You could use the layer move back/forward on the text elements to be able to select the one behind by putting it in front. You could also zoom way in to have a larger target. Best of luck.

Reply

Cav January 30, 2011 at 3:25 pm

Hi Daniel,

I love your plugin, but I’m having a problem getting it to work. Basically, when I enter my headline (in the optin call to action section) and hit the “update all settings” button, it is only saving the first ’15 characters’ and I can’t figure out how to correct it. Any suggestions?

Thanks.

Daniel January 31, 2011 at 7:17 am: Cav,

There’s nothing that would limit it to 15 characters and I’ve had quite a few more on other sites. There might be a chance that you included some HTML or that your site is narrow and it’s spilling over to a second line and getting lost. I would just keep trying.

Reply

David February 19, 2011 at 3:44 pm

Hi,

Can I move close button a bit higher? Or can I move Special Offer to the left of screen?

David

Daniel February 23, 2011 at 6:10 am: David, moving the close button should be easy enough. make sure it’s a standard form button and then you should find the css all in one place in the plugin.

Reply

Jamie March 3, 2011 at 12:52 pm

Daniel this is a great plugin. It’s super easy to use and customize. I have one issue I have not been able to accomplish. How do I remove the optin bar from my homepage? This has no id, etc. What code can I get to remove this option. We are in progress of building our service based website, so our blog is not our homepage otherwise this would not be an issue. For aesthetics we do not want the bar on the homepage. I was able to easily exclude everything that had an ID.

Any suggestions?

Thank you in advance!

Jamie Pelaez
Skype: jamiepelaez

Daniel March 3, 2011 at 1:02 pm

I don’t currently have an option to exclude from a homepage. That’s a good idea and will probably be added in the future. You might be able to add some code yourself. Just look through optincrusher.php to find where it excludes based on ID and add something like is_home() or is_front_page() (see codex.wordpress.org/Conditional_Tags).

Hope that helps.

Jamie March 3, 2011 at 1:49 pm: Thanks for the tip, I do hope it is an added option in the near future as it would be rather handy.

I tried both and I keep getting an error on that line. I must admit I am pretty new to php and my skills are limited, though usually I can figure out what is needed. In this case I am lost as to exactly where to put it and tried several ways with no prevail!

I will move on for now and come back to it tomorrow and see if I can code it properly. Thank you!

Reply

Simo March 3, 2011 at 4:10 pm

Hi Daniel,
Thank you very much for this great plugin. i installed correctly in my website demo : zyremediainc.info/ but when i tested it by clicking in the Newsletter Subscribe Now, a part of the pop up box displayed under the main navigation bar of the website. try to look at it by pressing in the icon image.and another question :what do you mean by vertical offset and Horizontal offset ? i changed the vertical one to 3 to let the writing of Optin call to Action fit in the middle.

Thank you
Simo

Daniel March 3, 2011 at 4:33 pm: the offsets are for the main text title. They’re only sometimes necessary.

To fix the bit about the nav covering the pop-up you’ll need to change the CSS property for z-index to be higher than the navigation bar.

Reply

Paul Shutts March 15, 2011 at 1:41 pm

Daniel.
Can I make the thumbnail a bit larger in size over the runner? Also, can you run more than one optin on the site? Last question, sorry, I still can not figure how to exclude an entire category from running, or where to find the id?
I really like the optincrusher……
Paul

Daniel March 16, 2011 at 9:07 pm: You can do a lot to modify the look of the plugin. Have a look here: optincrusher.com/training/customize-the-optincrusher-to-match-your-brand/

You can only exclude pages/posts, not categories…

I’m glad you like it

Reply

Nick March 25, 2011 at 1:57 pm

The light box that pops up seems to not be integrating the Aweber form code correctly, in fact, neither did the regular generation of the form, i had to manually edit this. Is this a bug or is there a fix for this?

Daniel April 7, 2011 at 11:47 am: Nick, I’m not sure if it’s a bug or something unique to your installation, but I’ll make a note and take a look at some point.

Reply

Jason April 15, 2011 at 9:01 am

Hey Daniel do you know of a bug when using this with PlatformPro from pagelines?

All of my blogs that use that theme will not show the submit button correctly. Everything else is great it’s just the submit button is under the Name and Email boxes and cannot click it to submit. I know it’s the theme that’s doing it just wanted to know if you have a quick fix for this.

Jason April 15, 2011 at 3:22 pm

I have been working on it all day. I cannot get the submit button to get inline with the input fields. The button sits right below where it says “name” (left). I can change the top: to 60px and that brings everything up a little so I can see the top of the button but obvious that is not going to do it.
#optinform {
position: absolute;
white-space: nowrap;
top: 60px;
left: 365px;
Would you know anywhere else I could change to correct this. Normally I would have just moved on and found something else different, but I really love this plugin and what you are doing. Thanks Daniel for this plugin and your willingness to help everyone.

Daniel April 15, 2011 at 3:30 pm: If it’s an image submit button I’m not sure what the best choice is. You’ll have to edit the button.You can also change it to be a submit button.

It would also be helpful to have a URL so I can see what you’re seeing.

Reply

Jason April 15, 2011 at 5:26 pm

Thanks for getting back Daniel. Here is one of my test blogs where you can see. This is not a live site
I know I should have gave you that before. Just so there is no misunderstanding I have not edited the plugin at all. This is how it looked straight out of the box.

Daniel April 15, 2011 at 9:59 pm

It seems that your email solution (interspire) has inserted a hidden form field right before the submit button. Try moving that behind somewhere else inside the form. since it’s hidden it doesn’t matter where, so long as it’s between the <form> tags.

Jason April 16, 2011 at 1:19 pm

Daniel unfortunately for me that is not it. I thought of that and also it would not make sense if the exact same code works and looks fine on any other theme. I can disable the css for the theme and it comes up fine, but the website looks bad of course. I just wanted to be sure it had something to do with the theme’s css and the crusher.
It’s starting to look like this is going to remain a mystery. Again Thanks Daniel for all your help.

P.S. I just put 2 elements in just to make sure what you suggested was not it

First Name

And they are stacked right on top of each other in the crusher.

Jason April 16, 2011 at 2:20 pm: Daniel I’m free at last……
I figured it out. I decided to give it another try and found the problem in Theme.css
On line 199 I removed // “input[type="submit"],” // That was effecting the submit input css with optincrusher.
I’m sure there is a better way of fixing this, but for now it’s all I got.

Anyways thanks for your help.

Reply

Andrew April 21, 2011 at 9:03 am

Daniel,

The crusher is a sweet plugin for wordpress. I love it and want to use it, but it is conflicting with another plugin that allows me to customize registration for my website. I want the crusher to direct people to my registration page, rather than get their information. The registration page is synced up with the site as CMS and with my email campaign manager. I just want the footer to clarify that users must register and to direct them to that page.

Can you help? Maybe there is a setting I can turn off or a bit of code that I can delete?

Thanks so much! Seriously love it.

Andrew

Daniel April 21, 2011 at 12:01 pm

Andrew,

That sounds like a great use case for the optincrusher. What’s the registration plugin you’re using? I’m not sure a fix will come out soon, but I’ll add it to the list.

Andrew April 21, 2011 at 12:18 pm: Register Plus. Let me know if you fix or if there’s a simple thing I can do.

Thanks again,

Andrew

Reply

Mike April 22, 2011 at 1:36 pm

Daniel,

Thank you so much for this. Clearly, you understand how to “over deliver.”

One question;

All things being equal – what are the opt in rates using Optin Chrusher vs a traditional delay load (3-5 seconds) light box?

Cheers!
Mike

Daniel April 22, 2011 at 3:00 pm: Mike, I haven’t done a formal split test so I can’t say what the difference in optin is between a forced lightbox and the optincrusher. The other metric to watch is bounce, since sometimes that can be a bit of a turn off. If you get that data, come post it here.

Reply

Randy Miramontez May 2, 2011 at 1:53 pm

I’m working on a new site for www.theqbspecialists.com and the want to use your optincrusher on their site. I have it installed on their wordpress blog with no problems. However, when moving it to the website I am trying to figure out how to have the bar not pop up once someone has subscribed. I know in wordpress you have the code [optincrusher_thankyou], but that is strictly for wordpress.

Any suggestions?

Thanks. Really cool tool and I’m very impressed with your dedication to a FREE tool!

Randy

Daniel May 5, 2011 at 12:46 pm: Randy,

I’m afraid you’ll have to figure out how to copy the code out for the cookie on your own if you’re using it outside of wordpress. All the code is there and it’s certainly possible to copy out, but it’s not something I support at the moment.

Reply

Jameson May 6, 2011 at 7:46 am

Hi Daniel,

I came across your magic plugin last summer after having tried a few other versions…

I decided to use it on my new website, however although the settings have all worked fine – the pop-up is not appearing. the attribution link is working, which suggests that everything is ok.

It may well be the theme I am using – I cannot use Easy Video Player with the theme either – I wonder if your plugin shares some of the same hooks that the theme does, have you come across this before and do you know of any workaround, pretty please?

Daniel May 11, 2011 at 10:58 pm: I don’t know of a workaround, but you may be able to make some modifications to the CSS on your own that would address this. You can also try a different theme to see if it will work better.

Reply

Marco May 8, 2011 at 12:15 am

Hi Daniel,

plugin is working great and optins keep on coming in, thanks again!
Now I do have a question about disabling the plugin for androids, Now there is an option to disable for iphone, not sure if this should have the same effect on androids? If it should it is not working for me. Any idea?

cheers
Marco

Daniel May 9, 2011 at 12:38 pm: It’s disabled for iphone by default (and I thought for android too). There’s just not enough real estate on screen to make it work. Are you seeing it come up on mobile devices? If so, which one?

Reply

Stuart May 16, 2011 at 12:43 pm

Daniel

Just wanted to say a really huge thanks for all your hard work not only on creating this great plug in – but also the amazing content that supports it. I have followed every step and got it all working on my blog. In addition to all that – I have