Im editing this jekyll theme with github pages and im trying to add buymeacoffee generated button in menu bar.
It works but for some reason it gets the theme colors, i tried to debug it hours now but it didn't work.
The button should look like this:
https://i.imgur.com/RSYrOx6.png
But now:
https://i.imgur.com/KzwqCml.png
I added it in _includes/navbar.html in the end of the file. I tried to placed it in other files too, outside divs inside divs with custom css classes nothing worked.
Looks like it gets a "general" color, i tried to find this setting but i couldn't, can any of you help me to figure it out? thank you!
you can selector level of custom css in _dark.scss.
Example, you can change with this.
body[data-theme="dark"] .bmc-btn-container > a.bmc-btn:hover {
color: black;
}
Related
I am trying to remove the previous and next buttons in mkdocs but I don't want it to be hacky.
I have read the docs and searched the web and haven't found anything other than some GitHub issues.
Remove these buttons!
Thanks!
I would do this using CSS to hide it by adding into the included css. In the material theme it will be:
md-footer__inner { display: none }
This should be within the css which is included as extra_css in the mkdocs.yml.
I am working on a project where I need to update the external CSS files for a webpage.
The problem is that I need to use a Marketo token to dictate what the new CSS style will be. Tokens do not work in external CSS files; I've tried.
I've been able to do most of this work myself, however, I am stuck at one element: a slider. I want to modify the color of the slider buttons to be determined by the Marketo tokens. I have tried "rebuilding" the slider section in the webpage html code, but so far no luck.
Any ideas?
This is a time-sensitive project, too.
Your help is greatly appreciated!
I understand you are trying to override previous css codes. Have you tried the following?
background-color: red !important;
Putting the link of the css file you want to be valid at the bottom.
deleting all the classes of the button related to javascript and adding new classes to style them.
.color{
color: red;
color: blue !important;
}
<div class="color">Color</div>
document.querySelector('.js-a').classList.add('js-b');
document.querySelector('.js-a').classList.remove('js-a');
.js-b{
color:blue;
}
.js-a{
color:red;
}
<div class="js-a">Javascript</div>
I made a transparent menu with white text on it and when we hover it the whole topbar becomes white and the text becomes invisible because of the same color.
I want to change the font colors to black of all the items in the columns when we hover anywhere on the top bar.
I am using elementor.
This is my website:
http://ha123.epizy.com
Please suggest if there is a plugin for this or any code. As a newbie I would be really happy to learn from you guys.
Thanks.
You could solve this using custom CSS code. If you use Elementor Pro, you could put this CSS inside of the plugin somewhere, but if not you can just add it either in the Customizer in Wordpress, or in a custom (child) theme.
Something like this could work in your case:
.elementor-widget-ekit-nav-menu:hover .elementskit-navbar-nav > li > a {
color: black;
}
You might actually also be able to solve this using Elementor itself in the style settings somewhere, but that depends on how everything is set up and which elements you are using.
I am trying to duplicate a menu section but want the background and on hover colours to be the opposite. The CSS stylesheet/website was not created by me and I am not used to coding.
This page is VERY MUCH in progress https://www.wildedge.co.uk/archery-academy-session/
but I would like the menu to change colour for the 2 lines, eg
.squareboxarchery{background-color:#546734;}
.squareboxarchery:hover{background-color:#425227;}
.squarearcherytitle{color:#ffffff;}
and
.squarebox{background-color:#425227;}
.squarebox:hover{background-color:#546734;}
.squaretitle{color:#ffffff;}
I cant work out how to make it a separate entity...
Any help would be much appreciated!
Looking at the dom, I think that :
the second div.fixed_site layer_wrapper should be moved, now its in the first fixed_site layer_wrapper; its logic that two same structures have to be on the same level.
Once that done, you can easily separate your css by :
/* applies to the first line */
div.fixed_site layer_wrapper squarebox {}
and
/* applies to the second line */
div.fixed_site layer_wrapper + div.fixed_site layer_wrapper squarebox {}
you are using wordpress theme. and you need to login your CMS and do some selections and save the page. if its not working then you need to add extra css for the page with css property !important to overwrite background colors and text colors, hover colors etc.
which will be look like.
.squareboxarchery{background-color:#425227;!important}
.squareboxarchery:hover{background-color:#546734;!important}
.squarearcherytitle{color:#ffffff;!important}
and
.squarebox{background-color:#546734;!important}
.squarebox:hover{background-color:#425227;!important}
.squaretitle{color:#ffffff;!important}
use which one you want from above 2 sets.
Or simply add the the lines into style.css which will work for you.
If you are using a CMS -Content Manager System normally you have to overwrite by using !important after your style.
But there is also another way to avoid using it !important. Install FileZilla, go to the folder where it is the main.css of your website and change manually the lines of code. And then upload again this file in your website. But be careful, if you did not use to do this, duplicate these files twice for security. If you make a mistake you have always the original on your computer.
Hi I've a wordpress site and i need to modify the highlighted code to "display=flex" insted of "display=none".
But i am not able to to this because is element.style..please help me.
https://imgur.com/93zuJyU
.fep-message-content .fep-message-content-5 .fep-message-
content-own .fep-message-content-admin .fep-hide-if-js{
display:flex !important;
}
this is an accordion of front-end-pm plugin for wordpress and it is displayed none when closed and displayed block when opened. i would have it permaopened.
Is possible to change the highligthed code?
Thank you for helping. :)
My guess is that there's a javascript hiding that element after the page is loaded. So no matter what you tell the page to load, it gets altered after. I would search the theme or plugin javascripts for "fep-hide-if-js".