how to add text and image to the centre column on front page?

how to add text and image to the centre column on front page?

by umesh chavan -
Number of replies: 29

hello all,

I have tried installing various themes but i couldnt understand how to add content in the centre column. Like if we want to put some images and related text above the "Available Courses" box.

Some themes preview shows that there is some text and image, but when we apply the theme it becomes normal theme, left coulmn, centre coulmn, right coulmn...



Average of ratings: -
In reply to umesh chavan

Re: how to add text and image to the centre column on front page?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Go to site administration>front page>front page settings and tick the box that says include a topic section. Then if you go back to the front page and turn on the editing there is a space, with an edit icon (hand/pen) that will enable you to add text and images to the front page.

Average of ratings: Useful (3)
In reply to Mary Cooch

Re: how to add text and image to the centre column on front page?

by umesh chavan -

hello Mary,

Dats gr8!! It was so simple  n I was searching here n there....

thank you very much to guide me.....

 

umesh

In reply to Mary Cooch

Re: how to add text and image to the centre column on front page?

by umesh chavan -

hello mary,

can you tell me how to put images with transitions or flash file in that topics area..above available courses....

thanks

umesh

In reply to umesh chavan

Re: how to add text and image to the centre column on front page?

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

Depending on which version of Moodle you are using, you need to Allow Embedded Objects. You do this in Security > Site Policies and click on the checkbox for Allow Embed and Object tags. Save and go back to Home page.

You can now add the Flash & Image transition code using the HTML Editor in Site Topic box as explained by Mary Cooch.

HTH

Mary

Then you can

In reply to Mary Evans

Re: how to add text and image to the centre column on front page?

by SVI eSolutions -

This only seems to adds text on the front page...  Does anyone know how to add a short title and introduction on top of each page???  Ideally these should also be editable.

Thanks

In reply to SVI eSolutions

Re: how to add text and image to the centre column on front page?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

What do you mean by "top of each page" ? Do you mean the top of each "course" -in which case they should all be editable if you have editing rights in the course. Or do you mean the banner area at the top, which is related to the theme?

In reply to Mary Cooch

Re: how to add text and image to the centre column on front page?

by SVI eSolutions -

wow, thanks for the quick reply.

I would like to add a short introduction to each page, like the "my group" page, the forum page and even the course page.

I would like to add a title and a short text and ideally these should be editable but it doesn't NEED to be as long as I can add the text.

Any suggestions???

thanks again

In reply to SVI eSolutions

Re: how to add text and image to the centre column on front page?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Hi again Alex. Just confused about what you mean by the "my group" page and the "forum page" Are you looking at a customised Moodle theme?

In reply to Mary Cooch

Re: how to add text and image to the centre column on front page?

by SVI eSolutions -

I am actually in the process of customising it now.  'My group' page is simply the page where you see all the participants in the course.  The 'forum page' is simply the forum attached to that course, though I was hoping to add a page with a list of all the forums attached to the one course rather than have the links in the course sections itself.  Not sure how to do that either, so far my best solution was to create another course with only 1 module with all the forums and assossiate them to the sudents of that one course, though this might become long when there are many courses running simutinously...

Anyway, any ideas as to how I could add a title and a short introduction text at the top of all the types of pages???

thanks again!

In reply to SVI eSolutions

Re: how to add text and image to the centre column on front page?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Ah Ok I see. Re: the 'forum page' is simply the forum attached to that course, though I was hoping to add a page with a list of all the forums attached to the one course - there is already a page of this -if you have more than one forum in your course - it is like this: http://www.yourMoodle.com/mod/forum/index.php?id=yourcourseIDnumber/ Would that help? I can't help you with customising those pages however, as I'm not a themer but I daresay the other Mary will be along to offer a suggestion. (Actually,  I can offer a suggestion but it's not a very good one and it would involve you having the same text in every forum/participants page of your Moodle anyway smile  so I'd best keep out of it!)

In reply to Mary Cooch

Re: how to add text and image to the centre column on front page?

by SVI eSolutions -

I like that page!!!  How do you normally access it though?!? Silly I guess but I could only find it when typing the url directly!!!!

I hope the other Mary will be along for some other suggestions as I would very much like to have a different text at the top of each page...

thanks again for your help!

In reply to SVI eSolutions

Re: how to add text and image to the centre column on front page?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Go to a Moodle course that has a forum or two. Click on one of the forums and you will see in the URL the word "forum" Click that word in the breadcrumb trail and it will take you to all the forums in that course. (works the same for other resources if you try)

In reply to Mary Cooch

Re: how to add text and image to the centre column on front page?

by SVI eSolutions -

Thanks you are great! But is there no other more direct way to access this page?  I have removed the breadcrumbs...

