I have just submitted a new theme - Flexi
The theme has been developed following several discussions about making the most of the Theme Settings page and to provide users without regular server access a method of controlling their theme from within Moodle. I hope you find it useful.
The theme can be downloaded from here
Richard
I think you have done phenomenally well Richard. I am quite looking forward to seeing how this theme develops over time. I have a feeling it's going to be a real learning curve.
Well done! and thanks for adding this to the Moodle Themes' repository.
Mary
I think the problem with changing blocks is that you need to compensate in the css for side-pre-only, side-post-only and content-only which I don't think have been taken into account, which is why the blocks are taking over the page. Of course it all depends too if you changed the side blocks widths in the first place. If you did and took them to their max width, I think this is asking for problems. I can't remember how the theme is set up for this.
The heading name is easily fixed in CSS
h1.headermain {visibility: hidden; }
Mary
Hi Mary,
I don't see the h1.headermain line in the core.css
/* page header and logo position*/
#page-header {position:relative;min-height:100px;}
#page-header .sitelogo {float:left;margin:5px;}
#page-header .headermain {color:setting:headertext; position:absolute; margin:40px 0 0 10px; float:none; font-size:3em; font-weight:bold; font-style:italic;}
.headermenu {float:right; font-size:0.8em; margin:5px 22px 0 0; text-align:right; color:setting:headertext;}
h2.headingblock {background-color:setting:blocksheadingbg; font-size:1.2em; font-weight:bold; font-style:italic;}
Where in the above would I add the line?
Boy if I could combine your cafelite theme and the flexi theme together, I would venture to say it would be one of the best Moodle themes ever done..
Just my 2 cents.
Wiiliam
I was going off this HTML/PHP mark-up in the layout files...
<h1 class="headermain"><?php echo $PAGE->heading ?></h1>
QED
h1.headermain { visibility: hidden}
visibility: hidden only hides the element, but leaves the space it took up, which in your case may be required. If not then what Richard said will work equally as well.
As for adding it to the core.css - no need just add it as custom css in the settings page!
Mary
Hi William,
On the help button associated with the header text colour it gives the css to add into the custom css box to hide the header text - maybe I need to add that info into the logo help button as well.
Off the top of my head as I'm not at my moodle computer at the moment its something like #page-header .headermain {display:none;} but please check that on the site first
Not sure about the second problem - but looks like an issue with the report.php layout file or the associated css page layout for a page with region-pre only ( I think that's the case with the report layout). I will check it out as soon as i can for you
Richard
Richard
If that's not there then that's a big oops from me and I will correct it as soon as possible- but there is a report.php so it probably should be
// The pagelayout used for reports
'report' => array(
'file' => 'report.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
Thank you for that Dietmar
Richard
@Dietmar,
I thought Richard had added that, or assumed he was using base theme config.php which has the reference to report.
@Richard
Following on from what Dietmar is saying, a quick fix for this would be to add this to the end of the list of layout option in flexi config.php...make base the theme that flexi uses the report.php from...like so...
// The pagelayout used for reports
'report' => array(
'theme' => 'base',
'file' => 'report.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),
Mary
Hi Mary,
Am correcting the config.php now, and adding the extra help about hiding the heading in the logo setting area as well as where it already was in the heading text help.
I've left it with the report.php that is already in flexi - I knew I'd made some changes on that to allow for the logo to appear from the settings page etc. so I can only put the missing section in config down to a complete brain freeze at some point! Especially as, like you said, I'd copied the config from base theme as a starting point, so it must have been there originally
. Anyway, corrected version should be up on my site in the next 5-10minutes.
Richard
Hi Richard,
I see this is my flexi day LOL.
This has to do with the custom menus bar. The first image is in firefox 3.6x
This what happens in IE8, it shows the above menu and then after about 3 or 4 seconds the bar changes to this, and I have purged the caches both on the server and my local machine. All of these settings where done through the settings page.
It goes to grey.
It may be me, any ideas, it only happens in IE8
Thanks
William
It is picking up the background gradient from standard theme and putting that over the top of the colour you have chosen.
Why.....??? I don't know Does IE8 have a problem with ' background-image: none; ' ?
William, could you check you have the latest version from my themes page - just noticed the border around the custom menu, and I've added rounded corners there too. It may be that some of the changes you're finding may already be fixed.
Rich
William,
Testing and suggestions for improvements, or queries how to do things are never a pain - provided you don't mind me not getting straight onto them every single time - it may seem like it (it does to me sometimes) but I'm not always at a computer, lol!
However, for the next 30mins or so I am, so...
point 1. What browser is that happening on William? It doesn't seem to be happening on my FF here? but it does look untidy, so I need to sort it out!
point 2. At the moment, in an attempt to reduce (slightly) the length of the page I made the decision to link some of the colours together - the section headings are currently using the same colour as the block headings. That is something I'm already working on for a flexi1.1 version - splitting out all of the grouped colours to make the theme even more flexible, all be it the payoff will be a very long settings page!
keep on testing William - and I'll try to keep on fixing. Really want this theme to build into something that people have been asking for and will want/need.
Rich
Hi Richard,
Can I make a couple of suggestion?
HTH
Mary
OK onward
When I clicked on system administrator link in the header this is what I get.
stdClass Object
(
[id] => 2
[auth] => manual
[confirmed] => 1
[policyagreed] => 0
[deleted] => 0
[suspended] => 0
[mnethostid] => 1
[username] => admin
[password] => 33af5770a68597ded4845667ce76a04b
[idnumber] =>
[firstname] => System
[lastname] => Administrator
[email] => admin@asmbc.com
[emailstop] => 0
[icq] =>
[skype] =>
[yahoo] =>
[aim] =>
[msn] =>
[phone1] =>
[phone2] =>
[institution] =>
[department] =>
[address] =>
[city] => Mumbai
[country] => IN
[lang] => en
[theme] =>
[timezone] => 99
[firstaccess] => 1295117505
[lastaccess] => 1297288656
[lastlogin] => 1297257486
[currentlogin] => 1297259407
[lastip] => 71.181.137.218
[secret] =>
[picture] => 0
[url] =>
[descriptionformat] => 0
[mailformat] => 1
[maildigest] => 0
[maildisplay] => 1
[htmleditor] => 1
[ajax] => 1
[autosubscribe] => 1
[trackforums] => 0
[timecreated] => 0
[timemodified] => 1295117505
[trustbitmask] => 0
[imagealt] =>
[screenreader] => 0
[display] => Array
(
[2] => 0
)
[lastcourseaccess] => Array
(
[2] => 1297259074
)
[currentcourseaccess] => Array
(
[2] => 1297272122
)
[groupmember] => Array
(
)
[profile] => Array
(
)
[access] => Array
(
[ra] => Array
(
[/1] => Array
(
[7] => 7
)
)
[rdef] => Array
(
[/1:7] => Array
(
[block/online_users:viewlist] => 1
[mod/folder:view] => 1
[mod/imscp:view] => 1
[mod/page:view] => 1
[mod/resource:view] => 1
[mod/url:view] => 1
[moodle/block:view] => 1
[moodle/blog:associatecourse] => 1
[moodle/blog:associatemodule] => 1
[moodle/blog:create] => 1
[moodle/blog:manageexternal] => 1
[moodle/blog:search] => 1
[moodle/blog:view] => 1
[moodle/calendar:manageownentries] => 1
[moodle/comment:post] => 1
[moodle/comment:view] => 1
[moodle/course:request] => 1
[moodle/my:manageblocks] => 1
[moodle/portfolio:export] => 1
[moodle/rating:rate] => 1
[moodle/rating:view] => 1
[moodle/rating:viewall] => 1
[moodle/rating:viewany] => 1
[moodle/site:sendmessage] => 1
[moodle/tag:create] => 1
[moodle/tag:edit] => 1
[moodle/user:changeownpassword] => 1
[moodle/user:editownmessageprofile] => 1
[moodle/user:editownprofile] => 1
[moodle/user:manageownblocks] => 1
[moodle/user:manageownfiles] => 1
[repository/alfresco:view] => 1
[repository/boxnet:view] => 1
[repository/coursefiles:view] => 1
[repository/dropbox:view] => 1
[repository/filesystem:view] => 1
[repository/flickr:view] => 1
[repository/flickr_public:view] => 1
[repository/googledocs:view] => 1
[repository/local:view] => 1
[repository/merlot:view] => 1
[repository/picasa:view] => 1
[repository/recent:view] => 1
[repository/s3:view] => 1
[repository/upload:view] => 1
[repository/url:view] => 1
[repository/user:view] => 1
[repository/webdav:view] => 1
[repository/wikimedia:view] => 1
[repository/youtube:view] => 1
)
)
[loaded] => Array
(
[0] => /1/3/14
)
[dr] => 7
[time] => 1297259407
)
[sesskey] => 0qtY6khFpb
[preference] => Array
(
[auth_forcepasswordchange] => 0
[block4hidden] => 1
[css_theme_tool_full_body_tags] => 1
[docked_block_instance_4] => 0
[docked_block_instance_5] => 0
[email_bounce_count] => 1
[email_send_count] => 1
[grade_report_grader_collapsed_categories] => a:2:{s:14:"aggregatesonly";a:0:{}s:10:"gradesonly";a:1:{i:0;s:1:"1";}}
[message_provider_mod_assignment_assignment_updates_loggedin] => email
[message_provider_mod_assignment_assignment_updates_loggedoff] => email
[message_provider_mod_feedback_submission_loggedin] => email
[message_provider_mod_feedback_submission_loggedoff] => email
[message_provider_mod_forum_posts_loggedin] => email
[message_provider_mod_forum_posts_loggedoff] => email
[message_provider_mod_quiz_confirmation_loggedin] => email
[message_provider_mod_quiz_confirmation_loggedoff] => email
[message_provider_mod_quiz_submission_loggedin] => email
[message_provider_mod_quiz_submission_loggedoff] => email
[message_provider_moodle_backup_loggedin] => email
[message_provider_moodle_backup_loggedoff] => email
[message_provider_moodle_errors_loggedin] => email
[message_provider_moodle_errors_loggedoff] => email
[message_provider_moodle_instantmessage_loggedin] => popup
[message_provider_moodle_instantmessage_loggedoff] => email,popup
[message_provider_moodle_notices_loggedin] => email
[message_provider_moodle_notices_loggedoff] => email
[mod_quiz_mod_form_showadvanced] => 1
[quiz_qbanktool_open] => 1
[theme_splash_chosen_colour] => orange
[_lastloaded] => 1297288656
)
[message_lastpopup] => 0
[ajax_updatable_user_prefs] => Array
(
[docked_block_instance_5] => int
[docked_block_instance_1] => int
[docked_block_instance_4] => int
[docked_block_instance_3] => int
[docked_block_instance_10] => int
[docked_block_instance_11] => int
[docked_block_instance_12] => int
[docked_block_instance_13] => int
)
[editing] => 0
[grade_last_report] => Array
(
[2] => grader
)
[gradeediting] => Array
(
[2] => 1
)
)
William
OK Rich,
I tried Dietmar suggestion, for the pagelayout.css and it still doesn't line up .
#page-header {
float:left;
width:100%;
margin:0;
}
#page-content {
clear:both;
float:left;
overflow:hidden;
position:relative;
width:100%;
margin:0;
I also downloaded your lastest fix and it cured the IE problem thanks, just let me know when you have a new version ready so we will be working on the same version
William
make the margin:0 1%; for both or margin:0 10px; for both should work, rather than the original error I had which was % on one and px on the other
#page-header,
.pagelayout-frontpage #page-header {
float:left;
width:100%;
margin:0 1%;
}
#page-content {
clear:both;
float:left;
overflow:hidden;
position:relative;
width:100%;
margin:0 1%;
}
That corrects the overhang and leaves the 1% margin to give the border down the side.
I've also edited the padding to 10px in the line below as my fiddling seemed to remove any kind of margin on the right of the sideblocks
#page-content #region-main-box #region-post-box #region-post .region-content {
overflow:hidden;
padding:20px 10px;
}
Rich
The krystle menu was based on Lei's awesomebar and includes the custom menu on that and so, yes it should be possible to take the home elements from that and use that (or vice versa, use the krystle menu either as is or without the 'awesome' bits.
I'll take a look at it for you tonight/tomorrow.
On a related issue - and feedback for my advance planning for version 2 - do you see any demand for being able to select whether the theme has a top menu, or the menu is placed at the bottom of the header, and whether the theme uses a simple login as standard, or the increasingly common profileblock? I'm thinking along the lines of a setting that chooses a simple yes/no, or even from a drop down and then a series of if statements in the layout file that put various items where the designer wants them.
Rich
Hi Rich,
1. Placement of header menu:
My feelings are it would be alot better to have the option of the placement of the menu, I have many friends who are using Moodle and I would say that they are split on the top / bottom placement, I prefer to split them I use the navrbar on the bottom of the header, and I use the custommenu on the top. I use the the custommenu on the top after users login, so its a user navigation tool for me that doesn't take up alot of space.
2. Concerning the simple login:
I have always be a big fan of header space, as I asked you before I don't want the login in the header space, and alot of my friends tend to agree on this subject. They would whether have the space for additional images/logos or links.
I think the login should be in the navbar, it makes sense, it takes up no space, it's always available.
I have about 20 or so of my friends using the flexi theme and so far it's is all thunmbs up.
On a personal note I think a theme like this is a long time coming, it will be a huge hit I think, it addresses the normal user, who I feel is sometimes overlooked by the Moodle developers. Also myself and a few other friends of mine are using moodle as a CMS package like joomal, etc. for businesses and so far it seems to be working OK.
You are doing a GREAT job Rich, and it is appreciated greatly.
William
Yep, that's IE8 for you!
IE8 does not support custom corners (or lots of other css3 code) as of yet. The code that's in there should work on all other browsers, but to make it work in IE still requires the 'old' way of using all the images as I understand it. I believe IE9 may begin to implement some of the css3 standards that the others already follow (although in fairness, they all have slightly different ways of implementing the corners still), but as has been commented in many places - when IE support the web standards, it'll work!
Rich
Rich,
I thought I would give you an idea of what I'm talking about. This is the header layout from Mary's cafelite 2.0 theme.
This what is was talking about concerning the header area. I think she really did a great job, with the layout and the navbar. And the theme is very very fast, which I love.
William
I see what you mean
I've asked Mary if I can have a copy of cafelite2.0, although i believe she's still working on it, so that I can take a lok at some f what she's done. I know from your comments that you've been impressed with it, and I've always found Mary's themes fantastic, both to use live on sites and as a basis for learning/developing from
Hi William,
What page(s) are you still seeing this on? I'm not seeing it now on my localhost, which has all the fixes that were discussed the other evening included, and which is the version currently available as the download from my site.
But obviously if you, and therefore others, are seeing this still, then there is an issue and I need to get to the bottom of it
Hi Rich,
I'm getting this on all pages in firefox and IE.
and I did the fixes you suggested, in pagelayouts.css. I'm going to download the lastest from your site and compare the files to see where I am off.
Also I have a question for you and also Mary, are you working on a local computer, shared hosting, vpn, dedicated or other, if you don't mind me asking. If its to personal then please just disregard the question
.
I have an idea I'mtossing around.
William
OK Rich,
I think I figured out the layout problem. It's my fault, I changed the code like you said but left out a "%". So my apoligies, for the goof.
I love the login you added to the navbar, it's pefect.
Are you going to include a note or instructions in he settings.php as how to not show the title behind the logo? It may be a good idea
I have a question how would we add a border around the header and page so the whole area would have a border.
William
William
The note to hide the header text should already be there in the logo setting section. Don't forget (like I did the other day) to turn off the language cache as well (Site Administration->Language->Language Settings) as the settings instructions, including the tooltips for the images are created in the language file.
But that has reminded me of a job that I need to do - the tooltips are currently set up just in the 'title' but need to be duplicated in 'alt' to cater for different browsers.
I'm glad you got to the bottom of the layout problem
To add a border around the header in core.css add
#page #page-header {border: 2px solid red;} (or whatever border settings you want to apply)
for the whole page the selector should be #page and for the page content section its #page-content
There should be no need to write it...
#page #page-header { border: 2px solid red;} in CSS mark-up
#page-header { border: 2px solid red;} is all you need...
and that goes for all ID selectors unless you are trying to be specific
For class selectors you might sometimes need it's mum or dad or big brother. For example...
#region-main .region-content { padding 5px 10px;}
or
#region-pre .region-content { padding-right: 5px;}
or
#region-post .region-content { padding-left: 5px;}
HTH
Mary
Hi William,
No not too personal. I use WAMP server on XP runs really well
I also have 2 host servers but they are a little bit of a problem as they are both of ZEUS servers running Apache/PHP/MySQL. Thereis a problem with Zeus...it sends some files via HTTPS this in turn triggers the a windows security error message.
It does not bother me that much becasue I just need someplace on the web to show my themes.
I'm just wondering what you have up your sleeve.
Let me guess your realname is Bill Gates and you want to send Rich and I some top range PCs to test and keep!
Mary
I work on a local computer on my home network when I'm developing. I just find it easier than dealing with uploads every time I'm editing something.
I actually have an old PC that serves just as my localhost (named WebDev on my system) and nothing else, I actually work from either a desktop or laptop which accesses WebDev through the home network. I have a variety of file shares set up so that I don't have to use ftp when I'm doing this - although i sometimes also use remote access to work 'directly' (sort of) on WebDev. I used to have external access to my localhost, but I found I wasn't using it much so got rid of it rather than leave it open as a security loophole. I also want to be in a situation where if I mangle something while I'm playing I can easily reinstall without losing anything meaningful - hasn't happened yet, but...
I do have a shared hosting account which is where my pages are currently hosted for other people to access/test/download, but as I said above, when I'm working on the files for development I find it easier not to have to bother with ftp, just save them and click refresh.
In my own system, the local webhost runs Linux/Ubuntu, my main desktop Linux/Mint with Firefox and Chromium and my laptop dual boots Linux/Ubuntu - also with Firefox and Chromium - and WindowsXP (for work) with IE8
Richard
