Hi,
Hi,
I have tried to inspect element on googlechrome and firefoz debugger tools to find the exact code but cannot control it. I noticed that when users upload pictures and display in on their course page the blocks on the right side get pushed further to the right (hence moving away from the header. I want to stop this from happening. how do I control this? What CSS code is required?
Vijay
Which theme are you using? And is it Moodle 1.9 or 2.0?
It is not a good idea to mess with the CSS code of an installed theme, but to make a copy of the theme and tinker with the copy.
Without knowing further information, I can at least guess that you are not using a fixed-width theme. When I was showing teachers how to upload images to labels, I also showed them how to resize them. Perhaps this could be a solution in the meantime? It sounds as though users are uploading large images?
Vijay,
+1 for Miriam's comments.
As these pictures are in the course content, you probably do not want to impose a fixed size on them as some users may want to put in smaller pictures.
I would suggest the solution is not in adjusting the theme, but in training the users to ensure that pictures are resized/cropped suitably. This will also reduce the memory taken by those pictures and speed up page loading times. I know that in the training I gave staff in school this was one of the first things I dealt with in terms of adding content.
The alternative would be to impose a maximum width on the centre column, but this does not really tie in with the use of a fluid width theme as it is likely to then look odd on larger screens, but still have the same effect on smaller ones.
Richard
I am not sure if the tips are completely true but thank you for the advice to both of you. The reason why I say this is I have tested the theme called "binarious" part of Moodle 2.0 which is a 2 coloumn theme and I don't seem to have a problem with this theme as the same page with the pictures are not pushing it outside the header width. It is Moodle 1.9 and theme name is an old one called KCS which I have been tweeking for a while now and it seems to have a good effect for our requirements. Here is the link to it: http://capella.capel.ac.uk.
In the link above notice that the surround and the body are both with white background. The reason for this is to not make it look wierd for my users who put in pictures which are a little large or links that may take up a long width. The only problem with this approach is that the block on the right side will move 50% away from the header.
But now I want a dark background and white surround and that is when it would look weird when block falls on the darker region of the page.
Hi Vijay,
Best thing to do is add the following css mark-up to the bottom of the main CSS file for the KCS theme...
.forumpost .content {overflow: auto;}
This should fix it, it adds a scroll to the forum post. This is assuming that it is in the forums where students/users are adding oversized images.
If you don't like the scroll effect, then cange the value from auto to hidden. This just chops off the overflow of the page. When this happens the users may be less inclined to add content which is too large for the page.
Again it all depends on the places where this problem is. If it's coursework, online assignments...whatever. You will need specific code for all the different situations you find this happening.
Mary
Can assure you, Vijay, that what I posted is based on experience so is definitely true - although without doubt there are other solutions as Mary has given above.
I would also point out that comparing a problem experienced in a theme in 1.9 with testing in another theme in Moodle2 is not exactly realistic as both versions of Moodle are themed in very different ways. Surely the easiest way to check would have been to try to resize the offending picture in the existing theme and see if that rectified the issue as suggested.
Richard
Thanks for the advice. Regarding the resizing pictures, I was refering to Teaching Staff adding as part of their training materials for their students and its not just one course page/ topic page but several pages (but not all!!).
I am going to add the suggested code on the Google chrome's inspect element to see its effects and then apply it to the actual code. I usually use Google chrome. If I had to rate the top debuggers google chrome would be 1st then Firefox, then Opera and then IE. But that is just personal preferance based on using its features lol//
Ok, just feedback on the situation, by applying overflow:hidden the blocks on the right are only half shown which is a way restricting the use of it. But I found out another way to deal with this issue based on personal circumstances.
Increase the width of the .surround and .bannertop for KCS theme or the respective header class for any other theme. This will increase the width hence giving more space and then apply the overflow to it. This way you give more space for pictures but at the same time restrict overflows.