But even with the breadcrumbs it doesn't feel like a very instinctive navigation when everything else goes through the menu why is this page only accessible there???

In reply to SVI eSolutions

Re: how to add text and image to the centre column on front page?

by Eric Millin -

I'm only familiar with Moodle 2+, so this may not apply to you.

To easily add information to each page, login as an admin.  Go to Settings>Site Administration>Appearance>Additional Html.  Add your html to one of the "BODY" textareas.  Then add script or link tags in the HEAD textarea with references to any js or css you want to apply.  You can then use your script to do whatever you like to each page smile.

You can also create a custom theme (easiest way is to deep clone the theme you're already using and change its name).  Then go to theme>themeName>layout>general.php and add whatever html you want applied to all pages.

Both methods are very simple.

In reply to Eric Millin

Re: how to add text and image to the centre column on front page?

by SVI eSolutions -

Thanks for the suggestion, I had actually already tried that.  It's a good option, the only problem is that it adds the same text to ALL the pages.  I was asked to add a title and short description to all pages depending on the type, so they need to be different.

My idea so far is to add a div directly in the code at the top of every page type but so far this has only worked for the cours types which in reality doesn't even need one as it already has space for an introduction.

I'm still open to suggestions!

In reply to SVI eSolutions

Re: how to add text and image to the centre column on front page?

by Eric Millin -

You can also add the div via the theme: root/theme/themename.  In lib.php, write a function with the logic to fill the div based on type, url, presence of a specific token, etc and change the div content accordingly.  Then add the div with a call to your function in .../themename/layout/general.php.  If you're not using a custom theme, then you'll want to follow Mary's tutorial for cloning the current one and making your changes to the clone, lest an update obliterate your code.

A slightly more "hackish" approach is to do the same thing on the client side: write a script to parse the url, find a token, etc and then fill your div with the appropiate html.  You could have all the logic and content in the javascript or do the parsing there and then fetch content from the server.

In reply to Mary Cooch

Re: how to add text and image to the centre column on front page?

by Gerard Swan -

Hi.  I realise this thread is quite old but I'm having the same problem and have hunted through the various FAQs and guides and forum answers but can't seem to find the solution.

I want to use the front page as a landing page and have a simple text instruction about navigating using the blocks also visible on the page.

I've gone to site administration>front page>front page settings and ticked the box that says include a topic section. Then I've gone back to the front page and turned on the editing.  But there is no space, with an edit icon (hand/pen).(Screen shot 1)

I have tried adding a label using the 'add a resource' in the main menu drop down.  But the text I add just ends up inside the same box with the heading Main menu.

I've tried adding the 'Course Summary Block' - that's better but the box is defined height and width and I want it to automatically resize to the available width in the same way that 'Label' resources I have added on other pages do.  There are several lines of text I want to include and the latter part isn't visible and there is no obvious scroll.

I have hunted for articles that tell me how to define the width of the course summary block to no avail.

Sorry if the answer is staring me in the face but I am unable to see it at the moment.

 

I'm using version 2.6

Attachment Screen shot 1.jpg
In reply to Gerard Swan

Re: how to add text and image to the centre column on front page?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Gerard - if that is a screenshot of your front page with the editing turned on then it looks very strange to me. What theme are you using and are you able to change to a different theme in Site administration>Appearance>Theme selector?

In reply to Gerard Swan

Re: how to add text and image to the centre column on front page?

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

This looks like you are using the Rocket theme.  What I have noticed with this and other themes that you will always see the content shrunk down because you are an editor but if you log out the content should fill the available space.  However, I am also not seeing your center column at all.  It looks like maybe you have drug blocks to the center column and the topic area is not showing.  Double check that you have turned that on and saved it.  And that you are on the home page and the not the My Home page.

Average of ratings: Useful (1)
In reply to Emma Richardson

Re: how to add text and image to the centre column on front page?

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Methinks Emma has lived too long in the US. I was looking for drug-related blocks in Gerard's site and then it dawned on me she/you must mean draggedbig grin

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

Re: how to add text and image to the centre column on front page?

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Lol - I have lived here so long I didn't even think anything of it!!!  I was more focused on whether to say centre or center!!

In reply to Mary Cooch

Re: how to add text and image to the centre column on front page?

by Floyd Saner -

Ah Mary, I love your insight and comments.  I rated your comment as 'Useful' for the humor.  We need another rating category with a smiley face!

In reply to Floyd Saner

Re: how to add text and image to the centre column on front page?

by Gerard Swan -

Hi Both 

thanks for the offerings - hugely appreciated

I'm using Simple theme and editing was turned on.

I'm on the front page and not 

I changed themes to see what would happen and found I could add a Label and insert the text I wanted to show.  When I reverted back to Simple theme the label was lost to the page.

I'm wondering how I turn on the center column.

I'm considering drugging as an option if I can't get this sorted - joking.

In reply to Gerard Swan

Re: how to add text and image to the centre column on front page?

by Gerard Swan -

Hi (to Mary Evans - I tried clicking on the reply to the email of the messages you sent but ended up at a 'Parent post ID was incorrect' page.  Couldn't direct message you so hoping it'll get to you this way)

Re two messages:

Version is - Moodle 2.6+ (Build: 20131122)

Interested to know how you got on adding centre column back in.  The work around I am using is ok but doesn't achieve what I really wanted to on what may be a users landing page.

I'm going to give some feedback to the 'Simple Theme' developers too.

In reply to Gerard Swan

Re: how to add text and image to the centre column on front page?

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

Hi, the reason you got an error is the fact I was cross posting with you twice and since both of my posts and yours seem to contradict each other, in that you appeared to have found out why you did not have a center column in the Simple theme, I decided to delete mine and let this thread fade away.

The Simple theme could easily be made to select the center column as a setting. At present it is hidden, so reversing the CSS for the class 'inv' which probably stands for invisible allows the center column back again.

Another way might be to add an HTML block and add the contents you would have put in the Site Topic, It's easy to make a block look like a block of text so you could have lots of HTML blocks on the front page some with text some with images and make it look like columns in a magazine. Or as I have done in the following example, added an HTML block and filled it with text and an image using the Text Editor, and added some CSS to style it....

#page-front-right .block_html {
    height: auto;
    width: auto;
    min-height: 250px;
    min-width: 400px;
    border: 0 none;
}

