FRONT PAGE BACKGROUND IMAGE and SITE BANNER ADVICE

Re: FRONT PAGE BACKGROUND IMAGE and SITE BANNER ADVICE

by Mary Evans -
Number of replies: 21
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

https://github.com/lazydaisy/moodle-theme_morecandy/blob/master/less/moodle.less

You may find the above URL useful as the theme there is one I created and based on the More theme.

Note if you add the line:

body { background-size: 100% auto;}

This ensures the background image stretches and shrinks to stay within the given page size no matter the device type.

If you get stuck please give me a shout. I hate that people have to struggle as Moodle Themes are not that easy to fix especially the More theme as it appears to have some very odd code within it...at least I think it does!

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE and SITE BANNER ADVICE

by Gary Marsh -

Hi Mary;

I'm still struggling to resolve the front page background image responsive device-width issue.

I looked at the morecandy theme code you suggested but, to be honest, my brain is already saturated with coding that I'm struggling to understand and I wasn't able to spot anything that might help me.

I added the <meta name="viewport" content="width=device-width, initial-scale=1.0"> into the More Theme Custom CSS field but that didn't make any difference.

W3 Schools has plenty of good CSS Responsive information that I could try to put into the More Theme Custom CSS textarea but how do I relate the CSS statements to the background image that was dropped into the "Background Image - new files attachment" window?     For example, I would like to try adapting this W3 coding example: 

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; }
</style>
</head>

<body>
    Resize the browser window to see the effect.
    <div></div>
</body>
</html>

Two questions on the above W3 example code;

  1. I believe the "<head>" statements will go into the Custom CSS textarea but where does the body html statement "<div></div>" go?
  2. Developer Tools shows the background image path as http:// ... /moodle/pluginfile.php/1/theme_more/backgroundimage/1525116824/FP-BG_Image.png,     I don't see how this path will work in the url field above and I haven't been able to find where the background image file is actually located on the server but if I could, then perhaps I could use the server path to it.

I would also like to experiment with @media Query Device Breakpoints but again, how do I state to the background image location?

This has been a perplexing problem for me to resolve and I'm hoping for suggestions.

G

Average of ratings: -
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE and SITE BANNER ADVICE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Gary,

You appear to be getting your HTML and your CSS confused.

what you said you added to the CSS box was in actual fact HTML which is already in the More theme layout files By default.

So if I were you I would remove all that stuff you added to the CSS  and get back to the beginning.

If the background image is not responsive then that is more than likey you have the wrong CSS for that image.

It might be helpful if you uploaded the code you have been adding so that I could tell you where you are going wrong!

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE and SITE BANNER ADVICE

by Gary Marsh -

Thank you Mary, for your prompt reply.

I have attached an image that contains:

  • The Background Image field and settings;
  • The Custom CSS Textarea statements; and
  • The Developer Tools - Background Image info.

With respect of the More Theme background image, this is all the CSS and HTML statements that I've made.     I hope you are able to read it.

G

Attachment More Image Code.png
Average of ratings: -
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE and SITE BANNER ADVICE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

hi Gary,

Sorry for delay in this discussion.

The only thing you appear to have got wrong is in the contents of the CSS settings area!

You cannot add meta data. As I said earlier that meta data is in the layout files already.

You can only add CSS in the CSS area and there is no need to add style tags,

so remove everything, just leave the CSS like so...

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0;}

Don't forget to save your settings!

Hope this clears things up?

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE

by Gary Marsh -

Moodle 3.4.2+ (Build: 20180412)

Hi Mary;

No need for a delay apology, we both have other Moodle issues that take time to deal with.     I am most grateful that Moodle support is as good as it is and thankful for your always sound advice.

