Krystle Theme - Image and Text flow

Krystle Theme - Image and Text flow

by Rene Ouellette -
Number of replies: 26

We are rebranding the Krystle theme for our Moodle 2.4.3 implementation, and am having problems getting the text and images flowing in the content area as desired.  I saw some discussion along these lines in 2.2, but the fix isn't working for me.  (Probably my lack of understanding).

.path-course-view .content .summary .no-overflow { display:inline; } 
.path-course-view .content .label .no-overflow { display:inline; } 

The discussion is at https://moodle.org/mod/forum/discuss.php?d=194742

Just wondering if there is something specific to Krystle that we need to edit?

Thanks,

Rene

Average of ratings: -
In reply to Rene Ouellette

Re: Krystle Theme - Image and Text flow

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Well, the first few things that spring to mind is that the label unless otherwise directed is taking up 100% width, so it probably needs to be given a width and floated right - but I'm not sure you will want to apply this to EVERY label on your site, so I would use firebug to find the actual module-id for the image you want to move. Also, you don't have a .summary on the image to be brought into line (the code from the discussion you linked to was related to bringing images alongside course summaries I think, rather than floating them alongside activity names)  

For the image attached I added the following to my customcss (where <li id="module-264" class="activity label modtype_label "> was the identifier I found for the image using firebug)

.course-content .section li.activity {clear: left;float: left;}
#module-264.activity {width:200px;clear:left;float:right;}  // You'll need to repeat this for whatever other images you want to align in this way.

Hope that helps

Richard

PS. I dont believe this is specific to Krystle - the majority of the original code is inherited straight from base, so it will apply  to all themes using base (ie all except the bootstrapbase themes) unless they have specifically altered this in the theme.

Attached image below:

Attachment Screenshot from 2013-09-05 200850.png
Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

by Rene Ouellette -

Hi Richard,

Thanks for the reply.  These images seem to be inserted pictures into the summary, rather than as labels.  I would also need to make it system wide, as there are 500+ courses, and some have these images in the summary for each topic.

Here is a pic of our current theme, and then using the new theme.  For whatever reason the labels move up in the old theme, but not in the new.

Oddly enough, the html and css look pretty much identical, but display differently.

Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

by Verna Jarvis -

Hi Richard;

I work with Rene and wanted to add a little bit of information to his post since I designed the layout of these courses.

Whether the image is in the summary or a label doesn't seem to make a difference. The picture is set to float right and is properly sized with the width set to the width of the picture. This problem is happening with all pictures that are right aligned, site-wide.

This works perfectly in our current theme (Aardvark Post it) as shown in Rene's screen capture, although I do recall that we needed to make adjustments to the overflow to that theme to get text and links to wrap around the pictures as well. Rene says the previous fix is not working with the current theme.

Here is the html code from a picture (Krystle) that is not allowing the proper wrapping, followed by the html from the current theme (Aardvark) in which everything (text and links) wraps properly around all pictures:

<p><br /><img src="http://elearntest.northernlakescollege.ca/draftfile.php/2608/user/draft/432509130/01-MoodleReady-PNPatches-complete.png" style="float: right;" height="150" width="117" /></p>

 <p abp="1756"><br abp="1757" /><img style="float: right;" alt="Graphic of Practical Nurse Shirt Patch" src="http://elearn.northernlakescollege.ca/draftfile.php/2608/user/draft/750289719/01-MoodleReady-PNPatches-complete.png" width="116" height="150" abp="1758" /></p>

Thanks in advance for any further suggestions you can offer.

Average of ratings: -
In reply to Verna Jarvis

Re: Krystle Theme - Image and Text flow

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Rene - Apologies, as I couldn't see any section heading in the original image you posted I assumed the image was held in a label.

Hi Verna - its not that the images are floated right inside the summary, its the summary that needs to be floated right itself. So that the activities can be floated alongside it on the left. This would be in the css not in the html code for it as it is not set as an inline style the way the contents of the Editor are smile

So, if they are section summaries and you need to have the activities move up alongside the summaries, site wide, then you should add the following to your css (or customcss)

Attachment Screenshot from 2013-09-06 201058.png
Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

by Verna Jarvis -

Hi Richard...thanks for the speedy response!

So Rene added the code to our css and it made all of the section summaries and labels float right rather than just the pictures and didn't move the links up.

Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

by Verna Jarvis -

I should also note that we have always done our pictures this way, since Moodle 1.8.x. We never encountered a problem with this until Moodle 2.

Average of ratings: -
In reply to Verna Jarvis

Re: Krystle Theme - Image and Text flow

by Verna Jarvis -

Hi again Richard;

