Greetings Moodle Community
Moodle: 3.3 (Build: 20170515)
Adaptable: 1.4 (Build: 2017053000)
I've temporarily made the #logocontainer's background-color red. What I have tried:
#page-login-index #logocontainer { position: centered; }
Thank you in advance
#page-login-index #logocontainer { position: center; }
Check what Mary gave you and what you have written
From Mary:
#page-login-index #logocontainer { position: center; }Screenshot shows you have put centered
Thank you for your reply.
I tried 'centered' and 'center', both yield the same results.
Ok...well sounds like you are doing everything wrong...where exactly are you making allthis CSS changes?
Actually though, 'center' isn't a valid value for the 'position' rule - https://www.w3schools.com/Css/css_positioning.asp
If the image is a background image, you could use background-position: center - https://www.w3schools.com/CSSref/pr_background-position.asp
But if it's an img you probably need to set its width and then set the margins to auto in order to center it. That would mean either centering the #logocontainer or making it 100% width and then centering the img within that.
I don't have adaptable installed in work to check which it is, sorry. - https://www.thoughtco.com/center-images-with-css-3466389
I don't think you can get it without some coding because the header is too complex and CSS is not enough.
position: center;
is not a valid value as Richard indicated. But you can use position to convert to relative and then move the logo.
Try this:
position: relative;
left: 50%;
Notice that you must remove any other element of the header like site title or course title.
Anyway, modify the header is not a good idea because you probably will break the mobile view.
Thanks for the reply. Tried, didn't work. Relative + Left 50% did, but it moved it way to the right and not the center. And as you say, it would break the mobile view. So for now I'll just leave it and move onto something more productive.
Thanks Mary, Richard and Fernando for the help!
Now that is a bit of defeatist's attitude, Ruan...
Sorry I could not get back to this yesterday...I was too busy doing housework!
As for position: center; that was my mistake as it was meant to be background-position: center; but even so that would not have worked either as the logo in this instance is an image and not styled as was the original logo in Moodle Clean theme years ago when I added it. So apologies for that error.
Here is what I have just tried on your edusignis site and it looks to be working.
Also it works in smaller screens too.
#logocontainer {
float: none;
height: 100px;
margin: 5px auto;
padding: 0;
width: 460px;
max-width: 460px !important;
}
#logo {
height: 100px;
margin: 0;
padding: 0;
width: 460px;
max-width: 460px !important;
}
Hope this helps?
Cheers
Mary
Noo0o Mary, I understand that's how it comes across, but having a tight deadline for the demo of this service, I'm merely prioritizing cosmetic issues. I would have definitely revisited this
No issues, everyone has their own lives they need to get on to. I appreciate every bit of effort to help me resolve this!
I'll definitely try this out, at the moment I'm having a problem where suddenly, no changes to the site (custom css, course edits, etc) are registering/staying edited. I've been trying to troubleshoot this with our ISP, have googled and scoured the forums for a similar issue and can't find anything. I fear I might have to delete the database completely, install a fresh version 3.3, restore my moodledata backup and the database backup I made yesterday.
Until then, I can't do anything.
Sounds more like a permissions thing on the moodledata/cache folders Ruan?
I'd certainly check that out before resorting to a complete reinstall!
Thanks for the suggestion, Richard. But how can it be if I'm on an admin account?
Have you made any changes to Moodle core files?
No I haven't, which have prompted me to strongly believe that the fault was not with my Moodle. In the end, restarting Nginx service resolved the problem.
Could the problem be Browser cache needing to be ckeared
Perhaps you need ti refresh the page?
Using the Firebug Add-on in Firefox just to test the actual logo.
Does it work?
Interesting, I'm learning a lot. Haven't tested it as of yet, will provide an update once I have. Thank you, Mary.
Hi Ruan,
There is an option to Add Rule when using Firebug and other Web Developer tools.
Just do a Right Click on the screen of your website and then add the CSS.
The thing about CSS is that you need to hunt down the original CSS used which can be tricky, but I do find that FireBug is more helpful in this respect than other so called "Web Deverloper" Tools.
Cheers
Mary