Please see our updated documentation for Boombox Version 2 and our Migration Guide.

Okay
  Print

Boombox custom code usage cases - Desktop

Please note that Px-Lab not responsible for the way of use for provided below code, they may work or may not work depending on your current settings and options.  Codes were written during support and assistance to some Boombox users by the initiative of Px-Lab.

We are not providing support or assistance for the use of these codes. Any customization service and additional coding is out of the scope of our support.

In order to apply below code:
1. Go to Dashboard=>Appearance=>Customize=>Additional CSS
2. Paste the code
3. Click on save and publish

HEADER

Hiding Create post button under burger menu

.more-menu-footer .create-post { display:none;
}

Set menu toggle icon to left

/* Set toggle icon to the left of the menu */ 
.navigation-box .wrapper>.nav { padding-left: 40px; position: relative;
}
.more-menu-item { position: absolute; left: 0; top: -1px; padding: 6px 0;
}

Remove uppercase from top and bottom header menus

/* Remove uppercase from top and bottom header menus */
.main-navigation>ul li>a { text-transform: none;
}

Hiding login and register controls and buttons from authentication popup and leaving only social login functionality

/* Hiding authentication controls and button */
.authentication input[type='password'],
.authentication input[type='email'],
.authentication input[type='text'],
.authentication .reset-password-link,
.authentication .input-field .bb-btn { display: none;
}

Remove header margins

/* Remove header margins */
.header .top { padding: 0 5px;
}

Change menu item font size

/* Change menu item font size */
.main-navigation>ul li>a { font-size: 16px;
}

Apply custom font for all headings, links and body text on site

/* Apply custom font for all headings, links and body text on site */
@font-face { font-family: 'BwSurco'; src: url('https://vivaganir.com/static/font/BwSurco-Black.eot'); src: url('https://vivaganir.com/static/font/BwSurco-Black.eot') format('embedded-opentype'), url('https://vivaganir.com/static/font/BwSurco-Black.woff') format('woff'), url('https://vivaganir.com/static/font/BwSurco-Black.otf') format('opentype'),
}
@font-face { font-family: 'BwSurco'; src: url('proximanova-regitalic-webfont.eot'); src: url('https://vivaganir.com/static/font/BwSurco-Regular.eot') format('embedded-opentype'), url('https://vivaganir.com/static/font/BwSurco-Regular.woff') format('woff'), url('https://vivaganir.com/static/font/BwSurco-Regular.otf') format('opentype'),
font-weight: 400;
}
@font-face { font-family: 'BwSurco'; src: url('https://vivaganir.com/static/font/BwSurco-Light.eot'); src: url('https://vivaganir.com/static/font/BwSurco-Light.eot') format('embedded-opentype'), url('https://vivaganir.com/static/font/BwSurco-Light.woff') format('woff'), url('https://vivaganir.com/static/font/BwSurco-Light.otf') format('opentype'),
font-weight: 300;
}
body, html, .entry-title,
#cancel-comment-reply-link,
#comments .comments-title span,
.pagination, .pagelinks,.vp_dash_pagina,
.comments-area h3,[class*=" mashicon-"] .text, [class^=mashicon-] .text,
.entry-no-lg,.reaction-box .title,
.reaction-item .reaction-vote-btn,
#comments .comments-title, #comments .comment-reply-title,
.page-trending .trending-navigation ul li a,.vp-entry legend,.widget-title,
.badge .text,.post-number,
.more_items_x legend, .more_items legend, .more_items_glow,
section.error-404 .text,
.inline-popup .title,
.authentication .title,
.other-posts .title,
.post-share-box h2,
.page-header h1 { font-family: 'BwSurco';
}

Change header bottom menu to fit the top and bottom of the header

/* Change header bottom menu to fit the top and bottom of the header */
.navigation-box .wrapper > .nav { top:0!important;
}
.header .bottom { padding: 0;
}
.main-navigation>ul>li { padding: 30px 10px;
}
.header .top-search .form-toggle { margin: 4px 0 0 6px;
}

Change header bottom menu hover color and background color

