How to add and resize logo in WordPress website | 2021 | with Subtitles
How to add and resize logo in WordPress website | 2021 | with Subtitles
How to add and resize logo in WordPress | 2021 | with Subtitles is a WordPress website tutorial for total beginners.
In this video tutorial, learn how to add and change custom logo size in a WordPress theme header with a tiny CSS code.
How to add a custom logo in WordPress?
How to change logo size in WordPress?
How to resize logo in WordPress?
How to edit theme in WordPress?
How to add CSS code in WordPress?
Please give this video a “Like” to support my efforts. Thank you!
Content
4.8 -> hi everyone and welcome back to my channel
in today's video i'm going to show you how
9.92 -> to add your custom logo in wordpress right
so i am here uh on the dashboard page
21.04 -> this is the wordpress admin um console
right so this is my website slash dash admin
31.28 -> slash index so you would have your own
admin page to administer your website so
40.16 -> once you land here on the left
hand i will just click on customize
47.84 -> and now you see i am customizing the theme that's
called color mag so this is the theme that i'm
55.76 -> using for my website okay so as you can see
here this theme comes with its own logo and own
65.36 -> header these are the ones that we're
going to change now but especially this um
75.28 -> custom logo i'm going to show
you how you can place your own
79.76 -> and also change the size of this logo
right so i'm going to click on header right
90.56 -> and site identity you see that the the default
logo is the one that comes with the color mac team
97.52 -> and i'm going to just remove this one and
click on select logo so you see in real time
103.12 -> i can see the result here so the the uh the
logo is gone and i will select my own logo
112.56 -> from my computer i'm going to upload
this so i will upload this logo file
122.48 -> so once i upload this onto wordpress i can already
see the size in in kilobytes and also the size
131.84 -> and pixels right so this is the one i want to
use so i can add uh text so just one back one
140.72 -> live and if i wanted to add a caption or
description so logo logo you don't really
147.6 -> have to do all of this okay but it's it's
cleaner when you do it every time you upload
153.6 -> a file or any file actually onto your web
wordpress you might just not want to go
162.16 -> back and do it later right so let's select
this so it's actually proposing me just to
172.24 -> crop this but i think it's pretty much
looking good right okay so here's the issue
182.8 -> unless you upload precisely the size
that you would like to see on this page
190.88 -> um wordpress is going to show you the original
size of this image file right which is your logo
198.8 -> so as you can see this is not exactly what we
would like to see i mean i would like to be
205.44 -> able to resize this logo so that i can i can make
it look nicer or you know that aligns with this
215.2 -> header image and so on so what i'm going
to do is something quite simple so i will
222.56 -> just right click okay um and inspect so on
your chrome browser what you're going to see is
234.48 -> um something that's called inspect so you
click on that one okay and here there's a small
245.28 -> icon here select an element on the page to inspect
it so you click on this one and that you just
251.28 -> hover over this logo file so we are doing all this
just to capture this name here right where it says
264 -> img.custom dash logo so that is the name that you
would like to capture okay so if i go over other
275.44 -> elements on this page you will see that the name
is going to change so here it's div dot inner wrap
282.56 -> and so on but if i go back on to the logo you
see it says img.custom dash logo so that's the
290.64 -> name that you need to just write down or note
somewhere okay so let's quit this one and once
304.08 -> you have that name let's save draft you go back
once again and then you click on additional css
319.2 -> so what exactly is css is additional code
basically that you can write or copy and
324.88 -> paste here in order to further customize your
website okay so this is it can be from simple
334.96 -> to more complex code to really fine-tune your
website okay i will now paste a small code here
361.04 -> so as soon as i paste this code you can see that
the size of my logo changed right so i'm going to
368.48 -> explain you the code so this is the text the name
actually that we captured by right clicking and
377.12 -> doing all the entire inspect stuff remember i
clicked here and i went over to logo you see
384.56 -> it's the same name img.custom logo so that is the
name of this object basically on this page okay
395.12 -> so this is what i write here and then
in brackets is what i would like to do
402.4 -> with this object okay so here's the object
name and here's what i would like to change so
410.08 -> this is the property that i would like
to change which is max with right so
417.44 -> the max width i set this to 90 because
i can see here for this theme that
427.12 -> uh the height of this color mag header image is
90 right so i would like my logo to align and look
438.4 -> nicer so um i set this to 90. but if i said if i
set this like to 190 you see that it immediately
447.76 -> changes its dynamic so whatever you know value
that you put here it's going to show you um
457.76 -> how it will look like actually on
your website see so wrapping up
465.36 -> right click inspect and you
find out the name of this logo
472.56 -> image so the name of the object you put the
name of the object here you open a bracket
478.88 -> and then you write this max width uh semicolon
and 90 pixels or whatever pixels you'd like okay
489.04 -> so yeah that's it and then save draft and whenever
you're ready you change the save draft to publish
496.72 -> and then you can publish your website so
you so that you can see uh it published on
503.04 -> your own domain name all right for
the moment i'm just saving it as draft
511.52 -> so you will find this little code actually
um in the comment section of this video
516.8 -> so if this was useful please give a like to this
video and remember to subscribe to my channel it
523.12 -> will be great help and much appreciated thank
you very much and see you in the next video
541.12 -> you
Source: https://www.youtube.com/watch?v=ny2UVV7wLkY