[Theme] Zebra 2.0.1

[Theme] Zebra 2.0.1

de Danny Wahl -
Número de respuestas: 32

About

Zebra 2.0+ is a port of Zebra from Moodle 1.9.

Warning: Zebra 2.0+ relies heavily on CSS3 and is NOT recommended for IE6 or below, but then, neither is Moodle 2.0+.

Zebra features adjustable colors to seamlessly integrate the look and feel of your organization with a few simple settings.

Zebra also features a new page layout that offers 1, 2, or 3 column layouts using the @media CSS3 declaration, enabling you to display your site on a variety of devices and resolutions without hacking any code.

Parents

This theme is built upon both Base and integrates the pagelayout and dock from Rebase.

Credits

Zebra 2.0 is based off of the original Aardvark 1.2 (1.9) by Shaun Daubney @ Newbury-College, Zebra 1.4 (1.9) by me (Danny Wahl) @ LDi, Aardvark_makeover (2.0) by Mary Evans @ Visible-Expressions, and whatever themes those themes are based off of.

-----

Download

Adjunto zebra_2.0.1.jpg
Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.1

de Danny Wahl -

v.2.0.2

internal release

v2.0.3

fixed: apple-touch-icon-precomposed for android 1.5+

added: viewport metadata

added: header and footer color settings

added: enable zoom for mobile browsers setting

enhanced: @media declarations

fixed: silly string typos

fixed: bumped date branchsort from +10 to +10,000

-----

I forgot to post that I'll be posting tagged versions in the downloads section, but if you want to play with it as I tweak it grab it from github:

https://github.com/thedannywahl/Zebra_4_Moodle_2

Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.1

de Danny Wahl -

v2.0.5

Added multiple apple-touch-icon-precomposed sizes declarations for proper support for iPhone4, iPad, and <= gen3 iOs, Android 2.1+ and Nokia phones

Added mobile meta tags from html5 mobile boilerplate (cleartype, etc...)

Added some comments for the link and meta declarations to make them a little clearer

fixed a weird issue stemming from page{overflow-x:hidden;} by changing it to page{overflow:hidden;}

Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.1 Header Modification

de Ralf Daniel -
Dear Daniel, Thank you very much for this wonderful theme. I am playing around with it and up to now everything works perfect. I really like it! As I have not much experience in programming I have two questions to do some small modifications: 1. How can I remove the user picture from the header? 2. How can I change just the fond color to white only for the header Thanks in advance! Greetings from Germany, Ralf
Promedio de valoraciones: -
En respuesta a Ralf Daniel

Re: [Theme] Zebra 2.0.1 Header Modification

de Danny Wahl -

Ralf, there's an easy way and a hard way.  I'll give you the easy way first.  Go to the theme settings page:

Site Administration->Appearance->Themes->Zebra

and in the custom CSS box type this:

#page-header {color:#FFFFFF;}

#user-pic {display:none;}

The hard way is to go into the theme files and change/add these values, but if you ever update the theme your changes will be overwritten, so I recommend the way I've shown above.

Promedio de valoraciones:Useful (1)
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.1 Header Modification

de Tracy Brovold -
I am new to Moodle and working with themes. I really like this theme and would like to add a custom logo to the page. When working with other themes I have been able to put the url of the logo in and it will appear. This seems to work differently with the Zebra theme. Could I add a custom logo with Site Administration access with no access to the server? Thank you for your help.
Promedio de valoraciones: -
En respuesta a Tracy Brovold

Re: [Theme] Zebra 2.0.1 Header Modification

de Richard Oelmann -
Imagen de Core developers Imagen de Particularly helpful Moodlers Imagen de Plugin developers Imagen de Testers

Hi Tracy,

Yes it seems this works differently to other themes in that Daniel has created it so that you need to use a moodle style reference to a file, which I think needs to be in your theme folder - meaning you would need server access to upload it.

It would be possible to ammend the code to allow a full url to be used - but you would need server access to be able to make this change as well, in which case you would be able to simply upload your logo image anyway guiño. Let me know if you would find this change useful though and I will try to take a look at it for you.

Richard

Promedio de valoraciones: -
En respuesta a Richard Oelmann

Re: [Theme] Zebra 2.0.1 Header Modification

de Danny Wahl -

I'm investigating how to make it work with either.  I think I'm going to need to put a checkbox like something that says "full URL" and then do it that way.

Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.1 Header Modification

