Support » Plugin: Infinite-Scroll » Specific CSS styling

  • Hey there,

    Our theme uses a structure where posts displayed on a category page are wrapped two by two in a <div class=”row”> tag.

    See code for two posts :

    <div class="row">
    
    			<article class="post-1048 post type-post status-publish format-audio hentry category-chillout category-music tag-ellie tag-goulding tag-high tag-this tag-weeknd col-6">
    
                <div class="post-thumb">
                <div class="fitVids audio-embed">
    		        <iframe style="height:170px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48214448&show_artwork=false&show_comments=false&buying=false&download=false&show_playcount=false&single_active=false&sharing=false&maxwidth=1070&maxheight=1000"></iframe>            </div>
            </div>
    
        <!-- BEGIN .entry-content -->
        <div class="entry-content">
            <h2 class="entry-title">
                <a href="http://thisisbbc.staging.wpengine.com/music/2014/01/ellie-goulding-high-for-this-the-weeknd-cover/" rel="Music" title="Ellie Goulding – High For This (The Weeknd Cover)">
                    Ellie Goulding – High For This (The Weeknd Cover)            </a>
            </h2>
    
            <p class="post-excerpt">Elena Jane “Ellie” Goulding (born 30 December 1986) is an English singer-songwriter, multi-instrumentalist and actress from Lyonshall, Herefordshire. Her career began when she met record producer Starsmith and Frankmusik, and she was later spotted by Jamie Lillywhite, who later became her manager and A&R. After signing to Polydor Records in July 2009, Goulding released her debut extended play, An Introduction to Ellie Goulding, later that year.</p>
    <div class="rtsocial-container rtsocial-container-align-right rtsocial-horizontal"><div class="rtsocial-twitter-horizontal"><div class="rtsocial-twitter-horizontal-button"><a title="Tweet: Ellie Goulding – High For This (The Weeknd Cover)" class="rtsocial-twitter-button" href="https://twitter.com/share?text=Ellie%20Goulding%20%2D%20High%20For%20This%20%28The%20Weeknd%20Cover%29&url=http%3A%2F%2Fthisisbbc.staging.wpengine.com%2Fmusic%2F2014%2F01%2Fellie-goulding-high-for-this-the-weeknd-cover%2F&url=http://thisisbbc.staging.wpengine.com/music/2014/01/ellie-goulding-high-for-this-the-weeknd-cover/" rel="nofollow" target="_blank"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-twitter-count">1</span></div></div><div class="rtsocial-fb-horizontal fb-light"><div class="rtsocial-fb-horizontal-button"><a title="Like: Ellie Goulding – High For This (The Weeknd Cover)" class="rtsocial-fb-button rtsocial-fb-like-light" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fthisisbbc.staging.wpengine.com%2Fmusic%2F2014%2F01%2Fellie-goulding-high-for-this-the-weeknd-cover%2F" rel="nofollow" target="_blank"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-fb-count">0</span></div></div><div class="rtsocial-linkedin-horizontal"><div class="rtsocial-linkedin-horizontal-button"><a class="rtsocial-linkedin-button" href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fthisisbbc.staging.wpengine.com%2Fmusic%2F2014%2F01%2Fellie-goulding-high-for-this-the-weeknd-cover%2F&title=Ellie+Goulding+%26%238211%3B+High+For+This+%28The+Weeknd+Cover%29" rel="nofollow" target="_blank" title="Share: Ellie Goulding – High For This (The Weeknd Cover)"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-linkedin-count">0</span></div></div><div class="rtsocial-pinterest-horizontal"><div class="rtsocial-pinterest-horizontal-button"><a class="rtsocial-pinterest-button" href="https://pinterest.com/pin/create/button/?url=http://thisisbbc.staging.wpengine.com/music/2014/01/ellie-goulding-high-for-this-the-weeknd-cover/&media=http://thisisbbc.staging.wpengine.com/wp-content/uploads/2014/01/Ellie_Goulding_2011-150x150.jpg&description=Ellie Goulding - High For This (The Weeknd Cover)" rel="nofollow" target="_blank" title="Pin: Ellie Goulding – High For This (The Weeknd Cover)"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-pinterest-count">0</span></div></div><div class="rtsocial-gplus-horizontal"><div class="rtsocial-gplus-horizontal-button"><a class="rtsocial-gplus-button" href="https://plus.google.com/share?url=http%3A%2F%2Fthisisbbc.staging.wpengine.com%2Fmusic%2F2014%2F01%2Fellie-goulding-high-for-this-the-weeknd-cover%2F" rel="nofollow" target="_blank" title="+1: Ellie Goulding – High For This (The Weeknd Cover)"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-gplus-count">
    
    0</span></div></div><a rel="nofollow" class="perma-link" href="http://thisisbbc.staging.wpengine.com/music/2014/01/ellie-goulding-high-for-this-the-weeknd-cover/" title="Ellie Goulding – High For This (The Weeknd Cover)"></a></div>
    
    <a href="http://thisisbbc.staging.wpengine.com/?bpmod-action=flag&type=blog_post&id=1&id2=1048&_wpnonce=65f9a1c2c1" title="Flag as inappropriate" class="bpm-report-link bpm-type-blog_post bpm-unflagged bpm-context-called "><span class="bpm-inner-text">Flag this post as inappropriate</span></a>
            <aside id="meta-1048" class="entry-meta">
    
            		<!-- Time info -->
    		<a href="http://thisisbbc.staging.wpengine.com/2014/01/" title=" 3:26 am">
    			<time class="entry-date" datetime="2014-01-21T03:26:14+00:00">21 January 2014</time>
    		</a>
    		<span class="sep"> | </span>	
    
    			<!-- Category info -->
    		<a href="http://thisisbbc.staging.wpengine.com/category/music/electronic/chillout/" class="meta-cat-list" original-title="View all posts in Chillout"><span class="category-square empty-color"></span>Chillout</a><a href="http://thisisbbc.staging.wpengine.com/category/music/" class="meta-cat-list clear-margin" original-title="View all posts in Music"><span class="category-square category-square-music"></span>Music</a>		<span class="sep"> | </span>	
    
    			<span class="comments-link">
    			<a href="http://thisisbbc.staging.wpengine.com/music/2014/01/ellie-goulding-high-for-this-the-weeknd-cover/#comments" title="Comment on Ellie Goulding – High For This (The Weeknd Cover)">
    				<span class="leave-reply">
    					0 comments
    				</span>
    			</a>
    		</span>
    		<span class="sep"> | </span>	
    
                 <span class="post-views">26 views</span>
    		<span class="sep"> | </span>
                </aside>
        </div>
        <!-- END .entry-content -->
    
    </article>          			
    
    			<article class="post-1035 post type-post status-publish format-audio hentry category-music tag-electro tag-electrohouse tag-house-2 tag-music-3 tag-overwerk tag-rise col-6">
    
                <div class="post-thumb">
                <div class="fitVids audio-embed">
    		        <iframe style="height:170px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F122099401&show_artwork=false&show_comments=false&buying=false&download=false&show_playcount=false&single_active=false&sharing=false&maxwidth=1070&maxheight=1000"></iframe>            </div>
            </div>
    
        <!-- BEGIN .entry-content -->
        <div class="entry-content">
            <h2 class="entry-title">
                <a href="http://thisisbbc.staging.wpengine.com/music/2014/01/overwerk-rise/" rel="Music" title="OVERWERK – Rise">
                    OVERWERK – Rise            </a>
            </h2>
    
            <p class="post-excerpt">The name OVERWERK originates from Huszar’s first passion, graphic design. Originally the name of a work-in-progress graphic design portfolio entitled “over worked”, Huszar decided to adapt the name to his creative identity and changed “work” to “werk” as an homage to electronic music pioneers Kraftwerk. </p>
    <div class="rtsocial-container rtsocial-container-align-right rtsocial-horizontal"><div class="rtsocial-twitter-horizontal"><div class="rtsocial-twitter-horizontal-button"><a title="Tweet: OVERWERK – Rise" class="rtsocial-twitter-button" href="https://twitter.com/share?text=OVERWERK%20%2D%20Rise&url=http%3A%2F%2Fthisisbbc.staging.wpengine.com%2Fmusic%2F2014%2F01%2Foverwerk-rise%2F&url=http://thisisbbc.staging.wpengine.com/music/2014/01/overwerk-rise/" rel="nofollow" target="_blank"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-twitter-count">0</span></div></div><div class="rtsocial-fb-horizontal fb-light"><div class="rtsocial-fb-horizontal-button"><a title="Like: OVERWERK – Rise" class="rtsocial-fb-button rtsocial-fb-like-light" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fthisisbbc.staging.wpengine.com%2Fmusic%2F2014%2F01%2Foverwerk-rise%2F" rel="nofollow" target="_blank"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-fb-count">0</span></div></div><div class="rtsocial-linkedin-horizontal"><div class="rtsocial-linkedin-horizontal-button"><a class="rtsocial-linkedin-button" href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fthisisbbc.staging.wpengine.com%2Fmusic%2F2014%2F01%2Foverwerk-rise%2F&title=OVERWERK+%26%238211%3B+Rise" rel="nofollow" target="_blank" title="Share: OVERWERK – Rise"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-linkedin-count">0</span></div></div><div class="rtsocial-pinterest-horizontal"><div class="rtsocial-pinterest-horizontal-button"><a class="rtsocial-pinterest-button" href="https://pinterest.com/pin/create/button/?url=http://thisisbbc.staging.wpengine.com/music/2014/01/overwerk-rise/&media=http://thisisbbc.staging.wpengine.com/wp-content/uploads/2014/01/Overwerk.jpg&description=OVERWERK - Rise" rel="nofollow" target="_blank" title="Pin: OVERWERK – Rise"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-pinterest-count">0</span></div></div><div class="rtsocial-gplus-horizontal"><div class="rtsocial-gplus-horizontal-button"><a class="rtsocial-gplus-button" href="https://plus.google.com/share?url=http%3A%2F%2Fthisisbbc.staging.wpengine.com%2Fmusic%2F2014%2F01%2Foverwerk-rise%2F" rel="nofollow" target="_blank" title="+1: OVERWERK – Rise"></a></div><div class="rtsocial-horizontal-count"><div class="rtsocial-horizontal-notch"></div><span class="rtsocial-gplus-count">
    
    0</span></div></div><a rel="nofollow" class="perma-link" href="http://thisisbbc.staging.wpengine.com/music/2014/01/overwerk-rise/" title="OVERWERK – Rise"></a></div>
    
    <a href="http://thisisbbc.staging.wpengine.com/?bpmod-action=flag&type=blog_post&id=1&id2=1035&_wpnonce=3f251b023a" title="Flag as inappropriate" class="bpm-report-link bpm-type-blog_post bpm-unflagged bpm-context-called "><span class="bpm-inner-text">Flag this post as inappropriate</span></a>
            <aside id="meta-1035" class="entry-meta">
    
            		<!-- Time info -->
    		<a href="http://thisisbbc.staging.wpengine.com/2014/01/" title=" 6:24 pm">
    			<time class="entry-date" datetime="2014-01-14T18:24:46+00:00">14 January 2014</time>
    		</a>
    		<span class="sep"> | </span>	
    
    			<!-- Category info -->
    		<a href="http://thisisbbc.staging.wpengine.com/category/music/" class="meta-cat-list clear-margin" original-title="View all posts in Music"><span class="category-square category-square-music"></span>Music</a>		<span class="sep"> | </span>	
    
    			<span class="comments-link">
    			<a href="http://thisisbbc.staging.wpengine.com/music/2014/01/overwerk-rise/#comments" title="Comment on OVERWERK – Rise">
    				<span class="leave-reply">
    					0 comments
    				</span>
    			</a>
    		</span>
    		<span class="sep"> | </span>	
    
                 <span class="post-views">15 views</span>
    		<span class="sep"> | </span>
                </aside>
        </div>
        <!-- END .entry-content -->
    
    </article>
    							<!-- END .row -->
    				</div>

    We tried multiple ways of settings the pointers for infinite scroll, but it looks like if we point to the row, it will try to load content after each 2-post section, which is not right.

    Is there any way we can wrap new content, two posts by two posts, into the row class stated above?

    Cheers,
    Bastien

    https://wordpress.org/plugins/infinite-scroll/

  • The topic ‘Specific CSS styling’ is closed to new replies.