Themes

LOOK & LEARN: How to add marketing spots as a front page topic.

 
It's only an avatar...
LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Using a Bootstrapbase theme...Login as Admin

  1. Make sure site topic is enabled in your Moodle site.
  2. Dock all the blocks and make sure the page is displayed in full with no blocks showing other than the nasty Add Block..(.but that will go once you disable editing afterwards while testing what the page looks like).
  3. Add the following to the HTML part of your text editor in the Site Topic area of the Front page. And then save and see what happens?
    <div class="container-fluid">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
  </div>

      <!-- Example row of columns -->
          <div class="row-fluid">
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->

          <div class="row-fluid">
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->

      <hr>

    </div> <!-- /container -->

Be sure to check the more uptodate version of the HTML mark-up:
BS 2.3.2 https://getbootstrap.com/2.3.2/components.html#typography
BS 3.3.6 https://getbootstrap.com/docs/3.3/components/#jumbotron
 
Average of ratings: Useful (17)
It's only an avatar...
Re: It should look like this...
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

Learn more »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »


 
Average of ratings: Useful (10)
It's only an avatar...
Re: It should look like this...
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Basically all that is happening here is that we are using some of the predefined BOOTSTRAP 2.3.2 layout elements which Bootstrapbase contains.  So using a theme like Clean or More, which are built into Moodle, will allow you to customise your Moodle site in the way YOU want it to look.

Read more »

 
Average of ratings: Useful (2)
Picture of Andy Chaplin
Re: It should look like this...
 

Hi Mary

I'm using 2.9 with the More theme.

I followed your post above and it nearly worked.  I guess I missed something obvious.

I added the html in the content section and the logged in page looked fine - full screen width with a docked block, but when I log out and then reopen the front page (the landing page) I get an empty column on each side where blocks would normally go (although there are no blocks on the landing page)  I flushed the cache and set the front page to show no content other than the summary.

any ideas what I've done wrong?

All the best


Andy


 
Average of ratings: -
Picture of Christine Legemble
Re: It should look like this...
 

Hi Andy,

I've the same problem.

My front page (without blocks) looked fine with Moodle 2.8 (the page was displayed with a 100% width). But, since I updated my moodle to 2.9, I get two empty columns (on the right and on the left) on my front page when i'm not logged.

However, the display is correct (any columns) when i'm logged.

Did you find a solution ?

Best Regards.

Christine

 
Average of ratings: -
Picture of Christine Legemble
Re: It should look like this...
 
Hi,


After some research , I think I found a solution. 

In this case (where there is no block), it seems that the "content-only" class must be placed in the <body> element, but it isn't done here.

Apparently, this class was added by the file: web/theme/base/layout/frontpage.php. 
But it seems no longer used here.
In place, it seems that the used file is now : web/lib/outputrenderers.php (with the "body_css_classes" function).

So I made the following correction :

   3763         if (count($usedregions) === 0) {
   3764             // Add the content-only class because there is no used region.
   3765             $additionalclasses[] = 'content-only';
   3766         }
   3767         elseif (count($usedregions) === 1) {

And, that works for me.

Best Regards.

Christine

 
Average of ratings: -
It's only an avatar...
Re: It should look like this...
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Andy,

Sorry I missed this yesterday...

The quick fix for this is as follows:

.empty-region-side-pre.empty-region-side-post #region-main-box,
.empty-region-side-pre.empty-region-side-post #region-main {
  width: 100%;
}

Which you can add to the CSS section of the Morecandy settings page:
Administration > Site Administration > Appearance > Themes > Morecandy (settings)

Hope this helps?

Mary

.empty-region-side-pre.empty-region-side-post #region-main-box,
.empty-region-side-pre.empty-region-side-post #region-main {
  width: 100%;
}
 
Average of ratings: Useful (2)
math
Re: It should look like this...
Particularly helpful Moodlers

Mary - Thank you!

