Moodle in English: New Theme - Serenity

After all of the positive feedback I've received for my Autumn theme, I've somehow mustered the motivation to create another similar theme based on the same basic layout.

Serenity is a fluid-width, 3-column theme with clean, uniform lines.

One unique "feature" of this theme is that I have pulled the login block from its normal position on the page and stuck it in the header. If you don't use the login block, you'll never know that does this is there. If you hate it, let me know and I'll tell you how to get rid of it!

Oh, and I threw Mauno's pix in there as well! Be sure to tell him what you think!

Tomorrow, I'll make sure this gets put into the database. Until then, here are the particulars:

Download: http://newschoollearning.com/free-themes
Demo: http://moodle.newschoollearning.com/?&theme=serenity

Average of ratings: -

Re: Core themes and theme installation

by Sherry Brown - Thursday, 28 June 2007, 1:17 PM

Patrick,

I really like parking the login block in the header. approve

It may not be Moodle standard but that's a place where a student can logout so why not put the login there as well? How difficult was it to do that?

Average of ratings: -

Re: Core themes and theme installation

by Patrick Malley - Thursday, 28 June 2007, 7:56 PM

Purely a CSS hack. Not too difficult at all.

And, thanks for giving the motivation to blog about something I've been thinking about sharing for a while now!

Find instructions here.

Average of ratings: -

Re: Core themes and theme installation

by Michael Woods - Monday, 23 July 2007, 11:32 AM

Hi Patrick,

I'm interested in having the "You are logged in as..." text appear in the header on the front page for this theme - it appears on every other page. I apologise, I'm still learning CSS, but can you please point me in the right direction?

Thanks a lot,
Michael

Average of ratings: -

Re: Core themes and theme installation

by Patrick Malley - Monday, 23 July 2007, 10:44 PM

I have deleted it from header.html. You will need to put it back in.

This can be done quite easily by copying line 29 of header.html and pasting it below line 24.

For reference, line 24 reads:

 <div class="headermenu"><?php echo $menu ?></div>

This may cause problems with the absolute placement of the login block. Let me know if you have any trouble. I'll help you through it.

Average of ratings: -

Re: Core themes and theme installation

by Michael Woods - Wednesday, 25 July 2007, 7:26 AM

Patrick, thanks a lot for your help. It works perfectly. FYI - I've undone the absolute placement of the login, so re-instating this code won't conflict with it.

Average of ratings: -

Re: Core themes and theme installation

by Jestin VanScoyoc - Tuesday, 31 July 2007, 8:14 AM

Worked great for me, too. I spent more time than I will admit looking for that little snippet to add back. That was my only real complaint, nice theme!

Average of ratings: -

Re: Core themes and theme installation

by Julian Ridden - Friday, 29 June 2007, 11:44 AM

Your theme work is just outstanding. Would love to see these continue to grow.

Would you be willing to have some of these in the core? I think it is about time we started adding some more advanced themes to the standard download.

Julian

Average of ratings: -

Re: Core themes and theme installation

by Patrick Malley - Tuesday, 3 July 2007, 3:21 AM

Thank you, Julian.

I would love to contribute to the core. I was thinking about picking up the Kubrick idea where David Scotson left off and making it a little more user-friendly. I think that might be something attractive to add. What do you think?

Average of ratings: -

Re: Core themes and theme installation

by Julian Ridden - Tuesday, 3 July 2007, 7:01 AM

That would be great. I am certainly not the owner of getting these into the core, but I have spoken with MartinD in th past and he is up for it.

For themes to get added to the core however they certainly need to be 100%. Can't release a dodgy theme to the community.

My only question with Kubrick is in regards to ownership. Obviously David's work pulled from the original Kubrick wordpress theme. Can this be done? Was that theme GPL? Who wrote the original wordpresss theme so a credit can be given?

I think we need to get those answers first. After that, I would be more than happy to work with you on this to see if we can make it a reality for perhaps a 1.9 inclusion.

