Custom CSS Issues

Custom CSS Issues

by Callum Laverick -
Number of replies: 11

Hey,

So I am running Moodle 3.3.1.

Using the Roshni Lite theme. Release 2.5 (Build: 2014082901)

Love the theme and will be getting the paid version if the client is happy with the final prototype Model. Only issue I have is that the text colour in the user button and submit buttons have black text, and with the selected colour scheme, it is very hard to read (see attached picture).

I have used custom css with a theme before with a previous job back on Moodle 2.8 (different theme) and had no issue. Now I know this could be an issue for the theme author but I was wandering if someone could check my custom css for the span class buttons (below) and give me any advice I would be grateful.

.usertext{

color:#ffffff;

}

.userbutton{

color:#ffffff;

}

Thanks in Advance,

Callum

Attachment Example.PNG
Average of ratings: -
In reply to Callum Laverick

Re: Custom CSS Issues

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

TBH your best bet is probably to use something like firebug or Chrome developer tools to identify the correct selector - the buttons may have a span or <a> tag or similar inside them which has been styled and so has a more specific selector. Firebug would be able to show you that

Average of ratings: -
In reply to Callum Laverick

Re: Custom CSS Issues

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

Hi Callumn,

Personally I would not waste my money buying any theme from Duel Cube if the CSS file of the Roshni Lite theme is anything to go by.

The way the CUSTOM.CSS file is written, any CSS you add to that theme's Custom CSS area text box in that particular theme's settings page, you will not get any benefit from some changes as the CSS settings output file sits above some of the themes hardcoded CSS markup.

How these themes pass Moodle scrutany I have no idea!

https://github.com/dualcube/moodle-theme_roshnilite/blob/master/style/custom.css

To answer your question, however, you could try this:

#page-navbar .usertools .usermenu .moodle-actionmenu .toggle-display {color: white;}

The actual color for that link is inherited, therefore you need to find the parent, which I think is the one you need.

If it does not work please get back to me and I will download the theme and track it down, then I can tell Duel Cube where their otherwise lovely theme is wrong!

Cheers

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Custom CSS Issues

by Callum Laverick -

Hi Mary,

Thank you for your reply, I have seen you help many people on this forum in the past and know you are an expert in this field.

I must say I did not know that about the way Duel Cube structured their CSS and am glad that you have pointed this out as I will no longer be going forth with the purchase. And I cannot believe they are allowed to do this.

I will give the css you have posted a try and get back to you this afternoon. Speak you soon and thanks once again for your help.

Kind Regards

Callum

Average of ratings: -
In reply to Mary Evans

Re: Custom CSS Issues

by Callum Laverick -

Hi Again Mary,

The code was unsuccessful in changing over the color of the userbutton text. And the time it is taking to sort out this theme is making me want to look for another. I think I found the parent which is span.userbutton, So i added the below Custom CSS and no luck, if you could take a look at the theme that would be amazing. Otherwise could you recommend me in the right direction for other premium themes that you would personally recommend. (Corporate training site design). What is your opinion on the lambda - Responsive Moodle Theme?


usertext{

color:#ffffff;

}

.userbutton{

color:#ffffff;

}

.usermenu span {

color:#ffffff

}

span.userbutton {

color:#ffffff;

}

.usermenu{

color:#ffffff;

}

.menubar a{

color:#ffffff;

}

Kind Regards

Callum

Average of ratings: -
In reply to Callum Laverick

Re: Custom CSS Issues

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

While there are undoubtedly many good paid for themes - the term 'premium' implies 'very good quality' and there are more than a few 'very good' FREE themes in the moodle database, while there are also many poorly built and supported commercial themes. Paid for/commercial does not necessarily mean better.

Check out:

Essential

Fordson

Adaptable

or some of the less feature rich, but highly customisable themes such as Handlebar

there are many others too - all of these have developers who are active in the community and on the forums.

If you find that there are features in commercial themes that you particularly want and which are not available in freely provided themes, then maybe raise those as suggestions for someone to develop and incorporate into those available on the database.

Average of ratings: -
In reply to Richard Oelmann

Re: Custom CSS Issues

by Callum Laverick -

Hi Richard,

I completely agree with you regarding the Moodle database containing a range of good themes. I have personally worked with the Adaptable and Essential theme. I currently run a 3.2 Moodle VLE using Adaptable and it has been perfect for that client. My current client wants a more corporate/business style VLE, I know the free themes have huge customization options but it takes a lot of time to get them looking like a site they are not really deigned for. 

Whereas the couple of paid for themes I have sampled take little time/effort to look suited for a business/corporate look that a majority of people I have worked for like.

Thank you for your recommendations and I like the sound of Handlebar for another possible site idea.

Cheers

Callum

Average of ratings: -
In reply to Callum Laverick

Re: Custom CSS Issues

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

I know Lambda very well and it is not better than any other 'complex' Moodle Themes (with complex I mean that you need to set some settings)

And if you want to compare with Adaptable, then simply you can't compare. Adaptable can do much more than Lambda can do. All the features included in Lambda are also in Adaptable and much more. Adaptable latest version have more 400 settings and you can customize most of them by yourself.

Lambda is based in Essential. First was a simple copy with a 'nice' style sheet. Now look they added some code to improve the theme. And they ask for money just for that.

Sincerely, if you wanted some special feature of a theme then I could understand it but Lambda don't have any special. At least no more than Essential.

BTW, Adaptable was developed thinking in corporations, educational companies and big academical institutions. Mainly because most of our clients are of that kind. But you can use in a school or academy as well. That's the reason of the name. Adapt the theme to suit your needs.

 

Average of ratings: -
In reply to Fernando Acedo

Re: Custom CSS Issues

by Callum Laverick -

Hi Fernando,

Please don't get me wrong I am a fan of adaptable and yes i realize that it contains an abundance of customization settings to 'adapt' into any requirement. But it is the time it takes to mold such a theme into a users set requirements that sometimes is less cost effective than getting a 'nice' paid for theme/'style sheet' where at least some of the leg word has already been done for you. This is just my personal experience.

I have yet to purchase a theme for this project but I appreciate your input on the situation.

Cheers

Callum

Average of ratings: -
In reply to Callum Laverick

Re: Custom CSS Issues

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

I know that set up a complex theme could be a hard task.

But there are several ways to simplify this tasks and I can't understand why people pay for a copy of a free theme when having free themes that are much better (including the original in this case)

I repeat, Lambda is just a nice Essential styles. That's all.

If you use other commercial themes (there are some really good) that add new features then that's fine. You can choose whatever you want but pay for a copy is a waste of money IMHO

Probably spend some hours to get this style is less than the price you pay for the theme and set up, because it needs set up anyway. Then create a template and add the template to the custom CSS.

Like any document template, first is really hard. Next are easier. After ten sites, create a new theme will take a few minutes.

 

Average of ratings: -
In reply to Callum Laverick

Re: Custom CSS Issues

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

OK...in that case try this instead: I tested it and it works for me.

.usermenu .moodle-actionmenu .toggle-display .userbutton .usertext {
color: white !important; }

Lamda theme is nice, but then again I like the different look of Roshni Lite too.

The problem I find with all themes is that some settings are often a disappointment, but I think this is because Moodle can be difficult to restyle once set by the parent theme.

Mary

Average of ratings: Useful (2)
In reply to Mary Evans

Re: Custom CSS Issues

by Callum Laverick -

Hi Mary,

The css works like a dream, thank you so much for that approve .

Yea I think I need to do some more research into a theme and its ability to be restyled/ settings that are default to the theme for initial theme config.

Cheers Again

Callum

Attachment Thank you.PNG
Average of ratings: -