Stop the "Active Background" being clickable

  • Does anyone know a way to stop the "active background" from being clickable in mobile view -- so that users have to click the actual links rather than the entire cell?

    I'm thinking "$wcfTabularBoxBorderInnerborderInner" and "$wcfTabularBoxBackgroundActivebackgroundActive" should be the places to look, but not sure...

    (There is a reason for this, but I thought it would get a better response in its own thread)

    Edited 2 times, last by Moonclamp (November 14, 2017 at 2:32 PM).

  • CSS
    @include screen-md-down {
        .wbbThread > .mobileLinkShadow {
            display: none;

    The .mobileLinkShadow element spans the entire row and is basically a transparent link, the above code will hide it entirely. I'm asuming you're talking about the thread list here.

  • CSS
    @include screen-md-down {
        .wbbThread > .mobileLinkShadow {
            display: none;

    The .mobileLinkShadow element spans the entire row and is basically a transparent link, the above code will hide it entirely. I'm asuming you're talking about the thread list here.

    Thread list, forum list, latest posts, activities and everything where the cell becomes a button.

    Anyway, this stops it being a clickable link, but it still highlights / changes the colour on clicking which may be a bit confusing.

    Highlighting is fine on mouseover in desktop mode, but not clicking in mobile view.

  • Almost there :)

    I had to combine it with the following from that other thread in order to get it to work:

    However, I need to exclude the recent activities section from this and keep that as clickable.

  • I've made a few changes here:

    1. I'm using the screen-sm-down mixin instead of a fixed value, this is effectively the same value as before, but is now guranteed to be in sync with all other parts of the software.
    2. All selectors now apply inside .messageGroupList only, this covers all true message lists, but won't affect the recent activities.
    3. The bottom three selectors have been grouped. Note that because they're inside the .messageGroupList they automatically become .messageGroupList .mobileLinkShadow, .messageGroupList .badge, …. It reduces clutter while still having these rule focused as much as possible.

    One last word on the .badge-selector: Please be extra careful when targeting this class! It used to be a very specific class in the early versions, but has since become a more-or-less generic class that gets used far more often than you would expect. Setting it to display:none without limiting the scope is pretty much the tactical nuclear weapon for your mobile UI ;)

  • It didn't like that at all...

    Requested URL
    WoltLab Suite
    Error Message
    Could not compile SCSS: unexpected }: failed at `` line: 96
    File (Line)
    /var/www/vhosts/ (289)
    1. /var/www/vhosts/ (102): wcf\system\style\StyleCompiler->compileStylesheet(…)
    2. /var/www/vhosts/ (133): wcf\system\style\StyleCompiler->compile(…)
    3. /var/www/vhosts/ (534): wcf\system\style\StyleHandler->getStylesheet(…)
    4. /var/www/vhosts/ (320): include(…)
    5. /var/www/vhosts/ (308): wcf\system\template\TemplateEngine->display(…)
    6. /var/www/vhosts/ (103): wcf\page\AbstractPage->show(…)
    7. /var/www/vhosts/ (83): wcf\page\AbstractPage->__run(…)
    8. /var/www/vhosts/ (94): wcf\system\request\Request->execute(…)
    9. /var/www/vhosts/ (9): wcf\system\request\RequestHandler->handle(…)
    Error Message
    unexpected }: failed at `` line: 96
    File (Line)
    /var/www/vhosts/ (2142)
    1. /var/www/vhosts/ (725): Leafo\ScssPhp\Parser->throwParseError(…)
    2. /var/www/vhosts/ (581): Leafo\ScssPhp\Parser->popBlock(…)
    3. /var/www/vhosts/ (140): Leafo\ScssPhp\Parser->parseChunk(…)
    4. /var/www/vhosts/ (160): Leafo\ScssPhp\Parser->parse(…)
    5. /var/www/vhosts/ (286): Leafo\ScssPhp\Compiler->compile(…)
    6. /var/www/vhosts/ (102): wcf\system\style\StyleCompiler->compileStylesheet(…)
    7. /var/www/vhosts/ (133): wcf\system\style\StyleCompiler->compile(…)
    8. /var/www/vhosts/ (534): wcf\system\style\StyleHandler->getStylesheet(…)
    9. /var/www/vhosts/ (320): include(…)
    10. /var/www/vhosts/ (308): wcf\system\template\TemplateEngine->display(…)
    11. /var/www/vhosts/ (103): wcf\page\AbstractPage->show(…)
    12. /var/www/vhosts/ (83): wcf\page\AbstractPage->__run(…)
    13. /var/www/vhosts/ (94): wcf\system\request\Request->execute(…)
    14. /var/www/vhosts/ (9): wcf\system\request\RequestHandler->handle(…)
  • I had a feeling it was but couldn't see it myself. Thank you :)

    However, it doesn't do what I've been trying to make it do. This is a test style being used in my admin area:

    If you look at the bit I circled, this is after I clicked the non-text area - it remains highlighted after clicking. My idea if for this area not to react to anything at all.

  • Unfortunately, this isn't something I can help you with by staring at an image, it doesn't show where this taken from, nor does it give me any clue about other selectors that could or could not affect this. Without an exact link (and which style, if differing from the default) there is little I can do to help you.

  • It's the list of threads in an admin part of my forum (no public access).

    The dark area is the result of pressing the whitespace (non linked) area with my finger.

    I think that, with everything you posted here, and the help in the other thread, I may be able to work this out now - thank you :)

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!