Notice: To Install styles, click the "Show Css Code" button first. The install button will work after that.
The devs are no longer actively involved in the forum, so any bug reports regarding the extension or website should be sent to them directly at contact@userstyles.org.

Move Page Element on Twitch.tv

edited November 2018 in Style Requests [?]

New layout edit moved the view count down the page 1 tick.
I was able to move it back using Chrome inspect page/edit.
I would like a style to move the Channel info Bar:

channel-info-bar__viewers-wrapper tw-c-text-live tw-inline-flex"><div class="tw-inline-flex tw-tooltip-wrapper

to be in line with the Stream Title:

data-test-selector="channel-info-bar-title-text" title=

Please help! Thanks!

PIC: https://files.catbox.moe/o4mko6.png

Comments

  • That site's source code is horrifying. The order of the DOM isn't really conducive to changing that element's placement in any way other than absolute positioning.

    I didn't test it extensively, but this should work:
    @-moz-document domain("twitch.tv") {
    .channel-info-bar__content-right.tw-full-width {
    position: relative!important;
    }
    .tw-align-items-start.tw-flex.tw-flex-wrap.tw-justify-content-between.tw-mg-t-05 > div:last-child {
    position: absolute!important;
    top: -2px;
    right: 0;
    }

    /* restrict title width so it doesn't encroach on the new positioning */
    .channel-info-bar__content-right.tw-full-width > div:first-child {
    max-width: calc(100% - 300px)!important;
    }
    }
  • edited November 2018 [?]
    Thank you for taking the time.
    I created a new style, and pasted the code. It didnt work, and I also have this issue.

    error 1 : 1 Unknown @ rule: @-moz-document.

    edit: I cut out the .channel and the .tw code and used just that. It works.
Sign In or Register to comment.