Background / skin modification

Sarah's Avatar

Sarah

09 May, 2019 11:33 AM

Hi there, great plugin, but I'm trying to modify the skin according to your instructions and can't figure out where I'm going wrong. Please help!

I want to replicate something similar to this: https://caiphotography.co.uk

I would like to create my own custom skin to do this, but so far I have not been able to affect any changes using this method. The only way that I have been able to successfully change the background colour, for example, is by modifying the custom.css file of my Wordpress theme. I followed your instructions to do this and was able to change the slider background to red

#new-royalslider-123,
#new-royalslider-123 .rsOverflow,
#new-royalslider-123 .rsSlide,
#new-royalslider-123 .rsVideoFrameHolder,
#new-royalslider-123 .rsThumbs {
    background: red !important;
}

I then created my own custom skin folder and css as per your tutorial. I was able to successfully see a new 'My Custom Skin' appear on the drop down menu of the edit slider page. However, the changes I write into the style sheet don't seem to take any effect.

For good measure, I also tried to modify one of your plugin's existing custom style sheets - i.e. I followed the above instructions and I tried to change the 'default-inverted' skin background from #eee / #222 to red. But it didn't do anything. Sorry if I am missing something obvious. I thought that if I changed this:

/* Background */
.rsDefaultInv,
.rsDefaultInv .rsOverflow,
.rsDefaultInv .rsSlide,
.rsDefaultInv .rsVideoFrameHolder,
.rsDefaultInv .rsThumbs {
background: #EEE;
color: #222;
}

To this:

/* Background */
.rsDefaultInv,
.rsDefaultInv .rsOverflow,
.rsDefaultInv .rsSlide,
.rsDefaultInv .rsVideoFrameHolder,
.rsDefaultInv .rsThumbs {
background: #red !important;
}

...then the same effect would happen, but the slider background is still black - nothing happens! What do I do?

Thanks

