Can anybody tell me why the navbar is not fixed a the top of my homepage, I think I have the correct syntax in the general.php page
<header role="banner" class="navbar navbar-fixed-top"> but this is a hack job (again).
Colin
Odd as with MDL-39884 I had https://github.com/gjb2048/moodle/commit/e8b97ef1ccba7a060b96b84122204b8ded646f6b - so double check for a typo.
Gareth/Moodle Community, I have gone back to the drawing board with my quest for a responsive theme which allows for docking and has features such as the alerts from Aardvark and font-awesome etc. I have hacked around with Buckle and come up with https://github.com/wheelie1978/buckle . There are some issues with the post and pre columns not being wide enough to accommodate font awesome and the block header text on one row, and I can't figure out how I have broken the fixed navbar position at the top of the page. Also the page seems to be twice as wide as it needs to be.
When editing on my localhost machine, I had custom css of:
#page-wrapper {
max-width: 960px;
}
#region-main-box {
width: 100%;
}
#region-pre-box {
right: 10%;
}
#region-main {
width: 80%;
left: 40%;
}
#region-pre {
width: 20%;
}
#region-post {
width: 20%;
left: 42%;
}
which solved the block width issue, however on a live site it kills it completely.
I am casting this open to the Moodle community for any input/development.
It is close to being exactly what I need from a theme, but my skills have long since run out.
Colin
If it works on the testing site, but not on the live site, there must be some differences between the two which you may need to identify - are they the same Moodle version for example?
Buckle was built using the layout from Zebra/Krystle to replace the bootstrapbase layouts and have the dock working, so if Zebra and Krystle work with the dimensions you want, then so should buckle - but bear in mind that they are built on a mobile-first concept with @media calls which start with a one column look then add in the second column and then finally the full three columns. That means its not as simple as adding the basic layout css to customcss as you would in a non-responsive theme
Take a look at the pagelayout.css file in buckle - its actually built with 200px fixed width sidebars rather than percentages, but you should be able to edit that if you look through it
Richard
Hi Colin,
When using Matthew James Taylors Holy Grail Percentage width layout, which I adapted to fit Moodle in Afterburner, you cannot just change the side blocks willy nilly, as these are finely tuned and balance out as a whole.
Might I suggest you visit Matthew James Taylor's blog and read about how to style that layout?
You may even find a better layout and adapt that as your own idea in your theme. It's the only way to learn anything.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Not sure about the fixed navbar, but it could be a typo as Gareth suggests.
Cheers
Mary
The CSS is wrong, and the only place I can see is that you must be using Afterburner CSS as that is the only place I know that uses #region-pre-box.
Further to this...if your localhost site is working with the CSS you posted...all I can think is that you are using the wrong layout in your Test Site.
At the moment you are using Canvas type page layout, yet the css is for the layout in Afterburner. This will account for the odd way the page is displaying.
The layout in Afterburner uses percentages and works better that way. The notation is different too, as there is no #region-post-box as the direction of the layout is different.
So just check to see what the layout file has in your localhost site, and then add this to your test site. And it should fix things.
Hope this helps?
Mary
Hi Colin,
As Mary points out the css you have added is not correct - buckle doesn't use #page-wrapper or #region-pre-box
The structure of the page from the buckle layout general.php is
page
|- [header] - detail not included here
|- page-content-wrapper
| |- page-content
| | |- region-main-box
| | | |- region-post-box
| | | | |- region-main-wrap
| | | | | |- region-main
| | | | | | |- region-content
| | | | | region-pre
| | | | | |- region-content
| | | | | region-post
| | | | | |- region-content
|- [footer] - detail not included here
As Mary reminds us, the percentages form of the Matthew James Taylor layout is different in structure to the pixels version and not easy to interchange directly. In fact it would probably mean altering both the css and the general.php layout file to change the buckle layouts to percentages rather than their current pixels. However, the fixed pixel width sidebars should be relatively easy to change to a different pixel width in the layout.css file (Danny's original in Zebra has it as a setting which I removed for simplicity in the buckle theme).
R
I'll try and look at this in more detail later today.
However this is what I am getting after selecting your theme...as you can see it is self explanatory...
Hmm - that's not Buckle code!
https://github.com/roelmann/buckle/blob/master/layout/general.php
Colin, probably a good idea to rename your theme, you can then keep a copy of the original buckle on your system as well for testing what you are trying to do.
Attached is a pagelayout.css for buckle which changes the sidebar widths to 220px. Look for anywhere that says /* default setting */ and these are the values to change to adjust the width of your sidebar columns to your desired value (using pixels).
Okay thanks to all for the really useful tips and ideas, I have renamed this theme to tzoom and a new branch can be found at https://github.com/wheelie1978/Tzoom . I have managed to fix the column widths and the really wide page, but the navbar is still not fixed at the top of the page. I need to have a look at that another day before I get divorced for spending too much time at the computer!! I have checked this in Chrome FF and IE11 and all seems okay at a quick glance. Again I value people's input.
Colin
Hi Colin,
The reason you are having so may problems with this theme is that you are being careless, and sloppy. I don't mind helping anyone on this forum, but sorry to say you are getting a little tiresome.
To be honest there is little to be gained by a pick-n-mix approach when it comes to Moodle Themes, unless you can do it well and seamlessly. That said, I can see that you are struggling, but that is not surprising, as you have really bitten off more that you can chew. If I were you I would stick with one design, get to know it and then add bits to it, and then you can call it your own.
When you start a theme, make sure that you add YOUR name and theme name at the beginning of each file, but give credit where credit is due in the right place, which is in the intro to the theme when you select it. If you follow Shaun's way of creating a theme then you wont go too far wrong.
You also need to adjust whatever text editor you are using as it is churning out code with double-line spacings, which is bad. I know I keep harping on about this, but to quote a line from 'Educating Rita', "...you wanna get it fixed!"
Lets face it if you can't be bothered to improve on coding then I'm tempted to say why should we be bothered helping you?
I am not perfect when I submit some changes to Moodle, I get told off lots of times. I have sat and cried my eyes out some days, and at other time laughed my socks off with some of the antics that go on in Moodle Tracker during integration, so if we have to learn to do things correctly then it is only fair that you try to do the same.
I hope you take this criticism in the spirit is is given...I am just trying to help you be a better themer...that's all.
Cheers
Mary
Mary,
My intention is certainly not to be tiresome, nor is it to be sloppy. I have never made any claims to be a coder/themer and have stated the opposite many times. If I had my time again then I may have made a different choice in my IT career path.
As has been discussed many times in Moodle forums, there is a BIG issue currently with Bootstrap themes, the lack of a working dock and the fact that the grading pages are nigh on unusable by teachers due to the lack of space. I require a theme that allows all of these features, and have set about trying to solve the problem myself for MY needs.
My approach is from the untrained and uneducated when it comes to Moodle coding, I am trying to follow the conventions requested for theming now by using Github unfortunately that means the warts and all are displayed when it comes to my methods. I have been using Dreamweaver as my code editor, but will look at using css beautify.com or similar to clean up the .css quickly for the time being.
In the meantime I take on board your frustrations with my approach, I assure you they are equal to my frustrations with my own abilities in this field. Given another day job, then I would gladly spend the time required learning the skills that are needed to do this as it should be done.
As always, I thank you for your comments. Criticism is always a good thing where it is constructive and not something to be afraid of giving or receiving.
Cheers
Colin
Hi Colin,
I agree with you that there are still quite a few issues with Bootstrap and Moodle, the dock is one of them, which I think does work if you make the changes that Bas suggests in his attempt to add the dock to Moodle in 2.6, I forget the Moodle Tracker issue number. However, I don't know about how other people feel, but I do get the distinct impression from Moodle HQ, that they do not consider docking in Bootstrap a major issue as everyone else seems to do, and in some ways I feel they are perhaps right. There are other ways of hiding blocks, and a simple thing like a slide-in, slide-out idea, which can be achieved with CSS, might be better. However, that said, Moodle is built wrong to be fully responsive. Also, since the grader needs all the space it can get, you cannot make a theme a fixed width as 960px is too small to manoeuvre.
Cheers
Mary
Hi all,
Sorry for not replying, been a little under the weather. Lost the plot with this thread and just scanned through it. Ok....
- Docking issue is: MDL-38923.
- I get the impression that Bas is snowed under with consultancy work / looking at other things like web services.
- I think Colin that you need to step away from attempting to solve one big issue and break it down into smaller manageable chunks. Then perform a technical de-risking of each chunk, learning the skills you need along the way. A personal divide and conquer.
G
OK to break down what I think Colin is trying to achieve
1. Responsive theme - basing it on Buckle provides that because it uses the responsive layouts from Krystle, courtesy of Danny's work in Zebra
2. Working Dock - again basing the theme on Buckle solves that issue because of its use of the Krystle/Zebra layouts rather than the bootstrap grids (its not styled in Buckle, but its there and it works - Buckle was never designed as a fully styled theme, but as one to build on similar to 'Standard')
3. Column widths - well Colin says he has that sorted following the other posts in the thread
4. Page width - again Colin is happy with what he has. I have to say I agree with Mary that 960px max width is not what I would do, but its Colin's theme for his use - 'fully responsive' to me means it should work on very large screens as well as very small ones and a limit like that prevents pages such as the gradebook that Mary highlights from using the width of those larger screens (and a 960px limit looks odd on those large monitors, to me anyway
)
5. Navbar fixed to the top of the screen - Outstanding issue - I'm not sure about why this isn't working, could be that something in the Buckle css is overriding what you are changing Colin as I don't personally like it stuck at the top of the page so buckle has it in its 'older' position below the header. Take a look at it using a tool such as firebug to see if you can see anything overriding its position at the top of the page.
Wider issues - coding style and layout of php and css files (from someone who makes MANY mistakes here myself!) Take a look at the way its laid out in some of the core themes (not the minified files though - you need to be able to read it while working on it!) - remember to use spaces instead of tabs for indenting at the beginning of lines (most editors can do this by default) and remove unnecessary whitespace and unnecessary blank lines (e.g. double spacing) - some can be useful for readability while working on a theme - they can always be removed later.
Learning how to do it - We've all been there Colin! It can be a long and often thankless process, particularly when you are doing it in between other things including a different day job (e.g. teaching full time!) But its very rewarding and its great then when you can start also putting back into the community too from what you have learned, because there will always be people starting out and in need of that help - the help that Mary and Gareth and others give so well. As Mary and Gareth suggest, break the tasks down into little bits - I think you have started to do this - take a close look at Buckle that you are using as your base theme, then solve one issue at a time and test it thoroughly. In the end, you'll have a theme that you built, and will have learned a great deal about doing it.
Richard
Hi Gareth - Hope you are feeling a bit better. Lousy timing to be unwell over Christmas. Hope it didn't spoil it too much for you!
Richard
Hi Gareth,
Sorry to hear you are/have been under the weather, I too hope you get well soon. Thanks for finding MDL-38923.
Cheers
Mary
Richard,
Your summation is exactly what I am trying to do. I really do appreciate the time that you all take to help 'clowns' like me navigate the pitfalls of theme design. I will continue in my quest for a theme that both meets my needs and the requirements of 'good code'. I am aware that the road will be long but I am learning albeit slowly and frustratingly for all involved.
I wish you all a happy new year for 2014.
Colin
Issue #5 from my summary above:
I suspect the issue is that the position:fixed element of the bootstrap positioning for the navbar is being overridden by the position:relative at approx line 41 of buckle's pagelayout.css (firebug) - Its actually in the extended first line of your pagelayout.css in your theme (part minified file?). On my test, removing that position:relative allows the position:fixed rule to operate and the bar to stay fixed at the top of the screen.
#5 - Fixed (I hope )
Richard
Richard,
Thanks for your suggestion, I am actually using the pagelayout.css file that you posted earlier in this discussion which when I open it does give the impression of the top part being part minified! (i don't know how it got this way) I have used cssbeautify.com to tidy up the file and compared it to the original buckle file. I have attached the version I am using. I have removed the position:relative on lines 27 and 34 (of my file) independently and purged caches but it breaks the page when I do so, blocks disappear etc!
Colin
Hmmm - not sure how the part minification happened then as the file I posted doesn't look like that on my system - Im using Geany on Linux though and I haven't used it much before, I usually use Gedit as a simple text editor, so perhaps I need to investigate more and see what happens if I open that file in a few different editors
The only position:relative you should remove is the one for .navbar (which was on about line 41 of my buckle css originally - before it part minified for you!) The others, as you discovered will have other impacts. Apologies for not being more specific earlier (I missed the . out when I referenced 'navbar' instead of '.navbar').
.navbar{
clear: both;
float: none;
position: relative;
}
Richard
Edit: hmm, just tried that pagelayout file in gedit too and dont see the part minifcation there either, so not sure what happened to that - you could try using the original one from Buckle and adjusting all the values where it says /* default setting */ which is all I did anyway
Thanks Richard,
That has indeed solved that problem and highlighted another one which I will need to address. About time I started breaking this down now.
Regards
Colin
You can see it in Colin's github as part minified...
https://github.com/wheelie1978/Tzoom/blob/master/style/pagelayout.css#L1
I saw that Mary, Its weird
If I open the version on my desktop, its fine. If I open the version on the thread its just as Colin has it, part minified and I don't understand why or what I might have done to make that happen - I don't minify anything that I'm actually working on or using for development purposes as I prefer to make it readable by me at the expense of a couple of points of a second for the computer. The only thing I can think of is that I was working on a mac a couple of months ago when I last worked on Buckle and whether the line feeds are different and not seen in the same way by different editors??? I'd better go through the files and make sure its all using the same line feed format!!!
Anyway - hopefully Colin's issues are sorted for the moment, so I can look at that issue for myself for now and not worry about it too much right now.
R
Github has been updated https://github.com/wheelie1978/Tzoom. I have tried to tidy up some of the css and php files. All appears to be working.
Thanks Richard.
Thanks Mary and Richard,
Just been feeling a bit 'meh' and doing a lot of sleeping and drinking (water). Better now thanks.