Streamlist positioning issue

LessZoa
(@lesszoa)

9 years, 7 months ago

Aloha nui!

Love your plugin and we’ve been using it on our site.
We made the decision to utilize the Streamlist shortcode for our staffers instead of the status widgets due to site layout changes.

We _want_ the streamlists to appear below the video & chat sections. We’ve coded it that way – but the streamlists ALWAYS appear above all other content of the page, even when fudging with the CSS – with both wrappers and using the assigned classes of the shortcode. Is getting our staff pretty frustrated!

Is there something in the CSS of your plugin that is preventing us to custom? Part of the reason for my implementing your plugin is the flexibility of the CSS but for some reason, no matter what we do, the streamlists will always appear at the top of everything.

You can view a test page at http://stratics.com/test-2

https://wordpress.org/plugins/twitch-tv-embed-suite/

Viewing 1 replies (of 1 total)

Thread Starter

(@lesszoa)

We’ve built out code on the page as such:

<style>
.player{
  position:relative;
  border:solid 1px silver;
}
#twitch_streamlist{
  position:relative;
  border: solid 2px red;
  list-style-type: none;
  width:40%;
  float:left;
}
</style>

<div style="width:100%;display:block;clear:both;">
  [plumwd_twitch_stream channel="stratics" width="100%" height="500px"][plumwd_twitch_chat channel="stratics" width="100%" height="335px"]
</div>

<div style="display:block;clear:both;width:100%;position:relative;">
  <div style="width:30%;">
    WoWStratics<br />
    [plumwd_twitch_streamlist channel="StraticsWoW" videonum="1"]
  </div>
  <div style="width:30%;">
    Kirthag<br />
    [plumwd_twitch_streamlist channel="Kirthag" videonum="1"]
  </div>
</div>

But when rendered by a browser (Chrone & FF) it comes out like this:

<div class="entry-content">
		<ul id="twitch_streamlist" class="vertical">
<li ><a href="http://www.twitch.tv/straticswow/c/5057229">
<img src="http://static-cdn.jtvnw.net/jtv.thumbs/archive-562496514-320x240.jpg" alt="Metro - Classic Now - CM LATER! - Amazon Book Giveaway[480pHD]" title="Metro - Classic Now - CM LATER! - Amazon Book Giveaway[480pHD]"/></a></li>
</ul>
<ul id="twitch_streamlist" class="vertical">
<li ><a href="http://www.twitch.tv/kirthag/c/4546035">
<img src="http://static-cdn.jtvnw.net/jtv.thumbs/archive-542124444-320x240.jpg" alt="SotA PA-R7 - Test of Ghost Logging" title="SotA PA-R7 - Test of Ghost Logging"/></a></li>
</ul>
<style>
.player{
  position:relative;
  border:solid 1px silver;
}
#twitch_streamlist{
  position:relative;
  border: solid 2px red;
  list-style-type: none;
  width:40%;
  float:left;
}
</style>
<div style="width:100%;display:block;clear:both;">
  <script type="text/javascript" src="http://stratics.com/wp-content/plugins/twitch-tv-embed-suite/scripts/swfobject.js"></script>
<script type="text/javascript">
			var flashvars = {};
			flashvars.flashvars = "hostname=www.twitch.tv&channel=stratics&auto_play=true&start_volume=25";
			var params = {};
			params.allowfullscreen = "true";
			params.allowscriptaccess = "always";
			params.bgcolor = "#ffffff";
			params.scale = "showAll";
			params.wmode = "window";
			var attributes = {};
			attributes.id = "live_embed_player_flash";
			swfobject.embedSWF("http://www.twitch.tv/widgets/live_embed_player.swf", "myAlternativeContent", "100%", "500px", "9.0.0", "http://stratics.com/wp-content/plugins/twitch-tv-embed-suite/scripts/expressInstall.swf", flashvars, params, attributes);
		</script>
<div class="player">
<div id="myAlternativeContent"><a href="http://www.twitchtv.com/plumwd"><img class="alignnone size-full wp-image-10" alt="no-flash" src="http://stratics.com/wp-content/plugins/twitch-tv-embed-suite/images/618x376.gif" /></a></div>
</div> <div id="chat">
   <iframe frameborder="0" scrolling="no" class="chat_embed" src="http://twitch.tv/chat/embed?channel=stratics&popout_chat=true" height="335px" width="100%"></iframe>
 </div>
<br />
  <center><br />
  <!-- Ad Unit [1870] http://stratics.com-728x90-7 --></p>
<div id="switch_placeholder_7e827afdcf60d6b47916d4ee3b009122" class="switch_placeholder"></div>
<p>  <script type="text/javascript" src="//delivery.us.myswitchads.com/adserver/sat.js"></script><br />
  <script type="text/javascript"> __switch_obj.addInstance({"z":1870,"targetId":"switch_placeholder_7e827afdcf60d6b47916d4ee3b009122","width":"728","height":"90"}); </script><br />
  </center>
</div>
<div style="display:block;clear:both;width:100%;position:relative;">
<div style="width:30%;">
    WoWStratics<br />

  </div>
<div style="width:30%;">
    Kirthag<br />

  </div>
</div>
			</div><!-- .entry-content -->

Always forcing the ul for the streamlist to break out of any containing divs and/or hardcoded css.

Please advise.

Viewing 1 replies (of 1 total)

The topic ‘Streamlist positioning issue’ is closed to new replies.