Themes

btn-primary setting in Moodle 3.1

 
Picture of Rick Jerz
btn-primary setting in Moodle 3.1
Group Particularly helpful Moodlers

I just upgraded to Moodle 3.1 and found an interesting situation about button colors.  It appears that some new buttons might have been added, called .btn-primary.  I am having some "color" problems.

For example, in 3.1, grading an assignment, there are now two buttons.  I think one is .btn, and the other is .btn-primary.  These buttons are new, and they were not in 3.0.  The colors of .btn are fine. But the colors of .btn-primary are not.  The "hover" color of White is fine, but it is the regular state that is not.  In my case, in MORE, I am using maroon as the link color.  In 3.1, it appears that both the ban-primary and and the link (text) color want to use the same colors (something like that.)

What I want to be able to do is to add some CSS to my MORE so that this .btn-primary text color is normally "black."  When hovered, it is fine to change the text color to white as it does now.

I can't seem to figure out the CSS code for this.  I am trying the following, but it does not get honored.  When I inspect the code for this element, I see some code crossed out.

Here is what I am trying to do, and I have attached a picture.  (I purposely changed the button to Blue to illustrate this better, I hope.)

.btn-primary.active {

    color: #00000;

}

Should I be using something like .btn-primary.link, or .btn-primary.link.color, or something like this?



 
Average of ratings: -
Picture of Rick Jerz
Re: btn-primary setting in Moodle 3.1
Group Particularly helpful Moodlers

I experimented, and can now answer my own question (for the benefit of others.)

Moodle 3.1 seems to now use some "pairs" of buttons.  I was having problems with getting the second button colors correct.  My text link color, and the MORE theme's text link color, which also appears to control button colors, were the same.  I added this CSS code to fix the problem.  I am still open to other suggestions about how to do this better.


.btn-primary:link {color: white;}

.btn-primary:hover {color: yellow;}

 
Average of ratings: -
It's only an avatar...
Re: btn-primary setting in Moodle 3.1
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Hi Rick,

If you checkout my Morecandy/less/Moodle.less file you will see the list of variables that govern the couloirs in that theme. Basically all it does is takes one color as a setting and the rest are shades of that main color.

.bin-primary is set in Bootstrapbase/less/bootstrap/variables.less.

chevkout button.less too

if you copy the exact less for that btn-primary and add it to your more themes less/Moodle.less and Chang the color to suit your site colorscheme, that will be a better better fix than the hack you are considering.

If you do try it then you need to purge all cache to reset the less changes. This is all done via Moodle. So no need to use grunt and Such.

Cheers

Mary

 
Average of ratings: -
It's only an avatar...
Re: btn-primary setting in Moodle 3.1
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Further to my last comment...

https://github.com/lazydaisy/moodle/blob/master/theme/bootstrapbase/less/bootstrap/variables.less#L91-L92

Thats wher the bin-primary color is generated.

so take that an add you preferred colour scheme.

use my Morecandy theme less/ Moodle.less as a guide.

 
Average of ratings: Useful (1)
Picture of Rick Jerz
Re: btn-primary setting in Moodle 3.1
Group Particularly helpful Moodlers

Mary, thanks much for your replies.  My immediate problem is fixed.  Now I am going to dig into this a little more (and enjoy the "candy" that you offered.)

 
Average of ratings: -
It's only an avatar...
Re: btn-primary setting in Moodle 3.1
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

I am sure you will find endless possibilities when using More theme and Less, especially if you have access to the server.

More is a fab theme to clone and adapt.

Have fun,

Mary

 
Average of ratings: -
Picture of Rick Jerz
Re: btn-primary setting in Moodle 3.1
Group Particularly helpful Moodlers

Mary, in about a month or so, I will be giving a presentation at MoodleMoot2016 US on modifying the MORE theme for MoodleCloud.  This is a situation where one must work with the built in themes, since MoodleCloud does not allow users to install add-ins.

 
Average of ratings: -
It's only an avatar...
Re: btn-primary setting in Moodle 3.1
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Oh great...I didn't know that...I must be half sleep, I assumed it was on your own server!

