How can I create a class with two columns of content that scale

This forum post has been removed

Number of replies: 10
The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: How can I create a class with two columns of content that scale

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

Not sure what you want to do. If it is about course content then is not related to the themes.

If you want to add text and images one beside other then use div as containers instead table.


In reply to Fernando Acedo

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: How can I create a class with two columns of content that scale

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

random image for demo purposesIf Atto (as your editor) is stripping tags, then I would suggest switching to TinyMCE as your editor as they definitely work there.

but that shouldn't be neccessary - Atto will add the responsive class to the images and all I did for the image here (don't worry about what the image is, its just a random screenshot for the purposes of adding an image to demo) was set the alignment as 'Right' when I uploaded it, then to go into the html and change the uploaded image size which was originally given the height and width in pixels - I removed the height and changed the width to 40%.

Should be fine for what you want to achieve - but as Fernando says, its content related and completely independent of the theme you are using. It works the same way on Clean, Adaptable, Essential, Flexibase - its just standard Moodle smile


Hope that helps

Richard

In reply to Richard Oelmann

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: How can I create a class with two columns of content that scale

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

Hi Laurie,

I don't think its about offending anyone smile Its about getting the most appropriate help in the most appropriate forum smile

If both Atto and Tiny are stripping style comments then there is a problem with your editors which needs to be asked about in that forum, so those with the right expertise can help you.

Hopefully the solution I gave you above doesn't actually add any style tags other than those which are put in by default through the image upload so there shouldn't be anything stripped out of that.

Richard

In reply to Deleted user

Re: How can I create a class with two columns of content that scale

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

Inline styles are never recommended, so you can add an id to the HTML code and then add the CSS to the custom CSS box.

Anyway, TinyMCE do not strip CSS inline styles except if you have some syntax error.


In reply to Deleted user

EDITED - Re: How can I create a class with two columns of content that scale

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

Hi,

You CANNOT link to external stylesheets using the Text Editor. The only way you can do that is add the link/s to the head part of the page using Additional HTML which you will find in Site Administration > Appearance > Additional HTML

Hope this is clear enough to understand?

Mary

EDIT:

To make images responsive you need to make sure each image has the class 'img-responsive' associated with it. To do this in TinyMCE you add the image and in the setting up of the image location, if you click on the tab marked "Appearance" you will find a section where you can add classes for that image. So In the drop-down box associated with the classes you need to chose 'img-responsive' from the list which appears.

Again I hope this is useful?

Cheers

Mary

In reply to Deleted user

Re: How can I create a class with two columns of content that scale

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

I've already writen comments in this thread and none seem to be being read.

So I will try again here.

in-line styles in the Text Editor look like this:

<img style="vertical-align: middle; padding: 10px; margin: 20px; border: 5px solid #890;" class="img-responsive" src="https://moodle.org/pluginfile.php/115/mod_forum/post/1351259/blue.png" alt="blue" height="193" width="261" />

blue

That said, I suspect you are trying to add:

EXAMPLE:

<style> body { background-color: #efefef; font-face:  'Typewriter'; }</style>

Which if used will be stripped as this is not allowed!

Cheers

Mary

In reply to Deleted user

Re: How can I create a class with two columns of content that scale

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

You can do this just using Bootstrap span classes if Joombla uses Bootstrap 2.3.2 like Moodle does?

See my previous comment (demo) What I want to achive..

Cheers

Mary

In reply to Deleted user

Re: How can I create a class with two columns of content that scale

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

What I hope to achive

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.