How to have titles of other posts show up ON the background image

jonathan's Avatar

jonathan

18 Sep, 2018 06:46 PM

I want to achieve something like this: https://mashable.com/?europe=true
So the background image with title and on top of that the titles of the posts on the right top.
I have this as markup now
<div class="rsContent">
  {{image_tag}}
  <div class="rsCaption">
  <h3><a href="{{link_url}}">{{title}}</a></h3>
  </div>
    {{html}}
  <div class="rsTmb">
    <h3>{{title}}</h3>
  </div>
  {{animated_blocks}}
  {{#link_url}}
  <a class="rsLink" href="{{link_url}}">{{title}}</a>
  {{/link_url}}
</div>

Any ideas?

  1. Support Staff 1 Posted by Dmitry Semenov on 18 Sep, 2018 07:39 PM

    Dmitry Semenov's Avatar

    Hello,

    Not sure if I fully understood what you need. The plugin can show one post per slide, not multiple.

    If you want thumbnails to be overlapped over the main sliding area instead of being to the side of it - it's possible to implement:

    • In "Thumbnails, bullets, tabs" section of slider options, uncheck "Fit thumbs in viewport"
    • Adjust the position of thumbnails container to your need via CSS. It has CSS selector .rsNav.
  2. 2 Posted by jonathan on 18 Sep, 2018 08:33 PM

    jonathan's Avatar

    Thanks Dmitry. The unchecking "Fit thumbs in viewport" does work.

    Now I want the title of the thumbs to have a transparent background so you have the same effect as the mashable site.

    Do I change the classes on .rsThumb?
    How do I do that?

  3. Support Staff 3 Posted by Dmitry Semenov on 19 Sep, 2018 07:55 AM

    Dmitry Semenov's Avatar
    .rsThumb, .rsThumbs {
        background: none !important;
    }
    

    ... will remove the background of individual thumbnails and their container.

  4. 4 Posted by jonathan on 25 Sep, 2018 10:36 AM

    jonathan's Avatar

    Sorry I tried, but that doesnt work.

    See http://businessformission.org
    Password: business

    Any idea what would work?

  5. Support Staff 5 Posted by Dmitry Semenov on 25 Sep, 2018 12:15 PM

    Dmitry Semenov's Avatar

    Not fully understand what you mean, as thumbnails do not have background on the page that you linked. Grey background is the slider itself. http://help.dimsemenov.com/kb/wordpress-royalslider-faq/wp-how-to-c...

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