Hope this helps?

Mary

In reply to Mary Evans

Re: how to add text and image to the centre column on front page?

by Gerard Swan -

Hi Mary - that's what I want to achieve.  I think there is something missing from my understanding though.

I cut and paste the CSS from your example

#page-front-right .block_html {
    height: auto;
    width: auto;
    min-height: 250px;
    min-width: 400px;
    border: 0 none;
}

into the 'Configure HTML Block' 'Content' editor in 'Edit HTML source' mode.

the result just showed the CSS as part of the text in the editor and in the resultant HTML block.

I tried cutting and pasting it into the Frontage.php file using FTP and that just resulted in a blank screen at the user front page (I'm running a pretner person on my iPad in parallel to any editing I'm doing on the main computer screen) - I restored using a backup copy of the Frontage.php file and its working as it was before.

So I think my question is, where do I add the CSS to style it

Added later:

I just found an article that prompted me to enable 'Additional CSS Classes' for HTML Blocks.

(from Settings>Site administration>Plugins>Blocks>HTML, toggle the ability to allow additional CSS classes to be set in individual block instances. If it is enabled, a field appears at the bottom of HTML block instance's configuration formssmile

I've done this and copied the additional CSS in there.  still no joy.

 

In reply to Gerard Swan

Re: EDITED: how to add text and image to the centre column on front page?

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

Sorry Gerard, I should have explained better. The CSS needs to be added to the theme's CSS file, that is only if you have access to the Simple theme files?

The file you need to look for can be found in the style directory of your theme...

moodle / theme / simple / style / simple.css

Alternatively you could try adding this...

<style type="text/css">

#page-front-right .block_html {
    height: auto;
    width: auto;
    min-height: 250px;
    min-width: 400px;
    border: 0 none;
}

</style>

into the 'head' section in...

Site Administration > Appearance > Additional HTML

Read: Header and footer (not quite sure why this is the given title for this particular Moodle document.)

That should make it work.

EDITED:

Here is a screen shot of the Additional HTML page just in case you go to the wrong page!

CSS

In reply to Mary Evans

Re: EDITED: how to add text and image to the centre column on front page?

by Gerard Swan -

Hi Mary

Sorted - went for modifying the simple.css as the preferred option.

Very straight forward and can replicate if they update the theme.

Many thanks for your patience with this.

Have also learnt something about coding and where to look and though I don't intend to fiddle, now I know where things are it will be helpful.

All the best

Gerard

In reply to Gerard Swan

Re: EDITED: how to add text and image to the centre column on front page?

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

Good to know you have access to the theme, as this makes it easier to manage.

If it helps, you can add other HTML blocks and since each has it's own unique ID you can target each one in the same way. You just put the the inst ID like so...

#page-front-right #inst24 .block_html {
    height: 250px;
    width: 250px;
}

#page-front-right #inst25 .block_html {
    height: 250px;
    width: 350px;
}

You can find the inst ID by looking at the source code for the page. The # sign which is added in the CSS indicates that is is an ID and not a CLASS. Classes have a dot in. For example: .block is a class. #page-front-right is an ID. IDs take precedence over classes.

Hope that helps too...?

Cheers

Mary