Today we’ve got the details on creating a Custom Panel with a double border. Check out the video below to find out how!
Hey folks!
How much do you know about the custom panel widget?
We’re here today showing you a couple cool tips you can use for your website revolving around the custom panel widget. First we are going to show you how to make a custom panel widget with a double border.
To start we are going to drag down our column divider so we can get our custom panel widget just the right size. Then we’re going to add a little bit of margin and then we are going to go ahead and drag our custom panel widget.
For this we don’t want a gradient, so we are going to click this upper right hand corner. Then we are going to change the background to the darker shade of gray that we thought would look nice with our site.
We’re going to change the border to zero, then we’re going to remove the corners, remove the padding but keep just a little bit of margin. Finally we are going to remove the overriding fonts and hit save.
Next we are going to repeat the same process, but we are going to have a white background. So here we are, changing the background to white, removing the border, removing the corners, removing the padding and leaving just a little bit of margin again. We’re going to go ahead and take off those overriding fonts and hit save.
We’re going to do the same process again because we want a double border, so we are going to go back to that nice dark gray that we have – removing the border, removing the corners, removing the padding and leaving just a little bit of margin again. We’re going to go ahead and take off those overriding fonts and hit save.
Finally we have our last custom panel widget, dragging and dropping, selecting the preset without a gradient and choosing the white background. For the final time we are going to remove the border, removing the corners, removing the padding and leaving just a little bit of margin again. We’re going to go ahead and take off those overriding fonts and hit save, and here we are!
Right now it doesn’t look as though it has that two-pixel margin we had been looking for. To give you an idea of of how this going to look, we are going to drag and drop some text in here.
Let’s go ahead and hit “Preview,” and check out our new border.
Here it is!
Want the low-down on more custom panel secrets? Check back next week for more!