# Shortcodes for KLEO Source: https://seventhqueen.com/docs/kleo/shortcodes-for-kleo/ ### Ajax Search Form Example usage : ``` [kleo_search_form context="post,page,gd_place,portfolio" placeholder="Custom text placeholder"] ``` Name Value Description context default:none Enter what post formats to show separated by comma placeholder default:none Placeholder text for search input type default:both Just form submit, just ajax results or both. Values: both, form_submit, ajax form_style default:default This affects the look of the form. Default has a border and works for white backgrounds. Values: default, transparent ### Gap Example  usage : ``` [kleo_gap size="12px" class="" id=""] ``` Name Value Description size default:12px Enter in the size of your gap. Pixels, ems, and percentages are all valid units of measurement. class default:none A class to add to the element for CSS referrences. id default:none Unique id to add to the element for CSS referrences Custom inline style default:none add your custom css inline ### Divider with icon Example  usage : ``` [kleo_divider type="double" double="yes" position="right" text="" class="" id=""] ``` Name Value Description type full,long,short default: full The type of the divider. double yes, no default: no Have the divider double lined. position center, left, right, default : center icon Default: none Choose the icon to display icon_size normal,large default: normal Where to apply the snow affect. To the parent column element or to the whole window. text Default: none id Default: none Unique id to add to the element for CSS referrences class Default: none A class to add to the element for CSS referrences. style Default: none Where to apply the snow affect. To the parent column element or to the whole window. ### Feature Items Grid Example usage: ``` [kleo_grid type="36" animation="yes"] [kleo_feature_item]Feature item 1[/kleo_feature_item] [kleo_feature_item]Feature item 2[/kleo_feature_item] [/kleo_grid] ``` Name Value Description type one,two,three,fourDefault: one Select how many items you want per row. animation yes,noDefault: no Animate elements inside the grid one by one colored_icons no,yesdefault : no Show colored icons. Color will be taken from the Highlight color from Theme options style default,boxDefault: default Show bordered icons bordered_icons no,yesDefault: no Show bordered icons el_class Default: none  If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Icon Example Usage ``` [kleo_icon icon="android" icon_size=""] ``` Name Value Description icon Default: none Choose the icon to display tooltip_position left,top,right,bottom Default: left In which position to show the tooltip/popover tooltip_action hover,click Default: hover When to trigger the popover href default: none Type a http:// address target _blank,_self Default: _blank In which position to show the tooltip/popover el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. icon_size regular2x3x4xdefault : regular When to trigger the popover tooltip no,tooltip,popover Default: no Type a http:// address tooltip_title Default: none tooltip_text Default: none ### Fancy List Example Usage: ``` [kleo_list] [kleo_list_item]Lorem ipsum[/kleo_list_item] [kleo_list_item]Lorem ipsum[/kleo_list_item] [/kleo_list] ``` Name Value Description type standard, icons, ordered, ordered-roman,unstyled Default: standard Select the list type. icon_color yes Default: none divider no, solid, dashed Default: no align left, center, right, none Default: none Align the list. el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### List Item _Works inside the kleo_list shortcode only_ Example Usage: ``` [kleo_list_item icon="attention"]Lorem Ipsum[/kleo_list_item] ``` Name Value Description icon Default: none Select icon from list ### Animated Numbers Example Usage: ``` [kleo_animate_numbers animation="animate-when-almost-visible" timer=""]100[/kleo_animate_numbers] ``` Name Value Description animation animate-when-almost-visible, animate-when-visible Default: none timer Default: none Enter the number to animate el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. [/vc_column_text][vc_column_text] #### Visibility #### Example Usage ``` [kleo_visibility type="hidden-xs,hidden-sm,hidden-md,hidden-lg,visible-xs,visible-sm,visible-md,visible-lg" el_class="extraclass"][/kleo_visibility] ``` Name Value Description type hidden-xs,hidden-sm,hidden-md,hidden-lg,visible-xs,visible-sm,visible-md,visible-lg Default: none Hide/Show content by screen size. el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Pin Example Usage: ``` [kleo_pin type="circle" left="" right="" top="" bottom=""] ``` Name Value Description type icon,circle,POI Default: icon Type of pin icon Default: none Choose the icon to display. top Default: none Enter only pixels and percentage, eq. 50px or 15% left Default: none Enter only pixels and percentage, eq. 50px or 15% right Default: none Enter only pixels and percentage, eq. 50px or 15% bottom Default: none Enter only pixels and percentage, eq. 50px or 15% tooltip_position left,right,bottom,top Default: left Enter only pixels and percentage, eq. 50px or 15% tooltip tooltip,popover Default: tooltip To show it as a tooltip or as a popover animation animate-when-almost-visible, animate-when-visible Default: none el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Clients Example Usage: ``` [kleo_clients animated="yes" animation="appear" number="5" target="_blank" tags="" el_class="customclass"] ``` Name Value Description animated yes, no Default: yes Animate the icons when you first view them animation fade, appear Default: fade Choose the icon to display. target default:none number Default: 5 How many images to show tags Default: none Filter by tags el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Testimonials Example Usage: ``` [kleo_testimonials type="simple" specific_id="yes" ids="99" tags="" height="200px" el_class="extraclass"] ``` Name Value Description animated simple, carousel Default: simple specific_id yes, no Default: no Choose the icon to display. ids default:none Comma separated list of ids to display. number Default: 5 height Default: none Force a height on all elements. Expressed in pixels, eq: 300 will represent 300px tags Default: none Filter by tags el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Members Carousel Example Usage: ``` [kleo_bp_members_carousel type="active" number="15" min_items="2" max_items="7" image_size="thumb" rounded="square" item_width="155" autoplay="yes" online="noshow" class="customclass"] ``` Name Value Description type active, newest, popular, online, alphabetical, random Default: active The type of members to display. number Default: 12 How many members to get. min_items Default: 1 Minimum number of items to show on the screen max_items Default: 6 Maximum number of items to show on the screen image_size thumbnail, full Default: full The size to get from buddypress rounded rounded, square default: rounded. Rounded or square avatar item_width Default: 150px The size of the member image autoplay no, yes Default: no If the carousel should play automatically online show, hide Default: show Show online status el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Members Grid Example Usage: ``` [kleo_bp_members_grid type="active" number="12" perline="nine" rounded="rounded" animation="appear"] ``` Name Value Description type active, newest, popular, online, alphabetical, random, Default: active The type of members to display. number Default: 12 How many members to get. perline one, two, three, four, five, six, seven, eight, nine, ten,eleven ,twelve Default: one How many members to show per line rounded rounded, square default: rounded. Rounded or square avatar animation fade, appear Default: none Maximum number of items to show on the screen el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Members Masonry Example Usage: ``` [kleo_bp_members_masonry type="newest" number="15" rounded="square" online="noshow" class="myclass"] ``` Name Value Description type active, newest, popular, online, alphabetical, random, Default: active The type of members to display. number Default: 12 How many members to get. rounded rounded, square default: rounded. Rounded or square avatar online show, hide Default: none Maximum number of items to show on the screen el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Groups Carousel Example Usage: ``` [kleo_bp_groups_carousel type="most-forum-posts" number="12" min_items="1" max_items="6" image_size="full" rounded="rounded" item_width="150"] ``` Name Value Description type active, newest, popular, online, alphabetical, random, most-forum-topics, most-forum-posts Default: active The type of members to display. number Default: 12 How many members to get. min_items Default: 1 Minimum number of items to show on the screen max_items Default: 6 Maximum number of items to show on the screen image_size thumbnail, full Default: full The size to get from buddypress rounded rounded, square default: rounded. Rounded or square avatar item_width Default: 150px The size of the member image autoplay no, yes Default: no If the carousel should play automatically el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Groups Grid Example Usage: ``` [kleo_bp_groups_grid type="active" number="12" perline="one" rounded="rounded" animation="appear" class="myclass"] ``` Name Value Description type active, newest, popular, online, alphabetical, random, Default: active The type of Groups to display. number Default: 12 How many Groups to get. perline one, two, three, four, five, six, seven, eight, nine, ten,eleven ,twelve Default: one How many Groups to show per line rounded rounded, square default: rounded. Rounded or square avatar animation fade, appear Default: none Maximum number of items to show on the screen el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Groups Masonry Example Usage: ``` [kleo_bp_groups_masonry type="newest" number="15" rounded="square" online="noshow" class="myclass"] ``` Name Value Description type active, newest, popular, online, alphabetical, random, Default: active The type of Groups to display. number Default: 12 How many Groups to get. rounded rounded, square default: rounded. Rounded or square avatar online show, hide Default: none Maximum number of items to show on the screen el_class Default: none If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. ### Activity Stream Example Usage: ``` [[kleo_bp_activity_stream number="6" post_form="no" show_button="yes" button_label="View All Activity" button_link="/activity"]] ``` Name Value Description show all,blog, groups, friends, profile,status Default: all The type of activity to show number Default: 6 How many activity streams to show post_form yes,no default:no Shows the form to post a new update show_button yes, no Default: yes Show a button with link to the activity page button_label Default: View All Activity Button text button_link Default: /activity Put here the link to your activity page ### Activity Page Example Usage: ``` [[kleo_bp_activity_page]] ``` Name Value Description kleo_bp_activity_page Default: none Show the activity page ### Pricing Tables Example Usage: ``` [kleo_pricing_table columns="4" style="2"][kleo_pricing_table_item title="Column title" price="$10" popular="yes" button_label="Button txt" features="featureslist"]lorem ipsum[/kleo_pricing_table_item][/kleo_pricing_table] ``` Name Value Description title Default: custom Title price Default: custom Title popular yes, no Default: no Shows this column with a different style textarea_html Default: none Enter description column here features Default: none button_label Default: select link Default: none ### Galaxy Particles Example Usage: ``` [kleo_particles number="88" size="6" color="#ffffff"] ``` Name Value Description number Default: 88 Particles number size Default: 6 Particles size color Default: #FFFFFF Particles color You can use the particle.js generator here to make your own and transfer the settings [https://vincentgarreau.com/particles.js/](https://vincentgarreau.com/particles.js/) ### News Focus Example Usage: ``` [kleo_news_focus name="name" featured="5" posts_query="size:10|order_by:date"] ``` Name Value Description name Default: name Enter a selection name featured Default: 5 Enter the number of post to highlight and show big on the left column. posts_query Default: size:10|order_by:date If you refine your posts by category then they will show as tabbed content in the shortcode ### Kleo Posts Example Usage: ``` [kleo_posts loop="size:12|order_by:date"] ``` Name Value Description query_offset Default: 0 If you want to add an offset to the wp_query posts loop Default: size:2|order_by:date Posts query args, see[https://codex.wordpress.org/Class_Reference/WP_Query](https://codex.wordpress.org/Class_Reference/WP_Query) post_layout grid|small|standard Default: grid What layout to generate columns Default: 4 **Applies to grid layout only**How many items to show per row. A number between 2 and 6. show_thumb yes|just_1|just_2|just_3|no Default: yes **Applies to standard layout only**Show Thumbnail image. A number between 2 and 6. show_switcher yes|no Default: no If you want to show layout switcher options switcher_layouts masonry,standard,small Default: masonry,standard,small What options to show in the layout switcher show_meta yes|no Default: yes Show post meta inline_meta yes|no Default: no Applies to Standard Layout only. Shows the post meta elements in one line if enabled. show_excerpt yes|no Default: yes Show post excerpt show_foter yes|no Default: yes Show|Hide read more button and post likes load_more yes|no Default: no Enable Load more posts via AJAX.