Archived

This topic is now archived and is closed to further replies.

allanlove

RapidTabs Section Customization

15 posts in this topic

Hi

 

Can anyone help with how you control the RapidTabs section please?

 

I only want it to show the recent and popular posts, i don't want it to show the comments and tags tabs. I would also like to control the navigation in the section.

 

I can't find where there are any options? All i see when i click on the edit button is the option to add CSS classes.

 

Please help!

 

Allan 


Share this post


Link to post
Share on other sites

I'd love to know this as well...


Share this post


Link to post
Share on other sites

If you go to the top of the RapidTabs section, when you mouse-over, you should see a little pencil icon.  Click it. That will open the settings. 

 

As for the tabs you don't want to display, I'd suggest finding the unique CSS elements for each, then applying display: none; to them. But be careful or you could make the entire thing vanish.

 

You could also use a simple tabs code, and place Special Recent Posts shortcode in one tab, and a popular posts shortcode in the other. 

 

I haven't used it yet, so I'm not familiar with it yet. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Hi Rob

 

Thanks for the reply. I have managed to get rid of the tabs that i don't want, but there is no visible CSS sheet for me to edtit to change the colours of the tabs. I would also like to remove the border line around the box but can't see where to do that either? 

 

If you could have a look for me and advise, that would be great. I really like the RapidTabs section, but the customization options seem non existent!

 

Allan 


Share this post


Link to post
Share on other sites

Hi Allan,

 

The RapidTabs section was built to be rapid :D

Therefore, there aren't any customization options, you're simply supposed to drag and drop the section into position and thats it.

 

However, what you could do is, use our tab shortcode alongside a text widget/textbox section with the Special Recent Posts plugin, which I think supports popular posts. You can achieve a similar look to rapid tabs but have more control.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Thanks Danny, i'll have a look at the Special Recent Posts plugin and see how i get on.


Share this post


Link to post
Share on other sites

Hi Rob

 

Thanks for the reply. I have managed to get rid of the tabs that i don't want, but there is no visible CSS sheet for me to edtit to change the colours of the tabs. I would also like to remove the border line around the box but can't see where to do that either? 

 

If you could have a look for me and advise, that would be great. I really like the RapidTabs section, but the customization options seem non existent!

 

Allan 

Hey Allan,

 

Could you share the code you used to get rid of some of the tabs. I'm using this at the moment: .section-rapidtabs .the-rapid-tabs .rapid-nav a {display:none;} and it gets rid of all the tabs.


Share this post


Link to post
Share on other sites

As Danny suggested, try the Tabs here:  http://docs.pagelines.com/tutorials/shortcodes

 

Special Recent Posts lists only the last X number of posts, not based on popularity, but there are other plugins that do most popular posts, or list comments, etc.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Hi ppotent

 

I didn't actually add any custom code to remove the tabs i didn't want, i actually edited one of the php files.

 

If you use ftp to navigate to the wp-content/themes/dms/sections/rapidtabs folder, then you need to download the section.php file.

 

In that file you will see a load of code and in particular you will see the following sets of code which i have highlighted in four different colours so you can tell where one tab starts and finishes. All you need to do is delete the code for the tabs you don't want to show, then save the file and upload it again via ftp. Hope that helps!

 

 

<div id="rapid-popular">
 
<h3 class="widget-title"><?php _e('Popular Posts','pagelines'); ?></h3>
<ul class="media-list">
<?php
 
foreach( get_posts( array('numberposts' => $num_posts, 'ignore_sticky_posts' => 1, 'orderby' => 'comment_count', 'exclude' => $pageID) ) as $p ){
$img = (has_post_thumbnail( $p->ID )) ? sprintf('<div class="img"><a class="the-media" href="%s" style="background-image: url(%s)"></a></div>', get_permalink( $p->ID ), pl_the_thumbnail_url( $p->ID, 'thumbnail')) : '';
 
printf(
'<li class="media fix">%s<div class="bd"><a class="title" href="%s">%s</a><span class="excerpt">%s</span></div></li>', 
$img,
get_permalink( $p->ID ), 
$p->post_title, 
pl_short_excerpt($p->ID)
);
 
} ?>
 
 
</ul>
 
</div>
<div id="rapid-recent">
<h3 class="widget-title"><?php _e('Recent Posts','pagelines'); ?></h3>
<ul class="media-list">
<?php
 
foreach( get_posts( array('ignore_sticky_posts' => 1, 'orderby' => 'post_date', 'order' => 'desc', 'numberposts' => $num_posts, 'exclude' => $pageID) ) as $p ){
$img = (has_post_thumbnail( $p->ID )) ? sprintf('<div class="img"><a class="the-media" href="%s" style="background-image: url(%s)"></a></div>', get_permalink( $p->ID ), pl_the_thumbnail_url( $p->ID, 'thumbnail')) : '';
 
printf(
'<li class="media fix">%s<div class="bd"><a class="title" href="%s">%s</a><span class="excerpt">%s</span></div></li>', 
$img,
get_permalink( $p->ID ), 
$p->post_title, 
pl_short_excerpt($p->ID)
);
 
} ?>
 
 
</ul>
</div>
 
