CSS – Page 2

Font Awesome Bullets for List Items (pdf list)

/* pdf list */
ul.pdf-list li  {
	list-style-type: none;
	position: relative
}
ul.pdf-list li:before {
	display:block;
	position: absolute;
	font-family: 'FontAwesome';
	content: '\f1c1';
	left: -20px;
    color: #990000;
}

/* pdf list */

ul.pdf-list li {

list-style-type: none;

position: relative

}

ul.pdf-list li:before {

display:block;

position: absolute;

font-family: 'FontAwesome';

content: '\f1c1';

left: -20px;

color: #990000;

}

#custom-main ul li,
#main ul li  {
	list-style-type: none;
	position: relative
}
#main ul li:before,
#custom-main ul li:before {
	display:block;
	position: absolute;
	font-family: 'FontAwesome';
	content: '\f054';
	left: -17px;
	top: 1px;
	color: #488299;
}
#main ul.social-media li:before,
#custom-main ul.social-media li:before {
	display:none;
}

#custom-main ul li,

#main ul li {

list-style-type: none;

position: relative

}

#main ul li:before,

#custom-main ul li:before {

display:block;

position: absolute;

font-family: 'FontAwesome';

content: '\f054';

left: -17px;

top: 1px;

color: #488299;

}

#main ul.social-media li:before,

#custom-main ul.social-media li:before {

display:none;

}

Bootstrap Left-side Tabs

The css modifications to get tabs to the left for a standard framed tab block

.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;
}

.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;

}

