Hi there,

You can refer them as provided below. For registration, we using gradient color, you can change them accordingly. Please give it a try and see how it goes.

[gist type="css"]
/*Registration button*/
#es .btn-es-primary {
background-image: linear-gradient(to bottom,#e9f4ff 20%,#4091db 100%) !important;
}

/*Login button*/
#es .btn-es-primary-o {
background-color: #fff !important;
}

[/gist]

I added that code to my custom.css file but it does not seem to be working yet.

Thanks for any additional tweaks to make it work.

Sean

Try replace to this :

/*Registration button*/

body #es .btn-es-primary,

body #es .btn-es-primary:hover {

    background-image: linear-gradient(to bottom,#E9D0CC 20%,#8E1A1D 100%) !important;

}



/*Login button*/

body #es .btn-es-primary-o,

body #es .btn-es-primary-o:hover {

    background-color: #333 !important;

}

That did not seem to work for me. But, the hosting company has announced that there are serious problems on that server and they have scheduled an emergency maintenance window for this evening. So, I think we should not worry about any of my tickets until after they are done since their server issues may explain some of my almost explainable issues with this site right now.

Sure, when you are ready, just let us know

I have all of this working well. Except for one tiny thing that would sure be helpful.

When I colored the login button red it also changed some of the other buttons, and I like it. But, there is one piece of one button where the hover color is not to my liking.

When I hover over the Share button's pulldown menu there is a blue background color that I would like to change.
I will be very grateful for the css to change it. I tried a few things but did not get it to work.

https://www.dev2.carneycorner.com/club (after logging in)

Hi there,

You can try css codes below and see how it goes.

[gist type="css"]
body #es .es-story-privacy .es-privacy .es-privacy-toggle, body #es .es-story-privacy .es-privacy .es-privacy-toggle:hover {
background-color: red !important;
}
[/gist]

I think I need a tiny bit more added to that for a hover color. Right now on hover the little area turns blue. :-)

Sean

Hi there,

Can you apply css codes below and see how it goes.

[gist type="php"]

body #es .es-story-privacy .es-privacy .es-privacy-toggle, body #es .es-story-privacy .es-privacy .es-privacy-toggle:hover {
background-color: red !important;
border-color: red !important;

}
[/gist]

Thank you so much. It is still showing a blue background color. Sorry for the slow reply. I have been working on this site all day rebuilding all the menus. :-)

Hi there,

Applied them here http://take.ms/wmxFX and it works as it should. Please give it a check and see how it goes.

I believe that is also the same code that I had already put in my custom.css file.

It does have one small issue which is when you click on the pull down menu and then move your mouse away the blue color shows up.

Here is a picture

Hi there,

Applied css codes below and it should works as it should now. Please givce it a check and see how it goes.

[gist type="php"]
body #es .es-story-privacy .es-privacy .es-privacy-toggle, body #es .es-story-privacy .es-privacy .es-privacy-toggle:hover, body #es .es-story-privacy .es-privacy .es-privacy-toggle:active, body #es .es-story-privacy .es-privacy .es-privacy-toggle:focus{
border-color: #861215 !important;
background-color: #861215 !important;
}
[/gist]

B E A U T I F U L ... Thanks...

Is there a reason that some of the code was put into the Custom CSS field in the template and

other code is in the Custom Javascript field?

I am assuming that the code in the Custom CSS field is correct and wondering if what is in the Custom Javascript field is actually an error?

Or, since they are slightly different maybe they are both needed and the Javascript field also takes css chanages and implements them.

The reason that I ask is because I want to copy all of this css code into my custom.css file and then remove it from the template because I try to keep all of my css changes in that one file.

So, I am wondering if I should copy both of those snippets into my custom.css file so I can remove them from the template custom css and javascript fields.

Thanks, Sean

HI there,

Sorry for the confusion. Actually those css are not meant to be there I pasted there for backup and forgot to remove them actually. Sorry for any inconvenience

I have removed them. Please give it a check and see how it goes.

Abdul,

I removed my custom.css entry that is in my custom.css file for the share button and just let the system use yours.

Now, I have another problem where the share text has a blue background when the mouse is removed after clicking in the Share button. The background color then reverts back to blue. .

I am assuming that anything you place in the custom.css field of the template can also be placed directly into the custom.css file in the templates folder: /httpdocs/templates/charm/css/custom.css ??

I really want to keep all my custom.css changes together in one place.

I am really sorry for all this confusion.

Thanks, Sean

PS. I wonder if we should be looking for a way to change the blue color from being on any buttons on my site. ie. If there are other blue buttons might there be a way to change them all instead of having the change them individually?

Hi there,

Now, I have another problem where the share text has a blue background when the mouse is removed after clicking in the Share button. The background color then reverts back to blue. .

May i know how to replicate them? It seems to works fine on my end as you can see here http://take.ms/PoJuV

I am assuming that anything you place in the custom.css field of the template can also be placed directly into the custom.css file in the templates folder: /httpdocs/templates/charm/css/custom.css ??

Yes, you can apply them on your custom.css files as those feature are provided by helix. I applied there as i dont want to mess with your other codes.

PS. I wonder if we should be looking for a way to change the blue color from being on any buttons on my site. ie. If there are other blue buttons might there be a way to change them all instead of having the change them individually?

It is hard to track them actually We need to check them accordingly in order to point them which classes is using that color.

Please advice.

The way to replicate the blue color behind the Share button is to actually click on the share button and then after move your mouse away from the share button. :-) But, I see from your video that you are not having the same issues that I am having. I will keep my eye on it in case it is a caching issue. But, it shouldn't be since I have been cleaning out the com_templates folder continually that is being created in the cache.

I will move all your code into my custom.css file instead of in the template, where you are placing it, after we have it all working. In the meantime what you are doing is great since it is no doubt easier for you.

I sure do appreciate all of your help.

Sean

Hi Sean,

I am not sure how, i cannot replicate them currently Cleared my browser cache and same result, it showing correctly.

Please advice.

This is very strange to me. I am thinking it is a caching problem but this time I am wondering if there is a chance you have the buttons working properly in your cache. To test this again I just deleted the cache from Joomla to get ride of the template cache since that is the only thing caching now that I have all caching turned off.

I think deleted ALL history in three browsers: Microsoft Edge, Firefox and Chrome.

I think opened all three browsers and did the following:

1) visit https://www.dev2.carneycorner.com/community/login
2) login
3) Click on the Share button
4) move mouse away from the share button

On all three browsers the Share button turned blue.

I have no CSS to effect the Share button here in the custom.css file.

So, the only CSS is what you have placed in the template which is:

body #es .es-story-privacy .es-privacy .es-privacy-toggle, body #es .es-story-privacy .es-privacy .es-privacy-toggle:hover, body #es .es-story-privacy .es-privacy .es-privacy-toggle:active, body #es .es-story-privacy .es-privacy .es-privacy-toggle:focus{

 border-color: #861215 !important;

 background-color: #861215 !important;

}

Hi there,

After checking on your site, seems like you are using Chrome and i tested them on Firefox. I can replicate them also. I have applied them here .../templates/charm/css/custom.css and it should works fine now.

Please give it a check and see how it goes.

Hi there,

You are most welcome. Glad to hear that your issue has been resolved now.

Just for your information, I have locked and marked this thread as resolved to avoid confusions in the future. Please start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiries.

Thanks for understanding.