Change Color default theme

[lucav87]

Hi,

I would like to change link from violet (fucsia?) to orange.. how is it possible? 

(not only in the navbar but all the theme..)

 

see the attachment

 

thanks a lot

 

Luca

Edited December 20, 2014 by lucav87 (see edit history)

[Paulito]

Hello

 

The colour changes you require will be in several css files so it will be easier, to start with, change them in the theme configurator.css

 

public_html/Your Shop/Your Theme/modules/themeconfigurator/css/theme3.css

 

Change the relavent theme css file

 

Paul

[lucav87]

Hello,

thanks for the reply.. 

 

this is my theme3.css

body {
  background: #3c281c;
}

.header-container,
.columns-container {
  background: url(../img/bg-theme2.jpg) repeat 50% 0;
}

#header {
  background: url(../img/bg-theme2.jpg) repeat 50% 0;
}
#header #nav-row {
  background: #545454;
}
#header #nav-row .shop-phone {
  color: #fff;
  text-shadow: 0 1px #404040;
}
#header #nav-row .shop-phone i, #header #nav-row .shop-phone strong {
  color: #aaa;
}
#header #currencies-block-top, #header #languages-block-top, #header #nav-row .header_user_info {
  border-color: #656565;
}
#header #currencies-block-top div.current, #header #languages-block-top div.current, #header #nav-row .header_user_info a {
  color: #fff;
}
#header #currencies-block-top div.current:hover, #header #currencies-block-top div.current.active, #header #languages-block-top div.current:hover, #header #languages-block-top div.current.active, #header #nav-row .header_user_info a:hover, #header #nav-row .header_user_info a.active {
  background: #878872;
  color: white;
}
#header #currencies-block-top div.current strong, #header #languages-block-top div.current strong {
  color: white;
}
#header #currencies-block-top div.current:hover, #header #currencies-block-top div.current.active, #header #languages-block-top div.current:hover, #header #languages-block-top div.current.active {
  background: #878872;
  color: white;
}
#header #currencies-block-top ul li.selected, #header #currencies-block-top ul li:hover a, #header #languages-block-top ul li.selected, #header #languages-block-top ul li:hover a {
  background: #b7b7b7;
}
#header #contact-link {
  border-color: #656565;
}
#header #contact-link a {
  color: #fff;
}
#header #contact-link a:hover, #header #contact-link a.active {
  background: #878872;
  color: white;
}
#header #currencies-block-top div.current:after, #header #languages-block-top div.current:after {
  color: white;
}
#header #search_block_top .btn.button-search {
  background: #584336;
}
#header #search_block_top .btn.button-search:hover {
  color: white;
  background: #333333;
}
#header #search_block_top #search_query_top {
  border-color: white;
  background: white;
  color: #686666;
}
#header #header_user #shopping_cart a {
  background: #878872;
  color: white;
}
#header #header_user #shopping_cart a:after {
  color: white;
}
#header #header_user #shopping_cart a:hover {
  color: white;
  text-shadow: 0 1px #333;
  background: #333333;
}
#header .sf-menu {
  background: #cbccbe;
  border-bottom: 3px solid #c1c2b4;
}
#header .sf-menu > li {
  border-right: 1px solid #d8d9ce;
}
#header .sf-menu > li > a {
  border-bottom: 3px solid #c1c2b4;
  color: #515150;
}
#header .sf-menu > li.sfHover > a, #header .sf-menu > li > a:hover, #header .sf-menu > li.sfHoverForce > a {
  color: #fff;
  background: #584336;
  border-bottom-color: #584336;
}

ul.product_list.grid > li .product-container .product-image-container {
  border-color: #d6d4d4;
}

#home-page-tabs {
  background: none;
}
#home-page-tabs > li {
  border-color: #d6d4d4;
}
#home-page-tabs > li.active a, #home-page-tabs > li a:hover {
  background: #584336;
  color: white;
}

.new-label, .sale-label {
  background: #584336;
}
.new-label:before, .new-label:after, .sale-label:before, .sale-label:after {
  border-color: #584336 transparent transparent transparent;
}

ul.product_list.grid > li .product-container {
  background: none;
}
ul.product_list.grid > li .product-container .product-image-container {
  background: white;
}
ul.product_list.grid > li .product-container .product-image-container .product_img_link {
  background: #f1e8e3;
}
ul.product_list.grid > li .product-container .product-image-container .product_img_link img {
  background: #f1e8e3;
}

.button.lnk_view {
  text-shadow: none;
  padding: 0;
  border: none;
}
.button.lnk_view span {
  border: 1px solid #9a9a9a;
  padding: 12px 16px;
  background: #f2f2f2;
  color: white;
}
.button.lnk_view:hover span {
  background: #b7b7b7;
}

.button.ajax_add_to_cart_button {
  padding: 0;
  border-color: #584336;
}
.button.ajax_add_to_cart_button span {
  filter: none;
  border-color: #584336;
  background: #584336;
}
.button.ajax_add_to_cart_button:hover {
  border-color: #878872;
}
.button.ajax_add_to_cart_button:hover span {
  border-color: #878872;
  background: #878872;
}

.product-name {
  color: #878872;
}

