How do I adept CSS-rules to WordPress plugin

  • Michael

    (@kcmello)


    10 years, 1 month ago

    I’m trying to add a header slider(meteor slides) to my own built theme in WordPress: http://michaelpeyron.com/ but as you can see I can’t make the plugin images to inherit the CSS-rules of my “div id=banner”. I have tried to take away “#banner’s background-image:” but that messed up the whole structure.

    Another idea that occurred to me was to substitute "background-image:url("img/banner.png");"with "background-image:url("<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>");"but then we need to change the css file to a php file. And WordPress is in need of a “style.css” file.

    To keep it simple; what I need help with is to add a slider where my header image is right now.

    https://wordpress.org/plugins/meteor-slides/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Michael

    (@kcmello)

    10 years, 1 month ago

    I tried to add inline styling with: `<div id=”banner” class=”clearfix”
    style=”background-image:url(“<?php if ( function_exists( ‘meteor_slideshow’ ) ) { meteor_slideshow(); } ?>”); >` and I removed the property of “background-image:url” from my css file. But it did not work.

    Plugin Author Josh Leuze

    (@jleuze)

    10 years, 1 month ago

    That’s not how this slideshow function works. The function outputs HTML for the slide images and links, all in div containers. It can’t be put into a CSS file or used as CSS in any way.

    The slideshow and slide images have their own styles which are largely independent of your theme. There will be occasional styling conflicts, but it isn’t meant to adopt your theme’s styling, as that can break the slideshow.

    You should use the slideshow function as you would any other template tag and add it as PHP so that the HTML works properly, not as CSS.

    Then you can style the slideshow however you want in your theme, or you can use a custom slideshow stylesheet.

    Thread Starter Michael

    (@kcmello)

    10 years, 1 month ago

    Hi, thanks for the answer.
    I added the php shortcode <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?> inside my “div #banner”. But still the images breaks through the width/height of my banner.
    Is it any other way to make it work? Would it work if I copy #banner’s css code into meteor slide’s css?

    Plugin Author Josh Leuze

    (@jleuze)

    10 years, 1 month ago

    You have to specify a value in pixels for the slideshow height and width, it won’t work properly with “auto”.

    If you set the slideshow dimensions to match the size of the previous image banner, re-size the slide images to the same size, and re-upload the slide images to the slide posts after setting the slideshow dimensions the slideshow should fit perfectly.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How do I adept CSS-rules to WordPress plugin’ is closed to new replies.