de Richard Oelmann -
Imagen de Core developers Imagen de Particularly helpful Moodlers Imagen de Plugin developers Imagen de Testers

Hi Daniel,

I was thinking of a second text box, then in the lib.php file if the moodle style one is empty, then use the full url one (unless that's empty too!) But I like your suggestion better, as the two text boxes for such similar things could be confusing.

Could you get away without anything else on the settings page though and use some code in the lib.php to work out which it is (e.g. detect if the first 4 characters are http then treat it as a full url, otherwise treat it as a moodle internal reference)? I'll try to take a look when I get home later, or tonight.

Richard

Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.1 Header Modification

de Richard Oelmann -
Imagen de Core developers Imagen de Particularly helpful Moodlers Imagen de Plugin developers Imagen de Testers

Hi Daniel,

If you make the changes below to lib.php I think it works (tested quickly on my local host and it seems to)

function zebra_set_logourl($css, $logourl) {
    global $OUTPUT;
    $tag = 'setting:logourl';
    $replacement = $logourl;
    $check = 'http';
    if (is_null($replacement)) {
        $replacement = $OUTPUT->pix_url('logo/logo', 'theme');
    }
    else {
        $pos = strpos($replacement,$check);
        if($pos === false) {
            $replacement = $OUTPUT->pix_url("$logourl", 'theme'); // string http NOT found in replacement
        }
    }
    $css = str_replace($tag, $replacement, $css);
    return $css;
}

HTH

Richard

edit: text editor has stripped the square brackets from around setting:logourl - have attached code in the txt file

Promedio de valoraciones: -
En respuesta a Richard Oelmann

Re: [Theme] Zebra 2.0.1 Header Modification

de Danny Wahl -

Thanks for the starter Richard, I've commited it, but I probably won't update the repository just for this.  I did throw in another checker too (yay for nested if()s!) for a relative path.  Mine looks like this:

function zebra_set_backgroundurl($css, $backgroundurl) {
    global $OUTPUT;
    $tag = 'setting:backgroundurl';
    $replacement = $backgroundurl;
    if (is_null($replacement)) {
        $replacement = $OUTPUT->pix_url('core/background', 'theme');
    } else {
        $protocol = '://';
        $ntp = strpos($replacement, $protocol); // Check to see if a networking protocol is used
        if($ntp === false) { // No networking protocol used
            $relative = '/';
            $rel = strpos($replacement, $relative); // Check to see if a relative path is used 
            if($rel !== 0) { // Doesn't start with a slash
                $replacement = $OUTPUT->pix_url("$backgroundurl", 'theme'); // Using Moodle output
            }
        }
    }
$css = str_replace($tag, $replacement, $css); return $css; }
Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.1 Header Modification

de Richard Oelmann -
Imagen de Core developers Imagen de Particularly helpful Moodlers Imagen de Plugin developers Imagen de Testers

Excellent Daniel - I think this will be useful in a lot of themes which use a graphic setting as it gives the user complete flexibility over where and how they store and use the images sonrisa

Richard

Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.1

de Léhane van der Merwe -

Hi Daniel

Thank you so much for this awesome theme, really is a dream to customise! I have a challenge at this stage though.. (bit of a newb on themes kinda having to hit the floor running )

How would I remove the date section on the custom menu and/or the home button that is pre-added?

Promedio de valoraciones: -
En respuesta a Léhane van der Merwe

Re: [Theme] Zebra 2.0.1

de Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

Hi,

From memory the date and home icon can be disabled in the renderers.php file.

You will need to add // to each of the following $branch lines of code...like so...

        //$branchlabel = "&nbsp;";
        //$branchurl   = new moodle_url('/index.php');
        //$branchtitle = get_string('menuhome','theme_zebra');
        //$branchsort  = -1;
        //$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);

        //$branchlabel = date("F j, Y");
        //$branchurl   = new moodle_url('/calendar/view.php');
        //$branchtitle = get_string('menutoday','theme_zebra');
        //$branchsort  = +10;
        //$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);

HTH

Mary

Promedio de valoraciones:Useful (1)
En respuesta a Mary Evans

Re: [Theme] Zebra 2.0.1

de Léhane van der Merwe -

Thank you so much Mary, that did the trick. I have one more challenge, I noticed that the drop down menu's expand left and this makes it difficult to read for the more left menu items that have submenu's as it cuts off at the border of the page.  I hope this makes sense...please see image below:

submenu cutting off

How can I either let the overflow show on these submenus or have them expand to the right ( though I might have the same problem above for the far right items)

Thank you for your valued help Your Themeness!

Promedio de valoraciones: -
En respuesta a Léhane van der Merwe

Re: [Theme] Zebra 2.0.1

de Danny Wahl -

Hi, what's likely happening is that something's interfering with the way that javascript calculates the menu widths (or your language is rtl?)

I would try grabbing the latest copy of the theme from here:

https://github.com/thedannywahl/Zebra_4_Moodle_2

I've completely rewritten the custommenu CSS (as well as much others) and will be putting it up on the plugins DB soon.

Promedio de valoraciones: -
En respuesta a Léhane van der Merwe

Re: [Theme] Zebra 2.0.1

de Danny Wahl -

Actually, looking at your picture again I believe it's because you've resized the top level menu items, but not the Children,  I haven't found a way to make YUI play nice with that.

Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.6

de Ian Scott -

Got the latest theme did some tweaks eg hover colours from menus etc all good - think the third colour should be removed from menu as all you need is links and hover - in my case it is red then hover is pinkish and third is black - looks odd (hence mod to css).

Q1 with the menu at colour 1 then date remains at black - I can make it colour 1 BUT loose hover effect on main menu - anyone know how to alter the background colour of the date?

Q2 personally I dislike underline on hyperlinks and would love to put text-decoration:none in the href reference BUT I'm buggered if I can find were to put it - any ideas?

Promedio de valoraciones: -
En respuesta a Ian Scott

Re: [Theme] Zebra 2.0.6

de Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

Hi,

Underline is usually set in the browser options. So check tools/Options setting's first and disable it first.

The CSS for this 'global' setting can be fix by adding the following to the foot of whatever css file is listed in your theme. may be called core.css or styles.css or whatever. Checking the config.php for the theme, will tell you which stylesheets are used.

a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none;}