/* Comment by Px-Lab: Change header bottom menu hover color and background color */
.header .bottom .main-navigation > ul > li:hover,
.header .bottom .main-navigation > ul > li:focus { background: #ffe400;
}
.header .bottom .main-navigation > ul > li:hover > a,
.header .bottom .main-navigation > ul > li:focus > a { color: #1f1f1f;
}
.navigation-box .wrapper nav ul li:first-child { padding-left: 10px;
}

Hide Woocommerce cart button from header

/* Hide Woocommerce cart button from header */
.header .account-box .wrapper>.user-cart { display: none;
}

Change burger menu toggle icon to text

#more-menu-toggle {font-size: 13px;
    line-height: 13px;
    vertical-align: middle;
}
#more-menu-toggle:before {
 content: "More";
 text-transform: uppercase;
 font-weight: 600;
}
#more-menu-toggle .toggle-icon {
   display: none;
}

Increase space between badges

.top-badge-list .badge-list .badge, .header .badge-list .badge {
 margin: 0 .8% 5px; }

Hiding Compose button Below is a code which will hide Compose button! It will hide the button for all users! Currently there is no option of hiding the button based on user role.

/* Hide Zombify Create Post button */
.header .bottom .account-box .create-post,
.mobile-navigation-wrapper .more-menu .more-menu-footer .create-post {     display: none;
}


PAGES/ARCHIVE

Hide page header for all categories

.archive.category .page-header {    
    display: none;
}

Hide page header for hot, popular and trending pages

.page-template.page-template-page-trending-result .page-header {
 display: none;
}

Hide page header for reactions

.archive.tax-reaction .page-header{ 
 display: none;
} 

Hide page header for tags

.archive.tag .page-header{    
 display: none;
}

Change single post page desktop container size

/* Make single page container narrower */
.single-post.post-featured-image #mainContainer .content,
.single-post #mainContainer .container { width: 980px;
}
@media screen and (min-width: 901px) { .single-post .site-main { width: 58%; } .single-post .sidebar { width: 37%; }
}
@media (min-width: 1200px) { .author-vcard .header-left { width: 100%; text-align: center; padding: 0; } .author-vcard .header-right { width: 100%; text-align: center; padding: 0 135px; } .author-vcard .header-left .col-r { padding: 0 50px; } .author-vcard .social ul { float: none; }
}

Decrease featured area image height in case of Featured Type='2 Featured'

.featured-area.item-2 .featured-item { 
    max-height: 296px;
}

Setting max height for grid view thumbnail images

@media (min-width:768px) {
  .post-grid.col-2 .post-thumbnail > a {
    display: inline-block;
    max-height: 205px;
    overflow: hidden;
    width: 100%;
  }
}

Hiding share buttons in Stream, Classic, Classic 2 pages

/* Hiding share buttons in Stream, Classic, Classic 2 pages */
.post-list.standard .post .entry-footer { display: none;
}

Make Home Page ( of 'Stream (gif's & memes)' type) content area wide

/* Make Home Page ( of 'Stream (gif's & memes)' type) content area wide */
.home-page .narrow-content { width: 1200px;
}

Make single page container narrower

.single-post.post-featured-image #mainContainer .content,
.single-post #mainContainer .container {   width: 980px;
}
@media screen and (min-width: 901px) { .single-post .site-main { width: 58%; } .single-post .sidebar { width: 37%; }
}

Hide Pending, Draft and Add New Post tabs from profile Submissions section

/* Hide Pending, Draft and Add New Post tabs from profile Submissions section */
#buddypress #pending-personal-li,
#buddypress #drafts-personal-li, #buddypress #add-new-post-personal-li { display: none;
}

Highlight search results text

/* Highlight search results text */
.search-results .page-header span { font-size: 22px; font-style: italic; display: inline-block; margin-bottom: 5px;
}

Remove badges from specific page

/* Remove badges from specific page */
.page-id-15061 .top-badge-list { display: none;
}

How to set specific page after login or after registration?

The below code should be added to a child theme in functions.php.
In order to get more information about child theme read WordPress official documentation.