Sarah

  1. Support Staff 1 Posted by Dmitry Semenov on 09 May, 2019 05:09 PM

    Dmitry Semenov's Avatar

    Hello,

    Make sure that you rename class in CSS file based on your skin ID, step 5 at http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-add...

    If you won't be able to resolve - please link to the page with the slider that isn't working.

  2. 2 Posted by Sarah on 10 May, 2019 10:32 AM

    Sarah's Avatar

    Hello Dmitry,

    Thanks for your reply. So I have added this in my functions.php file as follows:

    ---------------------

    //Add custom skin to homepage slider
    function new_royalslider_add_custom_skin($skins) {
          $skins[‘filmStoreTeal’] = array(
               'label' => 'Film Store Teal',
               'path' => get_stylesheet_directory_uri() . '../../../../../../plugins/new-royalslider/lib/royalslider/skins/film-store-teal/film-store-teal.css' // get_stylesheet_directory_uri returns path to your theme folder
          );
          return $skins;
    }
    add_filter('new_royalslider_skins', 'new_royalslider_add_custom_skin', 10, 2);

    ---------------------

    And this is what my skin css looks like - named 'film-store-teal.css'

    /* Background */
    .filmStoreTeal,
    .filmStoreTeal .rsOverflow,
    .filmStoreTeal .rsSlide,
    .filmStoreTeal .rsVideoFrameHolder,
    .filmStoreTeal .rsThumbs {
    background: #3392a5 !important;
    }

    /***************
    *
    * 1. Arrows
    *
    ****************/

    .filmStoreTeal .rsArrow {
    height: 32px;
    width: 32px;
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 21;
    }

    ---------------------

    Is this correct? I wasn't sure if I had named the classes correctly...

    If so, according to the above I should be seeing a teal background, correct?

    I also attach a screen grab of my dashboard so you can see that I have managed to get the new skin to load as an option in the settings page:

    The preview link to my staging site is: http://77.104.131.74/~filmstor/

    When Film Store Teal skin is selected, the background just defaults to white (as per the 'Light' skin) and the arrow controls are missing.

    Please let me know what you think I might be doing wrong...

    Again, when I use the Custom CSS editor for my theme to insert the code as follows, it works, however, I would rather use the custom skin method.

    #new-royalslider-1,
    #new-royalslider-1 .rsOverflow,
    #new-royalslider-1 .rsSlide,
    #new-royalslider-1 .rsVideoFrameHolder,
    #new-royalslider-1 .rsThumbs {
    background: #3392a5 !important;
    }

    Thanks for your help.

    Sarah

  3. Support Staff 3 Posted by Dmitry Semenov on 10 May, 2019 10:41 AM

    Dmitry Semenov's Avatar
    1. You're using incorrect quotes in line $skins[‘filmStoreTeal’] = array(. You should be using ' or ", not typographic curly quotes.
    2. Path to CSS file is incorrect, your current one points to:

    http://77.104.131.74/plugins/new-royalslider/lib/royalslider/skins/...

  4. 4 Posted by Sarah on 10 May, 2019 11:10 AM

    Sarah's Avatar

    Ah, I would never have seen that! Thank. Is this correct now? Still not sure if I'm getting the css file path right..,.

    //Add custom skin to homepage slider
    function new_royalslider_add_custom_skin($skins) {
          $skins[‘filmStoreTeal’] = array(
               'label' => 'Film Store Teal',
               'path' => get_stylesheet_directory_uri() . 'http://77.104.131.74/~filmstor/public_html/wp-content/plugins/new-royalslider/lib/royalslider/skins/film-store-teal/film-store-teal.css' // get_stylesheet_directory_uri returns path to your theme folder
          );
          return $skins;
    }
    add_filter('new_royalslider_skins', 'new_royalslider_add_custom_skin', 10, 2);

  5. Support Staff 5 Posted by Dmitry Semenov on 10 May, 2019 03:11 PM

    Dmitry Semenov's Avatar

    Be careful with placing files in the plugin directory, as if it'll be updated - they'll get overwritten.

    Ideally, you should place it in your child theme folder, or in wp-uploads/ subdirectory.

    For example, to get URL to wp-content/ directory you may use:

      'path' => get_option('siteurl') . 'wp-content/'
    

    then just continue to wherever you placed the CSS file.

  6. 6 Posted by Sarah on 13 May, 2019 09:38 AM

    Sarah's Avatar

    Hi Dmitry,

    I've done everything you've mentioned but still this background colour change doesn't take effect.

    /* Background */
    .filmStoreTeal,
    .filmStoreTeal .rsOverflow,
    .filmStoreTeal .rsSlide,
    .filmStoreTeal .rsVideoFrameHolder,
    .filmStoreTeal .rsThumbs {
    background: red !important;
    }

    As mentioned earlier, I also tried to do the same change by modifying another existing skin within the plugin, I inserted the

    background: red !important;

    line in the 'default-inverted' skin background from #eee / #222 to red. But it didn't do anything.

    It seems like the filmStoreTeal skin I've created seems to behave unexpectedly. I try to make the background colour red but it defaults to white and also the button controls disappear, not sure why they are not showing up or what they are linking to.

    Sorry if this is causing confusion but I am not sure why this is happening, especially when the code works if I change it in my theme's custom.css.

    Thanks...

  7. Support Staff 7 Posted by Dmitry Semenov on 13 May, 2019 05:35 PM

    Dmitry Semenov's Avatar

    Hello,

    Are you adding skin just to modify the background? If so, you may add style that does that to your theme custom CSS option or style.css file

    The link that you sent previously isn't working anymore, I need it to tell you why your custom skin isn't applying,

  8. 8 Posted by Sarah on 14 May, 2019 01:49 PM

    Sarah's Avatar

    Hi,

    I am hoping to achieve quite a few changes which would make the slider more like this:

    https://caiphotography.co.uk
    http://www.clearcut.cc

    Changes are:
    - I'd like to apply a background png as an overlay image to the nearby slides (e.g. a striped blue/teal coloured pattern)
    - I'd like arrows to hover over the main image
    - I'd like to use custom arrow styles that I create myself in illustrator

    For this reason, I thought that applying a skin might be the best route. Would it work in custom.css? However, if you offer customisations that would be ideal for me! Do you quote for additional work? If I were able to supply all the graphics would you be interested to quote for us to make the tweaks?

    In the meantime, I have another problem now since adding content further down the page, the slider is scrolling right, I've attached a screen grab for info - and also the link below should work.... could you help with this?

    It's happened ever since I inserted a couple of logo carousels below. They're from another plugin, but the same thing happened when I added a second royal slider.

    Cheers for your help -

    Sarah

  9. 9 Posted by Sarah on 14 May, 2019 02:19 PM

    Sarah's Avatar

    Sorry, staging link is: http://77.104.131.74/~filmstor/

  10. Support Staff 10 Posted by Dmitry Semenov on 14 May, 2019 07:14 PM

    Dmitry Semenov's Avatar

    For this reason, I thought that applying a skin might be the best route. Would it work in custom.css?

    You can make it work either way, it's just CSS.

    Do you quote for additional work?

    Not at the moment, sorry.

    In the meantime, I have another problem now since adding content further down the page, the slider is scrolling right, I've attached a screen grab for info - and also the link below should work.... could you help with this?

    Not sure if I can reproduce the issue on the page that you linked. Try applying overflow:hidden to the parent container of your carousels or the slider.

    This technique also might be helpful http://help.dimsemenov.com/discussions/problems/4068-visiblenearby-...

  11. 11 Posted by Sarah on 15 May, 2019 10:21 AM

    Sarah's Avatar

    That helped, thank you. I'll try and persevere with the custom.css...

    Best,

    Sarah

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac