Hi I would like to create a button that allows readers to switch between light (default) and dark theme modes on my wordpress.org website. I already created a button shortcode and the desired csscode i want for my dark theme using simple css plugin but have no idea how to relate them together.
I'm very new to wordpress and therefore have no idea how to do so. Would appreciate a lot if someone can provide a detailed walkthrough on how to implement it. Thanks!
We really need more information... If the light/dark CSS is managed just by adding a class to the body or some high level container, you can just target the button with a click event in javascript and change the body class or whatever else needs to be changed.
Also note this isn't really WordPress specific, it's more a generalized javascript or CSS question.
Here's some vanilla javascript to get you started:
document.getElementById("my-button").onclick = function () {
var container = document.getElementById("themeable");
if( container.classList.contains("dark") ){
container.classList.remove("dark");
} else {
container.classList.add("dark");
}
};
.container {
margin: 20px;
box-shadow: 0 15px 25px -10px rgba(0,0,0,.5);
background: #eee;
padding: 20px;
text-align: center;
color: #000;
}
.dark {
background: #323138;
color: #fff;
}
<div class="container" id="themeable">
I have two themes!
Change Theme
</div>
The problem with just using a js event listener for toggling a classname is that you will probably experience light flash of unstyled content when you refresh the page in dark mode. In 2020, there is an excellent plugin to add night mode switch in WordPress. Check WP Night Mode plugin. If you are looking for a custom solution without plugins, I would recommend reading the following article as well: Switching off the lights - Adding Dark Mode to WordPress.
Related
I have an anomaly. So, I'm trying to edit\remove the background in the .site-header-main of my of a site. I edited via theme editor however, seems that such is not taking as the code is in the index file. Here is the website: https://retrocarsales.com/
Code in theme CSS after change via style.cc and\or theme editor:
.site-header-main, .site-description, .site-title-text a {
background: none;
}
.site-header-main {
border-bottom: none;
}
Code in (Index):258 when inspecting:
.site-header-main, .site-description, .site-title-text a {
background: #444444!important;
color: #ffffff!important;
}
.site-header-main {
border-bottom: 1px solid #444444!important;
}
NOTE: The code above is NOT found in Domain\WP-Content\Theme\index or in Domain\index I only find the related code in domain/wp-content/themes/theme-name/style.css in which there its good but its not executed on live site ... seems the site gets code from index not style.css
Thank You
You should never direct edit the theme's file if you are not a developer - this may be break your site or even make your site down if you make mistakes.
Instead of that, you can safely add your custom CSS by go to Appearance > Customize > Additional CSS (remember to add "!important" to overwrite current CSS rules).
See below image for more detail:
I am building a site in Wordpress this week and I want to place a call to action at the top of the the site, but separate from the main navigation. Wordpress does not seem to offer this out of the box (think Donate button on Unicef site e.g.
I've tried using the Menuizer plugin it can add a button, but it places it at the end of the navigation, so that it is still wrapped up in the hamburger on mobile, I want it to appear as a seperate item like on (for example, unicef.org)
I don't also mind coding it by hand, but I don't really know where/how to do that.
Thanks for any pointers
First, you need to set a new header menu location, in my opinion, you better duplicate from the existing menu you have.
Second, you create a menu item which later you'll be using as CTA button, probably it will pile up the current menu location, or the position maybe not right.
Third, customize it using css to have proper positioning.
This is done directly from the template (If the template was created by you) But, something tells me that you are using a ready-made template then use the custom script
To insert the js code you сan use https://wordpress.org/plugins/insert-headers-and-footers/ plugin or https://ru.wordpress.org/plugins/custom-css-js/
I can't see your html layout to help you with the selector, so try experimenting with this example:
<script>
(function($) {
let selectorOfContainer = '.mybox',
url = '#your-link',
className = 'my-btn',
btnLabel = 'DONATE';
let $mybtn = $('<a/>', {
class: className,
href: url
});
$mybtn.text(btnLabel);
$(selectorOfContainer).append($myBtn); // prepend, after, before
})(jQuery);
</script>
Then use css styles to style your button
<style>
.my-btn {
text-decoration: none;
display: inline-block;
padding: 10px 20px;
border-radius: 3px;
background-color: #FFF;
box-shadow: 0 0 4px rgba(0,0,0,.3);
color: #e25420;
text-transform: uppercase;
font-weight: 700;
}
.my-btn:hover, .my-btn:focus {
background-color: #f0eded;
}
</style>
It would be easier for me if I saw your site
Has anyone tried changing the CSS in the new Facebook Page plugin? Old plugin used to provide some options such as being able to select a color scheme. However, the new plugin it's white all around and it does not seem to accept my custom CSS. Example:
._h7l {
background: transparent !important;
border: none !important;
}
Any ideas how we can get some custom CSS to work?
You cannot modify the CSS. The content of the plugin is displayed inside an iframe so there is no way you can change CSS or override any javascript method.
There are different options provided by this plugin you can customize. Please take a look into the docs:
https://developers.facebook.com/docs/plugins/page-plugin/
I hope it helps.
Yes you can, but not without using a little bit of jQuery and you site must use an https protocol (https). Both protocol must match...
Start by adding this awesome plugin: jquery.waituntilexists.js
And then play with your Facebook iframe by adding your css in it:
$(".fb-page iframe").waitUntilExists(function(){
$(".fb-page iframe").contents().find('head').append('
<style>._h7l {
background: transparent !important;
border: none !important;}
</style>
');
});
I've been customizing a one-page-design wordpress template (see http://ggc.inductiveplay.com) - it pulls up a floating button on the home page that :should: scroll down to the next section (#menu), but for some reason it keeps pointing to the 3rd section (#location).
I'd like to just override the link in CSS where I'm customizing the button size/appearance and assume I just have bad syntax here:
.a-btn {
padding: 2px 12px !important;
margin-bottom: 5px !important;
opacity: .8;
z-index: 1;
href="#menu";
}
If there's a quick fix for this I'd love to know, otherwise I'd love any insights on where the link is being set/computed on the site.
You can add things before and after a HTML element in css. But you can't change a link using CSS.
The below is bad CSS syntax:
href="#menu";
To add things before something in CSS you can have a HTML element like:
<div class="sample-text"></div>
Then using the following CSS:
.sample-text:before {
content:"blah blah";
}
Instead of "blah blah" you can have something else.
You can't use HTML in the CSS so you can't do what you want, but this is the closest you can get to it.
However you can change links using javascript.
Also you can only use z-index if you specify a position:relative, position:absolute or position:fixed.
My goal is to style a kendo-ui mobile app in Icenium to look the same on each device it's used on. Current targets include Android and IOS.
My stylesheet is the last link in the head section, to ensure that it overrides any other styles in the app. It hasn't helped, though, as telerik's specificity nightmare has me jumping through an insane number of hoops and getting very little accomplished.
I am at my wits end- I have followed the tutorial on http://www.icenium.com/mobile-app-platform/videos-demos/video/kendo-ui-mobile-and-icenium, and so far, have been able to override very few styles.
for instance:
.km-ios #tabstrip-scan .km-navbar
{
background-image:none;
}
should be all I need to override for the default ios titlebar, according to Telerik's tutorial. However, it gets rid of the background image, but leaves me with a background color, which it will not allow me to override (it also will not allow me to alter the text color). In other words:
.km-ios #tabstrip-scan .km-navbar
{
background-image:none; // works
background-color: #d9d1ba; //doesn't work
color: #333333; //doesn't work either
}
I have the same problems with their button classes:
.km-ios .km-button
{
height: 32px; // works
width: 100% // doesn't work;
background-image: none; // doesn't work
}
and with inputs:
.km-ios input[type=text]
{
width:100% // doesn't work
border-radius: 3px; // doesn't work
-webkit-border-radius: 3px // also doesn't work;
}
At one point, I even commented out the entire kendo default stylesheet, and was still getting the kendo default styles when I ran the app in the virtual machine.
How can I override the kendo-ui-mobile defaults and style the app how I want it to look (the same on every device), rather than how Telerik thinks it should look (closer to native ui)?
Force the platform to a specific one and style it with the Kendo UI Mobile ThemeBuilder here:
http://demos.kendoui.com/mobilethemebuilder/index.html
You might reference my post here Kendo mobile template styling/formatting not working - i was having a similar issue and my post might help.