Hi y'all! I'm Kori Ashton and this is another WordPress Wednesday!
Thanks for tuning in! If you haven't subscribed yet...
I'm going to put the button right down here.
Please take a second and subscribe to our channel.
Because, every single Wednesday we're releasing some sort of really awesome, fun
WordPress video. Just to help you
and help grow the community.
We do everything from; simple basic beginner stuff.
All the way to advanced fun stuff. Social media, SEO- anything having to do with
specifically WordPress!
Another great, incredible three resources that you can find having to to with WordPress
are these three awesome resources here.
WP Engine- if you need a hosting company. They provide an amazing service there;
with great security and an awesome staging environment.
Also, if you're an entrepreneur looking to
build your client list,
learn how to sell better.
Checkout WP Elevation. Plus, they've just asked me to blog for them.
This month I've produced my first blog article over in their resource center.
Please be sure to check them out,
and WP 101 if you like WordPress video tutorials please stop.
Go check them out! Because they have some free resources for you as well as
a really great library that you can checkout for a very minimal fee.
When it comes to how cool those crazy kids are over there with WP 101.
Alright, are you ready to learn how to make rounded buttons
Inside of the Rev-Slider?
I'm going to show you two different things today.
One-how to make rounded buttons inside of the Rev-Slider.
If you're not using the Rev-Slider, just how to make them with CSS.
How do I make round buttons with CSS without having to go into Photoshop
and do all that silliness.
I want to learn how to be a cool-nerdy guru and make that happen.
So, let's go to the Rev-Slider first.
I'm going to shrink down here a little bit.
If you've already been watching my video tutorials on the Rev-Slider,
you've already gotten to this point with me.
We've already made this button. Alright.
If you've not watched that, I'll put the link just here. So you can stop;
go watch that video because we're not going to backtrack.
I'm going to show you right here. We've already made a button.
Obviously, it's in this rectangle shape so I would like to make it have rounded corners.
How do we that?
It's extremely simple!
So, I've clicked on that button.
I'm going to click edit>style.
This is the simple editor.
Check this out.
Your mind is going to be blown.
Right down here, we have something that says "radius."
This is going to be your four corners...
for our square, or our rectangle that we have going on up here. Okay.
These are our four corners.
You can play around with adding different styles to it.
There you go. That applies it.
If you only put one number in that applies it to all four corners.
Or, you can play around and be silly and just do differnent
things. I mean look at that. That's kind of fun-odd shaped.
This one puts that random number over there. That' s kind of different.
Maybe we'll go crazy on this one.
Really round it out and make it look loopy.
You can have all sorts of fun and play around with the different corners.
Or, you can simply just put in here "fifty" and have it look like that.
I mean, that's extremely rounded. I kind of like the look of maybe the "twenty."
That's really nice.
So, that's how you make rounded corners inside of
the Rev-Slider. But how do you write that CSS to make that happen outside the Rev-Slider?
I have found a really cool, free (free is always in the budget,)
resource for you.
I'm going to put this link in the description box below as well.
This actually writes the nerd code for you. It's amazing!
So you would come here and kind of check this out. You can play around with this.
You can play around with the colors here and literally just drag, drop, click around.
Right now thought you can see that it has this kind of burgundy border.
I really don't want my button to have a border.
So, I'm going to remove the border completely.
You can play around with that though. You can change the styles and obviously
you can change that color and its going to write all the nerd code for you.
Ultimately what this widget does for you is it writes this bit of nerd code over here.
That's where you're going to copy and paste into your style sheet.
Whether your using a custom CSS box that maybe your author has allowed you to have.
Or, perhaps you're using a child theme. That's always the right way to do it, right?
So that we're not having any sort of overrides happen whenever we have to update
our WordPress website.
If you don't know what I'm talking about, or if that sounded really odd to you;
I want you to go checkout our
child theme-CSS box. How to do it with a plug-in, or how to write a child theme.
You need to know how to do that so you don't loose any of this customization
whenever there are updates to be made.
The other really cool thing about this awesome free resource
is it actually tells you what browsers this little nerd code is supported by.
So you can see it goes all the way back to Firefox 3.5 and back to IE 9.
Alright.
The other thing you're going to do is play around with the corners.
This is the same idea of what we just saw.
Do you want all the corners to be the exact same? So, I'll show you
as we drag it around here. You can see it
in this area up here kind of making changes as I play with this slider
back and forth you can see the different variations.
Or, again if you want custom corners it allows you to play around with the different
angles there.
So, super cool! It writes the nerd code.
You would take this
bit of nerd code. Copy it on your clipboard.
Command "C" or on a PC it would be control "C."
You would go then into your style-sheet,
which should look something like this.
You would paste it into that area that effects that square,
or that rectangle, or whatever type of button that you're trying to make rounded
corners take place on.
(Ahh) how cool is that y'all! A little bit of nerd code for ya. I love it!
Be sure to subscribe to our channel so that every single WordPress Wednesday
you can be checking out a great tutorial like this.
If you have any questions
put em' in the comment box below. I'll do my best to answer them!
Have a great day. Bye bye y'all!