April 3, 2020
Divi theme eCommerce tutorial Individual Menu Item Decoration

Divi theme eCommerce tutorial Individual Menu Item Decoration


hi guys and welcome to another WordPress
Divi theme ecommerce site build this is Jamie from system 22 and web designer
tech tips calm in our last video we learned how to add our pages to our
secondary menu up here in this one we’re gonna style this menu
a little further I know we’ve style it a bit already with these blue backgrounds
but let’s make it even more interesting we got some kind of thing going on on
our site we’ve got this this blue that we’ve been using this greeny blue which
is 10 CA CA we’ve got another green here that we’ve been using and we’ve got this
sort of hot pink that we’ve been using for our sale items there how about we
change the color of perhaps the second one to the hot pink and the third one to
the green and then leave that one and change that one to the hot pink and that
one to the green might make it look a little more interesting but it’s just a
demonstration of how you can actually change colors on your links individually
not just as a whole like we’ve done there
so I’m using Google Chrome here for anybody that’s not been watching my
videos and to do this I’m going to use a Google Chrome
inspector just to make note of some of the colors that I want to use so I’ve
got a little notepad here and I know what this color is because
I’ve used it some actually it’s ten ca ca let’s see what we’ve got going on
here let’s see what this pink is so I’m going to right click and inspect let’s right-click and expect this there it is there’s a hot pink so that’s
that one and we’ll copy that just going to paste that into my notepad
you and oh I got the green blue there it’s
got a line through it let’s just let’s just click on this there it is there’s my green color so
I’m gonna copy that and again paste that into my notepad now then what did we say we wanted to
change this one to the hot pink and that one’s the green so let’s go ahead and do
that again using the inspector I’m going to click on this right click and inspect and just to roar that’s what I want
right there and if we look at the end it’s got a unique item number all of our
menu items have got unique menu item numbers so let’s double-click I’m just gonna copy menu
item you can type this up that’s what you need there but all I did was double
click and it highlights it or you can right click and edit as HTML it will do
the same thing coffee just write that into my little notepad here and if we
look that what is that menu item well if we go back it’s a class it’s a list item
class so being a class what we have to do when we go to our custom CSS is put a
dot in front of it now looking at this it’s not the actual
item itself that’s that color it’s the actual link or the a a tag
or anchor tag so if we inspect the anchor tag itself you’ll see that there it is that’s the
color it is at the moment we may have to because this has already been assigned a
color we may have to use the important class after it to make this work so now
we’ve got everything that I need to make that
a different color from the other one so let’s go to our dashboard go down to Divi theme auction
to the general tab scroll down at the bottom we’ve got our
custom CSS field here okay so I’ve spelt that wrong
secondary many Linksys actually menu spelling is absolutely atrocious okay
so looking at this it was menu item at forty eight eighty five six so I’m gonna
copy that and it was a class what do we have to do
with classes put a dot in front of him that’s got a hash tag so that’s an ID so
we want a dot I’m gonna drop down one more giving a
bit more space and dot because it’s a class pacing that menu item and remember
it wasn’t the menu item itself we wanted to change that color on it was the a tag
that anchor tag after so it’s menu item a you open and close some curly brackets
and let’s write color this is the color that we wanted to change and here’s my
little notepad and there’s that hot pink color hopefully yeah I’m pretty sure
that was it not the green and put a semicolon after it in case we want to
add some more code you should just save that see if it’s gonna work like I say
it may not work we may have to force it with the important class so let’s say
we’ve got our green checkmark let’s go to our page go back up to the top
and refresh and it didn’t change it didn’t change at
all so if we look at it so here there’s the actual code we put in you
can see that color change there there’s the original one and you can see that
code we put in is cross oaks here I mean the code we put in is crossed out
so to force it don’t like to use this unless I have to but I have to here will
say exclamation mark important that’s that she changed the color of the
link itself that’s not what I wanted haha hit the background so okay I put in
the wrong code there but we know that’s how we force it on one of the background
not the color the color is actually the color of the link as you can see there
so let’s go back to our thing and let’s put background there’s the color now just to prove my
point I’m gonna save it without that important
class and it still won’t do anything I’m pretty sure that should go back to white now
nope that’s right it didn’t change so now let’s just add that important class save our changes now when we go back and refresh that
should change that to that hot pink background there we go and we want that one as
green and so we want this one to do the same thing let’s inspect
and we see that this is menu item 46 85 9 let’s just remember that go back to
our custom CSS just copy all of this paste it below 46 85 9 was the other
menu number menu item number I should say let’s say that go back and refresh now June this one should change the lack
you there we go okay
and now let’s make this one that nice green color and that is not that one four six eight five seven is the one we
want so let’s copy this one more time I’m sure you know what I’m about to do
here I’m just going to copy this four six eight five seven and we want to
change that color to our green color which in my little notepad was right
here get on the right one save that back to the site let’s get this
inspector out of the way we don’t need in there now that one should change to
green this green color there there we go
and let’s do the cart green just to keep it
in line we can always change this you might not like this but this is just
demonstrating you can do different things with different menu items so
we’ve got custom styles for our cart back down in our dashboard so we don’t
actually have to add new code there we look down here this was it right here
card info span so all I need to do is change that background color to our
green save that back to the site
refresh there we go we’ve changed that toilet
green color now of course this is all ups to you you don’t have to follow my
lead here at all maybe too much there for some people looking at it but it’s
kind of eye-catching but anyway that’s how to change the individual background
colors on your menu items this is the secondary menu right here of course you
can change the hover effects as well we may do that in a different video we’ll
see so I hope you found that useful if you have please like the video and
subscribe to the channel if you’re interested in web development and take
one of our web development courses below there’s some huge discount for our
YouTube subscribers and there’s also some great free tutorials down there so
do take a look once again this has been jamie from system 22 and web design and
tech tips comm thanks for watching have a great day

3 thoughts on “Divi theme eCommerce tutorial Individual Menu Item Decoration

  1. Hello Jaime,

    A bit off topic but, would you know how to connect/hookup a Bootstrap or Vanilla HTML/CSS/JavaScript website to the phpMyAdmin database provided by most web hosting companies?

    Now that I know a bit of coding, WordPress seems like such a chore.

    Thanks,

    Eric

  2. I see that you have a lot of DIVI Themes Videos.

    I take it that you would recommend their WordPress themes.

Leave a Reply

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