Thank you for your guidance on this background image issue I have.     I made the changes and the result is both interesting and baffling.     But before I outline the results, I need to repeat that the website involves two themes.

  1. The More Theme, which provides the background image and is the general theme of the website.
    The More Theme background image is not behaving device responsive but page content throughout the website is device responsive.

    Now I should point out that I created the the background image with physical dimensions that close enough match the screen size of my samsung cellphone ... Landscape [w 5.0" x h 2.77" (ratio 1:1.81)].     My laptop screen dimensions are [w 11.0" x h 6.0"(ratio 1:1.83)].     The pixel resolution of the laptop screen is [w 1366px x h 768px (ratio 1:1.78)].     The image should scale without distortion, shouldn't it?

    The original issue is: the front page background image displays fully and properly on my laptop but only partially on my IPAD and my cellphone (landscape and portrait mode) and I'm trying to understand why and and how to make the More Theme background image device responsive.

  2. The Clean Theme and it's purpose is to provide a different background color to each course.

Now, the interesting and baffling results of the More Theme Custom CSS change ... all website pages, including courses, now display the more theme background image on the IPAD and cellphone BUT the laptop correctly displays the course background color. i.e. the courses should, and previously did, display a coloured background on all devices.     I have confirmed that the "Course Appearance - Force theme" are set to "Clean" and the Clean Theme Custom CSS textarea still contains the original course background color statements.

