Skip to content
Sudonix

Switch between list and card view function

Moved Let's Build It
107 4 25.7k 1
Log in to reply

Related Topics
  • phenomlabundefined

    Ch..ch..ch..ch..changes!

    Announcements themes layout
    16
    2
    15 Votes
    16 Posts
    2k Views
    JACundefined
    @phenomlab of course, to be recognised is fantastic. @phenomlab said in Ch..ch..ch..ch..changes!: Sadly, no. Web crawlers and scrapers are often JS based and read text only, so styles don’t have any bearing. I’ve read mixed things about this, but no that does make sense, it was something I read a many years back when using Wordpress.
  • DownPWundefined

    Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    12k Views
    DownPWundefined
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • Hariundefined

    Rotating Star Effect

    Solved Let's Build It wordpress css
    17
    12 Votes
    17 Posts
    3k Views
    Hariundefined
    @phenomlab thanks a lot for these, both of the below are awesome! https://codepen.io/bennettfeely/pen/vYLmYJz https://codepen.io/C-L-the-selector/pen/MWZbWBo
  • DownPWundefined

    chat list navbar

    Solved Customisation css navbar chat menu
    30
    2
    3 Votes
    30 Posts
    7k Views
    DownPWundefined
    No no it’s ok @phenomlab I just comment the 2 lines mentionned aboves
  • DownPWundefined

    Blinking text Effect

    Customisation nodebb text effect css
    3
    5 Votes
    3 Posts
    1k Views
    DownPWundefined
    @phenomlab I love it too @phenomlab said in Blinking text Effect: Has that “broken neon light” look that you see in films. It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too
  • DownPWundefined

    [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    237
    49 Votes
    237 Posts
    86k Views
    DownPWundefined
    @baris said: You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected. I modified the JS Fancybox code now and this code and it seem better // --------------------------------------------- // Fancybox Media Reader (Without Website Logo) // --------------------------------------------- if (top.location.pathname !== '/login') { $(window).on('action:posts.loaded', function(data) { console.log("Polling DOM for lazyLoaded images to apply Fancybox"); $(document).ready(function() { $('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); }); }); }); } if (top.location.pathname !== '/login') { $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault() // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); } // Chat fancybox - fires when chat module loaded and AJAX calls new chat $(document).ready(function() { $(window).on('action:chat.loaded', function(data) { // >>> Se limiter au contenu principal uniquement <<< $('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { var newHref = $(this).attr("src"); $(this).wrap("<a class='fancybox' href='" + newHref + "'/>"); $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault(); // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); For the logo, I must use overflow: visible !important; on [component="brand/logo"] /* --- Logo --- */ [component="brand/logo"] { max-height: 50px; width: auto; height: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; overflow: visible !important; } Better result !!
  • DownPWundefined

    [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    2k Views
    phenomlabundefined
    @downpw ooops. Forgot that. Thanks for adding.
  • Mike Jonesundefined

    CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    1k Views
    phenomlabundefined
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.