Da Vinci 2.0 header ( upper main menu) and footer color change.

danysh

New Member
hi can anyone can tell me how to change the main menu and footer color in da Vinci 2.0
 

Attachments

  • Screenshot (20)_LI.jpg
    Screenshot (20)_LI.jpg
    853.3 KB · Views: 34
  • Screenshot (21)_LI.jpg
    Screenshot (21)_LI.jpg
    974 KB · Views: 33
E

Ekaterina Sayapina

Guest
hi can anyone can tell me how to change the main menu and footer color in da Vinci 2.0
Hello,
Please go to your WP dashboard => Customization => Head and paste these code snippets into CSS style:

.footer {
background: YOUR COLOR;
}

.upheader {
background: YOUR COLOR;
}

Please note that these will only change background color. You might also need to change text and links color, too.
 

danysh

New Member
Thanks your your reply

Yes need to change text color as well

I am facing another problem when I add sub category from product category it’s not showing on main page category menu :( can you please guide me .... we meeee to upload new products thanks
 

Direct Webstore

Well-Known Member
I am facing another problem when I add sub category from product category it’s not showing on main page category menu :( can you please guide me .... we meeee to upload new products thanks

Do you have any products in the sub category? I think it is hidden when there are no products. Just edit any product and tick the sub category, save and check. Untick it after testing.
 

danysh

New Member
Check screen shots
 

Attachments

  • 0A85D17F-7A99-4F9F-8AC3-0360A48EDED7.jpeg
    0A85D17F-7A99-4F9F-8AC3-0360A48EDED7.jpeg
    376.6 KB · Views: 19
  • 566BD9E3-0FD3-4825-A06F-0FA02F8FB202.jpeg
    566BD9E3-0FD3-4825-A06F-0FA02F8FB202.jpeg
    649.2 KB · Views: 18

Direct Webstore

Well-Known Member
It "should" work then. But without further information or being able to look at your setup, it's impossible to say what the problem is. You may have to give Support admin access so they can have a look.
 

danysh

New Member
Ok I will talk to support and my account manager. Thanks for your quick replies can tell na how to change fonts colors on menu.

Plus can we add safe checkout icons on di Vinci 2.0 single product page ??
 

Direct Webstore

Well-Known Member
Last edited:

Direct Webstore

Well-Known Member
To whom should I contact for that ??
For creating a child theme and editing files? You have to learn how to do it yourself or find a freelancer somewhere.

I don't see the necessity for it myself. You have security icons in the footer and even more at the checkout page. Using them too much looks fake ... in my opinion.
 

ferronf

New Member
Post this into Appearance>Customize>Additional CSS

Or ... here ..


.mainnav ul li>a {
color: YOUR COLOR;
}
.mainnav ul li:hover>a, .mainnav ul li:active>a {
background: YOUR COLOR;
color: YOUR COLOR;
}


Get colour codes here ... https://www.w3schools.com/colors/colors_picker.asp

:)

Hi this is for the main navigation(product categories) right?

1) How about the text color for the .upheader? How do we change the colors for the upheader
2) I tried editing within the CMS but it's only changing desktop view header color and mobile view (except text color, which I dont know how to change). Header bar in "tablet view" still remains dark-blue-ish
 

Direct Webstore

Well-Known Member
Hi this is for the main navigation(product categories) right?
Right

How about the text color for the .upheader? How do we change the colors for the upheader

Here's all my CSS for the top header and header area ... take your pick which ones you want ... edit the colours.

Just paste the whole lot into Appearance>Customize>Additional CSS ... and see what it looks like and delete the bits you don't want. (You can see the changes on the right as you delete them.

.breadcrumbs a, .top-header ul li a {
color: #000000!important;
}
.header .cart {
border-color: #ffffff!important;
}
.header, .header .shipping, .header .tbtn, .top-header {
background: #ffffff!important;
border-color: #ffffff!important;
}
.top-header {
background: #000000!important;
}
.header, .header .shipping, .header .tbtn, .top-header {
border-color: #000000;
}
.top-header ul li a {
color: #ffffff; }
.breadcrumbs a, .top-header ul li a {
color: #ccc!important;
}
.top-header__mail, .top-header__phone {
color: #ccc;
}
.search-form .btn-danger {
border-radius: 3px!important;
background: #005e8e!important;
color: #ffffff!important;
border-color: #005e8e!important;
}
.search-form .btn-danger:hover {
border-radius: 3px!important;
background-color: #595959!important;
border-color: #595959!important
}


text color
Text colour are these color:

The rest are border and background colours
 

ferronf

New Member
Right



Here's all my CSS for the top header and header area ... take your pick which ones you want ... edit the colours.

Just paste the whole lot into Appearance>Customize>Additional CSS ... and see what it looks like and delete the bits you don't want. (You can see the changes on the right as you delete them.

.breadcrumbs a, .top-header ul li a {
color: #000000!important;
}
.header .cart {
border-color: #ffffff!important;
}
.header, .header .shipping, .header .tbtn, .top-header {
background: #ffffff!important;
border-color: #ffffff!important;
}
.top-header {
background: #000000!important;
}
.header, .header .shipping, .header .tbtn, .top-header {
border-color: #000000;
}
.top-header ul li a {
color: #ffffff; }
.breadcrumbs a, .top-header ul li a {
color: #ccc!important;
}
.top-header__mail, .top-header__phone {
color: #ccc;
}
.search-form .btn-danger {
border-radius: 3px!important;
background: #005e8e!important;
color: #ffffff!important;
border-color: #005e8e!important;
}
.search-form .btn-danger:hover {
border-radius: 3px!important;
background-color: #595959!important;
border-color: #595959!important
}

Thanks man. Will give this a try :)
 

Direct Webstore

Well-Known Member
So time for CSS Lesson No.1

1. In Chrome ... put the mouse curser on the area you want to edit (e.g top header)
2. Right click and then click "Inspect" at the bottom of the popup
3. A panel will pop out on the right with the CSS code for that area. You can even edit the code in that panel and see the changes. Then you can copy/paste the code into Additional CSS

The changes made in that panel are temporary. It will revert to normal after you refresh the page.

Lesson 2
If any colour changes etc don't work ... try putting !important after the colour, size etc.

e.g color: #ffffff!important;
 
Top