• Twitter
  • Facebook
  • Google+
  • Youtube
  • RSS

WPforall

Wordpress and Web Design Tutorials for all

  • About
  • Video Library
  • Blog
  • Contact
  • Login/Register
You are here: Home / Reviews / How to edit CSS in Wordpress – Cool Example [Video]

July 14, 2014

How to edit CSS in WordPress – Cool Example [Video]

Share:
Facebook1
Twitter0
Google+0
Pinterest0

In this WordPress Video Tutorial for beginners, learn step by step how to edit the CSS of your wordpress website. We’ll be showing you an example where we give images a hoover effect.


[box]Video Title: Edit CSS in WordPress
Video URL:
 https://www.youtube.com/watch?v=Tg1P-uxbJdM
Accompanying Course: 
Beginner’s Guide to WordPress – Web Design Course[/box]

Custom Code: 

CSS:

HTML:

< Go Back to Video Tutorials List

free wordpress video tutorials, wordpress video course, free wordpress course


 

Transcript: 

So in this tutorial, what we’re going to look at is actually how to edit or how to add news CSS code into our WordPress website. And so I’m not going to actually be teaching you on how to program in the CSS language which is, think of the CSS language like a styling language. It just makes different styles for whatever we want. What we’re going to be looking at is how to style an image in this tutorial but we are going to be using different codes that we found online. I’m not actually going to teach you how to program in CSS but what I do want to teach you just, if you’re able to find tutorial where they are tell you, free to use the codes in your actual website, how do you actually integrate that in to a WordPress because most tutorials don’t actually show you, how to integrate them into word press specifically.

So, where do you find the actual codes snippets, where you can find them anywhere really, anywhere online? We just need a quick Google search of cool CSS edits, something to that extent and we are able to find some pretty interesting ones. The next thing that we are going to talk about is plug-ins and actually physically adding the theme and the pros and cons of each of those and then we’ll just look at the sample CSS project.

What type of plug-ins can you use? The plug-ins that you can use are actually the “Jetpack CSS Editor” that you have an actual Jetpack extensions. I don’t particularly love that plug-in and there’s also the “Simple Customer CSS” plug-in and in addition, I actually don’t really like any of these plug-ins and the reason why is this, simply because they tend to slow down your website quite a bit, right? And, so what I usually do is I just edit the CSS code directly into the theme. That’s what I am going to show you in a second. The only caveat to that is that, if you edit it that actual style in CSS file, is that if you edit it and then update your theme then you’re going to lose that ultimately, right? So, you have to kind of take some good notes and kind a right down what did you change before you actually update, right? So, that’s the only downside to actually editing the theme, but in my opinion, it is faster as in load time, your website is going to load a little bit faster with these different CSS plug-ins that actually does make it a lot slower.

So the sample project that we are actually going to look at is, how to edit some of the images, how to add these different effects to images and the one that we are going to look at is this little box of the boarder and also when you hover over the image, how do you tilt it. You probably see these a lot on front pages of website and if ever you ever curious on how do you actually do that well we’re going to learn exactly how you’re going to do that and all of these was we didn’t encode anything, all we did was we found website style, how this different CSS website tutorials and now we’re going to show you how to utilize them on word press specifically.

So one of the websites that we found was this designshack.net and they have specific article. We just Google search CSS code examples. And this is a tutorial that looks really fun, so what we did was we just found one that we like and we like this tilting one and it gives us a bunch of codes. It gave us a couple of codes snippets. If you want follow, then I will show you right from the beginning is they wanted us to add these CSS code here and also the one right down here. So we’re just going to copy and paste that over. I’m going to show you where we are going to put that so if you have a child theme, you’re going to put it in the child theme. If you don’t have a child theme, then you just have to put it in the child theme itself and it’s going to be in the style.css.

So you will just going to scroll down and we will see that we have those little code’s snippets pasted in at the bottom. All we need is copy and paste them, you will just copy and paste them over and we’re just going to update the file, right? I am not going to explain too much into detail what each of these code snippets mean because that’s not really what the goal of this tutorial is.

What I want to show you are how you can utilize it in word press, the next thing is those are actually CSS codes, this is the actual HTML codes, is what we’re actually going to embed on to our specific post, right? So everything should really come as it’s a good tutorial at least it would give you the HTML code that you have to use and also the CSS codes. Also, just remember if it doesn’t give you the actual HTML, everything is by these classes. So this tilt class and also because we have the import CSS code from the top of this post, it have a pic class, so that’s where they are getting it, that’s all it is. It’s all embedded with this working with div tag.

Because remember, we’ve seen these before, these are just the basic image. All it’s saying that now this div tag is saying that there’s a different class, different style that we have previously made in our CSS editor, right? So we are just going to copy and paste that over and little we just copied and pasted it in, and we have these two classes, the tilt and the pic, and the pic we are just putting it in the boarder and the tilt was actually doing the tilting action and we just put whatever image do you want, the source of the image right here, same as usual and we will just update it. And so once we update it, we will see that we have this little tilting action right there and so I think that once you get out this specific tutorial, is that there are a lot of things that you can utilize to a CSS code but that does not necessarily mean that you have to learn it from scratch. All you really have to be able to do is learn how to utilize just the basic foundations on how you get snippets, codes snippets and how you utilize that on WordPress website.

Article by Eric Thomas / Reviews Leave a Comment

Like what you've read? If so, please join over 1,000 people who receive exclusive weekly online wordpress, blogging, and time management tips!

About Eric Thomas

I am a Wordpress teacher and medical student. Follow me on Google+ for Wordpress tutorials, reviews, and advice on how to manage an online business as a busy professional.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Stay Up to Date!

Get special coupons, tutorials, and videos before anybody else.

Free Wordpress Course!

With our free Wordpress Tutorial Videos, you'll learn how to design a professional site. With over 6 hours of free videos, you'll be using Wordpress like a pro!

Start For Free!

Featured Plugins of the Month:

miwoshop wp rocket

Recent Posts

  • How to Migrate from WordPress.com to WordPress.org – Step by Step
  • How I save 10 hours a week with IFTTT – Tutorial
  • Installing WordPress for Beginners [Video]
  • How to Migrate Blog from Blogger to WordPress without losing search traffic
  • The Top 5 Related Post WordPress Plugins To Keep Users Engaged

Follow Us!

wordpress how to wordpress video tutorial wordpress tutorials wordpress tutorial
wordpress how to wordpress how to





wordpress tutorial, wordpress video
A Wordpress Tutorial Site

Resources

  • Blueprint
  • Blog Setup
  • WordPress Hosting

Guides

  • Beginner’s Guide

Navigation

  • Contact
  • Video Library
  • Login

Social

  • RSS
  • Twitter
  • Youtube
  • WordPress Tutorials
  • Reviews
  • WordPress Plugins
  • WordPress Themes

© 2021 WPforall • Built on Genesis powered by Hostgator

×
Do you want to grow your Business?
Look over my shoulder as I uncover the best tools to help grow your business, such as:
  • In depth plugin reviews
  • Tools to manage your busy schedule
  • Top Themes of the month
  • Exclusive Wordpress Video Tutorials
  • and much more...

Powered by OptinMonster