Loading...
 
Skip to main content

Themes

Forum List Topic List

Forums » Themes » Change columns' width in Cyborg theme
 
Thread actions
Print this page
  • Print all pages

    • Change columns' width in Cyborg theme

    Posted by yuki Netherlands

    Hi,

    Just to wanted to say, after numerous attempts I am finally ready to let it go and give up.

    This only proves to me that:
    1. The simplest of things are always the hardest to accomplish.,
    and
    2. NO. You cannot use tikiwiki if you know nothing about programming, coding, or whatever is the correct word for that.

    At least I tried and can now move on with clear conscience

    Thank you to those who tried helping me out

    :)

    Screenshot at 2018-10-25 22:39:29.png (65.24 Kb)
    Screenshot at 2018-10-25 22:41:36.png (32.80 Kb)
    Reads: 3279
    Posted by Gary Cunningham-Lee Japan

    Hi Yuki,

    There's some information on this page that should be helpful: https://themes.tiki.org/How-to-change-the-side-column-widths. The first method on that page should be used - Change the widths by adding CSS rules, so you redefine the widths of the columns, as long as they add up to (or are slightly less than) 100%. The CSS classes that identify the columns (such as "#col1.col-md-8.col-md-push-2.col1") at your site may be as described on the docs page, or may differ. They will have #col1, #col2 and #col3 in common but other details may differ. So if the CSS rules as described don't have any effect, you may need to check your page in your browser's web tools DOM inspector to double check the column classes involved.

    If you have questions after trying the method, please post again.

    -- Gary

    Posted by yuki Netherlands

    Hi,

    Sorry, I've tried but with no effect. Perhaps it's because I don't speak "tech" 😊. Anyway, a bit of progress. I found some old post here and put this code in the Custom CSS under Look & Feel:

    1. col1 {padding-right: 70px;}
    2. col1 {padding-left: 10px;}

    .col-md-3 {width: 16%;}

    That last line shrunk the menu column to exactly what I wanted. Problem is I still have no clue as to how to widen the main column (with all the content) in a way that it fills up the space I gained by shrinking the menu column. I simply need a line of code that does it and I'm done.

    Any suggestions most welcome!

    Posted by yuki Netherlands

    Hi,

    OK. More progress. Now I've managed to get the main column closer to the menu column! Now the last thing is to widen the main column so to fill up the space created on the right hand side. Tried a number of codes but haven't find the right one yet. perhaps you could help with that part?

    Please 😊

    - please see attached screenshots for the new look and the code used to accomplish it.

    Screenshot at 2018-10-27 20:52:13.png (107.00 Kb)
    Screenshot at 2018-10-27 20:53:48.png (37.93 Kb)

    Posted by Gary Cunningham-Lee Japan

    Hi,

    Is your site public? If it is, I could take a look and let you know the specific changes that need to be made.

    A little feedback so far: padding is the white space around the edges on the inside a div or other page element so the #col1 {padding: ___ } rules won't affect the width of the column itself, only the distance between the inside edges of the column and its contents.

    It looks like you've narrowed #col2 so far, and added a rule to move #col1 more to the left. To widen #col1, you need to increase the percentage figure that defines its width. Tiki uses the Bootstrap CSS framework and its grid for layout, which is 12 units wide. So column widths are percentage equivalents of 1/12, 2/12, 3/12, etc. You need to add a rule something like

    #col1.col-md-9 { width: 75%;}

    but this might not be exactly right, depending on the configuration and Tiki version of your site, so it would be good to be able to see it, to check.

    -- Gary

    Posted by yuki Netherlands

    Hi,

    ... by the way, I believe I'm using version 19 but don't know how to verify this. Either way, it should be the newest as I loaded it up not even a month ago.

    Thank you... again!


    Posted by yuki Netherlands

    Hi,

    No, the site is not public. Unfortunately for me as well 😊.

    Still, I'm using the standard cyborg theme. Sure, I don't have any menus on the right hand side but that's about the only difference from what comes straight "out of the box" . The CSS changes I took the screenshot of are the only ones applied. There are no hidden modules or anything like it. It's as simple as the template.

    I've already tried this code: "#col1.col-md-9 { width: 83%;}"
    When set to 83% I get exactly what I want regarding the size of main column but this also moves my left hand side menu - it simply shifts to the right by the same amount that the main column grows and goes underneath the main column. In other words, this doesn't work. Well, I guess I shall have to learn to live with the disappointment... 😊. That's why I thought putting in some icons into the menu to make the entries longer / bigger and so widen the menu and this way make things more symmetrical.

    Thank you for trying anyway! Every little helps!