1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Reduce white spacing with custom css

Discussion in 'Web Design' started by jammo, Feb 27, 2017.

  1. jammo

    jammo Registered Member

    Joined:
    Oct 24, 2010
    Messages:
    62
    Likes Received:
    9
    Gender:
    Male
    Location:
    North East UK
    Hi all,

    Im a newbie here at attempting slight coding im trying to adjust my page by reducing the white space above and below logo and from header to content as theres more white space than i want. I believe im in the right direction of the custom css file but not sure exactly where to alter so would hugely appreciate any help i can get.

    *edit i have option for custom css to add but unsure what code to add

    Code:
    <?php
    add_action('wp_head','custom_css',20);
    if ( ! function_exists( 'custom_css' ) ) {
        function custom_css() {
            global $bk_option;
            if ( isset($bk_option)):
                $primary_color = $bk_option['bk-primary-color'];
                $bg_switch = $bk_option['bk-site-layout'];
                $cat_opt = get_option('bk_cat_opt');
                $header_top = $bk_option['bk-header-top-switch'];
                $sb_location = $bk_option['bk-sb-location-sw'];
                $sb_responsive_sw = $bk_option['bk-sb-responsive-sw'];
                $main_nav_layout = $bk_option['bk-main-nav-layout'];  
                $meta_review = $bk_option['bk-meta-review-sw'];
                $meta_author = $bk_option['bk-meta-author-sw'];
                $meta_date = $bk_option['bk-meta-date-sw'];
                $meta_comments = $bk_option['bk-meta-comments-sw'];      
                $custom_css = $bk_option['bk-css-code'];  
                $bkbreadcrumbs = $bk_option['bk-breadcrumbs'];    
                $bk_menu_effect = $bk_option['bk-menu-effect'];
                $bk_menu_scheme = $bk_option['bk-menu-scheme'];    
    ?>
       
        <style type='text/css' media="all">
            <?php
                if ( $meta_review == 0 ) echo ('.review-score {display: none !important;}');
                if ( $meta_author == 0 ) echo ('.post-author {display: none !important;}');
                if ( $meta_date == 0 ) echo ('.post-date {display: none !important;}');
                if ( $meta_comments == 0 ) echo ('.meta-comment {display: none !important;}');
                if ( $header_top == 0 ) echo ('.top-bar {display: none !important;}');
                if ( $sb_location == 'left') echo ('.has-sb > div > .content-wrap {float: right;} .has-sb .sidebar {float: left; padding-left: 15px; padding-right: 30px;}');
                if ( $bkbreadcrumbs == 'disable' ) echo ('.bk-breadcrumbs-wrap{display: none;}');
                if ( ($bk_menu_effect == 'fade') || ($bk_menu_scheme == 'light') ) echo ('#top-menu>ul>li > .sub-menu, .bk-dropdown-menu, .bk-sub-sub-menu, .bk-mega-menu, .bk-mega-column-menu, .sub-menu, .top-nav .bk-account-info, .bk_small_cart #bk_small_cart_widget {
                                                        top: -9999999px;
                                                        transition: opacity 0.3s linear;
                                                    }');
                                                   
            ?>
            ::selection {color: #FFF; background: <?php echo esc_attr($primary_color); ?>}
            ::-webkit-selection {color: #FFF; background: <?php echo esc_attr($primary_color); ?>}
            <?php if ( ($primary_color) != null) {?>
                 p > a, p > a:hover, .single-page .article-content a:hover, .single-page .article-content a:visited, .content_out.small-post .meta .post-category, .bk-sub-menu li:hover > a,
                #top-menu>ul>li > .sub-menu a:hover, .bk-dropdown-menu li:hover > a, .widget_tag_cloud .tagcloud a:hover, .widget-twitter .fa-twitter,
                .widget-twitter ul.slides li .twitter-message a, .footer .searchform-wrap .search-icon i, .content_in .meta > div.post-category a,
                .row-type .meta .post-category, #top-menu>ul>li:hover > a, .article-content li a, .article-content p a,
                .s-post-header .meta > .post-category, .breadcrumbs .location, .footer .widget-title h3, .s-post-nav .icon i, .recommend-box .close,
                .s-post-nav .nav-title span, .s-tags a:hover, .error-number h4, .redirect-home, .module-breaking-carousel .flex-direction-nav .flex-next, .module-breaking-carousel:hover .flex-direction-nav .flex-prev,
                .bk-author-box .author-info .bk-author-page-contact a:hover, #comment-submit:hover, .module-feature2 .meta .post-category,
                .loadmore span.ajaxtext:hover, .bk-blog-content .meta .post-category, .widget-social-counter ul li .social-icon,
                .flex-direction-nav li a, .module-feature2 .readmore a:hover, .module-blog ul li .readmore a:hover,
                #pagination .page-numbers, .post-page-links a, input[type="submit"]:hover, .single-page .icon-play:hover, .row-type .readmore a:hover,
                ul.forum-titles li.bbp-forum-info, #bbpress-forums li.bbp-header li.bbp-topic-title, #wp-calendar tbody td a, #wp-calendar tfoot #prev,
                .widget-twitter .flex-direction-nav li a:hover, .widget_latest_comments .flex-direction-nav li a:hover, .woocommerce-page a.button:hover,
                .woocommerce-page div.product form.cart .button:hover, .woocommerce-page #review_form #respond .form-submit #submit:hover, .woocommerce-page div.product div.thumbnails .flex-direction-nav li a,
                .woocommerce-page .woocommerce-message .button:hover, .woocommerce-page input.button:hover, .woocommerce-page input.button.alt:hover,
                .woocommerce-page .cart-collaterals .shipping_calculator h2:hover, .woocommerce-page .widget_price_filter .price_slider_amount .button:hover, .button:hover
                ,.bbp-login-form .bbp-submit-wrapper #user-submit:hover, .widget_latest_replies .details .comment-author, .widget_recent_topics .details .comment-author a
                ,.woocommerce-page .star-rating span, .woocommerce-page p.stars a, .woocommerce-page div.product form.cart table td .reset_variations:hover,
                .bk_small_cart .widget_shopping_cart .cart_list a:hover, .top-nav .bk-lwa .bk-account-info a:hover, .bk_small_cart .woocommerce.widget_shopping_cart .buttons a:hover,
                a.bk_u_login:hover, a.bk_u_logout:hover, .bk-back-login:hover, .bk_small_cart .cart-contents:hover, .woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-calculator .button:hover,
                .top-nav .bk-links-modal:hover, .bk_small_cart .cart-contents span, #main-mobile-menu .expand i,
                .main-nav.bk-menu-light .bk-sub-menu li > a:hover, .main-nav.bk-menu-light .bk-sub-posts .post-title a:hover,
                .top-bar.bk-menu-light .bk_small_cart .woocommerce.widget_shopping_cart .buttons a:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover
                {color: <?php echo esc_attr($primary_color); ?>}
               
                #top-menu>ul>li > .sub-menu, .bk-dropdown-menu, .widget_tag_cloud .tagcloud a:hover, .s-post-nav .nav-title span, .s-tags a:hover,
                .s-post-nav .nav-title span, .bk-mega-menu, .bk-mega-column-menu, .search-loadding, #comment-submit:hover,
                #pagination .page-numbers, .post-page-links a, .post-page-links > span, .widget-twitter .flex-direction-nav li a:hover, .widget_latest_comments .flex-direction-nav li a:hover
                ,#mobile-inner-header, .menu-location-title, .woocommerce-page a.button:hover, .woocommerce-page div.product form.cart .button:hover, input[type="submit"]:hover,
                .woocommerce-page #review_form #respond .form-submit #submit:hover, .woocommerce-page .woocommerce-message .button:hover, .woocommerce-page input.button:hover,
                .woocommerce-page .cart-collaterals .shipping_calculator h2:hover, .woocommerce-page .widget_price_filter .price_slider_amount .button:hover, .button:hover
                ,.bbp-login-form .bbp-submit-wrapper #user-submit:hover, .bk-lwa:hover > .bk-account-info, .bk-back-login:hover, .bk_small_cart:hover #bk_small_cart_widget,
                .bk_small_cart .woocommerce.widget_shopping_cart .buttons a:hover, .woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-calculator .button:hover
                ,.menu-location-title, #mobile-inner-header, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover
                ,.main-nav.bk-menu-light .main-nav-container
                {border-color: <?php echo esc_attr($primary_color); ?>;}
               
                <?php if($bk_option['bk-rtl-sw']) {?>
                .widget_most_commented .comments:after
                {border-left-color: <?php echo esc_attr($primary_color); ?>;}
                <?php } else {?>                    
                .widget_most_commented .comments:after
                {border-right-color: <?php echo esc_attr($primary_color); ?>;}
                <?php }?>
                .thumb, .module-fw-slider .flex-control-nav li a.flex-active, .module-breaking-carousel .content_out.small-post .meta:after,
                .widget_most_commented .comments, .footer .cm-flex .flex-control-paging li a.flex-active, .main-nav #main-menu .menu > li:hover, .main-nav .menu > li.current-menu-item,
                .module-feature2 .flex-direction-nav li a:hover, #ajax-form-search, .ajax-form input,
                .bk-review-box .bk-overlay span, .bk-score-box, .share-total, #pagination .page-numbers.current, .post-page-links > span,
                .woocommerce span.onsale, .woocommerce-page span.onsale, .widget_display_stats dd strong, .widget_display_search .search-icon, .searchform-wrap .search-icon,
                #bbpress-forums #bbp-search-form .search-icon, #back-top, .woocommerce-page div.product .summary .product_title span, .woocommerce-page div.product .woocommerce-tabs ul.tabs li.active,
                .related.products > h2 span, .woocommerce-page #reviews h3 span, .upsells.products > h2 span, .cross-sells > h2 span, .woocommerce-page .cart-collaterals .cart_totals h2 span
                , .bbp-pagination-links a:hover, .bbp-pagination-links span.current, .module-square-grid .content_in_wrapper, .bk_tabs .ui-tabs-nav li.ui-tabs-active
                {background-color: <?php echo esc_attr($primary_color); ?>;}
               
                .content_out .review-score, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:window-inactive
                {background-color: <?php echo hex2rgba (esc_attr($primary_color), 0.9); ?>;}
               
                .footer .cm-flex .flex-control-paging li a
                {background-color: <?php echo hex2rgba (esc_attr($primary_color), 0.3); ?>;}
               
    
            <?php }?>
            <?php
            if ( $bg_switch == 'wide') {?>
                #page-wrap { width: auto; }
            <?php }else{?>
                body { background-position: left; background-repeat: repeat; background-attachment: fixed;}
            <?php };
            if ( $sb_responsive_sw == 0) {?>
                @media (max-width: 991px){
                    .sidebar {display: none !important}
                }
            <?php };
            if ( $main_nav_layout == 'center') {?>
                .main-nav #main-menu{
                    text-align: center !important;
                }
            <?php };?>
            <?php if ($custom_css != '') echo ($custom_css);?>
           
        </style>
        <?php endif;?>
        <?php }?>
    <?php }?>
     
    Last edited: Feb 27, 2017
  2. sturose

    sturose Jr. VIP Jr. VIP

    Joined:
    Nov 6, 2013
    Messages:
    1,808
    Likes Received:
    2,217
    Gender:
    Male
    Occupation:
    Self unemployed
    Location:
    Right behind you!
    Right click on the logo and inspect element.

    In the inspect element window you should see the css for that area of your site, (the logo and surrounding areas)

    Play around with the values there, it doesn't alter anything on your site, a page refresh with reset everything back. You will see what changes as you change the values. I'm no expert but I'm guessing things like "padding" or "margin" might be what you're looking for.

    Hope that helps.
     
    • Thanks Thanks x 1
  3. jammo

    jammo Registered Member

    Joined:
    Oct 24, 2010
    Messages:
    62
    Likes Received:
    9
    Gender:
    Male
    Location:
    North East UK

    ok thats great i didnt know that.

    only problem is it says location of this is:sensetheme/css/bkstyle.css
    but when i go to editor in that theme i have a style.css (which not much in there) or custom.css which i cant seem to find what i found when inspecting
     
  4. sturose

    sturose Jr. VIP Jr. VIP

    Joined:
    Nov 6, 2013
    Messages:
    1,808
    Likes Received:
    2,217
    Gender:
    Male
    Occupation:
    Self unemployed
    Location:
    Right behind you!
    It is style.css you want to alter but you should really consider creating a child theme first because if your theme updates you will lose any changes.

    With some themes you have a css editor built in. In the admin area hover over appearance and in the menu that pops out you may have a "Custom css" or similar section, or try clicking customize and see if there's anything there.

    [​IMG]

    Something like that.
     
    • Thanks Thanks x 1
    Last edited: Feb 27, 2017
  5. jammo

    jammo Registered Member

    Joined:
    Oct 24, 2010
    Messages:
    62
    Likes Received:
    9
    Gender:
    Male
    Location:
    North East UK
    yep i have an additional css which inside says :

    You can add your own CSS here.

    Click the help icon above to learn more.

    but unsure exactly what to do
     
  6. jammo

    jammo Registered Member

    Joined:
    Oct 24, 2010
    Messages:
    62
    Likes Received:
    9
    Gender:
    Male
    Location:
    North East UK
    ok got it! ive copied part that i needed altering from what i inspected and added in additional css editor and it worked , ive now done the logo now i need to find removing space between menu and content but ive already learned so much by what you have said. cheers @sturose its helped alot
     
    • Thanks Thanks x 1
  7. judaculla

    judaculla Regular Member

    Joined:
    Oct 11, 2014
    Messages:
    337
    Likes Received:
    125
    Location:
    USA
    Many wordpress themes offer the ability to add custom code from within a theme options panel.

    By editing the themes core files directly, any changes you make will be reverted during the next theme update.

    If you don't have a theme offering that functionality, you should create what is know as a 'Child Theme' which will have it's own style.css file that would override any theme-native styles so that you could put changes there, and they wouldn't be affected during theme updates.

    Just google 'how to create a wordpress child theme'. It's considered standard practice, and will help avoid many headaches in the future
     
  8. sturose

    sturose Jr. VIP Jr. VIP

    Joined:
    Nov 6, 2013
    Messages:
    1,808
    Likes Received:
    2,217
    Gender:
    Male
    Occupation:
    Self unemployed
    Location:
    Right behind you!
    If I want to change the text size on your post, I right click and inspect element.

    [​IMG]

    Then change the value as needed and copy the css required and paste into the custom css on the admin area:

    [​IMG]
     
  9. sturose

    sturose Jr. VIP Jr. VIP

    Joined:
    Nov 6, 2013
    Messages:
    1,808
    Likes Received:
    2,217
    Gender:
    Male
    Occupation:
    Self unemployed
    Location:
    Right behind you!
    Happy to help buddy, glad you got it sorted.

    Inspect element is a fantastic tool for fine tuning the style of your website.