WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] [Theme: Yoko] Sidebar Headache / Please Help (15 posts)

  1. lakotainc
    Member
    Posted 2 years ago #

    Hi guys, new user here, though I've had a bit of experience with WordPress themes before. I'm not exactly CSS savvy, though I usually feel my way through until I get the theme looking the way I want it to. A lot of google search on css queries gets me through, but this new theme I've installed (Yoko) is truly making my brain fry. I would usually abandon for another theme, but I quite like this ones look so thought maybe the support forum would be the place to go.

    As you probably know, Yoko is a three column design, a single content column, and two sidebars on the right. As has been discussed before on here, I wish to remove one of the sidebars (either really) and fill up the space that it took up with the single column. Have a look at psyche-interactive.com

    I've gone ahead and removed all instances of 'secondary' sidebar and it's connected code in a crude butcher type way in the theme's CSS stylesheet, and in the Sidebar.php. I've gone through every other php page and I can't figure out why the space where the sidebar used to be won't go away, it just remains there, looking all ugly and taking up space. If you change the window proportions, it contorts around the empty sidebar that isn't even being called anymore.

    I can't for the life of me figure this out, is it the initial table that is being called up? Or something like that? Just empty space. Here is my code.

    CSS Stylesheet

    [CSS code moderated - a link to your site is all that is needed]

    Sidebar:

    [code moderated - please use the pastebin.com]

    I can post any other code that you need, not sure what you'd be looking for. For me, looking through these pages is akin to reading a foreign language I only understand a little bit - words here and there. I'm probably just missing something that I don't understand.

    Your help would be greatly appreciated. I'm viewing the site through the newest crome browser, if that matters.

  2. lakotainc
    Member
    Posted 2 years ago #

    I've been continuing to try and fix this issue over the last two hours, I have come across many websites that have resolved the issue somehow. I've opened their CSS stylesheet and a lot have hidden the secondary sidebar, some have deleted the code entirely, but I can't access their sidebar.php to see the final step in the process.

    If anybody could please find a way to fix this for me, and those other users who have been trying to fix this (the forums search option yields a handfull of people who have asked the same query and never been answered.)

    One website that has solved it is: http://elschy.de/

  3. Looking at that last link you provided, I think to expand the width of the content and eliminate the middle column, just use some CSS.

    Also a little child theme functions.php file will clean up the Sidebar widget area.

    Create wp-content/themes/yoko-child/style.css and put in these lines:

    /*
    Theme Name: Yoko Child Theme
    Author: Self-Help WordPress User
    Template: yoko
    */
    
    @import url("../yoko/style.css");
    
    /* Start child theme CSS here */
    
    #content {
            width: 100%;
            float: left;
            margin-right: 4%
    }
    #secondary {
            display: none;
    }
    #tertiary {
            width: 21%;
            float: right;
            overflow: hidden;
    }

    I'm really pushing the code line limit here, so just in case here is the Pastebin link http://pastebin.com/DEEjJ6YU

    Now comes the fun part (which I understand better than CSS). Create a wp-content/themes/yoko-child/functions.php file and copy this into it.

    <?php
    
    add_action( 'init' , 'mh_unregister_sidebar' , 11 );
    
    function mh_unregister_sidebar() {
            unregister_sidebar( 'sidebar-1' );
            unregister_sidebar( 'sidebar-2' );
    
            register_sidebar( array (
                    'name' => __( 'Sidebar', 'yoko' ),
                    'id' => 'sidebar-2',
                    'description' => __( 'One Sidebar Only', 'yoko' ),
                    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
                    'after_widget' => "</aside>",
                    'before_title' => '<h3 class="widget-title">',
                    'after_title' => '</h3>',
                    )
            );
    
    }

    And the Pastebin link for that is http://pastebin.com/gvBi7U7n

    The this removes the old sidebars and creates a new sidebar-2 with a different label and description.

    Technically, you can do without the functions.php file but you'd need to remember that Sidebar 1 never gets displayed. :)

  4. lakotainc
    Member
    Posted 2 years ago #

    Thanks so much for your clear response, I'm sure this will help many many people who have been searching for an answer. I've moved on to a different theme as I was growing weary and didn't think I'd get a reply (judging on past users who had the same problem, no slight against the community). Looking at what you've done there, I don't think I would have figured that out on my own.

    Thanks again ^_^

  5. bloginfonol
    Member
    Posted 2 years ago #

    Actually the above code works..But when the themes resizes itself for mobile devices..the sidebar doesn't look cramped..any suggestion for this ? Or I am the only one having this issue ?

  6. elschy
    Member
    Posted 2 years ago #

    My blog was already mentioned. So I decided to publish my yoko child theme. You can download my child theme under http://elschy.de/-child_yoko

    best regards
    elschy

  7. TKoen
    Member
    Posted 1 year ago #

    I know this is an old post, but there is a much easier way of going about it. I managed to remove the third column and also stretch the second column to fit the space with just a few CSS tweaks.

    These were done in the stylesheet.css file:

    ORIGINAL CODE:

    #main {
    	width: 74.59%;
    	float: left;
    	overflow: hidden;
    }
    #content {
    	width: 75.669%;
    	float: left;
    }
    #secondary {
    	width: 17.275%;
    	margin-left:7.054%;
    	float: left;
    }
    
    #tertiary {
    	width: 23.775%;
    	float: right;
    	overflow: hidden;
    }

    MY CHANGES:

    #main {
    	width: 100%;
    	float: left;
    	overflow: hidden;
    }
    #content {
    	width: 65%;
    	float: left;
    }
    #secondary {
    	width: 25%;
    	margin-left:7.054%;
    	float: left;
    }
    /*
    #tertiary {
    	width: 23.775%;
    	float: right;
    	overflow: hidden;
    }*/

    By Hiding the tertiary bar and then fixing the widths of the main, content, and secondary divs. (With the secondary and content divs you need to just make sure that you are accounting for the margin-left in the percentages.)

    It seemed to work fine for me here.

    Although, and this is a big one. I have yet to test it on mobile and tablets. This is a quickfix for the browser based version.... Will let you know once i have done a couple more tests.

  8. Bobbito
    Member
    Posted 1 year ago #

    Thanks TKoen, that helped me so much :)

    Can I just add though in case it helps anyone else, I had to remove the 'tertiary' code from sidebar.php for the above css fix to work properly.

  9. TKoen
    Member
    Posted 1 year ago #

    No trouble!

    Odd that you had to remove the 'tertiary' code.. It seemed happy with me commenting out the CSS... But at least you got it working!

  10. deodesign
    Member
    Posted 1 year ago #

    I used TKoen's code to remove a sidebar, ( 3rd previous post).

    It is fine when I am looking through a browser, but when I reduce the browser to test for mobile devices the content is not full width and the sidebar stays on the left rather than change position to go below the main content.

    I looked at TKeon link to his website and that theme behaves correctly: when the browser is reduced for mobile devices the sidebar goes below the main content and the main content is 100% wide.

    Can anyone help me? Any ideas?

    Here are a couple of links:
    http://tabla-art.com/deodesign/
    http://tabla-art.com/deodesign/?cat=12

    Below is the code I took from TKoen:

    #main {
    	width:100%;
    	float:left;
    	overflow:hidden;
    }
    
    #content {
    	width:65%;
    	float:left;
    }
    
    #secondary {
    	width:25%;
    	margin-left:7.054%;
    	float:left;
    }

    Regards

  11. bleuette
    Member
    Posted 1 year ago #

    Hello:

    I'm super new to this website design thing, I tried changing the CSS stylesheet to the above code, I tried both deodesign and Tkoen's suggestions, I update the code and go to my website and nothing has changed.. am I missing a step? Any assistance would be greatly appreciated!
    http://www.fullcirclewellnesscentre.ca

    I'm simply trying to remove the second sidebar and increase the content and sidebar 1 size.

    Be well,

  12. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    As you're not contributing to the original poster, consider posting your own thread on the issue.

  13. nitin800
    Member
    Posted 1 year ago #

    please help me in making change in css so that the theme looks like

    [sidebar1][content][sidebar2]

    both sidebar should be of same width.

    thanks in advance

  14. Ksikelly
    Member
    Posted 1 year ago #

    elschy I like your child theme. I am wondering if it solves the issue I am having. The date takes up a whole column for itself to the left of my posts. I'm using a non-static page, with posts. Ideally I'd like to hide post dates but can't find out how to do this.

    Do you guys know a way to move the date to the post area and not off to the side? Or at a minimum have the date use less space?

    Thankyou.

  15. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Closing thread.

    Create your own thread for support with your own issues.

Topic Closed

This topic has been closed to new replies.

About this Topic