The only way to find which colour does what in the YUI menu CSS is to add different colors. wherever you see a #xxxxxx (hex color code)

by using color: red; color: blue; color: green; color: yellow; you can see how that all work.  This is what I do usually.

To find the code for the DATE try using Firebug

HTH

Mary

Promedio de valoraciones: -
En respuesta a Ian Scott

Re: [Theme] Zebra 2.0.6

de Danny Wahl -

put this in the "custom CSS" box in the settings:

ul.dropdown > li:last-child {background-color:YOURCOLOR;} /* change background color on date */
a, a:visited {text-decoration:none;}
Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.6

de Ian Scott -

Hi Daniel - you would think that would work but no -no effect - I found the correct spot at around line 83 custommenu.css

ul.dropdown > li:last-child a {
        width:auto;
        background-color:#F10F00;  -- added this line
}

the temporary site location is http://www.yws.com.au/lms/

after it will be located at Http://www.korean.unity.edu.au

 

Cheers

Ian

Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.1

de Toshimi Hatanaka -

Language switcher is appeared on only FrontPage, but it isn't on any course pages. 

Is this correct behavior?

Zebra 2.1.0, Moodle 2.1.2

Promedio de valoraciones: -
En respuesta a Toshimi Hatanaka

Re: [Theme] Zebra 2.0.1

de Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

Hi,

I have uploaded an amended confg.php file (see attachment to this comment) for you to replace the one in your Zebra theme. I set it so that the lang menu appears on ever page.

Cheers

Mary

Promedio de valoraciones: -
En respuesta a Danny Wahl

Re: [Theme] Zebra 2.0.6 Language Selection

de Ian Scott -

I've found the language selection before login is not showing on this theme.  I changed to the default theme and it allows language selection before login so must be the theme.

Any one know of what area to look at to fix?

Promedio de valoraciones: -
En respuesta a Ian Scott

Re: [Theme] Zebra 2.0.6 Language Selection

de Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

Hi,

Yes...if you open ../theme/zebra/config.php using Notepad, you will see in the theme layout section under login a bit of code relating to options and lang. Copy that line of code to all the layout sections listed. It should look something like this...so by copying the section highlighted in green and overwriting the empty options, which is written in red here...you will get the lang menu to work in every page, providing you have that option enabled in Moodle.

    'mypublic' => array(
        'file' => 'general.php',
        'regions' => array('side-pre', 'side-post'),
        'defaultregion' => 'side-pre',
        'options' => array()
    ),
    'login' => array(
        'file' => 'general.php',
        'regions' => array(),
        'options' => array('langmenu'=>true)
    ),

HTH

Promedio de valoraciones: -