Im using the Facebook Button by BestWebSoft plugin in my WP site.
I'm trying to style the Facebook like button. Just want to make it bigger. Using my browser I see this rule for the like button that controls the size.
._2tga._49ve {
border-radius: 3px;
font-size: 11px;
height: 20px;
padding: 0 0 0 2px
}
I can't seem too change it. I've the "custom code" tab in the product settings, my child theme style sheet with !important, an internal style sheet in the head and even looked for the code in the plugin files, but nothing is working.
Can anyone help with this? Here is the page the FB like button is on: http://vote.krankgolf.com Thank you
It is not allowed to change the appearance: https://www.facebookbrand.com/dos-donts
Don't: Modify Facebook brand assets in any way, such as by changing the design or color
You can only use the Like Button just like you get it, but there is an option to make it larger in the Like Button generator: https://developers.facebook.com/docs/plugins/like-button
Example:
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div>
Related
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
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.
I am trying to integrate Google CSE in a page with BS3. Looks like BS3 is messing up the search box and button.
http://jsfiddle.net/DTcHh/509/
This is how the code looks in IE and Chrome http://i.imgur.com/vungb7v.png
The search icon is missing in the button and the bottom bar is missing in Chrome.
I tried playing around with
input.gsc-search-button
.reset-box-sizing *
but since I have only basic CSS skills I cannot figure out how to fix this. Can someone please tell me how should I fix this so that the box and button looks fine in IE and Non IE browsers.
All what you have to do is to replace the CSS values that are making problems and to know what you must replace and what are the values that you must change to is to take advantage from Google Chrome's "Inspect Element" feature.
You can see the effect on my own server on :
http://link-sa.ga/gcse/
Download the source code:
https://www.dropbox.com/s/bo01xp2agvp7w4e/index.html
JSfiddle:
http://jsfiddle.net/rsm23/GPLyM/
Read the comments under the GCSE call for the css code is should be like this :
<gcse:search></gcse:search>
<style type="text/css">
body {
margin: 10px;
}
#gsc-iw-id1{
height: 30px;
border-color: #898989;
}
input.gsc-search-button-v2{
width: 71px;
height: 29px;
}
</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.
I'm having difficulties getting an embedded YouTube video to not show on my site. The thing is there are two of the same embedded videos on the page and I would like to hide one.
There are 2 because one is generated by the wordpress theme (I have to paste the embed code somewhere in the theme settings) while the other is the direct youtube link pasted into the editor, the sole purpose being to auto generate featured image from the video thumbnail.
I would like to hide the second one, preferrably. I know it can easily be deleted by deleting the YouTUbe link in the text editor after publishing. But I want it to not to have to show at all at the time the page is initially published.
In attempt to hide any of the 2 videos, I have tried this CSS and it doesn't seem to work
div.entry-video-wrapper {display:none !important;}
div.entry-video iframe {display:none !important;}
div.fluid-with-video-wrapper {visibility:hidden !important;}
Is there anything I might be doing wrong?
Here's the sample page I'm working on http://wazobiajournal.tv/gallery/game-of-thrones-season-4-fire-and-ice-foreshadowing/
If you want to hide first video then use:
.entry-video .fluid-width-video-wrapper{
display: none;
}
If you want to hide second video then use:
.embed-youtube .fluid-width-video-wrapper{
display: none;
}
Although your code is also working and it seems that you have to clear cache to see it in action.
Note: Avoid using !important, it is not a good practice.
Try to clean cache maybe. I'm just trying to add display: none; for .entry-video-wrapper in CSS and it's work for me:
.entry-video-wrapper {
margin: 0 -30px;
display: none;
}