Afterburner theme issues in 2.3.1

Afterburner theme issues in 2.3.1

by Darren Bucknell -
Number of replies: 23

Hi,

 

We upgraded to Moodle 2.3.1 from 2.2 today and having had a poke around, found a usability issue with the Afterburner theme.

The theme was a very slightly modified version of the Afterburner theme that was included with our Moodle 2.2 install.

I basically had changed the theme to a fixed width, editted the main graphic from a blue to a grey and included our logo.

This theme was backed up and restored into the new code install.

However, when I was playing with the new file picker in both IE and Safari, the colours made filepicker unusable.

Please see below where Afterburner's blue selection box makes readability impossible!

Filepicker

 

Is there a simple method to find and alter these colours to say a grey?

Many thanks in advance,

Darren

 

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner theme issues in 2.3.1

by Darren Bucknell -

Just done some digging and found that the colour is #34637f (used eye drop tool in Photoshop!).

A quick look in the afterburner_menu.css shows this value appearing in a number of places.

Does anyone know where to change it to a value of say #969696 to allow for a mid grey in the file picker?

Darren

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner theme issues in 2.3.1

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Can you please report this as a BUG in Moodle Tracker

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner theme issues in 2.3.1

by Darren Bucknell -

 

Hello Mary,

Will do.

For a quick fix, I'm going to change all occurrences of the above value for #959595 and assess the effects!

Darren

 

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner theme issues in 2.3.1

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Thats a good idea. Can you add any findings to the tracker issue when you report it?

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner theme issues in 2.3.1

by Radhika Vathsan -

Hello, I'm having the same issue too: and I have used the Afterburner theme as it is with no changes! hope to see a resolution soon!

Average of ratings: -
In reply to Radhika Vathsan

Re: Afterburner theme issues in 2.3.1

by Darren Bucknell -

Right, I've made the change in the afterburner_menu.css which had no effect.

I then found the occurance in afterburner_styles.css which did the trick.

The grey I used is still a little on the dark side so was wondering if there was a specific background color I could inject into the file-picker code, or, better still, use a white colour for the text?

The file-picker always uses black text so a lighter colour would be preferable rather than obtaining it from:

