Adding a colour background to Moodle 4.0 using CSS

[@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! kzbin.info/www/bejne/ooXPfI2woqqbfs0si=uAtNFGYWBAY_xYqj&t=1140

[@KiraSensei1]

Thank you so much.

[@Wise-Cat]

You're welcome!

[@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?

[@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.

[@KidAMRadio]

Do you know the CSS code to change the content color boxes (they are all white in your video)?

[@Wise-Cat]

Not off the top of my heaad, no. But you can use the "inspector" tool (right click) in your browser to try and find an appropriate selector to change almost anything. Good luck!

[@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.

[@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!

[@kimschittchristensen6315]

Much appreciated 👍

[@Wise-Cat]

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

[@tomascabreramesina7867]

thanks brother, my background is beautiful now

[@Wise-Cat]

Happy to help

[@pabvlovian]

Thanks a lot! ✊

[@Wise-Cat]

Thanks for watching. Happy to help!

[@alaamostafamohamed7694]

cood

[@Wise-Cat]

Chur