Moodle in English: Designing Activity Links

Hi there,

I think I will never be a coder. I have been trying to do this for hours and all I succeed in doing is breaking my theme!

So I am here asking for help again and I am hoping this is my last theme modifying task. Mary, when it's all done you must come and visit my site. It has shaped up so beautifully thanks to you.

I want to design the look of the links to a series of Quizports on the course page as per the attached screenshot. (I don't want to do it by re-creating the links in the HTML editor because I am hoping to take advantage of the new Conditional Activities in Moodle 2.0).

These are the things I want to do:

1. Remove the Quizport icon (I have Gordon Bateson's permission) which appears on the left in front of the links. The Quizport icon has the same name (icon.gif) as various other icons on the site so when I remove:

.section .activity img.activityicon

from the styles_layout.css it gets rid of the other icons on the site. I could replace the icon in the Quizport pix folder with a transparent gif but it still takes up space and seems a bit daft.

2. Edit the css so that all links to Quizports appear with the turquoise arrow pictured below at the end of the link and the orange arrow above. If it is not possible to make a general instruction, perhaps I could insert code for each separate li id?

A huge thank you in advance as always.

Deborah

Average of ratings: -

Re: Designing Activity Links

by Frank Ralf - Saturday, 26 June 2010, 1:09 AM

Hi Deborah,

to remove only certain icons you should give your CSS a more precise context. See CSS FAQ and Themes FAQ for general information about CSS and theming.

The best way to set or replace an icon is by setting it as a background image for an element, e.g. a list item.

With lists you could also set the list-style-image property in CSS.

hth
Frank

PS:
Do you have a link to your live site?

Average of ratings: -

Re: Designing Activity Links

by Deborah Delin - Saturday, 26 June 2010, 3:15 AM

Hi Frank and Mary,

Thanks very much for your replies.

Mary that is a good tutorial! I had been trawling the web, and indeed the Moodle docs, but couldn't find anything on this very specific question.

It seems like the code:

ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: left;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}

is just what I need, but my problem is where to put it?

When I inspect the element for the link it comes up as:

#course-view .section .activity a {

inherited from a#quizport-77 view.php?id=1588

But there is no: #course-view .section .activity a in styles_layout.css.

So I tried putting the above code after

#course-view ul.section,
#site-index ul.section

and - broke my theme!

So any further guidance on specifically where to put the code would be gratefully appreciated. Also, the tutorial adds html code for the links, but am I right in thinking that that is what is on the course page - I don't put it in the css file?

Frank, the link to my English site is www.strivney.com but the course pages are not accessible to guests. If you would like me to set you up as a user I would be very happy to and will pm you the login.

Thanks again,

Deborah

Edit: I have just seen your second post Mary. Wonderful! That snippet removed the icon in question. (I thought I tried to do something similar but managed to remove all the icons on the site!!). Thank you!

Are the links something I created - ermm....... when I select Quizport as an activity I type in a heading and get the link. Just like when you select a webpage or other resource or quiz, I think.

And I didn't even notice the pointy ears but it did make me smile!

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Saturday, 26 June 2010, 5:59 AM

Deborah,

I'd certainly like a login id if you can supply one, then I can see exactly what it is you are trying to do.

Glad you liked the tutorial, Russ's book "CSS in 10 minutes" is very good too. I learnt quite a bit, both from his book and the various tutorials on Russ's site. This tutorial is one of the best...Selectutorial explains about CSS selectors, what they are and how they work. Towards the bottom of the page is a very long tutorial, but if you follow it you will have built your own first web page from scratch! So something to do on your day off!

Back to your LIST. I'm talking about the Page 1 > Page 2 > ... list where you need to add the CSS mark-up which you added in your last post.

Let's assume that the css selector id ( prefixed by #) and classes (prefixed by . ) are as follows...

#course-view .section .activity
Now if you were to add this line to the end of your CSS file

#course-view .section .activity { border: 1px solid red }

you would get a red line around the element in question.

If it's the right element, then this is what you would need to do.

#course-view .section .activity ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: left; }

#course-view .section .activity li {
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}

#course-view .section .activity a:link,
#course-view .section .activity a:visited {color: blue } so all the links show up in blue

#course-view .section .activity a:hover,
#course-view .section .activity a:active { color: red } and red when hovered over or selected

All this is assuming that the #course-view .section .activity IS the correct element. But the little test with the border is a good way to find out. I use this method quite a bit, especially when I'm working on a site where there's so many elements which are difficult to pinpoint.

