This forum post has been removed
Number of replies: 16This really is a question for the 'Themes forum', please ask Howard the moderator to move it to: https://moodle.org/mod/forum/view.php?id=46.
Discussion moved as suggested.
Any suggestions would be greatly appreciated.
Thank you - Gail
On the Fordson Colors Page you can add this
rgba(0,0,0,0.5) to the "Top Navigation bar Background Colour" setting.
That would make the navigation bar 50% transparent with a black background. Use any RGB color picker to get the base color you want and then change the last digits "0.5" to whatever level of transparency you want from 0 to 1.
Thank you for responding - testing provided settings are not transparent (able to see through) but a variance of shades (percentage). Could you recommend anything else?
Maybe a screenshot is in order because that should have worked at 50% transparent and I am not quite sure of what you want to do.
I also pointed out you can adjust the transparency so if you want NO background color I think you can use this:
rgba(0,0,0,0.0)
Its the Header Box Background I would like to make transparent to enable the image in the background to show through. Attached screenshot is with: rgba(0,0,0,0.5). Lowering the number still does not provide a transparency.
Is that the dark grey heading background you are trying to make semi transparent?
If you add a solid colour like #889900 which is an olive green colour which section of your page header changes as you may be needing an alternative method to change the element you are referring to as the header has many classes that apply to various objects within that section of the page.
Mary
Um, this maybe a silly question - I'll take a closer look when I get back to a computer with Moodle and an upto date version of Fordson on it (I'm travelling at the moment, so can't update my version right now) - but...
What is actually immediately behind the gray box you are trying to make transparent? I'm assuming you are referring to the grey bar that says Moodle3.2 Preview in your screenshot.
I see there is an image right in the background, but that bar looks as if its sitting on a white content background above the page background image, in which case the transparency may well be working (as you say its showing you different shades) but its immediate background is simply a plain white that sits above the image you are trying to see.
Altering that (if that is the case) would mean moving the bar outside the main content that has the plain white and as such would involve editing the html/template not just the css.
Richard
It's proably the #page-header card or card-block class as I said there are lots of classes in that region.
You could try...
#page-header .card {
background-color: rgba(255, 255, 255, 0.3);
}
The bar sits on top of the image. Prior to a theme update the bar was transparent ( you were able to see image below it). Now it is a solid color blocking view of image.
Hi Gail,
Try adding this to the Raw SCSS box in the Fordson theme.
#page-header.row > div > .div.card {
background-color: rgba(255, 255, 255, 0.2);
}
It should look something similar to the heading of my website HERE
If it does not work then there may be something stopping it in the theme itself.
Mary
Re: Theme Fordson - adding a semi-transparent color
Richard is correct. Removing the bar color would only expose the content background which is white.
You might want to try the e_Learner Preset as this uses transparency more with the image but I am not sure if it would give you the same effect.
I deliberately put the text within the content area in order to meet ADA requirements for people with visual issues.
Having users upload images and you might end up with contrast or hard to read text depending on the image. To be safe we chose the current layout.
Just add the body ID selector for the login page #page-login-index in front of the CSS you are wanting to use for that page.
hope that helps?
Mary
Hello Elena,
Do you want to remove the photo background on the login page?
Drop this in the RAW SCSS text box for custom code:
body#page-login-index {
background-image: none !important;
}
That will remove the photo.
If you just want a different photo as the background you just upload your own photo on the theme admin page for Fordson. Go to Site Admin > Appearance > Themes > Fordson and click on the Custom Image Settings tab. This will allow you to upload your own image for the header, site page, and login page.
Chris, there is no need to add body in front as the selector is a unique ID.
https://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/