Reduce white spacing with custom css

jammo

jammo

Registered Member
Joined
Oct 24, 2010
Messages
62
Reaction score
9
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:
Advertise on BHW
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.
 
sturose said:
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.
Click to expand...


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

dXOfFS.jpg


Something like that.
 
Last edited by a moderator:
sturose said:
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.
Click to expand...
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
 
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
 
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
 
If I want to change the text size on your post, I right click and inspect element.

RFHyMn.jpg


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

ruy9na.jpg
 
jammo said:
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
Click to expand...

Happy to help buddy, glad you got it sorted.

Inspect element is a fantastic tool for fine tuning the style of your website.
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top