Rocket Theme for Moodle 2.4: Custom formatting

Rocket Theme for Moodle 2.4: Custom formatting

by Marcel Mihulka -
Number of replies: 45

Hi,

I am using Moodle 2.4 and have installed the rocket theme which is brilliant. I am having trouble adding a block to the left of the banner on the homepage. I am trying to drag and drop a block but nothing seems to work. Am I missing something?

Marcel

Average of ratings: -
In reply to Marcel Mihulka

Re: Rocket theme custom formatting

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

Try turning AJAX off in the Admin settings. Then try moving the block again.

In reply to Mary Evans

Re: Rocket theme custom formatting

by Marcel Mihulka -

Thank you for your quick reply Mary.

I switched of AJAX but still have the same problem. With AJAX off, the dotted lines for where the block can be moved to show up in all the usual areas except next to the banner. The title is also not displaying correctly, hanging too far to the left and not matching the colour it should display.

 

In reply to Marcel Mihulka

Re: Rocket theme custom formatting

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

All I can think of is that the version you are using is not the most uptodate. The Roket theme has been updated, so your version may not have the correct code to make it work.

In reply to Mary Evans

Re: Rocket theme custom formatting

by Marcel Mihulka -

I downloaded the "current version" numbered 2.3 (2012122100). Is this the latest? Is it not suitable for use with Moodle 2.4?

In reply to Marcel Mihulka

Re: Rocket theme custom formatting

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

OK...well it's a case of Tia Maria to the rescue!

You are in luck as I just spotted a few things Julian missed in his last clean up of the theme.

The problem is that there are issues in Moodle 2.3 & 2.4 for ALL themes that have Custom Block Regions. This means all the areas in Rocket theme, like the toplinks and the homeblock and the search, will work now that I have fixed the files. I have attatched a ZIP file here, for you so you can replace the files that have the errors.

All you need to do is change the old files...

theme/rocket/layout/general to general_old.php
theme/rocket/layout/frontpage.php to frontpage_old.php
theme/rocket/config.php to config_old.php

and then add the new general.php, frontpage.php and config.php to the relevent directories after you extract them from the zip file.

That done you will then need to disable the dock in Admin settings. As this is what is casuing conflicts within the theme.

Hopefully this will allowing you to continue customising your theme now.

PS: Nearly forgot the zip file and also tell you to enable Theme Designer Mode other wais you wont see the changes to the theme.

Cheers

Mary (Tia Maria) smile

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

Re: Rocket theme custom formatting

by Marcel Mihulka -

Hi Mary,


Thank you so much for looking into this and making those changes. I can now move the blocks into those zones. I am still having a problem with zone 8 where the title should go. It is still sitting too far to the left and it is not matching the colour of the background like it should. Going on Julian's example, it should be blue not white. Is this also a coding problem or one of my settings? I have attached a screenshot of the area

In reply to Marcel Mihulka

Re: Rocket theme custom formatting

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

MORE UPDATES SEE ATTACHED ZIP (contains: layout/frontpage.php | style/rocket_styles.css | style/rocket_blocks.css)

The problem was more in the CSS but also a div had been missed off for 'headerstrip' which uses your chosen backgroun colour, also a </div> or two were missing or in the wrong place in frontpage.php. I forgot to check general.php so need to do that. If it is I'll add that in my next comment.

Let me know if this fixes the problems you have.

You can't use the AJAX Drag-n-Drop properly in 2.4 as the fixes have only just got into 2.5 which will not be release until May/June, but the blocks move OK when AJAX is off. You can actually move the blocks if you configure them when editing is on.

Once in place you can turn AJAX on if you want to.

Cheers

Mary

Average of ratings: Useful (1)
In reply to Marcel Mihulka

Re: Rocket theme custom formatting

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

Attached general.php and also a transparent menu image to replace the one you have.

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

Re: Rocket theme custom formatting

by Marcel Mihulka -

Thank you so much for that Mary. It is working a treat now. I also managed to alter the code so that the header text is white rather than black so it looks much better.

One thing I have also noticed is that with collapsed topics in rocket, the header text does not show up well no matter what colour you select. When you hover on the topic you can clearly see "TOPIC 1 - toggle" but not in its normal state. I have had a look around and seen there are some issues with collapsed topics format and the rocket theme. Do you know if there is a fix for this or should I just stick with the default topics format?

In reply to Marcel Mihulka

Re: Rocket theme custom formatting

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

Hi,

So glad to hear that its looking good.

The problem you have now is Rocket theme that is changing the Collapsed Topic sectionname. The easiest way to fix this is add the following into your Rocket theme Custom CSS box.

I presume you are familiar with the Rocket custom settings page?

