The css modifications to get tabs to the left for a standard framed tab block
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.tabs-left .tb-tabs-framed .tab-content { border-top-width: 1px; margin-left: 149px; } .tabs-left .nav-tabs { width: 150px; float: left; } .tabs-left .nav-tabs>li { border-left-width: 1px; float: none; } .tabs-left .nav-tabs>li.active { border-bottom-color: inherit!important; border-right-color: #fff; } |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function jma_frontend_locals( $args ) { $args['read_more'] = 'Read more >> '; return $args; } add_filter( 'themeblvd_frontend_locals', 'jma_frontend_locals' ); function jma_get_button_class( $class ) { $class = 'inline-btn'; return $class; } function jma_template_redirect() { if(is_page(10)) add_filter( 'themeblvd_get_button_class', 'jma_get_button_class' ); } add_action( 'template_redirect', 'jma_template_redirect' ); |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function jma_thumbnail_link_icon_name($class) { return str_replace(array('film'), array('youtube'), $class); } add_filter('themeblvd_thumbnail_link_icon_name', 'jma_thumbnail_link_icon_name'); //framework/general/media.php //to change all three for left to right.... I think... function jma_thumbnail_link_icon_name($class) { return str_replace(array('film', 'plus-square', 'long-arrow-alt-right'), array('youtube', 'if-you-wanted-to-replace-the-plus-sq-also', 'and-this-one-too'), $class); } add_filter('themeblvd_thumbnail_link_icon_name', 'jma_thumbnail_link_icon_name'); |
Want to be able to use one condition which includes or excludes pages based on weather they are children of a specific page? Add this code to functions.php:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function is_kid( $pid,$includeparent = 0 ) { // $pid = The ID of the page we're looking for pages underneath //$includeparent = 1 to include the parent page, 0 to exclude global $post; // load details about this page if ( is_page($pid) ) return $includeparent; // we're at the page $anc = get_post_ancestors( $post->ID ); foreach ( $anc as $ancestor ) { if( is_page() && $ancestor == $pid ) { return true; } } return false; // we aren't at the page, and the page is not an ancestor } |
then use this in your page template:
|
0 1 2 3 4 5 |
if (is_kid($page_id,1)) //1 to include the parent page, 0 to exclude { code here } |
In the event we are dealing with some situation where it is not convenient to add the clearfix class (which is available frequently including in JumpStart), we can add the styling to the div that needs clearfix. So if we had markup like:
|
0 1 2 3 4 5 6 7 8 9 |
<div class="wrapping-div-that-i-cant-change"> <div style="float: left; width: 45%"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie co </div> <div style="float: right; width: 45%"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut </div> </div><!--wrapping-div-that-i-cant-change--> |
we could add this css to clear:
|
0 1 2 3 4 5 6 7 8 9 |
.wrapping-div-that-i-cant-change:before, .wrapping-div-that-i-cant-change:after { content: " "; display: table; } .wrapping-div-that-i-cant-change:after { clear: both; } |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
function jma_spout_args( $query, $args ) { if ( isset( $args['query'] ) && $args['query'] == 'spouts' ) { $query = array( 'post_type' => 'product', 'post__in' => array( 126,128 ) ); } return $query; } add_filter('themeblvd_posts_args', 'jma_spout_args', 10, 2); |
Need to style code into columns. This is for simple auto-generated paragraph in a post or page.
|
0 1 2 3 4 5 6 7 8 9 10 |
.postid-1121 .entry-content > p { width: 48%; margin-left: 4%; float: left; } .postid-1121 .entry-content > p:nth-of-type(2n+1) { clear: both; margin-left: 0; } |
or for three col:
|
0 1 2 3 4 5 6 7 8 9 10 |
.postid-1121 .entry-content > p { width: 30%; margin-left: 5%; float: left; } .postid-1121 .entry-content > p:nth-of-type(3n+1) { clear: both; margin-left: 0; } |
or four:
|
0 1 2 3 4 5 6 7 8 9 10 |
.postid-1121 .entry-content > p { width: 22%; margin-left: 4%; float: left; } .postid-1121 .entry-content > p:nth-of-type(4n+1) { clear: both; margin-left: 0; } |
This is simple stuff, but good code to keep handy. This covers all current major browsers and add backward compatibility for ie. The first number is horizontal shift (right is positive), 2nd number is verticle shift (down is positive), 3rd is radial blur and forth is, in this case hexadecimal color (#3d424d is a dark […]
Read MoreI prefer this method because it gives me more control over bullet position.
|
0 1 2 3 4 5 6 7 |
<ul class="pdf-list"> <li><a href="http://address.pdf">Title</a></li> <li><a href="http://address.pdf">Title</a></li> <li><a href="http://address.pdf">Title</a></li> <li><a href="http://address.pdf">Title</a></li> </ul> |
and the css (adjust padding based on the size of the image):
|
0 1 2 3 4 5 6 |
ul.pdf-list li { background: url('../images/pdf-icon.png') no-repeat left center; padding: 3px 0px 3px 30px; list-style: none; } |
In this case I used this image (your url path in line 2 above will depend on your site structure): or use bootstrap: http://fortawesome.github.io/Font-Awesome/icons/
|
0 1 2 3 4 5 6 7 |
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-file-pdf-o"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul> |
Add to functions.php
|
0 1 2 3 4 5 6 |
function jma_child_scripts() { wp_add_inline_script('fontawesome', 'window.FontAwesomeConfig={searchPseudoElements:true}', 'before'); } add_action('wp_enqueue_scripts', 'jma_child_scripts'); |
The Css:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* get rid of the bullets */ #content ul li { list-style-type: none; } /* suppress the default fontawesome behavior */ #content ul li::before { display: none; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } /* add your icon (right-angle here) */ #content ul li::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f105'; } /* fontawesome hijacks the before pseudo element so we have to position w/ the class that they add */ #content ul li .svg-inline--fa { margin: 0 5px 0 -20px; } |