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
Related
I am playing around with the React Instant Search library and have it working functionally, however I want to change the styling of the components.
I have commented out the reference to the online stylesheet ..<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css#7/themes/algolia-min.css">
I would like to get it so that my hit components appear as a list without bullet points. So I created added a style to one of my own style sheets ..
.InstantSearch{
list-style: none;
}
And am referencing this style in my App.
return (
<div>
<h1>React InstantSearch e-commerce demo</h1>
<InstantSearch indexName="questions" searchClient={searchClient}>
<div>
<SearchBox/>
<Hits className={classes.InstantSearch} hitComponent={Hit} />
</div>
</InstantSearch>
</div>
);
However the Hits still appear as a list with bullet points.
When i inspect the component in the browser I can see that the ul item has the below properties ..
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
And the class is as below ..
<ul class="ais-Hits-list">
Where is it getting this 'ais-Hits-list' from and how can I change this?
As is probably pretty obvious I am new to Javascript and front end development so I'm sure this is a pretty stupid question.
The Algolia documention doesn't make it all that clear (at least not to me) how one can change the styling of certain components.
The answer to your question lies in the React InstantSearch documentation .
As it says:
All widgets under the react-instantsearch-dom namespace are shipped with fixed CSS class names.
The format for those class names is ais-NameOfWidget-element--modifier.
The different class names used by each widget are described on their respective documentation pages. You can also inspect the underlying DOM and style accordingly.
So a simple inspection of the Developer Tools for Chrome/Firefox will show that each of the elements of the ReactInstantSearch have differentiated classnames, for example ais-InstantSearch__root.
Simply import "./style.css" to the Search.js to easily format. For example,
.ais-InstantSearch__root {
display: flex;
border: 1px solid grey;
}
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.
New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.
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.
I copied CSS code for bs-example from the Bootstrap 3.0.3 docs site. I'm kind of a beginner with CSS, so if anyone could explain me this I would be thankful.
The following code:
/* Echo out a label for the example */
.bs-example:after {
content: "Example";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
It works as expected,
but I would like the title, EXAMPLE, can be changeable. I would like to use a tag like let's say <zd></zd>.
Thanks in advance.
Prior to writing this answer, I didn't realise that editing Pseudo Elements (::after) with JavaScript was a little trickier. Although with this question/answer on StackOverflow made it relatively easy with JavaScript.
The concept was still the same, upon Page load the browser renders what is stated on the Style sheet, there after you must use JavaScript to manipulate it's contents to render something different.
Hence the CSS looks at the attr(data-content), which means it'll look for the data-content attribute within the HTML.
.bs-docs-example::after {
content: attr(data-content);
}
This looks for the data-content="":
<div class="bs-docs-example" data-content="Example Header">
Which renders:
To change it there after, all you have to do is change it's data-content attribute with JavaScript, in the demo I use jQuery to quickly select the DOM element and adjust it's data-content attribute.
$('.bs-docs-example').attr('data-content', "New Header Title" );
Demo Fiddle: http://jsfiddle.net/u2D4M/
If you wanted to do this without jQuery:
<script>
var getHeader = document.getElementById('bs-header');
getHeader.attributes["data-content"].value = "Hi, New Title";
</script>
Demo Fiddle: http://jsfiddle.net/9wxwxd4s/
The :after selector Insert content after every .bs-example class.
Here, the Word Example will be added after every .bs-example.
[please refer this link]http://www.w3schools.com/cssref/sel_after.asp
Instead of using content:"Example", you can edit your titles in html and assign the same class to all titles. header tags are preferred. ie., You should definitely create a new custom stylsheet and override the classes you want to modify. This is a way you can always go back to the default styling provide by bootstrap.
This is a simple and easy step followed by all web developers as per W3C std.
Still you want to change title by code, you can get help from jQuery or JS.
Tip from Christofer Eliasson: If you want to redesign your page, you can just exchange your custom stylesheet with a new one. Instead of getting a completely new bootstrap file to be able to start over. Also, if you just want to go back to the default styling on just a few elements, it would be a mess to remember what changes you have made. So, write your custom css code in a separate stylesheet.