Site Administration > Appearance > Themes > Rocket (a link to custom settings).

Towards the bottom of that Custom settings page you will see a Text area where you can add CSS. Add the following...

.sectionname { color: #FFFFFF !important; }
I have just added #FFFFFF (white) but you can change it to suit your theme.

Remember to Save Settings and be sure Theme Designer Mode is ON.

Hope this helps?

Mary

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

Re: Rocket theme custom formatting

by Marcel Mihulka -

That worked perfectly. Thank You again Mary.

In reply to Marcel Mihulka

Re: Rocket theme custom formatting

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

You could actually remove the setting for that header from theme/rocket/style/rocket_settings.css

It looks like this...

.sectionname {
    color: [ [ setting:themecolor ] ];
}

Hope that helps?

Mary

In reply to Mary Evans

Re: Rocket theme custom formatting

by Greg L -

Hi Mary, 

We have the latest version of Moodle 2.4 and now looking to apply a theme. I really like Rocket but wondering if it is ready for 2.4. If so, is the downloadable version 2.3 (2012122100) the latest and compatible with 2.4? Or is there another update coming? We will launch the new site in Fall 2013. 

Thanks!

In reply to Greg L

Re: Rocket theme custom formatting

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

If you have been reading this Rocket theme discussion, then you will know it has a few bugs, the fixes are in the various posts as attatcments. In fact I may split that particular discussion thread and post it as a seperat discussion as it carries some useful fixes.

If it is any use I have a working copy of Rocket that works in 2.4. So you are welcome to a copy if you want one.

Cheers

Mary

Average of ratings: Useful (2)
In reply to Mary Evans

Re: Rocket theme custom formatting

by Karen Taylor -

Hi Mary,

I am also having these issues.  Could you send me a working version of the them for 2.4?

My email address is webmaster@swanhill.vic.gov.au

Cheers,

Karen

In reply to Mary Evans

Re: Rocket theme custom formatting

by Greg L -

I have been reading the forums that's why I was a little concern. But I'm optimistic and stubborn. Please send your working copy of Rocket for my Moodle 2.4 build.

Much appreciated!

- Greg

(Edited by Mary Evans - original submission Wednesday, 27 February 2013, 2:57 PM) Removed email address.

In reply to Greg L

Re: Rocket theme custom formatting

by Greg L -

Thanks for sharing your workable Rocket 2.4. I've got two questions. 

1. Can I change the icon size globally throughout the theme? I noticed the block icons are slightly larger then the content/activity icons. I would want them at the larger size. The hide icon (eyeball) is the most difficult to view. Can't really tell if it is hidden or not (blue to grey eye). I really like the closed eyeball from 1.9...

2. How or where do I change the block link color and add an underline? When I hover over a link it doesn't change. Only indication that it's a link is that the mouser arrow changes to a hand. In firebug I can see the line of CSS but can't find correct location to change the hover color. 

Thanks in advance for you help. 

- Greg

In reply to Greg L

Re: Rocket theme custom formatting

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

Hi,

To answer your questions:

  1. To allow your Rocket theme to use Moodle 2.4 icons you need to remove the icons that are in Rocket theme. pix_plugins and pix_core. However you may wont to keep some so be selective.
    With regards the open/closed eye from 1.9 you can add the ones I have added here to replace the ones currently in your pix_core/t/ directory and then Purge all cache

  2. If you go to Site Administration > Appearance > Themes > Rocket (link to Rocket's custom settings page) you will find a Custom CSS box where you need to add the following rule...then Save Settings

    a:hover { text-decoration: underline; }

    You will also find colour pickers, in this settings page, where you can set theme background colours for this theme.

HTH

Mary

Attachment show.gif
In reply to Mary Evans

Re: Rocket theme custom formatting

by Greg L -

Hi, 

Your suggestions worked like a charm. I've run into another issue, I can't find the CSS for Grades. The image shows the student's user report with all the fonts below 1em (see attachment). Where is this located so I can change it? I've looked through the theme folders without any luck. 

Thanks again for your help. 

In reply to Greg L

Re: Rocket theme custom formatting

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

Hi,

The CSS is located in moodle/grade/report/user/style.css

However you can bypass this by just adding ..

table.user-grade td.feedbacktext {font-size: 100% ;}

into the Custom CSS box in your Rocket theme found at...

Site Administration > Appearance > Themes > Rocket (choose this link to your custom setting page from the list of themes at this point in the Admin navigation tree.)

Before adding the CSS you will need to be in Theme Designer Mode otherwise you will not see the changes.

Cheers

Mary

In reply to Mary Evans

Re: Rocket theme custom formatting

by Pamela Dooley -

How do I get the most up-to-date version of Rocket? I have Moodle 2.4

In reply to Pamela Dooley

Re: Rocket theme custom formatting

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

You can download the Rocket theme I updated HERE

To move the blocks into place you need to disable the Drag and Drop functionality first as it make it easier.

Mary

In reply to Mary Evans

Re: Rocket theme custom formatting

by Greg L -

Hello again, 

I'm still tweaking the grade book and I have another question. In Simple and Full view how can I make the course category and added categories look different in color. I need help making this visually understanding. As of now they are the same color, so the cell color runs into each other. I'd like either the corse category or added categories to have a different color. I'm getting lost in the CSS of level #s and cell #s. 

Here is a link to a sample gradebook to help explain what i'm talking about. 

http://clickables.moodlerooms.com/s/steps/m/joule2/l/26745-how-to-set-up-gradebook-categories-in-moodle-2

Thanks inadvance! 

Greg

Attachment gradebook sections.jpg
In reply to Greg L

Re: Rocket theme custom formatting

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

Hi Greg,

I am really sorry, but I can't help you with this right now as I am very busy, and cann't spare the time to search for a fix. However, if you follow this tutorial (see below) it will help you solve the problem yourself using Firebug.

If you still have problems start a new discussion asking for help with custom CSS to style the gradebook, since it is not a Rocket theme problem but one which is in Moodle core where the CSS originates. It's just a matter of tapping into that CSS, or rather finding out how it is styled and then taking the original CSS rules and adding it to your Rocket theme's Custom CSS box, and re style it as you want, by adding a background-color property. That's where Firebug comes into play.

Now here's that Tutorial. smile

Cheers

Mary

In reply to Mary Evans

Re: Rocket theme custom formatting

by Augustine Ugi -

hello mary, am having a lot of issues with rocket theme.

First can I apply it on 2.5?

second, on 2.4, it throws up an error when I try to select change theme. A blank page shows up

3. my email is docaustyn@artty.net, wondering if you can send me your version and instructions on using it on 2.4. thanks

In reply to Augustine Ugi

Re: Rocket theme custom formatting

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

Hi Augustine,

To answer your queries in reverse:

3 Mary's updates to the Rocket theme can be found here

https://moodle.org/mod/forum/discuss.php?d=223235#p977423

2 If you are getting a blank page when you select the theme it would suggest an error in the installation of the theme, but try two things: firstly remove the Rocket theme you have in place and try again with the updated one above, secondly turn on debugging mode and see what errors are reported, then copy them here so we can try and help determine what's wrong for you. (Site Administration > Development > Debugging)

1 Yes you can put it on 2.5 - there are a few issues, such as you may need to disable the dock to get some of the custom block areas to work properly - this is a known issue with all themes and not Rocket specific (https://moodle.org/mod/forum/discuss.php?d=228477#p992539).

Blast Off!!! :D

HTH

Richard

In reply to Richard Oelmann

Re: Rocket theme custom formatting

by Augustine Ugi -

Hello Richard.

Thanks for your quick response, please now I have a server error when I click on change new theme. when I get the rocket folder off via ftp, it works fine. what do I do, I no longer get a blank page but a server error.

 

 

 

In reply to Augustine Ugi

Re: Rocket theme custom formatting

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

Where is your site hosted and how was it set up?

If you have a hosted site that uses cPanel, then you will need to upload themes like rocket using cPanel rather than ftp - that could be causing the files to be corrupted and creating your server error.

Can you tell me what the server error is?

R

In reply to Richard Oelmann

Re: Rocket theme custom formatting

by Augustine Ugi -

I will use Cpanel and see.

I noticed that I get HTTP error in accessing the Theme changer link.

On some systems. I get the HTTP error, on some others, I get the blank page.

Help

 

In reply to Augustine Ugi

Re: Rocket theme custom formatting

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

Hi,

The Error message sounds like your Moodle site's root config.php is not written correctly.

If possible, you would be better checking that your Moodle site root config.php has the correct directory name for 'admin'. Some host sites cPanel setup change the 'admin' directory to another name but forget to change the moodle/config.php.

The three places you need to check are listed below:

This is just an example from my localhost  moodle site. Obviously yours will look different.

$CFG->wwwroot   = 'http://localhost/moodle';
$CFG->dataroot  = 'C:\\wamp\\moodledata';
$CFG->admin     = 'admin';

I hope this helps?

Cheers

Mary

In reply to Mary Evans

Re: Rocket theme custom formatting

by Augustine Ugi -

Hello Richard and Mary

 

Here is now my error, my config looks okay. I only get this if theme folder rocket is inside the theme folder. This happens when I try to click to change the current theme

 

 

Server error

The website encountered an error while retrieving URL/studynet/theme/index?device=default&sesskey=FQsnip0F3c. It may be down for maintenance or configured incorrectly.

Here are some suggestions:

  •  this web page later.
HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfil the request.

 

 

In reply to Augustine Ugi

Re: Rocket theme custom formatting

by Augustine Ugi -

somebody please help me with my issue. 

 

Mary and Richard please Respond

In reply to Augustine Ugi

Re: Rocket theme custom formatting

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

Hi Augustine,

I haven't been able to replicate this issue - Rocket installs fine for me. (Which I realise may not be the most useful comment, but does limit my suggestion to help sad )

Looking at the error message, it looks as if something in the theme, as you have uploaded it, may be corrupted. You could try deleting it from your host, then reuploading the theme from scratch (a fresh download)

Have you tried uploading any other themes from the plugins database (ie. other than the core ones)? What happens when you select those themes?

R

In reply to Richard Oelmann

Re: Rocket theme custom formatting

by Augustine Ugi -

Everyother theme works perfect. only the rocket theme and am confused. once the rocket theme folder is present, the selection to change theme throws a http server error in chrome and a blank page in opera and firefox

In reply to Augustine Ugi

Re: Rocket theme custom formatting

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

Hi Augustine,

First things first.  Let's go through a checklist to make sure you have everything correct.

  1. When you added the Rocket theme did you make sure that the folder it was in was called "rocket" and NOT ROCKET or Rocket or anything else?
  2. Assuming that you have the correctly named 'rocket' folder inside the theme folder on your server, when you first added the theme the other day did it Install Successfully?  Yes or No?
    IF...
    • YES: Then go to Site Administration/Development/Purge all caches, and try again to select a theme.
    • NO: Then you need to fix the problems with the Rocket theme first.

If the Rocket theme installed OK then odds on there is something else wrong with your Moodle.  Are you sure you have the correct version of Moodle for the Rocket theme you want to use, as there have been lots of problems with this theme in the past, mainly to do with the changes from 2.2 to 2.3 / 2.3 to 2.4 / and 2.4 to 2.5.

It is getting increasingly difficult to make some themes 'different' and Rocket is very different than the standard themes in Moodle.

It is these parts of the theme that may be causing problems, I don't know.

Sorry to be so negative, but it may be that your version of Rocket is broken. sad

Mary

In reply to Mary Evans

Re: Rocket theme custom formatting

by Augustine Ugi -

Now I can see the error. 

Parse error: syntax error, unexpected T_STRING in /theme/rocket/lib.php on line 1

In reply to Augustine Ugi

Re: Rocket theme custom formatting

by Augustine Ugi -

I sorted it out in the end...thanks pals....I love you all

In reply to Augustine Ugi

Re: Rocket theme custom formatting

by Augustine Ugi -

What CSS file do I edit to change the header background and body background.

In reply to Augustine Ugi

Re: Rocket theme custom formatting

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

I'm glad you got this sorted Augustine - I dont understand why you were getting a parse error that doesn't normally appear though! smile

For the colours:

Checkout the settings page for rocket (Site Administration > Appearance > Themes > Rocket)

There are a number of settings there, including a customcss box you can use to add css.

In reply to Augustine Ugi

Re: Rocket theme custom formatting

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

Well...if I were you Augustine I would look at all the stylesheets for the Rocket theme and decide which to use.  You will find the stylesheets in the style folder.

You can add CSS in the Rocket theme CSS box, but since you want to learn about theme and Moodle code I'd go for the hard way about achieving this.

Checkout the tutorials we have at the top of the Themes forum page.

Over and out...

Mary

In reply to Mary Evans

Re: Rocket theme custom formatting

by Augustine Ugi -

Hello Mary.

I found this video Moodle 2 Rocket Theme demonstration on youtube.

I saw a lot of differences from my version of rocket.

1. I cant customise the header section like he did

2. I saw colour selection for various areas and blocks which is missing in mine.

I want to customise the Site Home page and when am there, I dont seem to find a place to edit or move blocks around. 

 

Help

In reply to Augustine Ugi

Re: Rocket theme custom formatting

by Augustine Ugi -

you can see my site here and that is the page am talking about. www.nugitech.com/studynet/?redirect=0

In reply to Augustine Ugi

Re: Rocket theme custom formatting

by Augustine Ugi -

Direct me on how to disable dock? 

In reply to Augustine Ugi

Re: Rocket theme custom formatting

by Augustine Ugi -

Hello guys.

put me through this last time. here is my site www.nugitech.com/studynet

I want to change the colour in the header, activate the login block. and change the colour of the thin line in the footer. I want also to change the colour of the blocks. the header parts of the blocks. just assist with the exact css.