Fordson: change footer-textcolor and add icons

Fordson: change footer-textcolor and add icons

by Michael Szabo -
Number of replies: 9

Hallo everybody,

i've got two questions about the fordson/boost-theme:

  1. How do I change the color oh the text displayed in the footer? I tried to add the following code as additional scss in the color-settings: footer#page-footer {color: white;}
    Didn't work ... is my code wrong? Is the place, I added it, wrong?
  2. How do I add fontawsome-icons, which are not listed in the _icons.scss file? I'd like to use the archway-icon (code f557). Simply using the word "archway" (like other icons) doesn't work. I added two lines of code in _icons.scss and _variables.scss but it didn't work. What do I miss?
Thank you for your help!
Michael
Average of ratings: -
In reply to Michael Szabo

Re: Fordson: change footer-textcolor and add icons

by Michael Szabo -
Is it to simple? smile
Average of ratings: -
In reply to Michael Szabo

Re: Fordson: change footer-textcolor and add icons

by Jason Hollowell -
Picture of Particularly helpful Moodlers
Michael,

I was just getting ready to post a very similar question and found your inquiry here. I have a similar situation so I'll add my inquiry here bumping this up to the top and hopefully elicit a response. (fingers crossed) smile

I've just installed Fordson (most recent version as of 2 days ago) on Moodle 3.10.1+ running on Apache/Mysql (7.4). I'm using the following Fordson settings:

Preset: Boost
Layout Chooser: Default Boost Layout
Section Style Chooser: University Learner
Course Tile Display: Horizontal Style One
Block Display: Three Column Fordson Default

Actually, I think the only setting above that is pertinent to my question is the Boost preset. I've changed the footer color to a very light green. With this color setting the footer items (logged in as, logout, Data retention summary, and Get the mobile app) appear as white links. The contrast of the white on the light green makes them basically invisible. I'd like to change the color of that text but am having a heck of a time figuring out what css to use.

Also, I note that with the default color for the footer (when using the Boost preset) adding an Institution name, URL, social media links results in text that is basically the same color as the footer and thus invisible. Changing to light green made those stand out nicely but made the ones I listed above virtually invisible. I am attaching a screen shot of the footer for reference.

Any help will be most appreciated.

Cheers
Jason
Attachment Screen Shot 2021-03-10 at 9.02.13.png
Average of ratings: -
In reply to Jason Hollowell

Re: Fordson: change footer-textcolor and add icons

by Jason Hollowell -
Picture of Particularly helpful Moodlers
Documenting baby steps toward a solution here. wink

So, it seems I need to somehow modify the following --> $footer-link-color

But there is an inverse setting in the code that I don't entirely understand. It seems to be setting the color as inverse to the background...but in my case this isn't resulting in a desirable outcome. How to modify is my dilemma?
Average of ratings: -
In reply to Jason Hollowell

Re: Fordson: change footer-textcolor and add icons

by Jason Hollowell -
Picture of Particularly helpful Moodlers
Ok, found it! smile The following allows for those white links to be grey. Change the color, of course, as desired.

Paste this in Raw SCSS input area for the end of the style sheet found at the bottom of the colors setting page for Fordson.

#page-footer a {
color: #373A3C;
text-decoration: underline;
}

I guess text-decoration: underline isn't really necessary as it's already defined in the sheet. I simply copied the entire entry and change the color from #fff to #373A3C which is the same grey as the social media and institution links.

Cheers
Jason
Average of ratings: Useful (2)
In reply to Jason Hollowell

Re: Fordson: change footer-textcolor and add icons

by Michael Szabo -
Hey Jason,
thank you very much - this is progress.
I tried to change the text-color with just one command - and failed.
I pasted:

#page-footer div {
color: #FFFFFF;
}

#page-footer a {
color: #FFFFFF;
}

This seems to change the color of every text in the footer. But it is not elegant ...

Cheers
Michael
Average of ratings: -
In reply to Michael Szabo

Re: Fordson: change footer-textcolor and add icons

by Jason Hollowell -
Picture of Particularly helpful Moodlers
Micheal,

Sorry to hear that you are not getting the results desired. I've been tweaking Fordson over the past day or so and have used the following, with desired success, in the footer.

#page-footer a {
color: #373A3C;
text-decoration: underline;
}

That was all I needed to get the text that was white to be grey which is the same as the other text in the footer. I'm attaching a screenshot of the footer I have to demonstrate what I got.

It seems you want to change not just the "logged in as" and other text on the left but also the text on the right side? In that case I think you need to tinker with something like this possibly:

For the institution name:

#page-footer .brandbox {
color: #Desired color
}

For the link below your institution name:

#page-footer .footercontact {
color: #Desired color
}

Cheers
Jason

P.S. I still need to tweak the color a bit so the info icon next to "Docs for this page" is a better color. White is not ideal with the footer color I am using.
Attachment Screen Shot 2021-03-11 at 8.50.20.png
Average of ratings: Useful (2)
In reply to Jason Hollowell

Re: Fordson: change footer-textcolor and add icons

by Victor Suarez -

Thanks a lot for the help in changing the Fordson theme footer.

I just wanted to add my 2 cents in case someone else requires extra customizations:

/* Set color for all texts in footer (including info icon) */
#page-footer .container {
  color: #desired-color;
}

/* Change footer background color */
#page-footer {
  background-color: #desired-color;
}

/* Hide the Moodle logo in non-Admin pages */
#page-footer .sitelink {
  display: none;
}

Happy Moodling!!

Victor

Average of ratings: -
In reply to Michael Szabo

Re: Fordson: change footer-textcolor and add icons

by Steven Batchelder -

Thanks for posting this solution. 

I wanted to change the text to white against a black background to match our website and this has worked for mesmile

Cheers

Steve B

Average of ratings: -
In reply to Jason Hollowell

Re: Fordson: change footer-textcolor and add icons

by Fa Ahmed -
I want to change this code because its not working in 'colors' fordson.
this code is working fine in additional HTML but the footer displays at the top when quiz essay question require grading windows pop up.

#<div class="container" aria-label=Footer" style= "border-top: 1px solid #FFFFFF;"><p></p>
#<div class="row">
#<div class="col-lg-2"><a href="http:>eLibrary</a></br><a href= https:> Code of Conduct</a></div>
#<div class="col-lg-8"></div>
#<div class="col-lg-2"><a >Technical Support</a></br><a href=https:>Contact Us</a></div>
#</div>
#</div>
#</div>



Can you help me convert this in
#page-footer .container{}
Attachment Screenshot 2022-08-26 165144.png
Average of ratings: -