By default after registering, Boombox redirects users to the home page.  With 'boombox_auth_register_redirect_url' hook you can change redirection URL to the new

register page. For example, if your page slug is 'register':

function boombox_child_auth_register_redirect_url($current_url){
    $current_url = get_permalink( get_page_by_path( 'register' ) );
    return $current_url;
}
add_filter( 'boombox_auth_register_redirect_url', 'boombox_child_auth_register_redirect_url', 9 );

By default after login, Boombox redirects users to the same page, from which they try to log in.  With 'boombox_auth_login_redirect_url' hook you can change login url to the new login page. For example, if your new login page slug is 'login':

function boombox_child_auth_login_redirect_url($current_url){
    $current_url = get_permalink( get_page_by_path( 'login' ) );
    return $current_url;
}
add_filter( 'boombox_auth_login_redirect_url', 'boombox_child_auth_login_redirect_url', 9 );

How to change excerpt length?

By default boombox set excerpt length to 25 words, you can change it from child theme functions.php with 'excerpt_length' hook. 

function boombox_child_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'boombox_child_excerpt_length', 999 );


POSTS

Change voting arrows to icons (like and dislike)

.post-rating .point-btn .icon-arrow-up:before { content: "\f087";
}
.post-rating .point-btn .icon-arrow-down:before { content: "\f088";
}

Hide downvote button on posts

/* Post Rating Custom Change */
/* Post Rating Custom Change */
.post-rating .down.point-btn { display: none;
}
.post-rating .up.point-btn .icon-arrow-up:before { content: "\f164";
}

Changing hover color of post links

/* Changing hover color of post links */
.entry-title:hover a { color: #b1abab;
}

Make Next/ Prev Buttons smaller

/* Make Next/ Prev Buttons smaller */
.next-prev-pagination .nav a { min-width: 200px; padding: 12px 15px; font-size: 15px; line-height: 20px;
}
.next-prev-pagination .nav a .icon { font-size: 18px; top: 14px;
}
@media screen and (min-width: 401px) and (max-width: 700px) { .next-prev-pagination .nav { max-width: 200px; } .next-prev-pagination .nav a { min-width: initial; } }
@media screen and (max-width: 400px) { .next-prev-pagination .nav.prev-page a { padding: 22px 8px; width: 55px; } .next-prev-pagination .nav.next-page, .next-prev-pagination .nav { width: auto; }
}

Make Next/ Prev Buttons Bigger

/* Make Next/ Prev Buttons Bigger */
.next-prev-pagination .nav.prev-page .text, .next-prev-pagination .nav.prev-page .mobile-text { display: none;
}
@media (min-width: 401px) { .next-prev-pagination .nav a { padding: 22px 15px; height: 65px; font-size: 30px; min-width: initial; } .next-prev-pagination .nav.next-page { width: 65%; } .next-prev-pagination .nav.prev-page { width: 20%; } .next-prev-pagination .nav a .icon { font-size: 32px; top: 18px; } .next-prev-pagination .nav.prev-page a .icon { left: 50%; margin-left: -12px; } .next-prev-pagination .pages { padding: 16px 5px; }
}

Align Images, gifs and embeds in the center of post

/* Align Images, gifs and embeds in the center of post */
.single-post .entry-content iframe,
.single .post.single .hy_plyr,
.single .post.single img { margin-left: auto!important; margin-right: auto!important;
}

How to change post date format

Please follow these steps:

  • activate boombox-child theme.
  • add following code to functions.php file within boombox-child theme.
  • change 'Y m d' to any other format. You can find possible formats here.
add_filter( 'boombox_post_date', 'boombox_child_post_date', 10, 1 );
function boombox_child_post_date( $date ) {    
    $date = get_the_time( 'Y m d' );        
    return $date;
}

How to delete enumeration in Zombify Posts?

/* Delete numbers from Zombify Posts (List, Open List and Ranked List) */
#zombify-main-section-front .zf-list.zf-numbered .zf-list_item .zf-list_header .zf-list_title {
   padding-left: 0;
}
#zombify-main-section-front .zf-numbered .zf-list_title .zf-number {
  display: none;
}

