How do I change the CSS in Argo theme?

Pere Nadal
asked 10 years ago

Hi!
At first, thanks for this theme. O really love it. Sincerely is the best theme i ever try.
The question:
I made some changes with a child theme, but when I try to change the css file, appears to be compressed or something like this. I’ll need to download the uncompressed version of the CSS. Is it posible?
How can I change the navbar color?
Thanks a lot. Sorry for the mistakes in the text. English isn’t my mother language. 🙁

Regards from Catalonia

3 Answers

Kido D
answered 10 years ago

Hi Pere,
You can download the uncompressed version of the CSS file in the link here: http://goo.gl/UnYU65 then edit the file
About the nav-bar color, you can use the CSS code below: Navigation bar background color:

 .navbar-inverse .navbar-inner,.navbar .navbar-search {
background: ...
}
.navbar-inverse .navbar-inner,.navbar .brand,.navbar .navbar-search {
border-color: ...
}
@media (min-width: 980px) {
.navbar .nav,.navbar .nav>li:hover, .navbar .nav>li:focus, .navbar .nav li[class*='current'] {
background: ...
}
.navbar .nav>li {
border-color: ...
}
}
@media (max-width: 979px) {
.handheld-header,.navbar .nav,.navbar .nav .sub-menu,.navbar .nav .sub-menu .sub-menu {
background: ...
}
.navbar .nav li a {
border-color: ...
}
}

Navigation bar font colors:

 @media (min-width: 980px) {
/* Menu icon color */
.navbar .nav>[class*="icon-"]:before {
color: ...
}
/* Link color */
.navbar .nav>li>a {
color: ...
}
}
/* Link color hover */
.navbar-inverse .nav>li>a:focus, .navbar-inverse .nav>li>a:hover {
color: ...
}
/* Link color in mobile screen */
@media (max-width: 979px) {
.navbar .nav li a {
color: ...
}
/* Menu icon in mobile screen */
.navbar .nav .has-sub-menu .show-sub-menu-btn,
.navbar .nav .show-sub-menu>.show-sub-menu-btn {
color: ...
}
}
/* Icon color in Search form */
.navbar .navbar-search [class*="icon-"],
.navbar .navbar-search:hover [class*="icon-"] {
color: ...
}
/* Text color in Search form */
.navbar #searchform input[type="text"] {
color: ...
}
/* Placeholder text color in Search form */
.navbar #searchform #s::-webkit-input-placeholder {
color: ... 
}
.navbar #searchform #s::-moz-placeholder {
color: ... 
}
.navbar #searchform #s:-ms-input-placeholder { 
color: ...
}
/* Icon color in mobile header */
.button-show-nav, .button-show-sidebar,
.show-nav .button-show-nav, .show-nav .button-show-sidebar, 
.button-show-nav:hover, .button-show-sidebar:hover {
color: ... 
}

Hope this helps!

Pere Nadal
replied 10 years ago

Thanks Kido!

I could change the navbar color, but can not find the css submenu, which continues to be in black. Can you give me the css class of submenu?

Check the problem in this screenshot: https://www.dropbox.com/s/9b0ng5dehc1p4zo/Captura%20de%20pantalla%202014-03-06%20a%20las%2011.48.22.png

Or in the tester blog: http://blog.cevagraf.coop/

I hope you understand the problem.

Thanks a lot again.

Have a great weekend!

Pere Nadal
answered 10 years ago

Wow! I’m also impressed with the post-order service! I wish tell to everybody that DW are really the greatest WP designers whom I have ever encountered.

Thanks again!

Kido D
answered 10 years ago

Hi Pere,
I have added the CSS code to change the nav-bar color for you, please go to Dashboard / Appearance / Customize / Custom Code / DW Header script (or in your language: Tauler / Aparença / Personalitza / Custom Code / DW Header script), and check it again.
You can see the full code for the change in the link here: http://snippi.com/s/lnw86q2
Cheers

Pere Nadal
replied 10 years ago

Thanks Kido, that’s great.