Changing the look of the widget.

  • Hello there!

    First off, thanks for the plugin! I ‘think’ its exactly what i’m looking for. I’m going to say now I am not experienced nor great at such coding, i’ve merely created a website for my guild by trial and error and mainly research from different websites.

    We’re looking to have 2 streams on our sidebar and thats why I love this plugin. However, i’m not entirely sure how to change the look using CSS.

    I’m trying to make it look like the following (note, that was done on paint as i’m at work xD )

    https://i.imgur.com/dXAhucJ.png

    Basically when they’re offline it would show:
    The name of the streamer using <h4></h4>
    The Guild logo (Image)
    Then Offline

    Then when online:
    The name of the streamer using <h4></h4>
    Small Stream Embedded
    Then Live

    Is this possible? It sounds quite complex when i’m typing it out but in my head its seems very simple.
    I dont expect anyone to literally write the code out for me but give me some sort of direction and/or pointers to where to begin as I literally have no idea >.<

    With thanks,

    Josh ??

    P.S – Website is Metamorphic

    https://www.ads-software.com/plugins/live-stream-badger/

Viewing 1 replies (of 1 total)
  • Plugin Author Tadas Krivickas

    (@tkrivickas)

    Hi, and sorry for the late reply. This forum obviously does not notify about the new threads ??

    Plugin does not support embeds in the widget (you can do it separately though using the shortcode). Let’s say if you were to use screencap (aka preview), then it’s easily doable –

    Setup widget: display – screen capture, hide images when offline.

    Then add a filter to this hook (google more about WP filters and add this to your functions.php): lsb_status_widget_item_with_image_format and return your own format. (this is used to output HTML for each list item). Default is this:

    <li class="lsb-status-widget-list-item %%status_class%%">
  <span class="lsb-status-widget-title">
  <a href="%%url%%" target="_blank">%%title%%</a>
  </span>
  <span class="lsb-status-widget-indicator %%status_class%%">%%status_indicator%%</span>
  <span class="lsb-status-widget-image">
   <a href="%%url%%" target="_blank"><img src="%%image_src%%"></a>
  </span>
</li>

    You could change it to what you actually need, like wrap title in h4 tags. And for the guild image, you can output it together with screencap and then hide when stream is online: .lsb-on .whatever-is-your-guild-logo-element-class { display: none; }.

    For the layout, setting display to block will achieve what you need.

Viewing 1 replies (of 1 total)
  • The topic ‘Changing the look of the widget.’ is closed to new replies.