Style Your Trigger Box Using CSS


By Web Designers Academy

Copy and paste the CSS code below into your theme CSS file:

.wptrigger {
background: #DEDEDE;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
border: 10px solid #B3B3B3;
font-size: 40px;
color: #13608E;
text-align: center;
font-family: “wf_SegoeUILight”,”wf_SegoeUI”,”Segoe UI Light”,”Segoe WP Light”,”Segoe UI”,”Segoe”,”Segoe WP”,”Tahoma”,”Verdana”,”Arial”,”sans-serif”;
padding: 10px 10px 10px 10px;
width: 300px;


By default, WP Triggers Trigger Boxes look like this. It’s a simple text box and when someone types in the trigger, let’s say hello that’s what the text looks like. But sometimes you need to make it a little more fancy. For those CSS ninjas out there, just use the CSS class WP Triggers and style your boxes. But for those who need a little bit of extra help, underneath this video is this CSS code. So, what I need you to do is copy this, select it on Copy and then go to your theme CSS file.

Now, I am using Catalyst so I have a box here for Custom CSS but any WordPress theme has a CSS file. I’m simply going to paste in that CSS code here and hit Save. Now, I’m going to refresh the page and now look at our box. It’s big and when someone types “hello,” it is a different font and a different color. So, let me just break down this CSS for you and so maybe you don’t want it grey, you don’t want the text, I’m going to show you how to change all that stuff really quick.

So, the first thing that we see at the bottom here is it says width equals 300. If we change that into width equals 500, watch the size of the Trigger Box now. It comes out to about here, and now it’s much wider. So, that’s how you style the width of the Trigger Box, is that value right there at the bottom.

Now, the padding refers to the padding within the box here. Currently it’s set to 10 pixels all the way around. So, I’m just going to cut that, hit Save just so you can see what the difference is. So, watch it on the space that’s between the letters and the outside of the box here. I’m going to hit refresh and now look. It’s a lot smaller so it’s a lot closer together. But I think it looks pretty good with it so I’m going to paste that back in.

The next thing is the font. I like this font that’s specified here but you can change it to anything you want, you can remove it completely, and refresh. It’s going to use the theme’s default text for text boxes, and we’ll leave that one out. Here you’ll see this text align equals center. What’s that controlling is when someone clicks in here—you see the cursor is right in the middle—if we remove that line the cursor will be on to the left.

Here is the color, this is for the text. So, if we change that to red and hit refresh. I type “hello” you see it’s now a red text. Now, I chose a blue from the blue back here but you should choose a color from your theme to tie it all in. Font size equals 40; it should be pretty to understand. Let’s change that to 20. Then once again we’ll type “hello,” see it’s much smaller. So, I’m just going to change that back to 40.

Then the next entry here it says border is 10 pixels, so I’m going to change that to 20 and then hit Save. I want you to pay attention to the amount of border, this border right here, this dark gray border that’s all the way around, watch. See? It got much bigger. So, that’s what that controls. I’m going to leave that for now.

Here’s the box shadow. Then the shadow actually has to do with these three lines. It’s for different browsers. So, if you didn’t want a shadow and by the shadow I mean what’s inside here—inside the box there’s a little shadow all the way around. But let’s delete all that and hit refresh and watch. See? No more shadow in the middle.

The last thing is the background. I’m going to change that to just a red so that really stands out. You’ll see that the background of our form is now red. So, that’s how you style a Trigger Box using WP Triggers.