Hello,
I would like to canvass the opinion of the Moodle web designers community about something that I have recently implemented in our Moodle frontpage, as the solution is not 100% smart:
I have created a different logging and landing page in our test site. The landing page is the page that users see once they log in.
This is the logging page:
(it is a self-certificate, but it is safe).
and the landing page is based on My Moodle.
I want to revamp the whole theme as ours is not based on bootstrap, but there is no time for it in the next weeks, as we are enrolling students starting a new full time MSc, so we want to share the logging page between students belonging to different programmes and, once they logging, each student can only see their courses in My Moodle page.
The table displayed in the logging page has been created manually from the html editor in the topic section of the frontpage .
In the original theme, the block 'logging' was not aligned with the topic section. It was separated and on the top left corner. In other to centre the logging and navegation block, what I have done is:
1) Edit the file mytheme/layout/frontpage.php
adding the following:
<!--HEADER>
....
<!-- START OF CONTENT -->
<?php if ($hascustommenu) { ?>
<div id="custommenu"><?php echo $custommenu; ?></div>
<?php } ?>
<div class="navbar clearfix">
<?php if ($hasnavbar) { ?>
<div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div>
<div class="navbutton"> <?php echo $PAGE->button; ?></div>
<?php } ?>
</div>
<div id="page-content-wrapper">
<div id="page-content">
<div id="region-main-box">
<div id="region-post-box">
<div id="region-main-wrap">
<div id="region-main">
<div class="region-content">
<!--MCG the image shouldn't be displayed here<img src="/theme/aridhia_khn/pix/headerImage.jpg" id="headerImage" /> -->
<?php echo core_renderer::MAIN_CONTENT_TOKEN ?>
</div>
</div>
</div>
<?php if ($hassidepre) { ?>
<div id="region-pre" class="block-region" style="padding-top:65px; left:100px;">
<div class="region-content">
<?php echo $OUTPUT->blocks_for_region('side-pre') ?>
</div>
</div>
<?php } ?>
<?php if ($hassidepost) { ?>
<div id="region-post" class="block-region">
<div class="region-content">
<?php echo $OUTPUT->blocks_for_region('side-post') ?>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<!-- END OF CONTENT -->
<!--FOOTER>
However, this solution:
<div id="region-pre" class="block-region" style="padding-top:65px; left:100px;">
is giving me a lot of problems with different screen sizes and browser zoom settings.
Even if I set the following option in pageout.ccs
/*MCG the table in logging page disappears with screen size */
@media screen and (max-width:1000px) {
.no-overflow {
display: none !important;
}
}
You will see that the pictures in the table overlap the logging block at some point.
Is it possible to find a smarter solution which will not depend on screen size or browser font size or zoom settings?
Thank you very much for your advice.
Mari Cruz