The original request was "How do I determine the actual server URL for the More Theme background image?" so that I can try using @media rules such as:
@media only screen and (min-width: 768px)
body { background-image: url('image_name.png');

If these statements cannot appear within the More Theme Custom CSS textarea, then I will also need to know where they can be stated.

Does any of this make any sense to you?     I am looking forward to your excellent guidance.

G

Average of ratings: -
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Ok...

Last Question first!

If you are using More theme then no need to tell Moodle where the image is as it knows because the image is already styled as the page background in the LESS file in More theme.

All you need to do is add the following CSS in the More theme's Custom CSS no need to add any @media rules as this setting should resize to any screen size.

body { background-size: 100% auto; }

Or if you prefer...

body { background-size: cover; }

Hope that works for you.

Now for your  course pages. 

If you are using Clean theme as a course theme then the background image from the More theme will not show up, unless you have coded it to do so. If that is the case then you will also need to add the background-size CSS  in order to style it correctly.

I hope I have covered everything...?

PS,,,

You can add the @media for your different devices if you want to

@media only screen and (min-width: 768px) {
    body { background-size: cover; }
}

 

but technically it should work without...

Hope this helps?

Mary 

Average of ratings: -
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE

by Gary Marsh -

Thank you Mary . . . partial success!

I added the body { background-size: cover; } statement to the More Theme Custom CSS textarea and the background image now displays fully and properly on the cellphone screen smile but not on the IPAD screen sad.     The IPAD viewport dimensions/ratio are/is significantly different (almost square) than the background image dimensions/ratio.     Do you think that might be the cause?     If not, then perhaps it's an IPAD issue rather than a MOODLE issue.

The IPAD and Cellphone are still showing the More Theme background image and ignoring the course Clean Theme background color.     I have no idea why?     I recently updated to Moodle 3.4.2+.     Do you think that might have anything to do with it?
The laptop shows the proper course background color.

Sorry to be a bother . . . personally, i think content is more important than appearance but too many people think otherwise . . . so I'll soldier on with the window dressing.

I really do appreciate your help.     Thank you, again.

G

Average of ratings: -
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

With regards to the iPAD what settings have you got at the moment in that device?

In mine I can choose Desktop which then displays the page as you see if on a normal PC.

That said, you may be better making changes using the Site Administration > Appearance > Additional HTML

like you mentioned at the beggining of this discussion. The only problem now is that you may have left some CODE in place there and forgotten it, which in turn could be causing you all these problems!

Anyway try adding this to the HEAD part of the settings in the Additional HTML page:

It's different to the one added into the Bootstrapbase layout files that both Clean and More theme use.

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

I got this code after reading about this some years ago, but it is still relevant. You may even want to try it out on your website?

https://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes

Hope it helps?

You may also want to Purge all caches which should force the new changes into place.

Hope it helps?

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE

by Gary Marsh -

Hi Mary;

I have implemented your meta tag suggestion and also Matthew's proposed coding but neither affected the IPAD background image non-responsiveness.     If I were to make a separate background image to match the IPAD viewport pixel ratio, do you think I could instruct the More Theme to use it only on IPAD devices, with a specific @media rule?

Another difference I just noticed is the IPAD does not fix the background image to the page as do other devices.

I'm still curious about devices, other than the laptop, not processing the site courses with the Clean Theme background color.     I don't think this is a theme issue.     Can you can suggest another forum where I should post this question?

Thank you for staying with me to resolve the background image device responsiveness issue.

G

Average of ratings: -
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

If you give the iPad image another name then you can add an @media rule to style it.

As for getting help elsewhere for the various issues you are trying to fix... then try asking in the General Forum.

it could be that the actual problem may be in the image you have made. I don't recall having any problems of this nature before.

Some questions...

What is the exact CSS are you adding to your site? 

Can you share a link to your Moodle site? 

My worries...

I have just had a thought.

Are you using the option for different themes for different devices by any chance?

Administration > Appearance > Themes > Theme settings > Detect device type

If so then this may be causing issues if the settings are wrong or the theme not compatible with the devices?

M

Average of ratings: -
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE

by Gary Marsh -

Hi Mary;

Thank you for these comments.     My responses (in blue).

If you give the iPad image another name then you can add an @media rule to style it.

I'm assuming the @media rule should be placed within the "Additional HTML/Within Head" textarea.     Is that correct?

it could be that the actual problem may be in the image you have made.

I don't think so.     It's the same background image that was used when the courses always displayed the Clean Theme background colors.     The first time I noticed devices, other than the laptop, were showing course pages with the More Theme background image instead of the Clean Theme background color was on my Thursday, 3 May post, after I had removed the More Theme Custom CSS statements that you had advised me to do.     I doubt removing those statements are the cause.

Answers to your questions.

What is the exact CSS are you adding to your site?

I only use inline CSS statements, with the exception is the Custom CSS statements that are attached.

Can you share a link to your Moodle site?

NO, for you, I wish I could.     I'm developing the website on my private MOODLE dedicated server, which is not open to the public . . . yet!

Are you using the option for different themes for different devices by any chance?

The only theme statements are in the More and Clean Theme Custom CSS textareas (see attached screenshot).     I have yet to specify any statements for different devices.

To be honest, I can live with the More Theme background image displayed on small devices throughout the site.     I think it's just a bit too busy for a course background and would prefer the course background to be neutral, on all devices.     But, it would be useful to know why the small devices are behaving this way.

Perplexed.

G

Attachment Theme CSS.png
Average of ratings: -
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Gary,

OK, given that each course has a settings page which lists theme names for course Tutors to select from, when setting up the course, providing the option to "ALLOW" Course Themes has been activated in Admin settings. Please can you assure me that this is the case for you at this moment in time?

Can you verify that you have...

  1. Set your Admin settings to Allow Course Themes.
  2. Checked to see that Clean theme is selected in the courses you expect it to be?

The reason I am asking this is that the More theme image should not be displayed in any of your course pages on any device. If they are then they must be using the More theme, which suggest to me that your Admins settings are wrong.

Just my take on things.

Mary

Average of ratings: -
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE

by Gary Marsh -

Hi Mary;

I have attached a screenshot of the settings that I think you are referring to.     These are the settings that have been set for almost a year and without any issues, until now.

The screenshots were taken from the laptop and you should notice that the background color of the course is correct, whereas, a small device shows the More Theme background image.     Previously, and before I tackled the device responsive issue, I'm certain that the cellphone showed the course background color.

Baffling Behaviour, No?

G

Attachment Theme Course Settings.png
Average of ratings: -
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Ok...

If you look further down the Themes setting page  you will find a checkbox for Detect device which by default has a tick in it. If that is true then you need to go to the Theme selector page and check to see if you have the More theme is selected for all the main devices in the list displayed on that page.

example

If you have already done this then I am at a loss why your cellphone is behaving badly!

Mary

Average of ratings: -
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE

by Gary Marsh -

Hi Mary;

The Detect device checkbox is ticked and a screenshot of the Theme Selector is attached.     Do you see anything wrong here?

Here's another interesting discovery . . . I borrowed a friends IPHONE (very small viewport) and it behaves the same as the IPAD . . . both a bit different than my Android cellphone . . . a bruised apple?.

Summary - Throughout the Site:

  • The IPAD and IPHONE displays the More Theme background image (not responsive) and is not fixed to the pages;
  • The Android cellphone displays the More Theme background Image (responsive) but is fixed to the pages;
  • The Laptop displays and behaves properly.

It would be useful to see whether these anomalies do or do not occur on a similar moodle test website, served elsewhere.     Can you think of a way I could do this?     I can't.

G

Attachment Select Device.png
Average of ratings: -
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, 

You can safely remove the More theme from the Legacy option as that is for Internet Explorer 6 

If I were you I would try switching off the Detect Device as that is tge setting I use and it works ok in any phone that has an uptodate Browser App. Which browser have you installed on your Cell Phone? Its a strange thing that's happening so more likely to be the phones themselves or rather the Operating System perhaps out of date and not upgradable.

My iPad is old and fixed at OS9 so Safari & Firefox browsers cannot update also my android phone is old too so I removed all Google Play off it and only use as a phone. 

Another thing to take into consideration is that Moodle now has a Mobile App which allows you to use Moodle on a mobile device quite easily but has no facilities as yet to allow you to use your site theme so just stuck with the design that Moodle uses.

Ill take a look at the LESS files for tge More and Bootstrapbase themes and see if there is any code that is missing for your devices. 

by the way which browser are you using on your phone?

Thanks

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE

by Gary Marsh -

Hi Mary;

BINGO!     The Android, IPAD and IPHONE course background issue was resolved by switching off the Detect Device setting.     Thank you for the suggestion.

On the Android cellphone, I use the Chrome browser.    The IPAD and IPHONE use Safari, both of which were recently updated,.

I tried the Moodle App but it doesn't render the website well . . . unless the "Website" option is selected.    Might as well use a browser.

The only remaining issue is the More Theme background image does not function device responsive nor page fixed on the IPAD and IPHONE.

Almost there!

G

Average of ratings: -
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Apparently it is an iOS issue not a Moodle one!

I have reproduced this on Moodle Demo site.

Still trying to find a fix for it.

Cheers

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE

by Gary Marsh -

I just noticed this post and 'tis good that you were able to identify the IOS issue.     Hopefully, there is a fix for it.     As I said earlier, many students prefer to use an IPAD and it's important for IOS to be fully compatible with Moodle.

I believe the resolvable issues have now been resolved and I am most grateful for the tremendous support and effort you have provided.     If you are able to find an IOS fix, please post it here for me.     For some reason, I am not receiving an email notification of a forum post, so I'll regularly check out this posting in hope to see it.

A Very Happy Moodler

G

Average of ratings: Useful (1)
In reply to Gary Marsh

Re: FRONT PAGE BACKGROUND IMAGE

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, 

Apperently it's a clash when using

background-position: fixed; 

background-size: cover;

So try changing CSS from 

body { backgrounds-size: cover;}

to 

body { background-size: 100% auto;}

using an @media rule for iPad and iPhone only.

Average of ratings: -
In reply to Mary Evans

Re: FRONT PAGE BACKGROUND IMAGE

by Gary Marsh -

Hi Mary;

I'm not sure whether this is what you were suggesting, but if it is then it didn't have any affect on the IPAD.     I didn't include the IPHONE media query 'cus I don't immediately have access to test it.

BTW FYI, I found this link "http://stephen.io/mediaqueries/", a document titled "CSS Media Queries for iPads & iPhones", which is up-to-date.

G

Attachment IPAD media query.png
Average of ratings: -