How set next / previous posts functionality to grab posts from the same category?

  • activate boombox-child theme.
  • add following code to functions.php file within boombox-child theme.
add_filter( 'boombox/single/link-pages-args', 'boombox_child_edit_single_link_pages_args', 10, 1 );
function boombox_child_edit_single_link_pages_args( $args ) {   $args['in_same_term'] = true;   return $args;
}
add_filter( 'boombox_fixed_navigation_post', 'boombox_child_edit_fixed_pagination_post', 10, 2 );
function boombox_child_edit_fixed_pagination( $adjacent_post, $adjacent ) {   $boombox_reverse_pagination = (boombox_get_theme_option( 'layout_post_navigation_direction' ) == 'to-oldest');   if( $adjacent == 'prev' ) {      $adjacent_post = $boombox_reverse_pagination ? get_next_post( true ) : get_previous_post( true );   } elseif( $adjacent == 'next' ) {      $adjacent_post = $boombox_reverse_pagination ? get_previous_post( true ) : get_next_post( true );   }   return $adjacent_post;
}

Change position of view full post button to outside bottom

.post-list .post.full-post-show .post-thumbnail {
     margin-bottom: 47px;
}
.post-thumbnail .view-full-post {
     background: transparent;
     bottom: -45px;
}
.post.full-post-show .post-thumbnail > a:first-child {
     display: inline-block;
     width: 100%;
}
.post.full-post-show .post-thumbnail.show-short-media {
     max-height: none;
     overflow: initial;
}
.post.full-post-show .post-thumbnail.show-short-media > a:first-child {
     max-height: 500px;
    overflow: hidden;
}
.post-thumbnail.show-short-media .view-full-post {
     bottom: -37px;
}
@media screen and (max-width: 767px) {
 .full-post-show .post-thumbnail.show-short- media {
    max-height: none;
 }
 .full-post-show .post-thumbnail.show-short-
 media >a:first-child {
     max-height: 300px;
 }
}

How to increase excerpt length?

By default, wp excerpt length is set to 25 words.

To increase / decrease it please do following.

  • activate boombox-child theme.
  • add following code in functions.php file in boombox-child theme
add_filter( 'excerpt_length', 'boombox_child_edit_excerpt_length', 10, 1 );
function boombox_child_edit_excerpt_length( $length ) {       $length = 20; // your preferred words count in excerpt          return $length;
}

How to make post full width when post have no sidebar?

@media screen and (min-width: 
    1200px) {
    .single.no-sidebar 
    #boombox_comments, 
    .single.no-sidebar 
    .newsletter-box, 
    .single.no-sidebar 
    .post-navigation, 
    .single.no-sidebar 
    .post.single 
    .author-vcard, 
    .single.no-sidebar 
    .post.single 
    .entry-content {
    width: 100%;
}
}

Make single post thumbnail image auto width

.single.post .post-thumbnail img {
 display: block;
 width: auto;
 margin-left: auto;
 margin-right: auto;
}

Make single post media items narrower for Boombox and Zombify posts

#zombify-main-section-front .zf-image .zf-image_media,
#zombify-main-section-front .zf-video .zf-embed, #zombify-main-section-front .zf-video .zf-video_media,
.single-post .entry-content iframe, .single .post.single .hy_plyr, .single .post.single img,
.single .post.single .boombox-responsive-embed,
.single .post.single twitterwidget {
    max-width: 400px!important;
    margin-left: auto!important;
    margin-right: auto!important;
    display: block;
}


To edit displayed date format please follow these steps:

  • activate boombox-child theme
  • add following code to functions.php file within boombox-child theme
/** * Edit post date display format */
add_filter( 'boombox_post_date', 'boombox_child_edit_post_date', 10, 1 );
function boombox_child_edit_post_date( $date ) {   $date = get_the_modified_time( 'Y-m-d H:i:s' );   return $date;
}

Optionally, please take a look at possible date formats with this URL.