Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Change "search" button color

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hello

how i can change the color of the search button? www.new.ssi-ag.ch

Thanks
  • Davcat's Avatar
  • Davcat
  • 3 Month Basic
  • 11 posts
  • Karma: 0
The administrator has disabled public write access.
The style is coming from

.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #7c3fe5;
background-image: -moz-linear-gradient(top,#702de3,#8f5ae9);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#702de3),to(#8f5ae9));
background-image: -webkit-linear-gradient(top,#702de3,#8f5ae9);
background-image: -o-linear-gradient(top,#702de3,#8f5ae9);
background-image: linear-gradient(to bottom,#702de3,#8f5ae9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff702de3', endColorstr='#ff8e59e9', GradientType=0);
border-color: #8f5ae9 #8f5ae9 #621dda;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);

*background-color: #8f5ae9;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

Are you familiar with background fallback, gradients and ms filters?

I may need to explain a bit

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
No, i dont know how i can change the color, i would like that the color its the same like the background of the menu.

And another thing, how i can put a favicon? I habe uploaded the favicon in the folde images but nothing happens.
  • Davcat's Avatar
  • Davcat
  • 3 Month Basic
  • 11 posts
  • Karma: 0
Last Edit: 5 years 5 months ago by Davcat.
The administrator has disabled public write access.
background-color: #7c3fe5; is the fallback colour for browsers that don't understand linear gradients

The linear gradients bit is this

background-image: -moz-linear-gradient(top,#702de3,#8f5ae9);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#702de3),to(#8f5ae9));
background-image: -webkit-linear-gradient(top,#702de3,#8f5ae9);
background-image: -o-linear-gradient(top,#702de3,#8f5ae9);

It uses browser prefix so they apply to different browsers
1. Mozilla (firefox)
2. Webkit base browsers like Chrome
3 Opera browers

and the last line in this sub section

background-image: linear-gradient(to bottom,#702de3,#8f5ae9);

Applies to all browsers that can understand this line and override the browser specific styling
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The final section

*background-color: #8f5ae9;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

is aimed at older microsoft browsers

So you need to add your colour values in place of the existing # values
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
So you paste the code I added at the top into the custom.css file and change the colour values

Are you with me so far?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I try to change all the color to my color 0b7a97 but nothing happens, can u make this for me? How can i give you my account?
  • Davcat's Avatar
  • Davcat
  • 3 Month Basic
  • 11 posts
  • Karma: 0
The administrator has disabled public write access.
the colour value you added would be #0b7a97 right?

Are you replicating the gradient effect with different colours?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
No sorry, the color that i want is #386396, i want that the button is from this color.
  • Davcat's Avatar
  • Davcat
  • 3 Month Basic
  • 11 posts
  • Karma: 0
The administrator has disabled public write access.
If you go into theme magic and in the link colours change the button colour and then save, close theme magic

Hit the less to css button and view the site

Does that look close enough for you?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Yes, thank you, the button its now ok, and for the favicon?
  • Davcat's Avatar
  • Davcat
  • 3 Month Basic
  • 11 posts
  • Karma: 0
The administrator has disabled public write access.
ah sorry forgot about that

Try dropping the favicon into the root of the template folder

Then try viewing the site in a browser you are not already using and have not viewed the site in

It can take a bit for the favicon.ico to display

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: Davcat

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers