For some reason, in 1.9 I could wrap course activity links around an image in a course block. In 2.2, this does not appear possible.
See screenshot for the wrap issue. Notice the links don't start until after the image.
In reply to Garth Brady
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Mary Evans -
Hi,
I'm not sure what you mean by 'wrap course activity around an image'.
Do you mean add an image to the course block and then let this image LINK to the activity using <a href="path-to-activity"><img src ="path-to-image" /></a>?
I think you can do this by creating a course called "Course Activities" and then put all your activities in there. Then in your Main course page add the activity as describe above.
I've not tried this but I dont see any reason why it wont work.
You can do much the same with the resources too.
Mary
I think this could also mean he wants to float an image (say float right) and have the activities links appear next to the image (instead of below it).
The no-overflow class in the summary of each topic seems to be preventing this. You could try:
.summary .no-overflow {
overflow: inherit;
}
in the core.css file of your theme, make sure you clear the theme cache. Also note, I'm not sure what problems the above might cause.
Hi John
I could not understand this well either. Could it be the fact the course info and course description are split left and right?
This can be changed easy enough...but not sure if it was split the same in M19 or not!
Cheers
Mary
In reply to John St
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Garth Brady -
Thanks all for your input!
John - you were correct. I want to wrap activity links around an image in a course block (not trying to link an image).
This code works great!
.summary .no-overflow {
overflow: inherit;
}
In reply to Garth Brady
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Mary Evans -
Another happy Moodler!
In reply to Garth Brady
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Frederic Nevers -
Hey Garth,
I'm trying to do the same as you but when I add the code to 'core.css', clean theme cache, APC cache and browser cache, nothing happens. Did you add the lines to another file as well?
I used to use align='left' but now use the style-float='left', should I revert back to the old ways? Not really keen on doing that as the align attribute seems deprecated.
Any help would be appreciated.
Fred
In reply to Frederic Nevers
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Mary Evans -
Hi,
Providing you added the code to core.css for the theme of your choice, as suggested by John originally, then clearing Theme cache in not enogh, what you are missing is "Purge all caches" (Moodle caches) in Site Administration > Development > Purge all caches.
Hope this helps?
Mary
In reply to Mary Evans
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Frederic Nevers -
Thanks for your prompt answer. The problem I have is that it sort of works but does not do what I expected it to.
Please see the attached screenshot to see expected behaviour.
Cheers,
Fred
In reply to Frederic Nevers
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Mary Evans -
Hi,
If you use float: left; you also need to add clear: left; this will stop the image on the right touching the area to its left, in effect force it to slip into the void below.
Cheers
Mary
In reply to Mary Evans
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Frederic Nevers -
Hi Mary,
thanks for your uber-fast answer. I'm a bit lost here though. Please take a look at the screenshot attached to see what I am trying to achieve. Is it possible in Moodle 2.2? It was dead easy in Moodle 1.9 - I only had to float the picture left. What extra steps do I need to take to achieve the same in Moodle 2.2?
Thanks again for your help,
Fred
In reply to Frederic Nevers
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Mary Evans -
Can you upload as a txt file the css you are using?
That way I can test it in one of my course pages.
Thanks
In reply to Mary Evans
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
Hi,
I have the same problem: i need that the labels, activities and resources float to the left but the class 'no-overflow' is preventing it. I am working with Moodle 2.2 and in previous versions i didn't have this problem.
The divs in the design already have align='left' or align='right' and also clear='both'. I've tried with this declaration and cleared the cache but still doesn't work:
.summary .no-overflow {
overflow: inherit;
}
As the following image shows when i rename the class 'no-overfow' with the Firebug, the labels instantly take the position i need. ¿Is there anyway i can edit the html of the base theme so this div don't have the 'no-overflow' class or can i erase the class?.
I would really appreciate any help.
This is the closest thread about this topic but is unsolved.
Thanks a lot.
In reply to Juliana Tobón Gaviria
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by John St -
Have you cleared the moodle cache after making changes (and/or turned on theme designer mode)?
In reply to John St
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
Hi john,
yes i've cleared the caché several times and the designer mode is always on. The real problem is the 'no-overflow' class don't let other divs float correctly.
Thanks.
In reply to Juliana Tobón Gaviria
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
I finally got rid of the 'overflowdiv'. I'm not an expert in php but this is what i did:
- In \moodle22\lib\weblib.php set all the values for overflowdiv to false
- In \moodle22\course\lib.php set all the values for overflowdiv to false
- In \moodle22\theme\base\style\core.css comment or erase this lines:
.no-overflow {overflow:auto;padding-bottom:30px;}
.pagelayout-report .no-overflow {overflow:visible;}
.no-overflow > .generaltable {margin-bottom:0;}
.ie6 .no-overflow {width:100%;}
Like that the 'overflowdiv' let others divs float correctly.
After doing this will be necessary to edit some css classes in your theme in order to make everything more organized.
Hope this would help somebody.
---
cheers
Julita
In reply to Juliana Tobón Gaviria
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Richard Oelmann -
Hi Julita
While you may have good reasons for editing core files to achieve what you needed to, I would just like to reinforce for other people searching these forums that this is NOT recommended. Changes to core code (including core themes such as base) will be lost each time you upgrade your site and will affect every theme not just the one you are using.
Could you expand on the 'necessary to edit some css classes' to let people know just how much change might potentially be needed by these core changes? It seems to me that changing something as fundamental as all the overflowdivs (presumably needed or they wouldn't be there) is likely to create quite a few of these necessary edits???
Richard
In reply to Richard Oelmann
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
Hi Richard,
I understand your concern about the edition of the base theme. I checked out again without comment o edit the lines in the core.css and it worked percfectly. So the step 3 posted on my last message won't be needed.
With 'necessary to edit some css classes' I meant to edit the classes in the css of my own theme, not the core.css of the base theme., so it only affect the theme i am working on.
I am not an expert in development and code. Being my field all about design I really don't know what the overflowdivs were created for. They weren't in previous versions and they became an obstacule to develop my designs. Maybe you could give more information about them.
Since the base theme was not edited, shouldn't be a problem to other designers to set the values of the overflowdiv to false ¿What do you think?.
I appreciatte your response.
This is how my theme looks now after the changes:
Thanks a lot
cheers
Julita
In reply to Juliana Tobón Gaviria
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Richard Oelmann -
Hi Julita,
I'm pleased you found that you do not in fact need to edit the base theme - however, I would still advise against anyone changing all the overflowdivs in core (lib\weblib.php & course\lib.php) and personally I would not expect anyone installing a theme onto another site, or my own site following an upgrade, to need to make edits in core files to make it work.
That said, I am aware that some things for an individual site may need edits to core to make things work the way you want them to (including things like plugins such as nanogong - needs an edit to the tinymce files when it is installed) so it's not unheard of - but as I said in my earlier post, for anyone reading/searching through the forums, changes to core are not recommended for the reasons I gave previously and anyone making changes to core files needs to be fully aware of why they are doing it and what the drawbacks may be.
I am also aware Julita, that often work is done for a specific site and not for general release, by people who are fully aware of these drawbacks and accept them (I've just finished - no not really, I am still finishing!) a theme for my own website which I know is very specific to my needs, uses css to do things with blocks that just wouldn't be there on any other site and so would be pointless sharing with the community, but solutions like that if they are in the forums, do need to be highlighted for general forum and community users who are not necessarily aware of these drawbacks and recommendations and could otherwise fall into those traps if they are not made aware of them, which was the main purpose of my original post.
I'm glad you have your very smart looking theme working the way you want it Julita
Happy Moodling
Richard
In reply to Juliana Tobón Gaviria
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Mary Evans -
Julita,
I don't see why you found it necessary to remove the no-overflow in Moodle CORE lib files in the first place, as the example page you show here, although pretty yet very simplistic and not at all like I had imagined, so I would have thought you could have delt with the no-overflow using CSS alone.
However, at the end of the day, you are the designer and your client wants a theme in a particular design. I just hope your theme holds together when your client's Moodle site is in full production and start grading student's work as the BASE theme CSS was added especially to fix those BUGs where the grader table, without the no-overflow class, is cut off and so cannot scroll to allow administrators/editing teachers to enter grades.
Cheers
Mary
In reply to Mary Evans
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
Hi Richard and Mary,
I understand both of you and apreciatte the inputs.
I acknowledge the risks of taking a 'drastic' solution as set to false all the overflowdivs. I also know could be problems I haven't notest as the grader table.
Mary, you are right saying the design is very simple. That's why i don't understand I couldn't get the divs to float as I've done many times.
The real problem is this: when the overflowdivs are on, every single thing (labels, activities, resources) are created between a overflowdiv with .no-overflow class, so all the elements end up having the same attributes making impossible (at least for me) to make things float in relation with others.
Do you think you could find another solution to make things float correctly without making any changes in the core files?
Thanks a lot
Cheers
Julita
In reply to Juliana Tobón Gaviria
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Mary Evans -
Hi Julita,
If I where you I would report this in Moodle Tracker as a BUG and file it under Administration in the Componan's dropdown menu when you fill in the form.
If you do this then this will get reviewed.
Mary
In reply to Mary Evans
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
Hi Mary,
Thanks for the advice.
One last doubt. In the \moodle22\lib\weblib.php the developers added some comments and in one of them says that the default value for OVERFLOWDIVS should be false:
Options:
* overflowdiv : If set to true the formatted text will be encased in a div
with the class no-overflow before being returned. Default false.
Reading this I understand i didn't do anything wrong by setting all this divs to false. ¿What do you think?
Thanks.
cheers
Julita
In reply to Juliana Tobón Gaviria
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Miriam Laidlaw -
Rather than hacking Moodle core, you can just add the line:
.no-overflow {
overflow: visible;
}
To your CSS and it should fix it.
Screenshot of before:
Screenshot of after:
I'm not sure what the implications are of doing this to the appearance of other things on the site, but at least it's not a Moodle core hack.
In reply to Miriam Laidlaw
Re: Themes: Wrapping images around activity links (scrnshot)
by Jon Fila -
I tried using:
.no-overflow {
overflow: visible;
}
In the Clean theme, but am unable to get images in Topic Summaries or in Labels to align to the right of the list of items. Any ideas on what the fix for this might be? I'm using Moodle 2.5 & 2.6.
I've attempted the various solutions on this page with Theme designer mode on, caches cleared and anything else I can think of. I'd really like to be able to make this happen since I think it adds so much more visual appeal to a course's main page.
In reply to John St
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Jean-Luc Delghust -
Thanks! this seems to have sorted it for me, but to prevent problems in other areas I specified the following CSS - I only want this to happen in the main section of courses:
.course-content .section.main .no-overflow {
overflow: visible;}
I also had to edit my custom headers for that area, as they all had borders which would still overlap the images:
.course-content .section.main .h1 {
overflow: hidden;}
I'll be testing this out, any comments on this and/or suggestions welcome, I'm no CSS expert (trial & error educated, let's say ^^!)
In reply to Jean-Luc Delghust
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Miriam Laidlaw -
I discovered a small problem that this particular code may have caused.
A lot of our lecturers use a table in a label at the top of the course with manually created links to anchors on the page (like a nice graphical navigation system).
With the no-overflow changed in the theme, it seemed that the links mostly stopped working only when editing was turned off and only when something else was added into the same topic box after the table. Still investigating.
Got around it by removing everything else from the same topic box and the links all worked again, but it is definitely related to the no-overflow 'fix' I suggested here.
Just so you know.
In reply to Miriam Laidlaw
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Jean-Luc Delghust -
Thanks for this info. Actually, I've changed the solution above and used the one you describe in an answer just below
.path-course-view .content .summary .no-overflow { display:inline; }
.path-course-view .content .label .no-overflow { display:inline; }
I think it works better, as it acts only on elements summary & labels, which is where we usually put the pictures that we need to see next to the activities.
I then obviously had to add a "overflow: hidden" in the same context for the headings (h1 to h4) for which I had specified a border, so that those borders would not go over the images
.path-course-view .content .label .no-overflow h1,h2,h3,h4 {
overflow: hidden; }
(using custom theme with parents fusion, base & canvas)
In reply to Garth Brady
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Chrissy Trenholme -
Hi, a while ago I asked this same question, I am using Moodle 2.2 and a theme based on Anomaly. I was given this very helpful piece of code
.path-course-view .content .summary .no-overflow { display:inline; }
which I put in my general.css and it worked a treat for images that are inserted in the main topic headings. However it does not work for images that have been inserted into a label.
Is there a piece of code that I can put in that will allow images to wrap around the resources when in a label?
I have tried using this code, as suggested, instead of the one above and find that it has no effect on labels either.
.no-overflow {
overflow: visible;
}
Many thanks, Chrissy
In reply to Chrissy Trenholme
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Miriam Laidlaw -
It's because it's referencing the summary (which is the topic headings and summary area).
.path-course-view .content .summary .no-overflow { display:inline; }
Try changing the summary bit to label and see if that helps.
.path-course-view .content .label .no-overflow { display:inline; }
In reply to Miriam Laidlaw
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Chrissy Trenholme -
Brilliant help, it works - thank you Chrissy
In reply to Chrissy Trenholme
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by James Hanson -
I have this exact problem and frustration - labels won't float like they did in the previous version. However, I don't know anything about code - is there any solution to this problem that doesn't involve revising code? Is this an easy enough fix that someone who's never done it could do accomplish it?
Thank you! Jim
In reply to James Hanson
Re: 2.2 Themes:Wrapping images around activity links (scrnshot)
by Miriam Laidlaw -
Hello James,
No, the CSS is the only place this can be altered. If you are using a theme that has a Settings Page, you can paste this CSS into the Custom CSS box of that theme and it should fix the issue:
.path-course-view .content .summary .no-overflow { display:inline; }
.path-course-view .content .label .no-overflow { display:inline; }
It may cause other problems but I haven't come across any yet.