I should have read your first reply more closely. We ARE trying to get the Activity Links to wrap to the left of the picture regardless of whether it is in a summary or a label.

We've tested this out with a number of different themes and with Moodle 2.5 and they all leave the extra white space around the pictures rather than truly "floating" the picture and having everything that follows wrap around it.

I hope that is clearer than some of my previous posts. I look forward to hearing whether I've made sense this time big grin

Have a phenomenal weekend!

Average of ratings: -
In reply to Verna Jarvis

Re: Krystle Theme - Image and Text flow

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Im sorry Verna, I dont have a copy of postit to try this out with and without knowing what changes you made to that original theme I'm not sure where to go with this. Possibly I'm missing something obvious that I will pick up in in the morning, but right now I can't see what.

diagram

From what I can tell, the image is larger (taller) than the text in your summary, which creates the height of the .summary div. But you then want to raise the activity names so that they overlap the .summary div, something like in this diagram?

Without the text the summary just takes the width of the image allowing the activities to float up, but with the image giving the box height and the text giving it width...

Can you make this work in any other theme? Or is it just with the changes you have made to postit? Is it only Krystle it doesn't work for for you? as I can't seem to get this kind of behaviour from any of the other themes either.

Edit: Just picked up your next post smile

Unfortunately its not the image that is being floated in isolation - the float:right in the html you copied earlier just means it is floated inside the label/summary div which is its parent (the blue box in my diagram).

The image is then giving the height to the parent div (whether it is the label or the summary) and that is pushing down the activity names.

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

by Rene Ouellette -

Hi Richard, 

Your picture sums it up pretty well.  Somehow, it seems like our current theme (Aardvark_postit 2.1) does do this, but there was some changes done to make that happen.

This discussion talks about it https://moodle.org/mod/forum/discuss.php?d=183922 