div.star.star_on:after {
  color: #584336;
}

.price-percent-reduction {
  background: #584336;
  border-color: #584336;
}

.price, .price.product-price {
  color: #584336;
}

.old-price {
  color: #b1b0b0;
}

ul.product_list.grid > li .product-container:hover {
  background: #fff;
  -webkit-box-shadow: 0 5px 13px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 5px 13px rgba(0, 0, 0, 0);
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0);
}

.button.lnk_view span {
  color: #fff;
  background: #878872;
  border-color: #878872;
}

.button.lnk_view:hover span {
  color: #fff;
  background: #584336;
  border-color: #584336;
}

#cmsinfo_block em {
  background: #584336;
  text-shadow: 0 1px #4e3c30;
}

#facebook_block, #cmsinfo_block {
  background: #adae9d;
}

#cmsinfo_block, #cmsinfo_block > div + div {
  border-color: #c6c7bb;
}

.footer-container #footer #social_block {
  background: none;
  padding-bottom: 15px;
}

.footer-container {
  background: #584336;
}
@media (min-width: 768px) {
  .footer-container {
    background: url(../img/footer-bg2.gif) repeat-x;
  }
}

#facebook_block h4, #cmsinfo_block h4, #cmsinfo_block h3, #cmsinfo_block p strong {
  color: #fff;
}

#facebook_block p, #cmsinfo_block p {
  color: #e7e7e2;
}

#footer #newsletter_block_left .form-group .form-control {
  background: #534034;
  color: #fff;
  border-color: #79695e;
}
#footer #newsletter_block_left .form-group .button-small {
  color: #fff;
  text-shadow: 0 1px #47362c;
}
#footer #newsletter_block_left .form-group .button-small:hover {
  color: #e4dfb9;
}

#footer #newsletter_block_left h4 {
  text-shadow: 0 1px #47362c;
}

.footer-container #footer #social_block ul li a {
  color: #fff;
  text-shadow: 0 1px #47362c;
}
.footer-container #footer #social_block ul li a:hover {
  color: #e4dfb9;
}

.footer-container #footer a {
  color: #fff;
}
.footer-container #footer a:hover {
  color: #e4dfb9;
}

.footer-container #footer #block_contact_infos > div ul li {
  color: white;
}

.footer-container #footer .bottom-footer div {
  color: white;
}

.footer-container #footer #block_contact_infos, .footer-container #footer .bottom-footer div {
  border-color: #503e33;
}

I would like to change the color violet in orange ( #dc5d29 ) .. I do not understand what to change ... But you could help me?

 

thank you very very much!

Luca

[Paulito]

Hello

 

It may be easier for you to put the following code anywhere in global.css (preferably the bottom)

 

/*Background of Search Box*/

#search_block_top .btn.button-search {background: #dc5d29!important} 

 

/* Change colour of Top Navigation when you hover */

.sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {background: #dc5d29!important;} 

 

/* Normal Background of Top Navigation */

.sf-menu {background: #f6f6f6;} 

 

/* Orange Background of Top Navigation - Only use this if you want Nave to be permanently Orange*/

.sf-menu {background: #dc5d29!important;}

 

/* Background of Cart */

.shopping_cart > a:first-child {background: #dc5d29!important}

 

/* Home Page Tabs */

 #home-page-tabs > li.active a,

 #home-page-tabs > li a:hover {background: #dc5d29!important}

 

 /* Change Colour if Title Blocks - categories etc */

 .block .title_block, .block  h4 {background: #dc5d29!important;}

 

Result

http://screencast.com/t/pQNZhOzpW

 

 

Hope this helps a little

 

Paul

[lucav87]

 

Hello

 

It may be easier for you to put the following code anywhere in global.css (preferably the bottom)

 

/*Background of Search Box*/

#search_block_top .btn.button-search {background: #dc5d29!important} 

 

/* Change colour of Top Navigation when you hover */

.sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {background: #dc5d29!important;} 

 

/* Normal Background of Top Navigation */

.sf-menu {background: #f6f6f6;} 

 

/* Orange Background of Top Navigation - Only use this if you want Nave to be permanently Orange*/

.sf-menu {background: #dc5d29!important;}

 

/* Background of Cart */

.shopping_cart > a:first-child {background: #dc5d29!important}

 

/* Home Page Tabs */

 #home-page-tabs > li.active a,

 #home-page-tabs > li a:hover {background: #dc5d29!important}

 

 /* Change Colour if Title Blocks - categories etc */

 .block .title_block, .block  h4 {background: #dc5d29!important;}

 

Result

http://screencast.com/t/pQNZhOzpW

 

 

Hope this helps a little

 

Paul

 

 

Thanks for the reply,

 

I would like to change the color to certain things

follow attachments

sorry for my bad english

 

Thanks a lot!

[Paulito]

Hello

 

I assume the code I posted did not work for you as you say (screenshot) that you still want the Top Nav and Search to be a different colour.

 

I'm a bit confused, so could you answer a question.

 

Did you add the code I posted to global.css

Do you have a URL of your site

What theme number are you using

 

All the changes you require are simply css so I surprised that nothing has worked.

 

If you could, perhaps, give more details.

 

Hope you understand

 

Paul