<div id="rapid-comments">
<h3 class="widget-title"><?php _e('Comments','pagelines'); ?></h3>
<ul class="media-list">
<?php
$comments = get_comments( array( 'number' => $num_posts, 'status' => 'approve' ) );
if ( $comments ) {
foreach ( (array) $comments as $comment) {
 
$post = get_post( $comment->comment_post_ID );
$link = get_comment_link( $comment->comment_ID ); 
 
$avatar = $this->get_avatar_url( get_avatar( $comment ) ); 
$img = ($avatar) ? sprintf('<div class="img"><a class="the-media" href="%s" style="background-image: url(%s)"></a></div>', $link, $avatar) : '';
 
printf(
'<li class="media fix">%s<div class="bd"><a class="title" href="%s">%s</a><span class="excerpt">%s</span></div></li>', 
$img,
$link, 
wp_filter_nohtml_kses($comment->comment_author), 
stripslashes( substr( wp_filter_nohtml_kses( $comment->comment_content ), 0, 50 ) )
);
}
 
}
?>
 
 
</ul>
 
</div>
<div id="rapid-tags">
<h3 class="widget-title"><?php _e('Tags','pagelines'); ?></h3>
<div class="tags-list">
<?php
 
wp_tag_cloud( array('number'=> 30, 'smallest' => 10, 'largest' => 10) );
?>
 
 
</div>
 
</div>
1 person likes this

Share this post


Link to post
Share on other sites

Thanks for sharing.

However, I can not recommend editing of core files, as this is something we do not recommend nor support. I suggest you try the alternative and use the tabs shortcode in a text widget.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

allanlove thanks for this info as it gave me enough to go in and make some changes. I changed the sequence of the tabs and changed the tags to categories! I'm saving a copy off-site in case it gets overwritten. Works like a charm. You can see it on the dev site at http://etc.hoffmangraphics.com/taffy-barrel-math/


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites

sheilahoff Glad you got it sorted Sheila!! Sorry for the delay in my response, I have been away.

 

Allan


Share this post


Link to post
Share on other sites

I'm going crazy with this. I have the code I created working correctly on 2 sites but on a new dev site the Categories are not being called. I know it's using my customized code as the sequence of tabs is changed and the last tab is categories instead of tags. I can NOT figure out why the same code works on two sites and not on the third. The site that it doesn't work on is http://www.tca.hoffmangraphics.com (bottom left of homepage). And here's my custom section.php file code which I have setup in a child theme.

<?php
/*
	Section: RapidTabs
	Author: PageLines
	Author URI: http://www.pagelines.com
	Description: Displays your most popular, and latest posts as well as comments and tags in a tabbed format.
	Class Name: PLRapidTabs
	Filter: widgetized
	Edition: pro
*/

class PLRapidTabs extends PageLinesSection {

	function section_persistent(){

	}
	
	function section_styles(){
		pl_enqueue_script( 'jquery-ui-tabs' );
	}
	

	function section_head(){

		?>
		<script>
		!function ($) {
			$(document).on('sectionStart', function( e ) {
				$('.the-rapid-tabs').tabs({
					show: true
				})
			})
		}(window.jQuery);
		</script>
		<?php

	}