Julian

Average of ratings: -

Re: Core themes and theme installation

by Patrick Malley - Tuesday, 3 July 2007, 9:23 AM

I'll look into Kubrick - if this is a no go, I'll find something else.

I'll update you by the end of the week on what I find.

Average of ratings: -

Re: Core themes and theme installation

by Stuart Anderson - Wednesday, 4 July 2007, 6:25 PM

Hi Patrick,

Great work on the theme! Is the version of moodle you are running 1.9? Or may be you introduced your wrapper for the curvy page corners via divs in the header and footer?

--Stuart.

Average of ratings: -

Re: Core themes and theme installation

by Patrick Malley - Wednesday, 4 July 2007, 9:31 PM

I'm running 1.8. But, Serenity doesn't use curvy corners so you've got me confused??

Are you referring to Solstice? If so, then yes. The curvy page corners were added using the following divs at the bottom of header.html:

 

I then closed them at the start of the footer.



The curvy corners elsewhere in this theme are simply CSS backgrounds that I've tied to existing divs.

Average of ratings: -

Re: Core themes and theme installation

by Stuart Anderson - Wednesday, 4 July 2007, 10:58 PM

Yes, Solstice was the one. Very neat and creative solution!

Thanks,

Stuart.

Average of ratings: -

回复: New Theme - Serenity

by 郭君州 - Thursday, 22 October 2009, 2:57 PM

dear sir,

i really like the style of serenity,but i have a problem:some font-sizes are too small.can you help me

Average of ratings: -

Re: 回复: New Theme - Serenity

by chihuei lu - Thursday, 22 October 2009, 9:29 PM

you just need to change the font size in css.

Average of ratings: -

Re: 回复: New Theme - Serenity

by Patrick Malley - Thursday, 22 October 2009, 9:30 PM

Serenity has a stylesheet called styles_serenity.css containing the following declaration:

#content {
padding-top:4px;
font-size: 0.9em;
}

Change that font-size to something larger (like 1em) to increase the font size of the entire theme.

There are also a few more specific font-size declarations in that document that you may want to search for and increase also.

Average of ratings: -

Re: 回复: New Theme - Serenity

by Michael Dunne - Friday, 23 October 2009, 8:35 PM

Hi Patrick,

Congratulations on the theme it looks great. Could you tell me where I can turn off the image repeater on the header image, i have removed the repeat-x and added a different banner image. Also where is moodle written in the header as i cannot seem to find it.

Thanks

Michael

Average of ratings: -

Re: 回复: New Theme - Serenity

by Robert Maynord - Sunday, 5 December 2010, 1:20 AM

Hi!

It looks like styles_serenity.css is not part of Moodle 2.0. Is there a way to do the same thing in Moodle 2.0 (increase font sizes)?

I'm just beginning to work with 2.0, and I very much like the Serenity theme!

Robert

Average of ratings: -

Re: 回复: New Theme - Serenity

by Patrick Malley - Monday, 6 December 2010, 6:27 AM

This thread is for the 1.9 version of Serenity and the code here does not apply to 2.0.

I might be able to help if you tell me specifically what font-sizes you're trying to increase.

Average of ratings: -

Re: 回复: New Theme - Serenity

by Robert Maynord - Monday, 6 December 2010, 7:42 AM

Thanks Patrick!

Using the Moodle 2.0 Serenity CSS code, I have been able to modify almost all of the fonts, with one exception. Underneath the "Available Courses" heading, the individual courses are listed in blue. Is there any way to increase these individual course titles, without having any effect on other areas?

I very much appreciate your time!

Robert Maynord

Average of ratings: -

Re: 回复: New Theme - Serenity

by Mary Evans - Monday, 6 December 2010, 11:46 PM

Robert,

I think this is the css code you need to change the element you are wanting to change...

#region-main div.region-content ul.unlist li div.coursebox div.info h3.name a:link {color: #ff0000;}

