W3 Schools
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
HTML Dog
http://www.htmldog.com/guides/css/advanced/atrules/
Thank you to our Sponsors
WP Engine
Fast & Secure WordPress Hosting
http://wpengine.com
WP101
WordPress Videos / Tutorials
http://wp101.com
WP Elevation
http://wpelevation.com
Video Transcript
Hey, Everyone! Welcome to another WordPress Wednesday. My name is Kori Ashton here at WebTegrity, LLC. Today we are finishing up our series that we have done for the month of February on CSS.
We did total beginner level on what is CSS, and we moved to some basic elements that you can tinker with and figure out how to make some cool changes in your style sheet on your WordPress website. So, what we want to do today is really kind of ramp it up a little bit. We are going to go pretty advanced on you here. I want to show you some things that you can do that are extremely dynamic using just CSS.
I am going to slide myself off the screen for this little portion for a second because I want you to pay attention here. Notice whenever you are viewing a responsive website—when we talk about responsive sites, we are talking about websites that ebb and flow or respond, rather, to any device that it is being viewed on. So, when a website gets shrunk down and viewed on a phone screen, you know, about 2, let’s say, about 2 to 3 inches wide, you see that this menu changes to this dropdown option and allows the functionality to be really easy for user experience and gets everything kind of in a single column line. Whereas if you are viewing this screen or this website, rather, on a large desktop screen, let’s say, this size, everything is kind of spread out. You have a menu that looks like this already visible. Everything is kind of stacked down the page in a wider format, right?
How do we do that? Thankfully, if you are using WordPress, you could probably just go out and find a theme and let the author be the code nerd that makes that functionality happen, right? But, what if you want to be a little bit more creative? Let’s say that (let’s shrink this down here for a second), let’s saywhenever something shrinks down, you don’t want this bar right here to be blue when they are viewing it on a cell phone. You want this bar to be orange, this pop-out orange that you’ve got going on here or whatever color you want it to be. How do you get into your style sheet to make that change?
That area is what we want to talk about today. That is manipulated by an area in your style sheet called a “media query.” So, we are going to talk about “@rules” today—at-rules—, alright? If I do a search right here looking at our style sheet, I do a search for “@media.” You’ve have probably seen something like this if you’ve gone venturing into the wonderful world of CSS. You’ve probably run across something inside of a style sheet that starts with an “@” sign; that’s an “@-rule,” and this one specifically is “@-media.” There are several different ones that you can use.
This specific one talks about—let’s read this together to see if I can help you make sense of what this line says: “@media(max-width:767px).” What that is saying is @media or screen, which is what that is representing right now, at the max width of 767 pixels, I want you to do this. So, at the max width of 767, this is as we start to shrink it down and things go down into like an i-Pad range of width is what 767 typically is—an i-Pad, possibly a horizontal i-Pad or even a smaller Pad even vertically positioned—in the max width of 767 pixels, I want you to implement these instructions now. Use this to overwrite a certain area where I may have coded it differently. You want your spacing to look different on a cell phone, right? You want things to be, you know, either to have less room or more room on a cell phone so that you can allow things to be a great user experience. This is how you do it.
There’s also a really thing you can do, something like this. I am going to move myself out of the way again because I really want you to take a look at this website. This is Perrin-410. It is an animal hospital here in town that we were blessed to code and build this custom WordPress theme for. What I want you to notice is is whenever somebody is on a cell phone, their website doesn’t look like this. It was all done using that @media query.
What we wanted to do is remove this big slideshow. We didn’t want somebody struggling through a slideshow on a cell phone. There is no reason for that. More than likely you are looking for a map or a phone number. When you shrink this down—check this out—the slideshow completely deletes, or actually it hides, with a media query, it hides it. Then what first pops up on the screen right away is your menu. There’s your menu dropdown and you’ve got your phone number that is completely clickable and you’ve got this map happening here for your location. That is nowhere to be found on the first fold whenever you’re viewing it on a desktop mode. It’s not until you get all the way down here that you find a map and a phone number.
So, those are the really cool things that you can do with media queries. You can do a “display: none” to hide something, or if you’re on a big screen you can say “display: none” until you shrink down and then actually tell it to display. There are all sorts of really cool stuff like that that you can do using the @rule for @media.
So, over here on W3schools.com, you know that, if you are following me in videos, I reference this website a lot. You see here that it’s “@media screen and (max-width: 300px).” That’s super tiny. That’s for the cell phone viewing area. They want to change the entire body color to being a light blue. That’s kind of what they’re using it for.
As you scroll down, you are going to see what browsers support this @rule, and you can see a bunch of different options that you can do. You can do an @media for printing. So, if you want somebody to not print out—if they are coming to print out your blog article and you don’t want them to waste their printer ink on your navigation bar or if you’ve got maybe an area on your sidebar that has a whole lot of color in it—you don’t want them to waste that ink, you can hide that. As soon as they click print, because of your style sheet saying in there in the print mode to hide that area, it won’t print.
It is all about user experience when it comes to using these advanced techniques with CSS. There are all sorts of crazy elements here that you can play around with. You see here they give you another example: @media only screen and (max-width: 500px). We want you to do this: We want the menu to go full width and cutting down the line what it is saying they want their options to be whenever the screen is that tiny. So, I am going to give you this link to the CSS school’s link here. I am also going to give you this really cool tutorial area that I found that talks a little bit more about another @rule called @import where you can actually import another style sheet if you wanted to. So, really cool options here.
Again, this is an advanced tutorial that I am doing for you today, but for those of you that may have been bored or just learning and really things are starting to click, I want you to go to the next level here, and this is the advanced way of using CSS. You can even do animation with CSS. Super, super cool options there. You can turn a picture from being a square into a circle just using CSS. All sorts of fun things that you can do if you really dive into the wonderful of learning CSS.
I want to thank our amazing sponsors. Y’all know about them-WP Engine. They are who we host with. We always brag on these guys and their incredible WordPress hosting. We have also been blessed to be a part of WP101. If you do not know about their library of videos for WordPress, you need to go right now, today, go to WP101.com. They have got some free videos there, and they’ve got an area there for you to sign up at a great price, affordable price to watch their how-to videos for learning WordPress even in an advanced-type setting.
Then we also have a great new source for you and sponsor for our classes: WP Elevation. If you want to become an exceptional WordPress Consultant, this guy Troy is just amazing. They’ve got several guys on their team. Just fantastic! They are out of Australia—really, really impressed! If you come to their website, just watch this very first video. Just check this guy out and watch the very first video. You are going to be hooked just like I was on their incredible service.
So, that you so much. If you are in the San Antonio area, catch us tonight at WordPress Wednesday. We are going to hanging out and going over these videos. If you are not in the San Antonio area, please look into MeetUp.com for a local WordPress MeetUp in your area where you can go and network and get help and support. Maybe you can even give back and be a resource for those people in your community.
Thanks so much for being with us on WordPress Wednesday. I’ll see y’all next week. Bye, bye, Y’all.