I better leave you to it and head off to the woods and hibernate a little longer...!!!

Lol

Mary

 
Average of ratings: -
Picture of Rick Jerz
Re: btn-primary setting in Moodle 3.1
Group Particularly helpful Moodlers

Well Mary, you assumed correctly.  It was on my own server.

But I was supporting your idea that MORE has a lot of capability.  I was reinforcing this idea by letting you know that I am going to be presenting this topic at MoodleMoot.  And I was also reinforcing this idea with the example that using MORE can be a good way to improve the appearance of one's MoodleCloud account.

 
Average of ratings: -
It's only an avatar...
Re: btn-primary setting in Moodle 3.1
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Hi Rick,

I think it is a brilliant idea to promote the More theme that is on Moodle Cloud.

Sadly I forgot to update my site and so lost the account, but I was experimenting quite a bit and got it looking quite nice. At least I thought so!

Just as a matter of interest, have you ever tried adding the Bootstrap 2.3.2 Carousel into the Site topic area of the Frontpage? You can do it via the HTML editor using TinyMCE, as this works better for this kind of thing,

Here is the HTML & CSS (both normal & responsive) for the Carousel:

    ================================================== -->
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img src="<!-- insert image here via TinyMCE Image file-picker -->" alt="Slide 1">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
              <a class="btn btn-large btn-primary" href="#">Sign up today</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="<!-- insert image here via TinyMCE Image file-picker -->" alt="Slide 2">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
              <a class="btn btn-large btn-primary" href="#">Learn more</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="<!-- insert image here via TinyMCE Image file-picker -->" alt="Slide 3">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
              <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
            </div>
          </div>
        </div>
      </div>
      <!--<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> -->
      <!--<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> -->
    </div><!-- /.carousel -->

CSS is as follows:

/* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
      margin-bottom: 60px;
    }

    .carousel .container {
      position: relative;
      z-index: 9;
    }

    .carousel-control {
      height: 80px;
      margin-top: 0;
      font-size: 120px;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
      z-index: 10;
    }

    .carousel .item {
      height: 500px;
    }
    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 500px;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-top: 200px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    .carousel-caption .btn {
      margin-top: 10px;
    }

Responsive CSS is as follows:

/* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        height: 500px;
      }

    }


    @media (max-width: 767px) {

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
        height: 300px;
      }
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }

    }

Hope this is helpful?

Will you be recording your presentation?

Cheers

Mary

 
Average of ratings: -
Picture of Rick Jerz
Re: btn-primary setting in Moodle 3.1
Group Particularly helpful Moodlers

Mary, I am going to have to find some time to experiment with what you have shared.  I continue to use MORE (and like it.)

My plans are to create a Pecha Kucha (6:40minute) video for my presentation, and I will have eventually have a "course" for my presentation on the MoodleMoot2016 site.

Are there MoodleMoots in the UK during the summer?  I would be interested in attending one next year.  I see that there is one in March, but that timing is not good for me.  So maybe there are some smaller ones during the summer (May-August).

 
Average of ratings: -
It's only an avatar...
Re: btn-primary setting in Moodle 3.1
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

There was one in London in April this year, the week before Easter which was a bad time for me.

 
Average of ratings: -
Picture of Richard Oelmann
Re: btn-primary setting in Moodle 3.1
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

As Mary says, the UK/Ireland MoodleMoot was just before Easter, as it has been for the last few years. Timing is always an issue for these things, but UK isn't really big enough to host more than an annual Moot - although there are also some other European Moots through the summer.

There aren't any others in UK right now - although I did have an interesting chat with one of my colleagues that the UK Moot doesn't appear to attract many school people (rather than FE/HE/Business) and wondered whether there may be a case for some smaller regional Moots, maybe run by a single university but maybe only 1 day, or something that school staff might find themselves able to be released for more easily.

The other one I've 'attended' a couple of times, but haven't been able to this year or last, is the online iMoot (going on right now! smile )

 
Average of ratings: -
Picture of Rick Jerz
Re: btn-primary setting in Moodle 3.1
Group Particularly helpful Moodlers

Okay Mary and Richard, thanks for your replies.

Yes, Easter is a little early for me because I am in class teaching.  But I will watch for future events.

 
Average of ratings: -
Picture of Rebecca Barrington
Re: btn-primary setting in Moodle 3.1
 

This has affected my theme too.  I am using the Adaptable theme (but tests on other themes where I change the colours based on the theme settings rather than CSS seem to act the same).

It looks like the new buttons appearing in assignments in 3.1 (btn and btn-primary) are using the theme / CSS colours for a hyperlink whereas a normal button (singlebutton) are set as button text colour

I am very much a wysiwyg / front end user so I don't understand much CSS or the technical bits but thought I would add this in case it helps with any developments (I would much rather a single button style rather than have some buttons with the text in the 'linkcolor' sytle and some with a 'buttontextcolor' style.

I have got around it for now by changing the button colour so that it works with my dark blue hyperlink text and white button text!

Assignment button styles:

  • View all submissions = btm
  • Grade = btn-primary
  • Edit submission = singlebutton
 
Average of ratings: -
Picture of Fernando Acedo
Re: btn-primary setting in Moodle 3.1
Group Particularly helpful MoodlersGroup Plugin developersGroup Testers

In Adaptable this issue is already solved and will be published soon.

In the meantime you can add this style to the CSS Custom box:

.btn:first-child { color: [setting:buttontextcolor] !important; }


(Edited by Mary Evans - original submission Wednesday, 11 January 2017, 7:53 PM)

 
Average of ratings: -
Picture of Susana Caixinha
Re: btn-primary setting in Moodle 3.3
 

Hello Fernando,

I'm having this problem in Moodle 3.3 and your answer: .btn:first-child { color: [setting:buttontextcolor] !important; }

doesn't work.


Can you help me?


thanks,

Susana

 
Average of ratings: -
Picture of Susana Caixinha
Re: btn-primary setting in Moodle 3.3
 

Hello,

We've solved the problem with th following CSS:

.btn {color:[setting:buttontextcolor] !important }
.btn-primary {color: [setting:buttontextcolor] !important}
.btn-primary:visited {color: [setting:buttontextcolor] !important}


thank you,

 
Average of ratings: -
It's only an avatar...
Re: btn-primary setting in Moodle 3.1
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Are the buttons in question wrapped in a button tag like this...

<button class="btn btn-primary">...</button>

 
Average of ratings: -
Picture of Fernando Acedo
Re: btn-primary setting in Moodle 3.1
Group Particularly helpful MoodlersGroup Plugin developersGroup Testers
We made some tests and it looks a bug.

In the assignments, the "View all submissions" button only have the btn class while the Grade button has the btn-primary class.

It means the first button apply the default class for ALL the buttons when it should have an additional class like primary, default or link.

The workaround provided works well in some cases but we detected other. So we are investigating for a better solution even this is a bug that must solved in core.

In this is not new. I opened a issue in the tracker while the QA testing due the changes made in buttons and the inconsistency in the design. The issue https://tracker.moodle.org/browse/MDL-56704 was open and closed quickly without verify the issues and marked as duplicated with other issue not related to this (looks somebody was not interested to have open issues related to Boost)

As Rebecca pointed, there are a, input and buttons tags  with all kind variations. The buttons are not unified and that creates a complex management for the styles applied. And they was changed from 3.1.




 
Average of ratings: Useful (1)
It's only an avatar...
Re: btn-primary setting in Moodle 3.1
Group Core developersGroup Documentation writersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

https://github.com/moodle/moodle/commit/18bb2883ce3c5a3b2f462b81e92f095f2b864322#diff-24d9423fb5137da5d75ec7bee62a2861R81

In that is the case then this mess should be put right.

As for the button tag well that is also causing problems as the less styles for that uses the .btn class as a style that adds a background image and colours it a graded shade of off-white, with a text colour of dark grey.

Cheers

Mary

 
Average of ratings: -