Themes

Well Christoph,

What you don't know, you don't miss. I had no idea you were using Post-IT

Time for change indeed. We are trying to get bootstrap into Moodle core. So if you want to vote for this then please do so in MDL-38016

Thanks

Mary

Hi Christoph,

Further to my last comment, which Bootstrap theme are you using/testing as there are a few. David has some projects mentioned in this discussion, but I don't think he has a finished theme as such. Bas Brands has a Bootstrap theme in the plugins directory HERE.And my Tiny Bootstrap Project is just a work in progress.

Cheers

Mary

We are still learning about Bootstrap, so I am sorry I cannot help you.

Hi,

Just thinking about this. If you cloned the bootstrap theme then you need to change the renderers/core.php and change this line...

class theme_bootstrap_core_renderer extends core_renderer {

to the name of your theme

Here is a video of a theme I built using Bas Brands bootstrap theme as a base: https://www.box.com/s/afq8wxzvqlwraoj9e85v

As you can see, the navigation bar works just fine... I had to do some tweaking for it to turn out right for me:

Snippet from the layout php files:

<!-- START OF CUSTOM MENU -->
<?php if (isloggedin()) { ?>
    <div id="custommenu">
        <?php echo $custommenu; ?>
        <?php if ($hasheading) { ?>
            <div class="headermenu">
                <?php
                if ($haslogininfo) {
                    echo $OUTPUT->login_info();
                }
                if (!empty($PAGE->layout_options['langmenu'])) {
                    echo $OUTPUT->lang_menu();
                }
                echo $PAGE->headingmenu
                ?>
            </div>
        <?php } ?>
    </div>
<?php } ?>
<!-- END OF CUSTOM MENU -->

The CSS rules:

.navbar {
    min-width: 348px;
    border: 0 none;
    height: 32px;
    margin-bottom: 43px;
}

.navbar .nav {
    margin: 0;
}

#custommenu {
    height: 38px;
    width: 100%;
    max-width: 1200px;
    position: relative;
    top: -1px;
    z-index: 1 !important;
}

#custommenu .yui3-menu .yui3-menuitem {
    border-style: solid;
    border-width: 0px 2px 0px 0px;
    -moz-border-image: url([[pix:theme|navi-divider]]) 17 3 0 0 stretch;
    -webkit-border-image: url([[pix:theme|navi-divider]]) 17 3 0 0 stretch;
    -o-border-image: url([[pix:theme|navi-divider]]) 17 3 0 0 stretch;
    border-image: url([[pix:theme|navi-divider]]) 17 3 0 0 fill stretch;
    border-color: transparent;
    padding-right: 15px;
}

#custommenu .yui3-menu .yui3-menuitem-active {
    background-color: transparent;
}

a.yui3-menuitem-content:hover {
    background: #ff0000;
}

.yui3-skin-sam .yui3-menu ul.first-of-type {
    margin-left: 1.4%;
}

.yui3-menu-content {
    height: 37px;
}

li.yui3-menuitem {
    border: none;
    margin: 4px 0 0 13px;
}

#custommenu .yui3-menu .yui3-menuitem-active a {
    color: rgba(0, 66, 115, 1);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#custommenu .yui3-menu .yui3-menuitem-active a:hover {
    color: rgba(228, 108, 10, 1);
    cursor: pointer;
    background: transparent;
}

.yui3-skin-sam .yui3-menu-horizontal .yui3-menuitem-content {
    border-style: hidden;
    background: transparent;
}

That is pretty much a straight copy of my css rules I have in a custom.css file I'm using... 

HTH

Is there a step by step guide anywhere on how to use the bootstrap theme in Moodle? I'm particularly interested in how to integrated bootswatches into a clone of the clean theme. 

I take it that the calendar works as normal in Afterburner theme on your server?

Just had a thought...

It may be related to the fact that 'block' plugin css is excluded from 'bootstrapbase' so it may be that the CSS you need for the mini calendar is missing.

This is the CSS I have in Afterburner for the events. You could try adding that?

/*
Colors for Calendar Events
-----------------------*/
#calendar .event_global,
.minicalendar .event_global,
.block_calendar_month .event_global,
.calendar_event_global {
    border-color:#def2ba !important;
    background-color:#def2ba;
}
#calendar .event_course,
.minicalendar .event_course,
.block_calendar_month .event_course,
.calendar_event_course {
    border-color:#c6dfeb !important;
    background-color:#c6dfeb;
}
#calendar .event_group,
.minicalendar .event_group,
.block_calendar_month .event_group,
.calendar_event_group {
    border-color:#feffc2 !important;
    background-color:#feffc2;
}
#calendar .event_user,
.minicalendar .event_user,
.block_calendar_month .event_user,
.calendar_event_user {
    border-color:#d9c6e2 !important;
    background-color:#d9c6e2;
}

I'll go test it and see what's missing

Cheers

Mary

The styles for Aardvark probably come from Canvas theme...which is this...

.minicalendar {
    border-collapse: separate;
}

.minicalendar td,
.minicalendar th {
    font-size: 0.85em;
    padding: 0 2px;
    border-width: 2px 0;
    border-color: #fff;
}

.minicalendar .calendar_event_user,
.minicalendar .duration_user {
    border-color: #dce7ec;
}

.minicalendar .calendar_event_course,
.minicalendar .duration_course {
    border-color: #ffd3bd;
}

.minicalendar .calendar_event_global,
.minicalendar .duration_global {
    border-color: #d6f8cd;
}

.minicalendar .calendar_event_group,
.minicalendar .duration_group {
    border-color: #fee7ae;
}

Which does appear to be missing from Bootstrapbase. Can you create a Moodle Tracker so we can add it to Bootstrapbase?

Cheers

Mary