Custom default template / Edit templates

heyvenner's Avatar

heyvenner

25 Mar, 2013 06:15 AM

Hi there, I like your wordpress plugin too, it's super awesome!

I need to custom the default template as video gallery, and disable all template at the RoyalSlider Builder except video galley template.

How i can do this?

  1. Support Staff 1 Posted by Dmitry Semenov on 25 Mar, 2013 04:48 PM

    Dmitry Semenov's Avatar

    Hi,

    There is new_royalslider_templates filter that allows you to modify templates, print_r to see how they look.

    add_filter('new_royalslider_templates', 'new_royalslider_edit_templates', 10, 2);
    function new_royalslider_edit_templates($templates) {
        print_r($templates);  // modify $templates array here (add/remove/edit)
          return $templates;
    }
    

    You may find existing templates in new-royalslider/classes/NewRoyalSliderOptions.php , function getRsTemplates

    Dmitry

  2. Support Staff 2 Posted by Dmitry Semenov on 09 Sep, 2013 08:54 PM

    Dmitry Semenov's Avatar

    e.g.

    add_filter('new_royalslider_templates', 'new_royalslider_edit_templates', 10, 2);
    function new_royalslider_edit_templates($templates) {
          $templates['your_template'] = array(
                        'label' => __('Content slider with tabs', 'new_royalslider'),
                        'template-css' => 'http://the-path-to-template-css-file/template.css',
                        'template-css-class' => 'rsContentSlider',
                        'b-pos' => '-133px -165px',
                        'template-html' => 
    '<div>
      {{image_tag}}
      {{thumbnail}}
      {{html}}
      <h3>{{title}}</h3>
      <p>{{description}}</p>
      {{#link_url}}
      <a href="{{link_url}}">{{title}}</a>
      {{/link_url}}
      {{animated_blocks}}
    </div>',
                        'options' => array(
                            
                            "sopts" => array(
                                "width" => "100%",
                                "height" => "500",
    
                                "controlNavigation" => "tabs",
                                "autoScaleSlider" => "false", 
    
                                "loop" => "false",
                                "numImagesToPreload" => "4",
    
                                "autoHeight" => "true",
    
                                "arrowsNav" => "true",
                                "arrowsNavAutohide" => "false",
                                "arrowsNavHideOnTouch" => "false",
    
                                "keyboardNavEnabled" => "true",
                                "transitionType" => "move",
                                "fadeinLoadedSlide" => "false",
                                "imageScaleMode" => "none",
                                "imageAlignCenter" => "false",
                                "globalCaptionInside" => "true"
                            )
                        )
    
                    );
          return $templates;
    }
    
  3. 3 Posted by will on 19 Jan, 2019 04:50 AM

    will's Avatar

    Dmitry, I can't figure out how to add 2 custom templates. I tried having a second function and array, but only got one of the css pages loaded. so then I tried combining the two custom templates into one larger array (which is kind of what you have in new-royalslider/classes/NewRoyalSliderOptions.php , function getRsTemplates, but it only loaded one template. So, how do I have two custom templates in functions, and have them each load their own css page (not skin).

  4. 4 Posted by will on 19 Jan, 2019 05:12 AM

    will's Avatar

    I tried the same thing you do on skins, ie :
    function new_royalslider_edit_templates($templates) {
          $templates['template1'] = array(
              'label' => __('Content slider with tabs', 'new_royalslider'),
                        'template-css' => 'http://the-path-to-template-css-file/template.css',
                        
          );
         $templates['template2'] = array(
             'label' => __('template2', 'new_royalslider'),
                        'template-css' => 'http://the-path-to-template-css-file/template2.css',
                        
          );
          return $templates
    }
    but that doesn't work with new_royalslider_edit_templates. I just got one template from that.

  5. 5 Posted by will on 19 Jan, 2019 05:25 AM

    will's Avatar

    So both of my methods give me the html and options correctly, but if I have 2 templates, they each load both css files, so I guess they can't be unique. Is there a way to add a custom class (like template-1) to the first div that looks like this:
    <div id="new-royalslider-10" class="royalSlider new-royalslider-10 rsUni rsContentSlider rsHor rsFade rsWithBullets"
    i wouldn't be able to have separate style sheets, but I could at least style the sliders differently using the one sheet.

  6. 6 Posted by will on 19 Jan, 2019 05:30 AM

    will's Avatar

    Sorry, worked that last part out myself - that's what template-css-class is for in the array. Okay, I'd still love to hear that they can have their own css pages, but at least I can style them differently.

  7. Support Staff 7 Posted by Dmitry Semenov on 19 Jan, 2019 06:22 AM

    Dmitry Semenov's Avatar

    Hello,

    To change class on the root element of the slider you need to select your custom skin in the General Options section.

    So to apply different styles for different skins you may use CSS:

    .template1 .royalSlider {
      background: 10px solid red;
    }
    
    .template2 .royalSlider {
      background: 10px solid blue;
    }
    

    The code that you posted:

    <div id="new-royalslider-10" class="royalSlider new-royalslider-10 rsUni rsContentSlider rsHor rsFade rsWithBullets"
    

    ... suggests that you still have universal skin selected (rsUni).

  8. 8 Posted by will on 19 Jan, 2019 02:09 PM

    will's Avatar

    Wow Dmitry, really amazing how quick you always answer support posts! Thanks.

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