Up next in 10
Top 10 CSS Tips and Tricks in WordPress _ Customize WordPress Without Plugin
6K views
Jan 28, 2024
The video titled "Top 10 CSS Tips and Tricks in WordPress: Customize WordPress Without Plugin" is a valuable resource for WordPress users looking to enhance the visual appeal and functionality of their websites through CSS (Cascading Style Sheets). In this tutorial, viewers will discover ten practical tips and tricks to customize various elements of their WordPress site, all without relying on additional plugins. The video covers a range of topics, from adjusting font styles and colors to modifying layout structures, providing users with the knowledge to make personalized design changes. Whether you're a beginner or an experienced WordPress user, these CSS tips and tricks offer a non-plugin approach to tailoring your website to meet your specific needs.
View Video Transcript
0:00
Hello everyone, welcome to Key2 blogging and in this video I will show you how you can design
0:04
your WordPress website using CSS and minimize the plugin usage in your website. So here I am using
0:12
the generatePress theme but you can apply this method to any other theme. So let's check. Go to
0:18
your WordPress dashboard and here click on appearance and click on customize. Now you have
0:25
to click on additional CSS. Let me just open the blog page and now open a web page
0:39
Okay, to add a drop shadow effect around your images you have to add a CSS code like this
0:46
So just copy this code from here and paste it in the additional CSS section
0:54
And as you can see there is a shadow around the images and you can change the box shadow effect
1:01
Just go to the Google and search for box shadow effect in CSS and scroll down and click on the get CSS scan website and you will see a lot of box shadow
1:21
effect that you can copy and apply it in your website and I will leave the link of this website
1:27
in the description. So let me select a box shadow effect from here. So here I am selecting the
1:38
box shadow effect number 63. So click on copy and here you can change the box shadow code like this
1:48
and as you can see the box shadow effect is changed. So let me just show you another example
1:55
Let me just copy the box shadow effect number 40 and just replace this box shadow code like this
2:05
and it will add the box shadow in the feature image and if you want to add a box shadow effect
2:12
to your any other block images then you have to copy the second code like this
2:20
and paste it here and as you can see the box shadow code is applied. So let me just remove
2:29
this again and as you can see the box shadow code is applied or you can change the box shadow effect
2:37
from this website. So just copy the box shadow code and replace it here
2:48
Now I will show you how you can add a box shadow effect to your sidebar widgets. So to do this
2:55
copy this code box shadow in sidebar and paste it here. So as you can see there is a shadow around
3:06
the sidebar. So you can change the box shadow effect of sidebar as shown in the previous example
3:17
Now in the next CSS method I will show you how you can
3:21
show a updated date in your blog post. To do this just copy the CSS code
3:28
and paste it just below it and as you can see you can see the metadata last updated date in this format
3:41
Now in the next CSS method I will show you how you can style your default WordPress table into
3:49
a beautiful heading. So let's just copy this CSS code and paste it here and as you can see
4:02
the heading color is changed. So you can easily change the heading color by changing the background
4:08
color. So here this is a hex code so to get the hex code just search for htmlcolorcodes.com
4:19
and I will leave the links of this website in the description. So here copy a color from this so I am selecting this color
4:33
Now go to the customizer and change the color here and you can also change the text color by
4:42
changing this code. In this way you can give the default WordPress table a professional look
4:48
So in the next tutorial I will show you how you can style your bullet point
4:57
in your WordPress website. So let me just publish these changes first
5:02
and you have to open the blog post that you want to apply the effect. Go to your blog post
5:10
and click on edit button. Now go to the bullet point and here click on advance. Now you have to add an additional class
5:23
here so I am using bullet list. Now update this blog post. Now go to the customizer
5:36
customize, refresh this page. Now go to the blog post again and here click on additional CSS
5:52
Now you have to add a CSS code like this and paste it here. And as you can see the bullet point style is changed
6:07
So you can change the style by changing the unicode. So just search for write unicode
6:18
and here click on the first result and scroll down and you can select a symbol from this
6:28
So I am choosing this symbol. So click on copy. Here replace this code in the content area
6:34
And as you can see the bullet list points is changed into new style. So in this way you can
6:42
use a unicode arrow in your bullet point and give it a professional look
6:53
Now in the next CSS trick I will show you how you can stick your sidebar in your
7:01
generate press theme or you can apply this method to any other theme. So just copy this CSS code
7:09
and paste it here. And this is the CSS code for generate press theme but you can easily
7:20
use this to any other theme. You have to just add the class of your sidebar. So as you can see
7:27
when I scroll down the last wizard stick on the top and when I remove the last wizard
7:33
it will gone and it will not stick to the top of the page. So let me just paste this code and as
7:41
you can see the last wizard is sticky. So in this way you can apply a sticky sidebar to your
7:47
generate press theme. Now in the next CSS trick I will show you how you can apply a sticky sidebar
7:55
to your generate press theme. Now in the next CSS trick I will show you how you can style your
8:05
hyperlink in your WordPress website. So let's just copy this CSS code from here
8:15
and paste it here. And as you can see there is an underline in the hyperlink. So you can easily
8:21
change the underline color. So just go to the HTML color code and choose your color code. So
8:30
here I am choosing the red color and here you can change the color code and as you can see
8:38
the underline is changed to red or you can also change the width of the underline like this. So
8:47
I am selecting three pixels or you can add this underline like this. So two pixels is good. So in
8:54
this way you can add a professional look to your hyperlinks in WordPress. Now in the next CSS
9:05
tutorial I will show you how you can hide the website field in the comment area. So let me just
9:11
open this website in a incognito mode. Now open a blog page from here
9:28
And here as you can see this is the website field that you want to remove using a CSS code. So
9:36
let's go to the customizer and you have to copy this code from here like this and paste it here
9:48
Now click on publish and let's check again the website and click on refresh
9:56
Click on refresh and as you can see the website field is gone from your comment box
10:06
So in this way you can hide the URL field in your website
10:15
So in the next CSS trick I will show you how you can disable copy paste in your WordPress website
10:22
So just copy this code from here and paste it here. And now as you can see I am not able to
10:31
copy the text from the website. So you can easily exclude this by some part of your website like
10:41
this code box or quotation box. So let me just exclude this two section in my website. So user
10:50
can easily copy the content from this area. So let me just select this and as you can see now I
10:57
am able to copy the text from the quotation box or the code box but I am not able to copy the text
11:04
from the other part of the website. So in this way you can protect your content from copying
11:11
by someone else. Now in the next CSS method I will show you how you can hide the feature image
11:21
from the actual blog post using the CSS code. So let's just copy this code and paste it here
11:34
Now as you can see the thumbnail is gone from the blog post. Click on publish
11:40
Now go to the blog page. And as you can see the thumbnail is showing in the archive pages but when I click on the blog post
11:51
the feature image is gone. It basically hide the feature image from the blog post. I hope
11:59
this tutorial will help you add different functionality to your WordPress website using
12:06
CSS code and you can easily avoid using plugins and use CSS to do the job for you
12:16
If you have any queries related to CSS in WordPress then you can ask me in the comment
12:21
section and if you really like this video then hit the like button and subscribe to my channel
12:27
for more upcoming videos like this. I will see you in the next video. Thank you
#Online Goodies
#Skins
# Themes & Wallpapers