Loading...
 
Skip to main content

Themes


how to adjust the width of the main menu...

United Kingdom

Hello,

... hopefully this is the last modification of the parametres of the Cyborg theme I'm trying to use. Please have a look at the attached clip11. The menu is quite wide and I do not have any lengthy names of items listed in the menu. This creates a big gap between the menu names and the text in the main content column. What I'd like to do is to shrink the width of the menu (dotted line) and at the same time increase the size of the main column. Having this in place all of the content would look much more centred and focused.

Perhaps, you know a code I could use, alike the one you gave me to manipulate the size of the right margin?

Please let me know. Thank you muchly, as always! 😊

Japan

Sorry, I can't see enough of the page from clip11 to know what's going on.

-- Gary


United States

Gary, I think she is talking about narrowing the main menu area at the left of the Cyborg theme.
I believe you'd have to narrow the entire column se7en not just the main menu.
Since that is the case you can apply the following code into your Custom CSS at Look and Feel.

Copy to clipboard
.col-md-3 { width: 20%; } .col-md-9 { width: 80%;


The default width is 25%, I adjusted it to 20% on my test site with Cyborg theme and it worked well. You can save the theme, check it, then adjust that percentage to suit your needs.

At the main center of your site or col-md-9 you'll need to change the percentage to equal 100% if you add the left column to middle column percentage widths. So if you adjust the left column to 15% you'll have to change the main column to 85%

I don't play with theme code too often, but I am learning by using the Firefox Inspector, so this code will work, but Gary may add to it to make it more legit.


United Kingdom

Hello,

Yes, yes and yes.... addressing all points:

The clip's screwed up, true, not me taking it though… 😊 I'm hired for expertise in my field, which has nothing to do with creating websites (obviously), however, I'm also tasked with this; as a cruel experiment if you ask me; who knows. Not that I’m looking for excuses, it’s just how it is.

Problem.
It is becoming increasingly difficult to continue without revealing the content - which I’m being given bit by bit - and I can't address issues when working on blanks and lorem ipsums since it is the real content that triggers need for adjustments i.e. I can only see what needs adjusting after applying the content. Life in a vicious circle 🙄

I understand now. Yes. It’s the column (left hand side) where the main menu is sitting that needs to have the width shrunk. And the column with main content should gain what’s taken away from the menu. The margin between the menu and main content columns (the gap between) would stay the same.

John, I did try the code you gave here and… left margin increased, menu column shrunk, main content column shifted to the left creating horizontal scroll bar, though – so now you need to scroll to the right to re-centre the page when viewing it. So no good. Worth the effort though since now I have much better understanding of things and… more questions : ) :

1. Is there a diagram showing the generic layout of theme Cyborg with correct names of elements and parameters assigned to them? So that one can learn what column is where, what are their names or ID numbers assigned to them, where are the margins, what are their names and designated IDs, etc
2. Would the fact that I do everything on a 19” screen have anything to do with the sizes of and spaces between the columns?
3. Would the fact that I use Firefox browser have anything to do with the way things look like, are displayed?
4. If any of this is correct then what are the optimal parameters of the work environment for this particular theme (cyborg)?

Also, the website structure will mirror the one the client has in their organisation. This dictates groups that the public will be divided into, categories for content, permission levels. I’m going to have a real nut to crack to get things set up the way they need to be (not that it’s complicated in real life but I can only imagine how many settings I will need to get right in tiki… 😊) and perhaps the THEMES forum is not the place for questions about that all. Please, kindly let me know where to go within this community for any help regarding such things.

Please let me know your thought on all this if I cna still have a moment of your time 😊

Thank you ever so much for helping me and your patience when doing so.


United States
Well, I just posted a lengthy reply and when I hit "Post" the reply went away. I'll come back later and reply se7en, sorry!!!😢

United Kingdom

Hello,

😂 and it did happen to me once too! so I know how annoying that is!