This fixed the problem I had with my slightly customized More theme since 2.9 upgrade ( and a second thanks here for your and Mary's tips). I've tried hitting the "Useful" button multiple times, but only the first one registered.

David

 
Average of ratings: Useful (1)
It's only an avatar...
Re: It should look like this...
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Thank you David. So glad you found that code useful.

You will be pleased to learn that the problem that caused the narrow display on the frontpage has now been fixed in Moodle. 

As for the Useful button, you can only hit once per comment, but sometimes I think it's more a problem with the device you use for reading forum posts...a bit hit and miss!

Cheers

Cheers      C

Mary

 
Average of ratings: -
math
Re: It should look like this...
Particularly helpful Moodlers

Mary,

I should have included a smiley face - I was just looking for a way to make my feedback something beyond the normal "Useful" rating.

We need a button that says, "Incredibly useful and just what I needed right now!", because that really describes how helpful your information was for me.

Another question - I should remove the added CSS when we do upgrade from 2.9.1 to 2.9.2, right?

Thanks!

David

 
Average of ratings: -
It's only an avatar...
Re: It should look like this...
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi David,

There have been other discussions about the 'Useful' rating. The thing is, in this and other forums, that we get rated for the help we give and that rating is important, because it goes towards an award for a new Badge each year. So the rating category is not that important as it is only a counter.

What we could do with are more emoticons, the ones we have are a little jaded.

As for deleting the CSS you added it all depends on what it was you were fixing. If something I told you to do then most probably it is fixed in 2.9.2.

Anyway thanks for the kind words and encouragement. heart

Cheers

Mary

PS: Sorry I forgot what this discussion was about...yes the layout has been fixed in 2.9.1 I update mine every week so I'm not all together sure now which version it is in. However 2.9.2 is definitely working OK.

 
Average of ratings: -
Picture of Rosa Muñoz
Change banner
 

Hello Mary, I am trying to delete the header and navigation bar of moodle 2.7 [I am making a version for blind people], you could tell me which files to modify or some idea to do this, thank you very much

 
Average of ratings: -
It's only an avatar...
Re: Change banner
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Rosa,

Are you refering to the Clean theme or a custom theme based on Bootstrapbase? If so can you tell me the name of this theme and also the version it was created as?

Thanks

Mary

 
Average of ratings: -
Picture of Rosa Muñoz
Re: Change banner
 

Hi Mary!

I'm working on the Clear theme, and I think I already solved the banner issue. For now, I have a new question.


I'm trying to transform the standard Moodle 2.7 login to something resembling the google login: a first view with a Username form that links to a second view with a Password form. The idea is that the first view passes the Username to the second view, and once the Password is introduced, THEN it validates the login info.

As I told you, I'm working on an accessible version of Moodle 2.7 for blind people, and I'm trying to reduce on-screen elements so screen readers don't take forever to read critical information.

So the question is: how do I pass data from one view to another so the second form gets both the Username and Password on submit?

 
Average of ratings: -
It's only an avatar...
Re: Change banner
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

This is a bit tricky as you will need to make changes to the PHP in order to make it work as you want it to.

Could you let me have a link to the site you are working on...its a bit hard to work blind so to speak!

I'm not familiar with the google login...however Ill talk a peep and see if I can pinch some code for you to work on.

Cheers

Mary

 
Average of ratings: -
Picture of Rosa Muñoz
Re: Change banner
 

Hi Mary!

I currently have my changes hosted on GitHub (https://github.com/DanaOHara/Moodle27Teses.git). I can't find a hosting server with access to old PHP versions, so I'll set up a local server at home if needed. Most modifications are on the Login folder, specifically on index.php, and the "password" view I made at index_formsecondpart.html.

The most relevant part of my code should be line151 on index.php, on line 151 I make a redirection, if the password us empty i redirect to the second view  (index_formsecondpart), otherwise I login normally.

 thank U

 
Average of ratings: -
It's only an avatar...
Re: It should look like this...
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Just bumping this to the top of the page...as it is still useful.

 
Average of ratings: -
David
Re: LOOK & LEARN: Please do not reply to this post.
 

If you don't want any replies, why not make a docs/wiki page instead? This is a forum, and the sole purpose of it, is to have a discussion and possibility to respond to posted messages.

Also I find it morally questionable that you, without notice, removed my previous post, see: https://docs.moodle.org/dev/Moderator_guidelines

Furthermore many more bootstrap examples can be seen, tested and verified on http://www.bootply.com/

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: Please do not reply to this post.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Yes...you are probably correct, however the reason I was adding this in the forum is so that others who just like to look and learn how to do things without asking questions.

The other reason I added this here, for that same group of users, was because I wanted to show them how easy it is and to encourage people to take the initiative to add their own marketing spots on the page direct. 

Also, and perhaps more importantly, they do not need to have themes built with lots of settings, were in some cases are restrictive, for instance you cannot add images via the text editor as tha option is blocked in a coded setting.

Your comment caused me a lot of distress, in some ways I felt it very derogatory, in that it sounded dismissive of my wanting to pass on to those who read these forum posts, my simple observation of what can be done using a simple theme like Clean.

You also need to remember that not everyone here is a programmer.  I learnt everything I know from this forum, and .i am thankfully to those who like to impart knowledge.

 
Average of ratings: Useful (2)
David
Re: LOOK & LEARN: Please do not reply to this post.
 

Hi Mary,

in no way I wanted it to sound derogatory, but by giving a link to bootplyc.om I wanted to lower the barrier.
In my daily work at a Moodle partner I see that users (customers) are often very much off-put by code like that, and when seeing simple examples that they can copy and/or combine it becomes much easier as they already see what the result should look like.

Very much similar to what Gavin Henrick just placed on his bloghttp://www.somerandomthoughts.com/blog/ 

Broken down the Bootstrap example consists of only two elements, a jumbotron and the buttons.

I like the way you are passionate about teaching other to try new things, and wish others would encourage people with as much vigor as you do!

 
Average of ratings: Useful (2)
Picture of Jon Jack
Re: LOOK & LEARN: Please do not reply to this post.
 

I think this is the perfect place for posts like this, as I would think people come back to forums regularly, but would rarely go trawling through moodle docs looking for any new pages - just my opinion for what its worth smile

 
Average of ratings: Useful (4)
It's only an avatar...
Re: LOOK & LEARN: Please do not reply to this post.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Thanks Jon!

Cheers

 
Average of ratings: -
Picture of Richard Oelmann
Re: LOOK & LEARN: Please do not reply to this post.
Core developersParticularly helpful MoodlersPlugin developersTesters

Its also what we have always done since before i have been on the forums - not just discussions, but posting useful hints and tips.

Maybe a doc is a more permanent record and resource, but the forums are where people come to, not just with questions to answer but to learn and to pick up these occasional hints and tips

 
Average of ratings: Useful (1)
Picture of Gary Lynch
Re: LOOK & LEARN: Please do not reply to this post.
 

Hi All smile

Why not have a Hints and Tips forum?

Would save me hunting round for Mary's css treats all the time if it was all in one place :P


Regards Gary smile

 
Average of ratings: Useful (2)
It's only an avatar...
Re: LOOK & LEARN: Please do not reply to this post.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi,

Great minds think alike!

I was thinking of something similar...I wonder if I asked would it be granted?

I can but try!

Thanks for the idea of a forum name. smile

Cheers

Mary

 
Average of ratings: -
Picture of dawn alderson
Re: LOOK & LEARN: Please do not reply to this post.
 

Hey,

mmmm......themes eh. I like the flavour of the creative element tied up in this. Yep could learn the code-along with others too am sure....some might say-the eye-buys. The real problem is with an over-use of primary colours across web stuff-not here of course......pastels/pastel fonts against neutral backgrounds are 'inclusive' as well as this type of thing:

http://www.bbc.co.uk/programmes/b006qykl

.......be nice to see a drive on that in Moodle.

just a thought.

D

 
Average of ratings: -
Mary Cooch
Re: LOOK & LEARN: Please do not reply to this post.
Documentation writersMoodle Course Creator Certificate holdersMoodle HQParticularly helpful MoodlersTestersTranslators

One way to do this, rather than have a brand new forum, would be to have a regular (or occasional) "Themes Tips" post, a bit like a blog, which we could tweet and highlight in social media but which would still be within the Themes forum for easy searching. I do similar in the Teaching with Moodle forum actually, a "Moodle tip" every week or couple of weeks.

 
Average of ratings: Useful (2)
Picture of Danny Wahl
Re: LOOK & LEARN: Please do not reply to this post.
Core developersPlugin developers

I think there's some merit to having small demos like Mary has done - but it would be cool to see something like codepen.io used so people can play with it.

I'll make a shameless plug saying that there's a codepen text filter I wrote and is available in the repo that takes a pen URL and embeds it. blush  I only recommend it because I use it with moodle forums for my HTML and JS courses that I teach with Moodle.

 
Average of ratings: Useful (2)
Picture of dawn alderson
Re: LOOK & LEARN: Please do not reply to this post.
 

Morning,

Danny, nothing to be shameful about-like this, very much-here we go then......perfect toy, liking the look of canvas as well..........oh my-no more code-shy eh-we shall see......codepen it is!

cheers,

Dawn

 
Average of ratings: -
Picture of Gary Lynch
Re: LOOK & LEARN: Please do not reply to this post.
 

Hi Mary

I think the great minds was a bit generous to me :P

I thought i would give your code a try and have a 'play' manipulating but before i did i just posted the code direct and had a look.

here is the result

Screenshot

Now i can manipulate the code regarding colours sizes text etc but my learning not up to columns etc yet (will get there smile) this is using the Archiaus theme on 2.5 installation.

Just pre-empting the questions that were not supposed to ask in a post we're not supposed to respond to tongueout

Gary cool

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Oh I have changed the title now so we can Swap ideas!

Cheers

 
Average of ratings: -
Mary Cooch
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Documentation writersMoodle Course Creator Certificate holdersMoodle HQParticularly helpful MoodlersTestersTranslators

Hello Mary! I have been pasting your code around - and I have two queries;

* how can I add an image as the hero  banner? Into which bit of the code do I add it?

*The "learn  more" buttons - where do they actually lead to, on a real Moodle site?

Thanks smile

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Mary,

If you add that code to the HTML part of the editor and then update that window you are taken back to the Text Editor where you will see Hello World and the paragraph of text below it.

To add an image just click at the start of the text paragraph below Hello World and then click 'Enter' thus creating an empty line. With your cursor in that empty line add an image in the normal way from the File Picker. In the Appearance setting for the image  you need to click on the dropdown menu and choose the class img-responsive from the list of css classes available. - Then 'Save' the page.

To make the button into a simple link <a class="btn btn-primary btn-large">Learn more &raquo;</a>

you need to add the following

<a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a>

Then where I added the # you can add a URL to a page that relates to the topic in question.

So basically the page and link button could look and works like this...


Hello, world!

logo

This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

Learn more »

 
Average of ratings: Useful (3)
Picture of Arturs Polis
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
 

Hi Mary!

Are there easy-to-do possibilities (with html or CSS) to set a background picture/color for the featured paragraph?
And is it possible to change the alignment of the featured box? So that the text is in line with the paragraphs below?

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi, 

Yes there is, depending on the feature you mean. If you want to use the hero unit which is the large area above the marketing spots shown above.

The CSS for the background image is as follows:

 .hero-unit {
background-image: url(...);
background-repeat: no-repeat;
background-size: auto;
}

The url() for the image needs a URL for image. So if you added a picture in your theme's pix folder before you uploaded it to Moodle you can use the markup we use in the theme CSS like so...

background-image: url([[pix:theme|bgimage]]);

As for the paragraph below the image, it is just a matter of using the text editor.

Hope this helped?

Mary

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi,

Sorry I was in a rush this morning, so I did not have time to answer you fully.

Another way to add an image to the top of that hero-unit is add a container like so...

<div class ="hero-unit-header"></div>

add this just below the hero-unit div container and above the <h1> tag.

Then in the CSS add

.hero-unit-header { }

add the background-image CSS from my other suggestion.

You will also need to add height: 150px; or whatever height your image is?

  EDITED   

You will also need to add CSS for the width of that div container using...

width: 100%;

cheers

Mary

 
Average of ratings: Useful (1)
Picture of Arturs Polis
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
 
Thank you, Mary!!!
The 2nd suggestion "hero-unit-header" works beautifully!!!
It is really great, because it opens up more possibilities for the designer to make the Frontpage visually appealing.

However, the main thing - hero unit background - does not work so far... I had several tries, but the top background is still grey as before... sad

So, I entered the following code in the CSS:
 .hero-unit {
     background-image: url(https://.../pluginfile.php/614/mod_folder/content/0/024965104_prevstill.jpeg);
     background-repeat: no-repeat;
     background-size: auto;
  }

I also tried with and without image properties:
     height: 300px;
     width: 100%;

But nothing... What am I missing?

And the question about the alignment I try to visualize here. What i am interested is if the gap between the hero unit paragraph and other paragraphs can be avoided by moving the hero unit paragraph to the left?

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi,

Any chance you could send me a link to your site via a message?

Then I will be able to see exactly what you need to change/add

Also...the answer to the Dashboard question is:

Users / Permissions / Define roles / 

Click the settings cog on authenticated user. Find "manage dashboard page blocks" and uncheck "allow".

Cheers

Mary

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

This is what you should have is this...

 .hero-unit {
     background-image: url(https://.../pluginfile.php/614/mod_folder/content/0/024965104_prevstill.jpeg);
     background-repeat: no-repeat;
     background-size: auto;
      background-color: transparent;
     padding: 0;

}

 
Average of ratings: Useful (1)
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

OK...try this CSS

.hero-unit { background-color: transparent; padding: 0; }

 
Average of ratings: Useful (1)
Picture of Arturs Polis
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
 

Thank youuuu, Mary! It works perfectly now!!!
The Frontpage starts to look great with all your tips implemented! ;)

 
Average of ratings: Useful (1)
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi,

I am just bumping this up in case some of you Moodle users out there, find a bit of spare time this summer and want to refresh your memory about how to add some marketing, or other text areas, to your school Moodle site/s.

Here is a LINK to LOOK & LEARN - How to add Thumbnails with labels and captions

Cheers

Mary

 
Average of ratings: -
David
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
 

What I really like is various tabbed browsing items for instance for a label:

I'm in Section 1.

Howdy, I'm in Section 2.

However, since Moodle.org seesm to strip id tags this does probably not work here

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

I have tried this here before ...

https://moodle.org/mod/forum/discuss.php?d=260286#tab2

it works ok in Site Topic though and in course pages Too.

 
Average of ratings: -
Picture of Chris Kenniburg
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Particularly helpful MoodlersPlugin developers

in my evolve-D theme I added the proper code so that if you use tabs it actually works.  Attached is the code I use and it displays tabs beautifully across the custom homepage.


 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

All though the code you posted Chris looks good here, it is a pity it does not work, because Moodle.org has not enabled the Tab plugin...but thanks for the code all the same smile

Cheers

Mary

Welcome to Moodle

Text Goes Here

Getting Started as a Student

text goes here

Getting Started as a teacher

text goes here

About Moodle

text goes here

 
Average of ratings: -
moi!!! it is what is is...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Documentation writersParticularly helpful Moodlers

Hi Mary, I know I am coming in late on this, but the thing is, Mary C's suggestion about a blog for these kinds of tips is eminently sensible. I for one have neither the time nor patience to learn to create or edit themes but handy little tips like this are going to be incredibly helpful as we move into more recent versions of Moodle. 

Right now, the best most of us can do is somewhere between ugly and not pretty... and the possibilities you have opened here are truly amazing. So if you have not started a blog of useful tips and tricks, then please, think about it and post the link to it all over the themes forum..smile 

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Colin!

I have lots of blogs but none devoted to Moodle which is perhaps something I should have considerered before today!

I will do as you suggest and start one today...or is it tomorrow now! LOL

Cheers

Mary

 
Average of ratings: -
Gareth J Barnard
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersParticularly helpful MoodlersPlugin developers

Moodle.org runs on Wordpress (or at least it used to), so perhaps there could be an official blog with tags for certain areas like themes.

 
Average of ratings: -
Mary Cooch
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Documentation writersMoodle Course Creator Certificate holdersMoodle HQParticularly helpful MoodlersTestersTranslators

Gareth - do you mean Moodle.com runs on Wordpress? (Moodle.org runs on Moodle  wink )

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

I think it was a typo on Gareth's part as Moodle.com did and indeed still does use WP. smile

 
Average of ratings: -
Gareth J Barnard
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersParticularly helpful MoodlersPlugin developers

Oh, wires crossed Mary.  I thought Moodle.org had Moodle embedded in Wordpress.

 
Average of ratings: -
Picture of Chris Chapman
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
 

Hi Mary, not quite related to marketing spots, but still a bootstrap feature... I am using a bootstrap carousel but can't get it to auto scroll on page load for the life of me! tried all sorts! as soon as you click next on the indicator it scrolls but not before.

Any ideas?

https://vle-dev.exe-coll.ac.uk/ 

https://vle.exe-coll.ac.uk/

 
Average of ratings: -
It's only an avatar...
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Colin, 

I use this which you can add to the footer of the layout pages that use the Carousel.

//<![CDATA[
    $(document).ready(function(){
        $('.carousel').carousel({
          interval: 3000
        });
    });
//]]>

But from memory Gareth has added something in CSS (I think) which does the same thing more or less.

Cheers

Mary

 
Average of ratings: -
Picture of Chris Chapman
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
 

Cheers Mary, had already tried that, doesn't seem to work for me for some reason.. it's so annoying! wherever I put it. It either does nothing (sometimes the interval will change) or give me an Uncaught ReferenceError: $ is not defined error   which is due to script acting before jQuery is loaded I believe?  

 
Average of ratings: -
Picture of Kimberly Hall
Re: The Mount Orange School Front Page in More
 

Dear Mary,

Thank you for sharing this code to modernize the layout within More.

Everything works great on my version of 2.8 except the block is sticking in the left column and not covering the full page.

I've done a couple of hours of troubleshooting and even asked a dev at the MoodleMoot in MN for assistance; we couldn't resolve the issue.

I also tried your 3 column version; everything again worked well except it's stuck in the side column.

Any suggestions?

Thank you,

Kimberly Hall

(Edited by Gareth J Barnard - to remove signature, since they are not allowed in the forums according to the Moodle.org site policy https://moodle.org/mod/page/view.php?id=7080 - original submission Wednesday, 5 August 2015, 10:19 PM)

 
Average of ratings: -
It's only an avatar...
Re: The Mount Orange School Front Page in More
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Thanks for the link to your site Kiber, However, it looks like you have added this to the Site Summary and not Site topic as was suggested. The problem with that is it's the wrong place. For this to work you need to add the HTML into the Site Topic area in the main content of your front page. First of all you need to remove that block. The remove the Site summary from the Frontpage settings where you added it.

Befor closing the Frontpage settings page make sure you have enabled "Site Topic" it is a littl checkbox that should have a tick in it,

When you have done that Turn editing ON and look at the frontpage and you should see a spanner or a cog or gears indicating the top section of the page is editable. That is where you need to add the HTML.

Cheers

Mary

 
Average of ratings: -
Picture of Antony Barela
set the order of marketing blocks
 

Hello there,

i have the following issue:

On the front page i have:

  • Main Menu block
  • News block
  • Course list block
  • Footer block
I want to add two marketing blocks after course blocks but dont know how to set the order of it,
now its right after the main menu block.

thank you for your help
 
Average of ratings: -
It's only an avatar...
Re: set the order of marketing blocks
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi, 

this may depend on the theme you are using, however, you should be able to add an HTML Block and add two marketing spots, one under the other .

Hope this helps?

Mary

 
Average of ratings: -
on the Great Wall
Re: LOOK & LEARN: How to add marketing spots as a front page topic.
Particularly helpful Moodlers

Mary, 

Looks great and a good base set of code to use as a layout in lessons and or book format. 

It is along the same theme as discussions AL and I have had about Templates used as a base for course designing. 

His method of Generico converting PPT master slide templates is fantastic. 

(I haven't had time to set these up as yet as going down the HMTL book track)

 
Average of ratings: Useful (1)
Picture of Gary Chan
回复: LOOK & LEARN: How to add marketing spots as a front page topic.
 
It is not common to find a post thread being active (incl the org author) for 3 years.

I am also a non-tech newbie here, I agreed that copy and paste code snippet isn't really great for programming but it helps a lot for people who just want to get a single simple thing done within hours and without deep learning curve.

Anyway, thank you Mary for your effort
 
Average of ratings: Useful (1)
It's only an avatar...
Re: 回复: LOOK & LEARN: How to add marketing spots as a front page topic.
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Thank you...I'm delighted that you found it useful!

Mary

 
Average of ratings: -