Themes

Posted by Gary Cunningham-Lee 23 Jul 2016 12:59 GMT-0000

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

-- Gary

Posted by John Morris 23 Jul 2016 15:08 GMT-0000

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.

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

Posted by se7en 24 Jul 2016 11:26 GMT-0000

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.

Posted by se7en 24 Jul 2016 14:15 GMT-0000

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 😊

Posted by Gary Cunningham-Lee 25 Jul 2016 11:02 GMT-0000

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

Posted by John Morris 25 Jul 2016 11:33 GMT-0000

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!