You will also need to turn Designer Mode ON in Settings menu to be able to see the changes you make...

Site Administration > Appearance > Themes > Theme Setting I think it's the 2^ndCheck Box from the top of that page.

Hope this helps?

Mary

Average of ratings: -

Re: 回复: New Theme - Serenity

by Robert Maynord - Tuesday, 7 December 2010, 3:33 AM

Thanks Mary! I added this line to core.css. and tested it to see if it changed the font color. Alas, no luck. I tried different color numbers such as 000000.

Was core.css in the serenity/style folder the correct place to add the line?

Average of ratings: -

Re: 回复: New Theme - Serenity

by Robert Maynord - Tuesday, 7 December 2010, 3:39 AM

By the way, I did have Designer Mode turned on...

Average of ratings: -

Re: 回复: New Theme - Serenity

by Mary Evans - Tuesday, 7 December 2010, 5:14 AM

Sorry Robert, I misunderstood your request, I thought you were talking about the link color. You want to alter font-size in the h3 which should be easy enough.

Yes, the core.css is the main css file for that theme in Moodle 2.0. If you add this line to the end of core.css in moodle/theme/serenity/styles/core.css

#region-main div.region-content ul.unlist li div.coursebox div.info h3 { font-size: 85%;}

I think that should fix it.

If you have PURGED the Cache in Moodle, and deleted your browsers cache, and you are still having problems, it is always worth testing to see if your css file is correct. You can do this HERE by uploading your core.css to the W3C CSS Validator.

Mary

Average of ratings: -

Re: 回复: New Theme - Serenity

by Robert Maynord - Tuesday, 7 December 2010, 6:37 AM

Mary,

That worked perfectly! Right on the button.

Thanks for your help!!!

Robert maynord

Average of ratings: -

Re: Theme - Serenity

by Lev Abramov - Thursday, 9 February 2012, 3:45 AM

Hi folks, sorry I'm late.

A question: we are considering using this theme for Moodle 2.2; what we need is to replace the Moodle logo at the bottom with our own logo + editing the link to point to the desired URL.

Can some kind soul tell me how, in just as many words as needed? I have access to the file system and can edit any file(s) using the code editor (built into the cPanel).

Thanx muchly in advance!

Average of ratings: -

Re: New Theme - Serenity

by Mr. Marc - Wednesday, 9 May 2012, 3:50 AM

We love the Serenity theme we are trying to remove the dash next to the Topic 1- title.

Where in the code is that located I have looked every where and it seems i find everything else but that?

Any direction would be a great help. thank you

Average of ratings: -

Re: New Theme - Serenity

by Mary Evans - Wednesday, 9 May 2012, 7:41 AM

That title is set in the Language files.

You can check this as an Admin if you go to Languages edit settings

http://docs.moodle.org/22/en/Language_customization

or if you have access to the files on the server you can open moodle/lang/en/moodle.php and scroll down to about line 1600 or so and you should see this...

$string['topicoutline'] = 'Topic outline';

unless someone changed it at some point and in that case it will look like this...

$string['topicoutline'] = 'Topic outline -';

HTH

Mary

Average of ratings: -

Re: New Theme - Serenity

by deepti pulavarthi - Wednesday, 28 August 2013, 1:07 AM

Hi all,

I cloned the serenity theme and customized it (changed the fonts, colors etc) using serenity as a parent theme. I am trying to remove the course title from the header. What file should I edit to remove it? I am on Moodle 2.2.

Thank you for all your help. Deepti

Average of ratings: -

Re: New Theme - Serenity

by Mary Evans - Wednesday, 28 August 2013, 4:44 AM

Hi,

If you take a look at the original copy in moodle/theme/serenity/layout/frontpage.php

In the line that is highlighted on the page you will see the <h1></h1> tags between which is some php code that you can remove.

<?php echo $PAGE->heading ?>

This is true of the general.php too.

Hope this helps?

Mary

Average of ratings: -