I ended up editing the core.css in Base and Canvas, and it did what we wanted.  (I know this is a bad idea! smile

Thanks for your time Richard.  It is appreciated.

Average of ratings: -
In reply to Rene Ouellette

Re: Krystle Theme - Image and Text flow

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hmmm - well whatever changes you have made in base/canvas, you should be able to just add those into the customcss box, or into the end of the css in your main theme and it should override what is in base/canvas without having to edit core themes.

Can you tell me what exactly you changed so I can try it out and see the effect and if I can implement it into Krystle for you.

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

by Rene Ouellette -

Hi Richard,

Here is a pic of what I changed.

I know I am not supposed to change this, but nothing else I did worked.  This doesn't show up in Firebug as it did in the Aardvark_postit theme, so I don't think it is the issue. 

Thanks,

Rene

Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

by Verna Jarvis -

In Aardvark Post it for 2.1  Rene was able to make the activity links wrap around all pictures in labels. I know we also tried a few other themes at that time in which this also worked:

The two shirt patch graphics on the right are actually inserted in the same label as the course banner. The activity links then wrap to the left of the "truly floating" graphics on the right.With the 2.4 Krystal theme (or any other 2.4 or 2.5 theme) we have been unable to find a work around to get the activity links to wrap like this.

Average of ratings: -
In reply to Verna Jarvis

Re: Krystle Theme - Image and Text flow

by Verna Jarvis -

Hi again Richard...

I'm just leaving for the weekend. Hopefully Rene can identify exactly what he did to the theme for you but it likely won't happen now until Monday.

I truly appreciate all of your help and patience.

Type to you again next week!

Average of ratings: -
In reply to Verna Jarvis

Re: Krystle Theme - Image and Text flow

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

Hi Rene & Verna,

Since I styled the Aardvark Postit theme, which uses the same styles CSS as Afterburner for the course summary/info, can you test how your site looks using Afterburner? To do this without disrupting the view of your whole website for the outside world, first enable Allow theme change by URL in Appearance > Theme settings and SAVE settings. This allows you to view a different theme by just adding /?theme=afterburner after your main site url for example:

http://qa.moodle.net/?theme=afterburner

After testing this problem in Afterburner can you let me know, with screen-shots of how it looks?

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Krystle Theme - Image and Text flow

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Already tried Mary - as well as Standard, Afterburner is one of my 'go-to' themes for testing things out with smile

It acts the same as standard, krystle and every other theme I've tried this with, which is why we need to know what the customisations made were, to see if I can help take them out of base/canvas and add them to Rene/Verna's version of Krystle smile

Edit - I dont think its the course summary/info that's the problem, that was my error with the initial posting as well. Its actually section summaries and labels that contain an image and text and wanting the activity names to float up into the 'empty' space which is actually part of the section summary or label div.

But if you have any suggestions, I'd appreciate the help! I'm sure I'm missing something obvious, I just cant think what at the moment.

Richard

Attachment Screenshot from 2013-09-07 151145_opt.png
Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

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

Hi Richard,

Personally I do not know why people use the Label for setting things out. Labels are supposed to be just that a Label, a text heading in other words.

If you want to add more stuff, use a div with a class or better still an id as that is easier to target with CSS.

Classes are for regular things that you do when adding similar content in a theme.

Perhaps we need to educate Moodlers to do this, especially if a theme has Custom CSS setting facility?

Just a thought! smile

Mary

Average of ratings: -
In reply to Mary Evans

Re: Krystle Theme - Image and Text flow

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

But other than the section summary itself, labels are the only way for front-end users to add content (other than activities and so on) to the page aren't they?

The specific issue here is that the summary has both text and image creating the width and height of the rectangle of the parent div - if the summary (or one label) held the text and the image was in a separate label then they could be floated and wrapped and styled and........ but the fact that they are both in one here creates the issue. Even if you used the html in the editor to add appropriate divs/ids/classes to the image and content, it would still be contained within the summary or label div so unless they are separated it would still create the rectangle with L shaped content and a blank space wouldn't it?

Perhaps a possible improvement could be to add an image upload to section summaries in the same way as course summaries now have it smile

I'll wait now though and see what Rene has done to canvas and base and see if I can help move that into the theme proper rather than the parent themes.

Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

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

Why change Base and Canvas? sad BIG mistake! 

I'll have to take a closer look at the way the Label container is formed.

Might be an idea to introduce a div container with custom class.

Average of ratings: -
In reply to Mary Evans

Re: Krystle Theme - Image and Text flow

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Why change Base and Canvas? - Exactly

Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

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

I was looking at this late last night (or should I say earlier this morning).

I need to see how it was done in Moodle 1.9 as all the activities now are set in an unordered list 'ul' using 'li' tags for each activity/resource being added. This makes for a very difficult hack, although Miriam's overflow: visible works best, it can break other things, as I myself have found out over the years when used elsewhere in Moodle! The display: inline is the better option as that works best with lists...but in this scenario it's still difficult to manoeuvre. Also there are three sets of div tags inside the label too which you can't do much with.

I still maintain class label is the wrong class for this, although it's use as a label heading is good.  I must admit I had not realised that the label is the only means of customising your course page! I wonder if I can change it to something else and leave the label as a label and have something like a box container that lives outside the list to add text and images to, and that allows the list to float alongside it, either left or right depending on user preference or language?

Average of ratings: -
In reply to Mary Evans

Re: Krystle Theme - Image and Text flow

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Its not the fact its a label thats the problem Mary - in fact in this particular case its not a label anyway, its the section summary.

If you just have the image in the summary or label, you can float it alongside the activity list with no difficulty (see posts earlier in the thread - either specifically for a single item or site wide) the examples I've given float a specific label having given it a width, or site wide summaries, site wide labels could be added to that example by adding

.path-course-view .section .label {
    float: right;
Average of ratings: -
In reply to Richard Oelmann

Re: Krystle Theme - Image and Text flow

by Rene Ouellette -

Hi Mary and Richard,

If you would be willing, I could give you a login to our Test and Production Moodle environments, so you can see the difference.

Or run a remote session to my PC using join.me

Test is running 2.4.3+ with the newest Krystle theme.

Prod is running 2.4.3+ with an old version of Aardvark_postit.  We ran into an issue with the right block disappearing will editing, sparking re-branding a theme.

The pictures in Prod wrap fine, but not in Test.

Thanks,

Rene

Average of ratings: -
In reply to Rene Ouellette

Re: Krystle Theme - Image and Text flow

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

Hi Rene,

Login would be a good start that way we can get a better idae of the problem and hopefully a fix.

I'll send my email address in a private message.

Thank you

Mary

Average of ratings: -
In reply to Rene Ouellette

Re: Krystle Theme - Image and Text flow

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

Hi Rene,

I think this is what is casuing the problem, so remove this line from Krystal CSS and I think you will find the the list of Activities will move up.

ul.section li { clear:right; }

The clear: right CSS rule means that the ul li (unordered list link) does not want anything blocking its path on the right, and so it effectively just sits below the image which is in the summary section and floated right above it.

Floats do, more often than not, present a big problem with layouts in Moodle. That's why you may have seen a lot of 'clearfix' classes added here and there in the layout code.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Krystle Theme - Image and Text flow

by Verna Jarvis -

Hi Mary;

Thanks so much for coming up with the fix for us. Your help is greatly appreciate!

Average of ratings: -