Button keeps showing white border when clicking
Hi, when I create a button with a dark background around the button, it shows a white line when clicking on the button. When making the text/hover color darker the white line disappears when clicking on it. But I don't want a dark text hover color.
Here's an example:
Thanks for your help!
Regards,
Peter London
-
Hi Peter,
Which line do you mean, the border? If so, please make sure the border color has the same color as the background color. Pay attention to the border color overlay. It could be different.
0 -
Hi Alex,
I don't know what happened but the white line is gone now so thanks for the help.
0 -
Just magic ))
Let us know if you need anything else.
0 -
:)
One question: Is there, in brizy cloud, a simple fixed footer or do I need to put in css code?
0 -
One more: Can I put a, let's say, a selected icon on a specific color. So the last selected icon or text or container on a specific color? If not also css?
0 -
What do you mean by a fixed footer? Do you want the footer to always be fixed at the bottom of the page and when you scroll only the content moves? This option has only the header and it is called sticky header.
Regarding the second question: there is no option to use the last selected color but you can organize your color system so that it is easy to use. Here you can find more about our global colors: https://support.brizy.io/hc/en-us/community/posts/360059752172-Global-Colors
0 -
I thought you were going to say that about the fixed footer (yes, I meant be fixed at the bottom). I found some css to do this.
regarding second question:
What I mean is. Lets say I have a word which is linked to another page. What I would like is if somebody clicks on that word (link) the word goes to another color and stays at that color unless the person clicks on another link which in that case goes to that specific color. A color being used to see what link the person , the last time he clicked, used. The color highlights the section he is in because he clicked in it.
I hope I'm making any sense :)
0 -
About the second question. I found some code but don't know how to implement them. I tried them in the advanced section in custom css and in settings-custom css but no active selection.
This is the code:(I hope:) )
a:active {
color: red;
}Must be a simple place to put them somewhere. Could you tell me?
0 -
Perhaps if I show you exactly what I want. If you look at : https://header.brizy.site/
At the bottom you see the "Home", "News", "Support", etc...
What I would like is that if you click one these icons or texts the color or icon changes color. So it highlights the active selection. I want to use this primarily for the mobile view.
0 -
Hi Peter,
I got it. Unfortunately, you can't add a different color for the active link, because Brizy doesn't have a separate CSS class for an active link. For WordPress there is a trick shared by one of our clients, but unfortunately, I don't have a working trick for the cloud. Please refer to this discussion: https://support.brizy.io/hc/en-us/community/posts/360057981392-brizy-menu-current-menu-item
Actually, a clever trick could be to add the same footer to all pages and add a different CSS class for each page-based link. For example, on the /news page you can name the "News" link as "news-active-link". On the /support page you can leave the "News" link without a class but add a custom class to the "Support" link, let's say "support-active-link". After that in Custom CSS area you can add the following code:
.news-active-link a,
.support-active-link a{
color: red!important;
}Theoretically, it should work :).
0 -
Hi Alex, I appreciate your help! The thing is, I'm not a programmer. I tried it in the past but it's just not my thing:)
I want to learn to do as much as I can myself. I can understand that you (Brizy) are not wanting to do the whole programming stuff for your customers. I tried as much as I can to do the above. In the News page I put "news-active-link" (without the ") in the css class under advanced in the column, icon and text (all the text in the footer are menu item bye the way)
In the support page I put "support-active-link" in the css class under advanced. I tried your code in the setting-custom css area and/or in the advanced-custom css area.
the footer is on all pages and global
It's turning the word news and support (menu items) immediately to the color red. It looks like the code is not responding to the "active" part. I tried to change some things by looking at the site : https://www.w3schools.com/ but no go.
I guess I missing some general understanding how to implement css code. Is there a site which offers some basic help in this? If you have some ideas about the "active" code above to fix this would be most appreciated!
0 -
Hi,
you do everything right but what I proposed above will not work for a global section. Global means that it is the same section on all pages, but the idea of the trick is to have different footers as section, but similar in appearance. When it's global and you set a custom class for an item, it will apply to all pages.
0 -
Hi Alex,
I see want you mean about a global section. I changed it and it works!
Only the word (menu items) change in color, happy with that!
But the icon color doesn't. I did put the css class on "news-active-link" in advanced-css class (news page) on the news column, icon and word but only the word changes. I looked for a special code for icons and color but couldn't find it.
Ideas?
0 -
Well, I gave you a hint and you can develop it yourself :).
If you want the icon to have a different color, you can play with the g tag: https://jumpshare.com/v/9Wv5MEbXLtjKeWBc52Gn
0 -
In a galaxy far far away a 56 year old man almost cracked his braincells when trying to solve a "g tag puzzle". According to his twin brother on Earth and synchronicity playing a role, he had the same issue :)
I was able to change the color to red in the element of the browser. Edge showed me a g tag but firefox didn't. I blame firefox and not myself off course :)
anyway, I tried a couple of things in the custom css area. I'll send some bitmaps to show you.
No red unfortunately.
0 -
In a galaxy far far away a young man helped a 56 year old man with the CSS code that almost cracked his braincells. The same thing happened with their twins on Earth.
You have some syntax errors in the CSS code you added. Please remove the code completely and use the following code:
.home-active-link a,
.home-active-link g,
.news-active-link a,
.news-active-link g,
.support-active-link a,
.support-active-link g{
color: red !important;
}btw: instead of red you can add any other color you want.
0 -
:)
Great! Thanks!
And I go forward...
0
Please sign in to leave a comment.
Comments
17 comments