From that moment onwards I write posts in text editor and only copy/paste here once ready for upload. If anything goes sour, I simply re-paste and re-post.

Don't worry. No harm done. Thank you for trying 😊


Japan

1. There's a simple diagram of the main divs of the Tiki page here: https://themes.tiki.org/Layout+Templates. This page is actually to describe the differences between the layout templates, but there are diagrams of the columns.

There's a page that has information along the lines of what John was saying here: https://themes.tiki.org/How+to+change+the+side+column+widths.

All the themes use the same template files, so the HTML is the same for all of them (maybe with a very few minor exceptions but nothing involving the basic grid).

2. The screen size isn't a factor, especially once you're looking at a laptop or desktop display.

3. There are a few minor differences among browsers, mostly involving form and text styling details. The grid (column) layout works the same in all of them.

There's no comprehensive document that describes all the details of the page. Actually the page itself is the best document, as it's always up to date, etc. You access this by using your browser's Developer Tools. Control + Shift + C in Firefox brings up the DOM Inspector, which you can use to identify the parts of the page and the CSS rules that apply to them. You can download the Firefox Developer Edition (https://developer.mozilla.org/en-US/docs/Tools) or get the Firebug add-on for the standard Firefox browser, if you don't have one of these already.

About your specific situation, the main column content shouldn't have shifted respective to the column itself, by adding the CSS rules John suggested, unless there are other instances of these divs that were also affected by the new rules (or something else coming into play, but again it's hard to say without seeing the page - maybe you could blur the text and images so they aren't recognizable, or something, so the layout could be checked).

-- Gary


United States

I believe there is a third column to the right on se7en's website. So all the columns needs to add up to 100 percent.

Thanks for those links too Gary! That is exactly what I was looking for!

United Kingdom

Hello,

Thank you both for your replies and efforts.

I've followed both of the links provided by Gary. Funny enough, both of the pages show almost exactly the layout I have. Have a look at my clip14 (one of Gary's pages after conversion to Cyborg theme) and my clip15 – my site (I had to distort all content for obvious reasons but you should be able to see the similarity there).

I've found the developer tool in Firefox browser that you both mention - . Clip16 and 17 – tiki page and mine with that tool switched on (on mine I covered the logos, menu items and main text with a black box for obvious reasons...)

Unfortunately, all those parameters displayed in the developer tool window mean absolutely nothing to me, i.e. I still have no idea what to type in custom css to alter what I want the way I want. So I've ditched the whole notion.

Instead, seeing that my main menu module is in the column 2 (“div#col2” - starts the description when highlighted in developer view as in clip17) I've used padding code Gary gave me some time ago – see clip18. I already had padding for the margin on the right hand side so I used the same line of thinking and did the padding for the left hand side and: the whole thing shifted increasing the left hand side margin, making the main menu column smaller, leaving the gap between the menu column and the main text column the same. In other words, visual effect achieved, although using more primitive approach.

Anyway, I seriously hope I will not need to make any other template / layout alterations, at least not in any near future. All I did for the last 2 days was reading instructions, then explanations for instructions and then explanations for explanations!!! Page after page. And you know what the best part is... I STILL DON'T GET IT! (what a pity there's no smiley to show me screaming!) Then again, how could I? After all, everything's written using the same language, which, as it so happens, I do not speak. Try learning Japanese using Japanese to Japanese dictionary and you will have the type of experience I've been 'enjoying'.

OK. Enough of moaning. More to the point. I have the layout resolved as much as I can – I'm happy with it. I have the main menu and the list of items in it. I also have the “home” page (text) and the home page (text) for each main content item from the menu. I have a list of main categories. However, there are a lot of things I'd like to discuss regarding groups, permissions and structures. Can you please let me know which of the forums I should go to to address issues related to those?

Once again, I can't imagine how painful the process would be if it weren't for you guys out there!

Thank you for your time and invaluable advice!