select, input, button {
background-color: #808080;
color: #fff;

which is a portion of the afterburner_styles.css style.

Cheers,

Darren

 

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner theme issues in 2.3.1

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I'll be fixing this this weekend so I'll have a look at it later.

You can actually split this CSS up into individual sections to style each element.

select {background-color: #808080;color: red;}

input { background-color: #808080; color: green;}

button {background-color: #808080;color:blue;}

smile

Thanks for reporting it. And glad it all looks right now for your site.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner theme issues in 2.3.1

by Darren Bucknell -

Hi Mary,

Thank you for your involvement.

The file picker looks a little better with a #808080 grey but the black text colour is still hard to read.

Is there a way to change the text to white?

Thanks in advance....

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner theme issues in 2.3.1

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I'll take a look and see what I find.

Be right back!

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner theme issues in 2.3.1

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Darren (I keep wanting to call you Barry smile

Try this as an alternative to the #808080;

/* Filemanager
-------------------------*/
.filemanager select,
.filemanager input,
.filemanager button,
.filemanager textarea,
.file-picker select,
.file-picker input,
.file-picker button,
.file-picker textarea {
    background-color: #EEE;
}

Average of ratings: -
In reply to Mary Evans

Re: Afterburner theme issues in 2.3.1

by Darren Bucknell -

I guess you are referring to the legendary DIY guru from bygone days? smile

Many thanks for the suggestion Mary, I'll give that a go.

Where do I pop this bit of code BTW?

All the best,

Barry... I mean Darren smile

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner theme issues in 2.3.1

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Yes the DIY Guru smile

You can add that CSS to the custom settings page for your copy of the theme you are using. It's the page where you change the logo. The Custom CSS box is below the logo textbox.

HTH

Mary

 

Average of ratings: -
In reply to Mary Evans

Re: Afterburner theme issues in 2.3.1

by Darren Bucknell -

Superb Mary!  That worked a treat.

Time for me to pack away the DIY crown smile

 

All the best,

Darren

Average of ratings: -
In reply to Darren Bucknell

Re: Afterburner theme issues in 2.3.1

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Glad to hear it worked OK.

Cheers

Average of ratings: -
In reply to Mary Evans

More custom colours

by Darren Bucknell -

Hi Mary,

Barry back with more DIYing smile

Would you be able to point me to the correct .css and code so I can change the drop down hover colour please?

I have been tayloring the style to match our corporate colours but the bright CYAN doesn't match.

I would like to change the drop down hover colour to #1E4997 and made a change in afterburner_styles.css which made no difference.

/*
Collapse All - Expand All - Both Colours were originally #008db0
-------------------------*/
div.controls .expandall,
div.controls .collapseall {
font-size: .8em;
color: #1E4997;
margin: 2px;
padding: 0;
float: right;
clear: both;
text-transform: capitalize;
font-variant: small-caps;
border-bottom: 1px solid #1E4997;

Thank you for your continued help which is very much appreciated.

Darren

Attachment menu drop-down.jpg
Average of ratings: -
In reply to Darren Bucknell

Re: More custom colours

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

The reason you did not see any change in the hover color is that you changed the Expand/Collapse links that you will only see if Course/Categories are listed on the frontpage. You better change that code back to what it was for that element. sad

As for the hover background color for the dropdown menu lists I don't have a clue. I have a feeling it is not restricted to the theme as the HEX color code #3399FF is nowhere to be found.

However, you could try...something like...

.select:hover {background-color: green}

which will style it but you still get the lightblue as well!

I don't seem to be able to capture the actual CSS rule it's coming from.

 

Average of ratings: -
In reply to Mary Evans

Re: More custom colours

by Miriam Laidlaw -
Picture of Plugin developers

Is it a sprite, like that elusive blue highlight on the custom menu I struggled for ages at first to eliminate?

Average of ratings: -
In reply to Miriam Laidlaw

Re: More custom colours

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

It probably is Miriam, but even so I could not find it even in YUI CSS files sad

Average of ratings: -
In reply to Mary Evans

Re: More custom colours

by Darren Bucknell -

Hi Mary,

Oops!  I'll change that back right away smile

Thank you for looking into this and for the suggestion.

Darren

Average of ratings: -
In reply to Mary Evans

Re: Afterburner theme issues in 2.3.1

by Clare Cluer -

Hi Mary,

We've been using the Afterburner theme as a basis for our new college moodle, but I have the same problem as above, and even though I copied exactly what you've put above into the afterburner_settings.css file, it's not making any changes.....

Help?!

Thanks!

Clare (CSS newbie!)

Average of ratings: -
In reply to Clare Cluer

Re: Afterburner theme issues in 2.3.1

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Which bit of code are you refering to?

It depends on what you are trying to change.

Assuming that the code you added is correct, then the reason it is not visible is becsue Moodle caches all data. So you will need to Purge all caches in Site Administration > Development > Purge all caches.

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Afterburner theme issues in 2.3.1

by Clare Cluer -

Hi Mary,

Sorry, this bit of code:

/* Filemanager
-------------------------*/
.filemanager select,
.filemanager input,
.filemanager button,
.filemanager textarea,
.file-picker select,
.file-picker input,
.file-picker button,
.file-picker textarea {
    background-color: #EEE;
}

But please feel free to ignore me!  I was pasting it directly into the css file, and it wasn't working.  I pasted it instead into the custom settings page (custom css box) and it worked! Weird!  All other css changes I was making were changed successfully using the css file on the server!
 
Oh well, important thing was that it worked!  And I think the fact that I aslept on it and came to the office witha  fresh (ish) head worked too!
 
Thanks for responding so quickly though Mary!
 
Clare
Average of ratings: -
In reply to Mary Evans

Re: Afterburner theme issues in 2.3.1

by David Sensenig -

Thanks for this fix! The old style was driving me nuts and a simple copy-and-paste of this did it! Looks great now.

Average of ratings: -