I am relatively new to the WordPress. I am using free version of the WonderPlugin slider in my site. There is a link coming in the top left corner of the slider showing wonderplugin.com.
Is it possible to remove that link from the free version of the WonderPlugin.
I am using WordPress 4.0 and WonderPlugin Slider Free Version 2.6
First of all if you want to use free version of the WondePlugin, you should be fine to show the wonderplugin link on the slider. You can avoid that link by using commercial version of plugin.
As far as free version is concern, the link can be removed by the custom css.
On the edit slider screen of the plugin click on Option tab.
Click on Advance Option and put following css in the Custom CSS box.
div.amazingslider-box-1 :nth-child(3) {
visibility: hidden;
}
This will hide the link.
CSS
.wonderpluginslider-container{
display: none
}
JS
jQuery('.wonderpluginslider-container')
.show()
.find('a[href="http://www.wonderplugin.com/wordpress-slider/"]')
.parent().remove();
Thanks for the answers but it doesn't work with the WonderPlugin Grid Gallery Free Version 2.2., which I was looking for when I stumpled over the thread. To remove the watermark from the grid gallery, go to wonderplugin-carousel/engine/wonderplugingridgallery.js and look for
<div style="display:none;position:absolute;top:4px;left:4px;padding:2px
Change the display:block to display:none and the watermark is no longer visible.
You have to search for:
wpositioncssdefault:"display:block;position:absolute;bottom:8px;right:8px; line 162
in the wonderplugincarousel.js and then you change display:block; to display:none;. Cheers!
wonderplugincarousel.js
Line No.259 replace display:block with display:none,
change visibility:visible to visibility:hidden
and remove !important
and change mklink.css("visibility")=="visible" to mklink.css("visibility")==""
Open engine\wonderplugingallery.js and search for var commonOptions. Then change
var commonOptions = {
/* other options */
...
fv: true,
...
}
to
var commonOptions = {
/* other options */
...
fv: false,
...
}
and the plugin will take care rest(no custom CSS and JS headache).
I have checked it with Version 8.6 and it's working.
These solutions are all updated and solved by WonderPlugin admins. But here is the new solution for WonderPlugin Portfolio Grid Gallery (Version 11.8):
open: engine\wonderplugingridlightbox.js
on line 66 :
title='WordPress Gallery'><div style='display:block;width:180px;height:20px;text-align:center;border-radius:3px;-moz-border-radius:3px
Change display:block to display:none
And here we go!
Open your style.css and then put the code below
div.html5gallery-container-0
div.html5gallery-box-0
div.html5gallery-elem-0
div.html5gallery-elem-img-0
a{
visibility: hidden;
}
A simple solution
div.amazingcarousel-image :nth-child(3) { visibility: hidden;}
because free version link is the 3rd child div in parent div with class- amazingcarousel-image
search for this.options.watermarktext=this.options.vermk; and replace this.options.vermk with nil
Good way to purchase the plugin and it is removed automatically but in free version you can add the following css to make it invisible.
div.amazingslider-box-1 div:nth-child(3) {
visibility: hidden !important;
width:0 !important;
height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
There is no style.css file. There are only wonderpluginslider.css and wonderpluginsliderengine.css
So do you know where the file and code?
Also i inspected that element on my internet browser and i saw this codes:
<div class="amazingslider-text-box-1" style="display: block;">
<div class="amazingslider-text-wrapper-1" style="width: 100%; height: auto; position: absolute; left: 0px; bottom: 0px; margin-bottom: 0px;"></div>
</div>
<div style="display:block;position:absolute;top:6px;left:6px;font:12px A…or:#fff;opacity:0.9;filter:alpha(opacity=90);cursor:pointer;"
<a target="_blank" title="Responsive jQuery Slider" style="text-decoration:none;font:12px Arial,Tahoma,Helvetica,sans-serif;color:#333;" href="http://wonderplugin.com/wordpress-slider/">
WordPress Slider Free Version
</a>
</div>
"Wonder Plugin" (Free Wordpress Slider Plugin)
Related
I want to add some css to fix rtl of this web page: http://homedoctor.sa/ar/insurance/
I tried the css on chrome dev tool and live css editor, and it seems to work perfectly. However, when I add the same code through wordpress (Appearance > Customize > Additional CSS) it shows no change.
I have tried adding !important but that didn't work either. enter image description here
Here's the css:
.rtl .elementor-7410 .elementor-element.elementor-element-3b979d8f .elementor-heading-title {
font-size: 35px;
margin-top: 17px;
}
.rtl .elementor-7410 .elementor-element.elementor-element-18d64e63 .elementor-image-box-content .elementor-image-box-title {
float: right;
}
.elementor-7410 .elementor-element.elementor-element-3b979d8f {
text-align: center;
}
.elementor-7410 .elementor-element.elementor-element-5d12ca7f .elementor-heading-title {
text-align: center;
}
I see you're using elementor page builder to create your pages. The thing with elementor is that it's css is pasted in Elementor edit page and not in the Appearance > Customization > Additionoal CSS.
You can add them in the Elementor > Navigate to Section > Click on Section where you want to place this > Goto Advanced options in left Elementor Panel > Custom CSS and paste your CSS over there.
This should solve your problem and can help you edit your pages.
Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,
On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);
I have a wordpress site, http://watershedgeo.staging.wpengine.com/#, and I'm using a theme and it's built in nav menu.
I have modified it to use font awesome icons after the menu items that have dropdown items. I'm using the right angle, >, but I'd like to use a plugin or css to animate this so that when the dropdown comes down the icon rotates to 'V'.
I'd like to not have to build any JS into this and I know it can be done with CSS I'm just not sure of the best way to do this that also works well in the WP environment.
Current CSS:
.fusion-megamenu-icon {
display: inline;
margin-left: 12px;
float: right;
}
.fusion-megamenu-icon:hover {
transform: rotate(90deg);
}
Add Some Custom CSS to your Code
Try This
CSS
ul.fusion-menu > li.menu-item-has-children:hover a i.fa{
transform:rotate(90deg);
}
I am using a WordPress theme called Divi. This isn't a WordPress question. There are a number of provided social media icons, but I need a Soundcloud icon, and that is not provided. I'm not understanding how these icons are populating the page as they don't seem to be graphics, but rather are a font? However, I am unable to tell from the source code what is going on (inexperience).
What I'm trying to do is either add an icon of my design, or replace an existing icon. Can someone help point me in the direction if where I should be looking within my files to find the actual icons?
You can see a live site here and the icons are at the top right:
http://rattletree.com/wordpress2/
The dev code has this for the Facebook icon:
<ul class="et-social-icons">
<li class="et-social-icon et-social-facebook">
<a href="#" class="icon">
<span>Facebook</span>
</a>
</li>
</ul>
And the css has this:
.et-social-facebook a.icon:before {
content: "\e093";
}
#top-header .et-social-icon a {
font-size: 14px;
}
So that makes me think this is a font, but I don't know how or where I can edit that font? Thanks for any help!
This looks like the font pack you are using:
http://www.elegantthemes.com/blog/resources/elegant-icon-font
It doesn't look like it has an icon for soundcloud, but you could use the cloud one:
So just add this to the style sheet:
.et-social-soundcloud a.icon:before {
content: "\e002";
}
Also, here's a tutorial:
https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
To add an icon of your design, add the following code to your stylesheet.
#top-header .et-social-icon.soundcloud a {
width: 15px;
height: 25px;
}
.soundcloud a.icon:before {
content: "";
background: url('https://placehold.it/15x25') 100% 100% no-repeat;
height: 100%;
width: 100%;
display: inline-block;
}
Make sure you create an icon, add the icon image to theme folder and update the url in the above code to point to that image.
Also add the class soundcloud to your menu in WordPress backend.
apologies for the question again my last question was poorly asked and code was missing.
I'm having trouble with my plugin I'm trying to implement the wordpress media uploader, unfortunately iv ran into a problem
i have it working and showing up when a upload button is clicked but it shows only half of the uploader
i think i found the problem for some reason the TB_window div opens with
margi-left: -334px;
i adjusted this in fire fox (fire bug) to auto it appears normally e.g. the current div looks like this.
<div id="TB_window" style="width: 670px; height: 351px; margin-left: -335px; top: 20px; margin-top: 0pt; display: block;">
and if i change it to
<div id="TB_window" style="width: 670px; height: 351px; margin-left auto; margin-right: auto; top: 20px; display: block; position: fixed;">
there must be a simple hook / way to change the css for this box for my plugin
how can i do this ?
Well I think the easiest would be to just edit the CSS file for your Wordpress installation. Log into Wordpress and navigate to Appearance -> Editor. Then find styles.css in bottom right. Add your CSS markup to here.
div#TB_window { margin-left: auto; }
If that doesn't work then you can insert code into the head of your blog using a callback.
add_action('wp_head', 'InsertMyStyleSheet');
function InsertMyStyleSheet() {
echo '<link href="pathToStylesheet" type="text/css" rel="stylesheet" />
}
And add your own CSS for your theme there.
As long as relying on Javascript isn't a problem, you could try the following:
_tbw = document.getElementById('TB_window');
_tbw.style.margin = "auto";
Or, if you're using jQuery:
$(document).ready(function(){
var _TBwindow = $('#TB_window');
_TBwindow.css('margin-left', 'auto');
}