Hope this is helpful?

Mary

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Saturday, 26 June 2010, 7:32 AM

Update on my last post.

If you tried my earlier suggestion, it probably didn't work as you thought it might?

Try this way instead...it worked in a mock up I created inside a course. Having previously set up QuizPort as the target for the links, which I created using Add Link ( I am assuming this is how you set up your links too?)

#course-view ul.section {
list-style-type: none;
padding: 0;
margin: 0;
text-align: left; }

#course-view ul.section li#module-40,
#course-view ul.section li#module-41,
#course-view ul.section li#module-42,
#course-view ul.section li#module-43,
#course-view ul.section li#module-44 {
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
border: 1px solid red;
}
where #module-40, 41, 42 etc is the unique number for each link. If you don't add this parameter you stand the risk of making every link in your course pages act the same way. Which might not be wanted.

Also...

make sure you add the module number to this CSS so you can specify a specific link

.section #module-39.activity img.activityicon { display: none}

Mary

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Saturday, 26 June 2010, 8:09 AM

Final update of the evening...

A screenshot to show where I'm up to.

Average of ratings: -

Re: Designing Activity Links

by Deborah Delin - Saturday, 26 June 2010, 3:16 PM

blush My goodness Mary I had you up so late last night working on this! surprise blush

This is SO exciting. Using the code you posted, and tweaking the positioning with the help of that great tutorial, I managed to get pretty close to what I want to do. Please see attached screenshot.

I have now 3 further issues/wishes on my dreamlist:

1. I understand that for the right hand positioning of the the turquoise arrow I need to give a different percentage according to the length of the link. The fifth link is shorter. I tried repeating the code and referencing it to just that link, after the code for the first four links, as follows:

#course-view ul.section
{list-style-type: none;
padding: 0;
margin: 0;
text-align: left; }

#course-view ul.section li#module-1588,
#course-view ul.section li#module-1589,
#course-view ul.section li#module-1591,
#course-view ul.section li#module-1593,

{
background-image: url(arrow_course_right.gif);
background-repeat: no-repeat;
background-position: 35% 50%;
padding-right: .6em;
border: 0px solid red;
}

#course-view ul.section li#module-1603

{

background-image: url(arrow_course_right.gif);
background-repeat: no-repeat;
background-position: 15% 50%;
padding-right: .6em;
border: 0px solid red;
}
But it caused the first lot of arrows to disappear and only the fifth one appeared.

2. I would like to have the links more in the middle of the page, justified to the left. I tried sticking: position: choice; top: 0px; bottom: 0px; left: 150px; right: 150px; above background-image - but that had no effect (I really need to do that tutorial!).

3. I would love to add the little orange arrows pictured in the inset below, in between each link. Again, my attempts to add them failed. blush

Thank you SO much for your time and help.

Deborah

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Saturday, 26 June 2010, 6:05 PM

Hi Deborah!

No such luck! I was working on my own Moodle site, fixing some IE7 issues but gave up! IE should be band from the internet!!!

Your problems here were much easier to fix!

You've done well with what you have achieved so far with this site and this individual problem, which is almost done.

Everything you have done is correct so far, apart from this tiny oversight (see highlighted line)

#course-view ul.section li#module-1588,
#course-view ul.section li#module-1589,
#course-view ul.section li#module-1591,
#course-view ul.section li#module-1593,

You left the last comma in place. When you are listing various selectors such as you have done in this case, you must leave the last comma off so your code should look like this...

#course-view ul.section li#module-1588,
#course-view ul.section li#module-1589,
#course-view ul.section li#module-1591,
#course-view ul.section li#module-1593
{
background-image: url(arrow_course_right.gif);
background-repeat: no-repeat;
background-position: 35% 50%;
padding-right: .6em;
}

#course-view ul.section li#module-1603
{
background-image: url(arrow_course_right.gif);
background-repeat: no-repeat;
background-position: 15% 50%;
padding-right: .6em;
}

As for positioning the turquoise arrow, try using 11.5em 50% for the longer title and 4em 50% for the shorter Review title.

The orange arrow can be set by adding a Label in the Add Resource option. You can do this two ways either as inserting an image or just a single letter in orange V you will find it works either way, although the letter is quicker, but the image looks better. See my latest screenshot below.

You will need to create as many labels as you have links. You can then move them into place which is quite easy to do.

