Adding a colour background to Moodle 4.0 using CSS

The background in boost is colourless. Its almost a perfect white. Where there is the option to choose an image for a background, perhaps you just want a simple colour or gradient in the background. This short video shows how this can be accomplished using the CSS below:
/* This changes the background colour */
.pagelayout-login #page,body {
background: linear-gradient(to right,#b1e1b8,#bffdf7,#b1e1b8);
}

[@ProgramarDesdeCero]

Excelent video, could you make a video where explain how change color of menu-bar

[@Wise-Cat]

Just made it. I cover a few more things regarding theming, but here's a link to the specific part of the video that answers your question. Hope this helps! ruclips.net/video/lTlKZzmEhHk/видео.htmlsi=uAtNFGYWBAY_xYqj&t=1140

[@kimschittchristensen6315]

Much appreciated 👍

[@Wise-Cat]

Glad to help, it's a small but nice thing to change.

[@pabvlovian]

Thanks a lot! ✊

[@Wise-Cat]

Thanks for watching. Happy to help!

[@tomascabreramesina7867]

thanks brother, my background is beautiful now

[@Wise-Cat]

Happy to help

[@SolutionsDevSP]

Nice, but the CSS code says ".pagelayout-login #page,body" which is not actually affecting the login page, but the whole website.

[@Wise-Cat]

If you only want it to take affect on the login page, simply change the selector to remove the ,body at the end. So the new selector would be ".pagelayout-login #page"
Note, that I'm pretty sure the selectors needed have changed since 4.0. So it might be a good time to revisit this topic. Also, it's actually much easier to use a theme like moodle.org/plugins/theme_boost_union to do this.

[@Fran-um9bv]

How can I customize the navigation bar. I'm with learnR plugins

[@Wise-Cat]

I'm hoping to get a video out about LearnR soon. In the meantime, check out the "icon navigation" feature in LearnR, or the custom menu in the "theme settings."

[@alaamostafamohamed7694]

cood

[@Wise-Cat]

Chur

[@MRFU510N]

Hi great video, do you have any custom css for changing the 'whiite sections of moodles 'Boost' theme. for example the main body and nav bars?

[@Wise-Cat]

Haha, this is a deceptively complex question to answer. If you want all the white sections changed, you could just find the selector and write some CSS for that, but it would be difficult to get right. The problem being, when you say "white sections" I reply with "which white sections?" #infiniteloop
You can use bootswatch to make a general colour bootstrap theme for your site. After exporting the theme from bootswatch, you can then use boost's cli tool to convert the bootswatch to something Moodle will understand. This is a bit of a process, but can be done and the colour scheme will look better in the end.

[@kimschittchristensen6315]

Any advice on how to change text color of the navigation bar? I managed to change the navbar color, but not the text. Thanks in advance 🙂

[@Wise-Cat]

Yes, you need to use selectors like "nav.navbar.navbar-light" in Boost to grab the navbar and ".navbar-light .navbar-nav .nav-link " to grab the link text. You also might need to style ".moremenu .nav-link:focus, .moremenu .nav-link:hover " to stop stuff disappearing when moused over.
It's a bit trial and error with the inspector open, but can be done.

[@nishaadkhan8390]

Hi
Great video and content
Is it possible to add an image using css?

[@Wise-Cat]

Thank you!
Sure, you just need to change the background line to something like the following:
background-image: url("my_background_image.png");
OR
background: url("my_background_image.png");
Either should be OK!

[@nariroeplal1553]

Hi can you make a video on how to change the layout or design of the login page?😅

[@Wise-Cat]

Hmm, I've never got around to actually doing this though I've always been interested in giving it a spin. Changing some CSS has typically been enough for my needs. This may be a good time to give this topic a proper look. Thanks for the idea!

[@davidwaudo7209]

@@Wise-Cat Am also interested in learning how this can be done if you may be able to give directions on how to do this it will be much appreciated

[@Wise-Cat]

I don't have anything on this yet. Though I recently noticed that the LearnR theme has an option for turning off the main login form (proceed with caution). This sounds great for one of my Moodles where all logins happen using Oauth2. Maybe look at the LearnR plugin and see how they worked their magic?