   function section_template() {
		
		global $plpg; 
		$pageID = $plpg->id;


		$num_posts = 4; 

		?>
	<div class="widget">
		<div class="widget-pad">
	<div class="the-rapid-tabs">
		<ul class="tabbed-list rapid-nav fix">
			<li><a href="#rapid-recent"><?php _e( 'Recent', 'pagelines;' ); ?></a></li>
            <li><a href="#rapid-popular"><?php _e( 'Popular', 'pagelines;' ); ?></a></li>
			<li><a href="#rapid-comments"><?php _e( 'Comments', 'pagelines;' ); ?></a></li>
			<li><a href="#rapid-tags"><?php _e( 'Categories', 'pagelines;' ); ?></a></li>
		</ul>

		<div id="rapid-popular">

				<h3 class="widget-title"><?php _e('Popular Posts','pagelines'); ?></h3>
				<ul class="media-list">
					<?php

					foreach( get_posts( array('numberposts' => $num_posts, 'ignore_sticky_posts' => 1, 'orderby' => 'comment_count', 'exclude' => $pageID) ) as $p ){
						$img = (has_post_thumbnail( $p->ID )) ? sprintf('<div class="img"><a class="the-media" href="%s" style="background-image: url(%s)"></a></div>', get_permalink( $p->ID ), pl_the_thumbnail_url( $p->ID, 'thumbnail')) : '';

						printf(
							'<li class="media fix">%s<div class="bd"><a class="title" href="%s">%s</a><span class="excerpt">%s</span></div></li>', 
							$img,
							get_permalink( $p->ID ), 
							$p->post_title, 
							pl_short_excerpt($p->ID)
						);

					} ?>


				</ul>
	
		</div>
		<div id="rapid-recent">
				<h3 class="widget-title"><?php _e('Recent Posts','pagelines'); ?></h3>
				<ul class="media-list">
					<?php

					foreach( get_posts( array('ignore_sticky_posts' => 1, 'orderby' => 'post_date', 'order' => 'desc', 'numberposts' => $num_posts, 'exclude' => $pageID) ) as $p ){
						$img = (has_post_thumbnail( $p->ID )) ? sprintf('<div class="img"><a class="the-media" href="%s" style="background-image: url(%s)"></a></div>', get_permalink( $p->ID ), pl_the_thumbnail_url( $p->ID, 'thumbnail')) : '';

						printf(
							'<li class="media fix">%s<div class="bd"><a class="title" href="%s">%s</a><span class="excerpt">%s</span></div></li>', 
							$img,
							get_permalink( $p->ID ), 
							$p->post_title, 
							pl_short_excerpt($p->ID)
						);

					} ?>


				</ul>
		</div>

		<div id="rapid-comments">
			<h3 class="widget-title"><?php _e('Comments','pagelines'); ?></h3>
			<ul class="media-list">
				<?php
				$comments = get_comments( array( 'number' => $num_posts, 'status' => 'approve' ) );
				if ( $comments ) {
					foreach ( (array) $comments as $comment) {
						
						$post = get_post( $comment->comment_post_ID );
						$link = get_comment_link( $comment->comment_ID ); 
						
						$avatar = $this->get_avatar_url( get_avatar( $comment ) ); 
						$img = ($avatar) ? sprintf('<div class="img"><a class="the-media" href="%s" style="background-image: url(%s)"></a></div>', $link, $avatar) : '';
						
						printf(
							'<li class="media fix">%s<div class="bd"><a class="title" href="%s">%s</a><span class="excerpt">%s</span></div></li>', 
							$img,
							$link, 
							wp_filter_nohtml_kses($comment->comment_author), 
							stripslashes( substr( wp_filter_nohtml_kses( $comment->comment_content ), 0, 50 ) )
						);
					}
					
				}
			 ?>


			</ul>
			
		</div>
		<div id="rapid-tags">
				<h3 class="widget-title"><?php _e('Categories','pagelines'); ?></h3>
				<div class="tags-list">
					<?php 
wp_tag_cloud( array( 'taxonomy' => 'category' ) ); 
?>

				</div>
		
		</div>
				
		</div>
	</div>
</div>
		<?php
		
		


	}


	function get_avatar_url( $avatar ){
	
	    preg_match("/src='(.*?)'/i", $avatar, $matches);
	
	    return (isset($matches) && isset($matches[1])) ? $matches[1] : '';
	
	}
	
}




Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Hi Sheila, and Happy New Year!! This is a bit beyond my skill level I'm afraid. I think it might well be worth you starting a new thread to get some support on this. Sorry I can't help! Allan

Share this post


Link to post
Share on other sites

No worries. Thanks. I actually have figured out that it's a plug-in conflict. I was fooled because this works with the plug-in on other sites. The difference is that those other sites use the free version and this site uses the Pro version of Ai1EC a calendar by Time.ly. So I'm giving up making it work. I'm going to edit out Categories from RT and just use a different plugin to make a category cloud in the sidebar.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites

  • Similar Content

    • Rebecca Rinas
      By Rebecca Rinas
      I want my separate tabs to stay open with the collapser flat plugin - they don't show up until you hover over them. Anyone know how to make all of them visible?Thanks
    • Steve Webb
      By Steve Webb+
      Hi,
       
      Wondering if there is a way to use pills instead of tabs with the tabs shortcodes?
      I noticed that in the .less file there is the option for pills, just dont knowhow to make the markup happen.
      Is there a different shortcode for pills, or a way to select that option with that shortcode?
       
      Thanks!
    • fullcontact
      By fullcontact
      Propricing allows for one Link URL and 1 Link Text for each pricing Col. in the table.
       
      Many times when a particular option is being sold it would be nice to have the option to add a "Billed Monthly" or "Billed Yearly" link for the same col.
       
      So what I'm looking to do is:
       
      1. Find a way to either split the single button in each col. into two separate buttons each with it's own direct link to a billing system/ gateway that is set for the monthly or yearly option.
       
      or
       
      2.  have separate propricing sections in  a tabbed view.  For example the first default tab would display the "billed monthly" table and the second tab would have a cloned version with the "billed yearly' button.
       
      I'm looking for suggestions... just want to reduce the number of steps/choices/screens the buyer has to go through when ordering.
    • yasharozov
      By yasharozov
      Hello,
      I would like to tweak the rapidtabs section and I don't really know where to begin.
      Currently rapid tabs defaults to 4 views/tabs: popular posts, recent, comments and tags.
      I would like to hide/eliminate the popular posts tab so there are only 3 left.
      Can someone tell me how to code that and where to put it? Thanks :-)
    • Michael_J
      By Michael_J
      I'm trying to remove RapidTabs from my Sidebar.   I've removed it from the my Primary Sidebar under Widgets, and also from the main page sidebar but it seems to appear in every single post.  Isn't there a way to just remove it from all sidebars in all posts?