And I think that's it...apart for the centring of the links as a whole once all the label arrows are in place, you can try this...NOTE you will need to add all the extra module-numbers for all the labels in the stack...not forgetting to leave OFF the last comma!!!

#course-view ul.section li#module-39,
#course-view ul.section li#module-41,
#course-view ul.section li#module-42,
#course-view ul.section li#module-43,
#course-view ul.section li#module-44,
#course-view ul.section li#module-45
{ margin-left: 45%}

Have a nice weekend...

Mary

Average of ratings: -

Re: Designing Activity Links

by Deborah Delin - Saturday, 26 June 2010, 7:49 PM

Ah.........it was a comma that tripped me up! I also found that when I stipulated 4.8 em it broke the theme - which is curious because I see you can use parts of decimals like .6 em etc....

Anyway, with the help of your last post it's DONE and IMHO it looks GREAT (see screenshot below just to show off)! big grin

My next task is to replicate these links on the course page in 6 different languages and now I realise that my plan of using anchors to link to them from an HTML side block won't work. Evidently one can only use anchors from the central course page. I'm thinking that six links in different languages at the top of the course page is going to look dreadful. Would you have a suggestion?

Still - I am SO delighted to get this looking so great and now realise that the idea of managing to do it by myself was a total fantasy.

Thank you so very much

Deborah

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Saturday, 26 June 2010, 10:18 PM

The site is certainly shaping up now! And I quite like the simplicity of it, there is a feeling of space which is unusual for most Moodle Themes, they look so rigid in comparison.

As for your next task, I can't say I'm 100% sure what you mean.

Why is it necessary to replicate all these links into different languages?

Average of ratings: -

Re: Designing Activity Links

by Deborah Delin - Saturday, 26 June 2010, 11:00 PM

Hi Mary,

Yes, I have put a notice on the site asking users not to use IE6. But the reality is that they still will. sad

I'm glad you like the site and that you think it is simple. Simplicity is key to this project as it is for young children and making Moodle simple has been quite a challenge.

I am also trying to make the site accessible in different languages. The theory is that the exercises themselves don't require a knowledge of English. I just need to get the user to the Quizport links and off they go. There are translations into six languages on the home page which direct the user to the course pages. But when they get to the course page they are confronted with English which they may not understand. So I want to put several separate series of Quizports with translated links on the course page. I had an idea of making a sideblock with links to a label above the relevant Quizport. But I see now that, using the anchor method at least, this is not possible. I could make a very long sideblock with anchor links which jump down the page to where the Quizport in their language appears. But I imagine that would be unreliable in terms of the positioning. What I need to do is put a link in one place on the course page which leads the user to a different place on the course page. The anchor system seems to only work when it is within the same HTML block. But I imagine there is some way of coding this?

Thanks as always.

Deborah

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Sunday, 27 June 2010, 12:21 AM

Bookmarks? You can set bookmarks to link to.

Also...did you see my previous post with the code to center the links?

Average of ratings: -

Re: Designing Activity Links

by Danny Wahl - Sunday, 27 June 2010, 1:30 AM

We're actually a little more brutal about it (which we have the luxury of being able to do) and we 'break' the activities until they upgrade. Of course it helps that our school is Mac-centric (and students are provided with a Mac) so we can be a little more totalitarian in our approach toward IE6.

Average of ratings: -

Re: Designing Activity Links

by Deborah Delin - Sunday, 27 June 2010, 1:21 AM

Yes Mary the IE6 works!!!! Thank you so much. Wow what a productive Saturday thanks to you!

Bookmarks? Will look into it. Thank you.

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Sunday, 27 June 2010, 2:42 AM

Hi Deborah,

I've just been playing with the bookmark idea and found that the #module-number works just as good, if not better as this way frees up a lot of time and effort.

If you are going to add a bank of new links each in a 'block-set' of different languages.
All you need to do is ADD a label at the top of each stack give it the same name as the language it represents, and make a note of its #module-number.

Then wherever on your site you put a link to this block list you just add #module-1234 (or whatever the number is) to the end of the url of the course page.

for example:

http://yoursite.com/course/view.php?id=18#module-1234

The beauty of this is, that wherever you find a module-number on a page, you can link to it using this method.

Hope this helps?

Mary

Average of ratings: -

Re: Designing Activity Links

by Deborah Delin - Sunday, 27 June 2010, 4:04 AM

Mary - you leave no stone unturned!

