How to remove wordpress theme to override plugin css and js - javascript

guys!
I have a wordpress website that has installed Kalixo Magazine theme. I tried to install several widget menu plugins with interesting designs, but always the design( i think the css and js/jquery) is the default one from the theme.
How can I stop my theme to override the css of widget menu plugin so I can have a unique menu on my sidebar ?
Thank you in advance!

I think the problem has anything to do with your theme, rather it is with the plugins. I suspect that the plugin authors has not set a priority when they registered/hooked the stylesheets to wp_enqueue_scripts hook. This will cause the plugin style to load to early, and all styles later gets overridden by the themes' stylesheet
I would suggest, create a child theme, and then copy the complete stylesheet from the plugin to your child themes' stylesheet. The child themes' stylesheet will be loaded lastn so give this a try

The Best way to do this is de_register that plugin CSS from your WordPress site and then add the CSS of that plugin into your main style.css file. This way it will take only a single css file to render all the styling and will not overload your website.
add_action( 'wp_print_styles', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
wp_deregister_style( 'contact-form-7' );
//wp_deregister_style( 'digg-digg' );
wp_deregister_style( 'wp125style' );
}
and then load your style.css file using script_enque method for better result

you can fix this problem customize by your plugin style sheet. if you don't know your plugin, you can find it in this path wordpress\wp-content\plugins ....

Related

Wordpress Script and styles plugin include script option

I am trying to include script to in individual wordpress individual page, but include script is disabled and can't write into the richtextbox don't know why, check the snapshot attached !
This screen shot is not part of WordPress by default. It's probably part of your theme. The WP way to add js is wp_enqueue_script and for css wp_enqueue_style.
For theme specifics I recommend asking the theme author/support.

Adding Particles.js into DIVI theme

Im having troubles with adding JS particles.js "adding Particles.js" into DIVI them which can be found here
(particleJs)Even i add HTML,CSS,JS the result cant be seen, thank you for reply.
I would enqueuer the scripts in functions.php, also before updating this I would create a child theme and add a functions.php file to your child theme and make the changes there to ensure you don't loose the change come updating the theme
Creating a child theme -> https://codex.wordpress.org/Child_Themes
Encuing scripts -> https://developer.wordpress.org/reference/functions/wp_enqueue_script/
I know this is a bit late but for the sake of future generations - there is an easy way using the following WP-Plugin ParticleJs-WP-Plugin that is available form Github only. This plugin allows you to use the Particle.js JSON via copy&paste.
The first argument of the function is your ID-name that you can use in the divi builder CSS-section.
particlesJS('your-particle-css-id',{});
Of course you can as well make a child theme and enque the scripts in functions.php but the plugin does it all for you and is very lightweight.

jQuery upload, boostraper keeps overiding my css

I wanted to use PHP jQuery upload with the colored buttons, file gallery and all the cool stuff. However this means I have to use the bootstrapper for css with overrides my page settings (divs change settings for margins and such).
Is there a way to have the bootstrapper css just for the jQuery upload elements?
I tried putting the bootstrapper css links above my stuff and even added !important to all my css settings, but I cant get it working properly.
Place your site css file after all other CSS files, if your site shares any id's or classes with Bootstrap and is placed before Bootstrap then Bootstrap is last seen and re-declares those id's and classes which is why it's overriding your site's CSS so place the link below bootstrap.css :-)

Different bootstrap CSS files?

I downloaded a Web template which is based on bootstrap version 3.
Inside the template I found CSS files named bootstrap-cerulean.css, bootstrap-journal.css, bootstrap-classis.css. Although, I can not find a file named bootstrap.css. What do bootstrap-cerulean.css, bootstrap-journal & bootstrap-classis define or do? Are they themes for bootstrap? Do I still need to reference bootstrap.css if I reference one of the themes such as bootstrap-cerulean.css?
All the bootstrap.css styles are most probably modified and integrated with those three mentioned custom css files that you got with the template so no, you don't need to link the default bootstrap.css anymore unless you're planning to override certain elements on the page to the default style (which I would recommend using a new css file with the few changes kept there for overriding the template's style rather than linking the whole bootstrap.css to the template.

jQuery UI and using/not using themes

We're using jQuery UI Tabs at the top of the page (with no themes, using our own styles in the screen.css file) and using jQuery UI Datepicker later on down the page.
We want to use a jQuery Theme for the Datepicker, but we want to use our own styles for the Tabs. But as soon as we include the Themes, it (obviously) styles both completely in a particular style.
Is there anyway of setting a jQuery UI component to have a theme or not? Some sort of configurable? Or is it purely about the style class names and doing what you need there? ... It's just having blank (no themes) is easier to style from, then trying to undo what the Theme stylesheets are setting...
jQueryUI completely relies on the class names currently imported to the html page. They all of start with ui-
Since it's just plain CSS you can do one of two things:
cut and paste the classes you want from the theme's css into your own css file.
import the theme's css file and overwrite the classes you are interested in with your own css.
Check out the Advanced Theme Settings link on the right side of this download page, right under the theme dropdown box. There you can define a CSS scope to limit your theme to a particular portion of a page.
Then you just need to put that css scope class on a parent of the datepicker.

Categories