[raw] [tabs style=”framed” nav=”tabs” tab_1=”Title #1″ tab_2=”Title #2″ tab_3=”Title #3″] [tab_1]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 […]

Embed Font

@font-face {
	font-family: 'WaterBrushROB';
	
	/* Which font weight and style the file represents */
	font-weight: normal;
	font-style: normal;
	
	/* For IE9 in Compatibility Mode */
	src: url('./assets/fonts/water-brush-rob.eot');
	
	src: /* For IE8 and older versions of IE */
	url('./assets/fonts/water-brush-rob.eot?#iefix') format('embedded-opentype'),
	
	/* Super modern browsers */
	url('./assets/fonts/water-brush-rob.woff2') format('woff2'),
	
	/* All modern browsers */
	url('./assets/fonts/water-brush-rob.woff') format('woff'),
	
	/* For Safari, Android, iOS and few others */
	url('./assets/fonts/water-brush-rob.ttf') format('truetype'),
	       
	/* iOS */
	url('./assets/fonts/water-brush-rob.svg#svgWaterBrushROB') format('svg');
}

@font-face {

font-family: 'WaterBrushROB';

/* Which font weight and style the file represents */

font-weight: normal;

font-style: normal;

/* For IE9 in Compatibility Mode */

src: url('./assets/fonts/water-brush-rob.eot');

src: /* For IE8 and older versions of IE */

url('./assets/fonts/water-brush-rob.eot?#iefix') format('embedded-opentype'),

/* Super modern browsers */

url('./assets/fonts/water-brush-rob.woff2') format('woff2'),

/* All modern browsers */

url('./assets/fonts/water-brush-rob.woff') format('woff'),

/* For Safari, Android, iOS and few others */

url('./assets/fonts/water-brush-rob.ttf') format('truetype'),

/* iOS */

url('./assets/fonts/water-brush-rob.svg#svgWaterBrushROB') format('svg');

}

Responsive Video

JumpStart and many themes have this built in, but just in case we ever need it. CSS:

.video {
	 position: relative;
	 padding-bottom: 56.25%;
	 padding-top: 20px;
	 height: 0;
	 overflow: hidden;
}
.video iframe,  
.video object,  
.video embed {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
}

.video {

position: relative;

padding-bottom: 56.25%;

padding-top: 20px;

height: 0;

overflow: hidden;

}

.video iframe,

.video object,

.video embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

HTML:

<div class="video">
<iframe width="560" height="315" src="VIDEO URL HERE" frameborder="0" allowfullscreen></iframe>
</div>

</div>

for more info click

Woo Testimonials Quote Styling

Add this to functions.php to enable psuedo elements:

function jma_child_scripts()
{
    wp_add_inline_script('fontawesome', 'window.FontAwesomeConfig={searchPseudoElements:true}', 'before');
}
add_action('wp_enqueue_scripts', 'jma_child_scripts');

function jma_child_scripts()

{

wp_add_inline_script('fontawesome', 'window.FontAwesomeConfig={searchPseudoElements:true}', 'before');

}

add_action('wp_enqueue_scripts', 'jma_child_scripts');

The CSS:

.quote {
    margin-bottom: 20px;
}
.quote blockquote {
    font: 14px/20px italic Arial, Helvetica, sans-serif;
    padding: 8px;
    margin: 5px;
    text-indent: 40px;
    border-color: rgba(253, 186, 49, 0.5);
    position: relative;
}
.quote blockquote::before, .quote blockquote::after {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 900;
    display: none;
}
.quote blockquote .fa-quote-left, .quote blockquote .fa-quote-right {
    color: rgba(253, 186, 49, 0.5);
    font-size: 1.8em;
    position: absolute;
    z-index: 10;
}
.quote blockquote::before {
    content: "\f10d";
}
.quote blockquote .fa-quote-left {
    top: 0;
    left: 10px;
    background-position: top left;
}
.quote blockquote::after {
    content: "\f10e";
}
.quote blockquote .fa-quote-right {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}
.quote blockquote p {
    padding-right: 20px;
    color: #113871;
    font-size: 1.5em;
    z-index: 20
}
.quote cite {
    font-size: 1.6em;
    color: #fdba31;
}

.quote {

margin-bottom: 20px;

}

.quote blockquote {

font: 14px/20px italic Arial, Helvetica, sans-serif;

padding: 8px;

margin: 5px;

text-indent: 40px;

border-color: rgba(253, 186, 49, 0.5);

position: relative;

}

.quote blockquote::before, .quote blockquote::after {

font-family: "Font Awesome 5 Free";

font-style: normal;

font-variant: normal;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

font-weight: 900;

display: none;

}

.quote blockquote .fa-quote-left, .quote blockquote .fa-quote-right {

color: rgba(253, 186, 49, 0.5);

font-size: 1.8em;

position: absolute;

z-index: 10;

}

.quote blockquote::before {

content: "\f10d";

}

.quote blockquote .fa-quote-left {

top: 0;

left: 10px;

background-position: top left;

}

.quote blockquote::after {

content: "\f10e";

}

.quote blockquote .fa-quote-right {

bottom: 0;

right: 0;

background-position: bottom right;

}

.quote blockquote p {

padding-right: 20px;

color: #113871;

font-size: 1.5em;

z-index: 20

}

.quote cite {

font-size: 1.6em;

color: #fdba31;

}

For Bubbles with “Tags”

.quote {
	margin-bottom: 20px;
}
.testimonials-text:after {
    width: 0;
    height: 0;
    content: " ";
    display: block;
    color: #f5f5f5;
    position: absolute;
    border-top-color: #f5f5f5;
    border-left-style: inset;
    border-right-style: inset;
    border-top: 22px solid;
    border-left: 0 solid transparent;
    border-right: 22px solid transparent;
    left: 80px;
    bottom: -20px;
}
.testimonials-text {
    padding: 15px;
    font-size: 14px;
    font-style: italic;
    background: #f5f5f5;
    position: relative;
    border: none;
    border-radius: 10px;
}

.quote {

margin-bottom: 20px;

}

.testimonials-text:after {

width: 0;

height: 0;

content: " ";

display: block;

color: #f5f5f5;

position: absolute;

border-top-color: #f5f5f5;

border-left-style: inset;

border-right-style: inset;

border-top: 22px solid;

border-left: 0 solid transparent;

border-right: 22px solid transparent;

left: 80px;

bottom: -20px;

}

.testimonials-text {

padding: 15px;

font-size: 14px;

font-style: italic;

background: #f5f5f5;

position: relative;

border: none;

border-radius: 10px;

}

Accordion Sidebar Menu

Shows all the children under the current root item and all other root items.

function jma_sidebar_addon() {
	global $post;
	$ancestors = get_ancestors( $post->ID, 'page' );
	$ancestor_id = array_pop($ancestors);
	$ancestor_id = $ancestor_id? $ancestor_id: $post->ID;
	$root_pages = get_pages(array('parent' => 0));
	echo '<ul>';
	foreach ($root_pages as $root_page) {
		$jma_classes = '';
		$show_kids = false;
		$has_kids = false;
		if( $root_page->ID == $ancestor_id || $root_page->ID == $post->ID ){
			$jma_classes .= ' show-children';
			$show_kids = true;
		}
		$children = get_pages('child_of='.$root_page->ID);
		if( count( $children ) != 0 ){
			$jma_classes .= ' has-cildren';
			$has_kids = true;
		}
		echo '<li class="page_item page-item-' . $root_page->ID . $jma_classes . '"><a href="' . get_page_link( $root_page->ID ) .'">' .  $root_page->post_title . '</a>';
		if( $show_kids && $has_kids ){
			echo '<ul>';
				wp_list_pages(array("child_of" => $ancestor_id,  "link_before" => "", "title_li" => "", "sort_column" => "title"));
			echo '</ul>';	      	
		}
		echo '</li>';	   
	}
	echo '<ul>';
}
add_action('themeblvd_sidebar_sidebar_left_before', 'jma_sidebar_addon');

function jma_sidebar_addon() {

global $post;

$ancestors = get_ancestors( $post->ID, 'page' );

$ancestor_id = array_pop($ancestors);

$ancestor_id = $ancestor_id? $ancestor_id: $post->ID;

$root_pages = get_pages(array('parent' => 0));

echo '<ul>';

foreach ($root_pages as $root_page) {

$jma_classes = '';

$show_kids = false;

$has_kids = false;

if( $root_page->ID == $ancestor_id || $root_page->ID == $post->ID ){

$jma_classes .= ' show-children';

$show_kids = true;

}

$children = get_pages('child_of='.$root_page->ID);

if( count( $children ) != 0 ){

$jma_classes .= ' has-cildren';

$has_kids = true;

}

echo '<li class="page_item page-item-' . $root_page->ID . $jma_classes . '"><a href="' . get_page_link( $root_page->ID ) .'">' . $root_page->post_title . '</a>';

if( $show_kids && $has_kids ){

echo '<ul>';

wp_list_pages(array("child_of" => $ancestor_id, "link_before" => "", "title_li" => "", "sort_column" => "title"));

echo '</ul>';

}

echo '</li>';

}

echo '<ul>';

}

add_action('themeblvd_sidebar_sidebar_left_before', 'jma_sidebar_addon');

This is the code for an accordion based on the portfolio_item post type (php):

function sidebar_portfolio_tax(){
	global $post; 
	$terms= get_the_terms($post->id, 'portfolio');
	if(is_array($terms))
		foreach($terms as $term){
			$this_term_ids[] = $term->term_id;
		}
	ob_start();
	$services = get_terms( 'portfolio', array('hierarchical' => false) );//stops empty parents from being included
	echo '<div class="panel-group event-accordion" id="accordion">';
	foreach ($services as $service) {
		$args = array(
			'post_type' => 'portfolio_item',
			'tax_query' => array(
				array(
					'taxonomy' => 'portfolio',
					'field' => 'id',
					'terms' => $service->term_id
				)
			), 
			'orderby' => 'title',
			'order' => 'ASC',
			'posts_per_page' => -1
			
		);
		$x = new WP_Query($args);
		if($x->have_posts()){
			$in = in_array($service->term_id, $this_term_ids)? ' in': '';//opens accordian to current category
			echo '<div class="panel">';// panel-default
			echo '<div class="">';//panel-heading
			echo '<a style="background-image: url(' . get_stylesheet_directory_uri() . '/grandchild-5-0/images/' . $service->slug . '.png)" class="service-cat ' . $service->slug . '" data-toggle="collapse" data-parent="#accordion" href="#collapse' . $service->term_id . '">';
			echo $service->name;
			echo '</a>';
			echo '</div><!--panel-heading-->';
			echo '<ul id="collapse' . $service->term_id . '" class="panel-collapse collapse' . $in . '">';
			while ( $x->have_posts() ) : $x->the_post();
					echo '<li>'; 
					echo '<a href="';
					the_permalink();
					echo '">';
					the_title();
					echo '</a>';
					echo '</li>';
			endwhile;
			wp_reset_postdata();
			echo '</ul></div><!--panel-default-->';
		}
	}
	echo '</div><!--panel-group-->';
	$x = ob_get_contents();
	ob_end_clean();
	return $x;
}

function sidebar_portfolio_tax(){

global $post;

$terms= get_the_terms($post->id, 'portfolio');

if(is_array($terms))

foreach($terms as $term){

$this_term_ids[] = $term->term_id;

}

ob_start();

$services = get_terms( 'portfolio', array('hierarchical' => false) );//stops empty parents from being included

echo '<div class="panel-group event-accordion" id="accordion">';

foreach ($services as $service) {

$args = array(

'post_type' => 'portfolio_item',

'tax_query' => array(

array(

'taxonomy' => 'portfolio',

'field' => 'id',

'terms' => $service->term_id

)

'orderby' => 'title',

'order' => 'ASC',

'posts_per_page' => -1

);

$x = new WP_Query($args);

if($x->have_posts()){

$in = in_array($service->term_id, $this_term_ids)? ' in': '';//opens accordian to current category

echo '<div class="panel">';// panel-default

echo '<div class="">';//panel-heading

echo '<a style="background-image: url(' . get_stylesheet_directory_uri() . '/grandchild-5-0/images/' . $service->slug . '.png)" class="service-cat ' . $service->slug . '" data-toggle="collapse" data-parent="#accordion" href="#collapse' . $service->term_id . '">';

echo $service->name;

echo '</a>';

echo '</div>';

echo '<ul id="collapse' . $service->term_id . '" class="panel-collapse collapse' . $in . '">';

while ( $x->have_posts() ) : $x->the_post();

echo '<li>';

echo '<a href="';

the_permalink();

echo '">';

the_title();

echo '</a>';

echo '</li>';

endwhile;

wp_reset_postdata();

echo '</ul></div>';

}

echo '</div>';

$x = ob_get_contents();

ob_end_clean();

return $x;

}

and the css:

.event-accordion ul {
	padding-left: 0;
	margin-bottom: 0;
}
.event-accordion ul li {
	list-style: none;
	border-bottom: solid 1px #eeeeee;
	background-color: #999999;
	text-align: right;
}
.event-accordion ul li:hover {
	background-color: #eeeeee;
}
/* optional chevron
.event-accordion ul li:after {
	font-family:'FontAwesome';
	content: "\f054";
	float: right;
	color: #97c1da;
}*/
.event-accordion .panel {
	margin: 0!important;
	border-width: 0!important;
}
.event-accordion .panel > div {
	text-align: right;
}
.event-accordion a {
	padding: 10px 20px 10px 5px;
	display: block;	
}
.event-accordion .service-cat  {
	min-height: 45px;
	background-color: #a3a3a2;
	color: #ffffff;
	background-repeat: no-repeat;
	/*border-top: solid 1px #ffffff;*/
}
.event-accordion .service-cat:hover {
	background-color: #666666;
}

.event-accordion ul {

padding-left: 0;

margin-bottom: 0;

}

.event-accordion ul li {

list-style: none;

border-bottom: solid 1px #eeeeee;

background-color: #999999;

text-align: right;

}

.event-accordion ul li:hover {

background-color: #eeeeee;

}

/* optional chevron

.event-accordion ul li:after {

font-family:'FontAwesome';

content: "\f054";

float: right;

color: #97c1da;

}*/

.event-accordion .panel {

margin: 0!important;

border-width: 0!important;

}

.event-accordion .panel > div {

text-align: right;

}

.event-accordion a {

padding: 10px 20px 10px 5px;

display: block;

}

.event-accordion .service-cat {

min-height: 45px;

background-color: #a3a3a2;

color: #ffffff;

background-repeat: no-repeat;

/*border-top: solid 1px #ffffff;*/

}

.event-accordion .service-cat:hover {

background-color: #666666;

}

If we want to create an horizontal menu instead:

function aux_menu(){
	global $post; 
	$terms= get_the_terms($post->id, 'portfolio');
	if(is_array($terms))
		foreach($terms as $term){
			$this_term_ids[] = $term->term_id;
		}
	ob_start();
	$services = get_terms( 'portfolio', array('hierarchical' => false, 'orderby' => 'slug') );//echo '<pre>';print_r($services);echo '</pre>';
	echo '<div class="aux-menu clearfix "><div>';
	echo '<ul class="sf-menu sf-menu-with-fontawesome">';
	foreach ($services as $service) {
		$args = array(
			'post_type' => 'portfolio_item',
			'tax_query' => array(
				array(
					'taxonomy' => 'portfolio',
					'field' => 'id',
					'terms' => $service->term_id
				)
			), 
			'orderby' => 'title',
			'order' => 'ASC',
			'posts_per_page' => -1
			
		);
		$x = new WP_Query($args);
		if($x->have_posts()){
			$active = in_array($service->term_id, $this_term_ids)? ' current': '';
			echo '<li class="menu-item level-1 ' . $service->slug . $active . '">';
			echo '<button class="menu-btn sf-with-ul" >';
			echo $service->name;
			echo '</button>';
			echo '<ul class="sub-menu non-mega-sub-menu">';
			while ( $x->have_posts() ) : $x->the_post();
					echo '<li class="menu-item level-2">'; 
					echo '<a class="menu-btn" href="';
					the_permalink();
					echo '">';
					the_title();
					echo '</a>';
					echo '</li>';
			endwhile;
			wp_reset_postdata();
			echo '</ul><!--sub-menu-->';
			echo '</li><!--menu-item level-1-->';
		}
	}
	echo '</ul></div></div><!--aux-menu-->';
	$x = ob_get_contents();
	ob_end_clean();
	echo $x;
}

function aux_menu(){

global $post;

$terms= get_the_terms($post->id, 'portfolio');

if(is_array($terms))

foreach($terms as $term){

$this_term_ids[] = $term->term_id;

}

ob_start();

$services = get_terms( 'portfolio', array('hierarchical' => false, 'orderby' => 'slug') );//echo '<pre>';print_r($services);echo '</pre>';

echo '<div class="aux-menu clearfix "><div>';

echo '<ul class="sf-menu sf-menu-with-fontawesome">';

foreach ($services as $service) {

$args = array(

'post_type' => 'portfolio_item',

'tax_query' => array(

array(

'taxonomy' => 'portfolio',

'field' => 'id',

'terms' => $service->term_id

)

'orderby' => 'title',

'order' => 'ASC',

'posts_per_page' => -1

);

$x = new WP_Query($args);

if($x->have_posts()){

$active = in_array($service->term_id, $this_term_ids)? ' current': '';

echo '<li class="menu-item level-1 ' . $service->slug . $active . '">';

echo '<button class="menu-btn sf-with-ul" >';

echo $service->name;

echo '</button>';

echo '<ul class="sub-menu non-mega-sub-menu">';

while ( $x->have_posts() ) : $x->the_post();

echo '<li class="menu-item level-2">';

echo '<a class="menu-btn" href="';

the_permalink();

echo '">';

the_title();

echo '</a>';

echo '</li>';

endwhile;

wp_reset_postdata();

echo '</ul>';

echo '</li>';

}

echo '</ul></div></div>';

$x = ob_get_contents();

ob_end_clean();

echo $x;

}

Then style it including current distinctions and going to vertical accordion […]

Slider Shadow

For Themeblxd Nivo Slider:

.home #tb-slider-home:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -28px;
	left: 0;
	width: 100%;
	height: 28px;
	background: url('../images/shadow.png') no-repeat;
	background-size: 100%;
}

.home #tb-slider-home:before {

content: "";

display: block;

position: absolute;

bottom: -28px;

left: 0;

width: 100%;

height: 28px;

background: url('../images/shadow.png') no-repeat;

background-size: 100%;

}

The Image:

Clearfix

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:

<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-->

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>

</div>

we could add this css to clear:

.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; 
}

.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;

}

Custom Bullet Icons for Lists

I prefer this method because it gives me more control over bullet position.

<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>

<li><a href="http://address.pdf">Title</a></li>

</ul>

and the css (adjust padding based on the size of the image):

ul.pdf-list li  {
	background: url('../images/pdf-icon.png') no-repeat left center;
	padding: 3px 0px 3px 30px;
	list-style: none;
}

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/

<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>

<li><i class="fa-li fa fa-check-square"></i>List icons</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>