Actually I didn't get on very well with Bookmarks but did discover that although you can't select an anchor link from a different area using the HTML editor menu, you can do it by pasting in the code.

But I like your method even better because then you don't have to have the title you are linking to look like a link which doesn't go anywhere, which I always think is confusing. So I will use your module method. Thank you.

I am finding it so quick and easy to style these multiple links in the css file. It really takes the slog out of things. When I got up this morning I felt like I had a Moodle mountain to climb but you really helped me whizz up it!

Daniel, it's great you have the luxury of forcing your students to upgrade from IE6 and I would definitely do it if I was in your position. I have spent hours trying to appease the IE6 monster!

Deborah

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Sunday, 27 June 2010, 5:56 AM

So glad you are getting to grips with the CSS, Deborah, as this is the main area you need to concentrate on, as you don't have any control over the way Moodle generates the code and places the element on the page, other than in header and footer, which can be a bit of a mine field if you don't understand php.

So learning to use CSS to style elements, like module-number and inst id (in blocks), makes life much easier, and gives you the power to create a unique site, as yours is now.

It's been a steep climb for you, but isn't it a nice feeling being on top of the mountain!

God bless and thanks for giving me the opportunity to learn even more about Moodle.

Mary

Average of ratings: -

Re: Designing Activity Links

by Deborah Delin - Saturday, 26 June 2010, 10:02 PM

Hi again,

The course page looks great in IE8, Google Chrome, and Firefox 3.5 but in IE6 (yes, I know, I know but what to do - it seems to me most of the world still uses it) the links are on the left and not centered beneath the rest of the text. I can't send a screenshot as I don't have the infernal browser on my comp. Is there a snippet I can add which will make IE6 center the links?

Deborah

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Saturday, 26 June 2010, 10:37 PM

IE6!!! Is a security risk for anyone who uses it. What you should have is a message telling people to update their computers!

But how to center links for IE6.

Let me think about it and get back to you with this one. I have a workaround but I want to test it first.

EDIT: OK I think this might work, but can't be certain.

Where you set the margin-left for the stack of links (including the labels), instead of margin-left write the following...you can adjust the width to suit, you could even use 200px or 100px or whatever. What you would be doing is shrinking the box that the links are in, (here's were the red border is good as you can see where you are on the page).

{ width: 30%; display: block; margin: 0 auto}

so you should have something like...with different #module-numbers

#course-view ul.section li#module-39,
#course-view ul.section li#module-41,
#course-view ul.section li#module-42,
#course-view ul.section li#module-43,
#course-view ul.section li#module-44,
#course-view ul.section li#module-45
{ width: 30%; display: block; margin: 0 auto}

Mary

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Saturday, 26 June 2010, 1:26 AM

Frank has given you some good pointeers Deborah, and HERE is another.

It's a tutorial which is simple to do but explains what's going on in the coding too so you can see the changes taking place.

Not having used Quizport I'm not familiar with the set up but it looks like you could just put a new arrow gif for your quiz and code the background to be on the right rather than on the left as per your image of the Quiz as it is now.

The link to the tutorial will give you an idea of what I am talking about.
The one you need to view is the first one in the list...

Tutorial 1. Background images for bullets

Let me know how you get on.
In the mean time I'll swat-up on Quizport!

Cheers

Mary

Average of ratings: -

Re: Designing Activity Links

by Mary Evans - Saturday, 26 June 2010, 2:20 AM

Deborah, I think I have misunderstood what you are trying to do.

1. You can hide elements with display: none but you need to be able to isolate the image first. If the selector classes are correct...then

.section .activity img.activityicon {display:none}
This should stop the image displaying and not leave a gap.

On the other hand...

.section .activity img.activityicon {visibility:hidden}
will leave a gap.

You could try both and see which works best for you.

And here's a link which explains the difference...

http://www.w3schools.com/css/css_display_visibility.asp

2. Are the links something you have created? If yes...then this will be a piece of cake to code. See the tutorial for that one...you will probably be able to figure it out.

Cheers

Mary

Typo-ALERT in previous post!!! pointeers = pointers (not pointy ears!) Beam me up Scottie! LOL

Average of ratings: -

Themes

Designing Activity Links

Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Re: Designing Activity Links

Tutorial 1. Background images for bullets

Re: Designing Activity Links

Empowering educators to improve our world

Moodle

Support

Get Involved

Contributions

Downloads

Tracker

Development

Empowering educators to improve our world