01

May

2007

MediaWiki skin sgumax 3.1 is released

Alright, finally I got this new skin released :).

It took me a while because I had other projects, assignments and exams during in last several months. I just got my final grades and I’m very happy with them: 4 “A” and 1 “B” :-).

This new skin is redesigned and has less color, but it looks decent. The core code has been updated according to MediaWiki 1.9, and I’m not sure if it still works under 1.8 and other versions. If you have any question, please feel free to post here.

The highlights are:

  • Redesigned whole skin
  • update core code according MediaWiki 1.9.0 and up
  • Simplify the design and give it a decent look
  • Less colors, most are gray and black
  • You can use big customized header background
  • Fix any reported bugs
  • Header size, body size and background are in main CSS, it’s easy to modify
  • A jump link to move from bottom to top when page is too long (Jaya’s suggestion)

I appreciate all your support and donations, they are (Order by date):

  • Jaya
  • Douglas
  • Francesco
  • Adam
  • Nathaniel
  • Hoyt
  • Dustin

Skin is available at my Wiki under Projects, you are very welcome to download and tell me what you think.

Thank you very much and I hope you enjoy this skin,

Paul

72 Responses

  1. Bastian says:

    Good job, thx. When do you think, your wordpress theme will be available?

    Regards,
    Bastian

  2. Paul Gu says:

    I guess the final k2 will be released soon, I think it’s better to wait for the final k2, and I could release my final version.

  3. Great skin! We have already used the 3.0 version with Mw 1.9.3 with no problems.
    But now with 3.1 I have one problem and one question:

    1. Look here: http://www.immanuel.space2u.com/wikitest . The search field overlaps the login text. This used to be OK with 3.0

    2. Question: With 3.0 you had the choice search or goto. The goto option is gone. Mistake or intentional? Our users want the goto option since it is easier than changing the URL in the browser address field.

    regards
    Håkan

  4. I just found out that the problem reported in my prev. post only appears with Firefox.
    IE7 os OK The problem would go away it the search box was on top of the image as it was in 3.0..

  5. Paul Gu says:

    Hi Håkan,

    Thanks for your comments, here are my answers:

    Question 1. The search field overlaps the login text.

    Solution: I had fixed the overlap by reducing the size of the search box, I hope your login menu is not too long :). Please download again and check if it’s good now.

    Question 2. The goto option is gone.

    Answer: I removed Search button in order to save some space for this design. The default button is Go button. I hope this button is enough for your Wiki.

    Paul

  6. Thankyou Paul. Your new version solved my problems.
    -Håkan

  7. Abhinay says:

    Hi Paul,

    Is it possible to divide my main page in two (since i want to list down links of two different topics). Also is it possible to incorporate a code so that the most popular (most read) articles are displayed without human intervention(dynamically). It would of great help if you could help me out with these queries.

    Regards,
    Abhi

  8. Paul Gu says:

    Hi Abhinay,

    Yes, you can use table or div to divide it; you can use template to do that as well, which will give more flexibility.

  9. Question off track: Is it possible in mediawiki to diplay the content of a template residing in another wiki similar to {{template}} when the template is in the same wiki? If so what is the syntax?

  10. Paul Gu says:

    I never try that, you can try that by using absolute URL to see if it works.

  11. Brett says:

    Hi Paul,

    Thanks for the great template. I just noticed an issue however. It appears that it’s spitting out double-headers. I noticed this because my page titles were always “Untitled Page”, and when I looked at the source code I noticed there is an entire blank html page (i.e ) before the actual page content gets spit out.

    You can view this at http://www.outdoorbeta.com/beta/

    -Brett

  12. Misha says:

    Hi Paul,

    Thanks for the skin; I’ve been waiting for it! It’s really beautiful–I like that I can run a wiki that doesn’t look like you know what.

    -Misha

  13. Brett says:

    @11 (Brett)

    Got it fixed. It wasn’t related to the skin, but instead to an improperly installed extension. Sorry for the confusion.

    -Brett

  14. Paul Gu says:

    [quote comment=”824″]@11 (Brett)

    Got it fixed. It wasn’t related to the skin, but instead to an improperly installed extension. Sorry for the confusion.

    -Brett[/quote]

    No problem.

  15. Paul Gu says:

    [quote comment=”823″]Hi Paul,

    Thanks for the skin; I’ve been waiting for it! It’s really beautiful–I like that I can run a wiki that doesn’t look like you know what.

    -Misha[/quote]

    You are welcome. Paul

  16. Leonardo says:

    Hi Paul
    I would like to see an option to not show (Main Page title) on main page. I think this could be done on next release.
    If you don’t want to add this option easily to modify, i would like to know how to do this on 3.1 version.

    Thanks for the new skin.

  17. Paul Gu says:

    Hi Leonardo,

    Here is solution for you:

    Open file gumax_template.css, find

    /*
    * Don’t display the Home title on Home page
    */
    .page-Home .firstHeading {
    display: none;
    }

    Change .page-Home to .page-Main_Page, that’s it.

    Paul

  18. Leonardo says:

    Hi Paul, My wiki page is in Portuguese BR language.
    So Main page = Página Principal
    I added:
    /*
    * Don’t display the Home title on Home page
    */
    .page-Página_principal.firstHeading {
    display: none;
    }

    But the title still appear

  19. Leonardo says:

    POnly not appear if i add display: none; on:
    /*
    * content page title format
    */
    #content .firstHeading,
    #gumax-content .firstHeading {
    display: none;
    position: relative;
    font-size: 150%;
    color: #2277DD;
    font-weight: bolder;
    padding: 0 0 .2em 0; /* position of the title */
    border: none; /* No border for page title */
    text-transform: capitalize;
    }

  20. Paul Gu says:

    [quote comment=”860″]Hi Paul, My wiki page is in Portuguese BR language.
    So Main page = Página Principal
    I added:
    /*
    * Don’t display the Home title on Home page
    */
    .page-Página_principal.firstHeading {
    display: none;
    }

    But the title still appear[/quote]

    Did you pay attention to upper case?

  21. Leonardo says:

    “Did you pay attention to upper case?”

    Yes

  22. Brett says:

    Here’s how you can figure it out:

    1. Go to your Main Page (Pagine Principal)
    2. View the source code for the page
    3. Do a search on the source code for “.firstHeading”
    4. You should see “.page-SOMETHING .firstheading”

    That SOMETHING is the text you need to use in the stylesheet.

    Hope this helps!

    -Brett

  23. Paul Gu says:

    I guess it might be language problem, at least it works fine in English.

  24. Leonardo says:

    Ok, maybe it is. Now has an extension to hide the title on Mediawiki.
    About: Editing menu will be tight with main menu. i didn’t like the idea. I think that menus need to be in the same place of 3.1 version.

  25. Paul Gu says:

    Yep, I will move it to the bottom somewhere.

  26. Rabbi Bob says:

    Recently migrated over to mediawiki and after looking around for skins, I was using gumax while developing the site. Just before publishing I took a look back at your projects page a few days ago and there was 3.1!

    Love it!

    Thanks,
    Bob

  27. Eric says:

    Hi Paul,

    Great job on the skin – I really like the look. I’ve been wondering though; I’ve been having problems changing the margin colour on thumbnails. I tried the following in your main.css file:

    div.tright {
    clear: right;
    float: right;
    border-width: .5em 0 .8em 1.4em;

    //My new line:
    border-color: #f9f9f9;
    }
    div.tleft {
    float: left;
    clear: left;
    margin-right: .5em;
    border-width: .5em 0 .8em 1.4em;

    //Same again…
    border-color: #f9f9f9
    }

    This doesn’t seem to have any effect. Any suggestions? I want to make it compatible with IE, and I’ve found that the ‘transparent’ colour only seems to work with Firefox etc.

    Any suggestions?

    Thanks, and best wishes,
    Eric from St Andrews in Scotland, UK.

  28. Paul Gu says:

    Hi Eric,

    Where do .tright and .tleft come from? I don’t have such tags in my skin.

  29. Eric says:

    Hi again Paul,

    The path is:
    ~/wiki/skins/sgumax/main.css

    The code for .tright and .tleft are at about line 460 to 470. It’s unaltered from the monobook style. I had a look around to see if I could find a quick fix and came up with this:

    http://en.wikipedia.org/wiki/MediaWiki_talk:Monobook.css/Archive_3

    You obviously have more experience in this than I do, so I was hoping you could tell me why making my additions to your skin didn’t affect it. If not, don’t worry about it. It’s not a big problem, just an aesthetic thing. It leaves a white border around thumbnails, which doesn’t fit too well with the grey background.

    Hope this is helpful,
    Eric

  30. xabi says:

    Hi,
    Is it a simple way to change the black color of the skin by something else ?

    Thanks

  31. Paul Gu says:

    I’m not sure it’s simple or not; you need to change a few places in the CSS files. If you know about CSS, it shouldn’t be hard.

  32. xabi says:

    ok thanks

  33. Lars says:

    Hi Paul
    Thank you for making this skin available.
    Could I suggest a feature for future versions if possible. (or perhaps it’s supported already?)
    It would be nice if the skin could display different images in the main heading depending on the namespace of the wiki. You could e.g. have one image for the Main namespace and another for pages related to a particular project (e.g. the project logo)
    Thanks!

  34. Paul Gu says:

    Hi Lars,

    I will try to add that. Thanks for your comments.

  35. Lisa Waters says:

    Great template.

    I am trying to add more fields to the Create an Account page. Do you know how to do that? Thanks

  36. Mider says:

    Great skin.
    Really different look from MonoBook but still easy to the modification and the customization to own needs.

  37. Graham says:

    Hi,
    Amazing skin!! Finding it was like my prayers were answered.

    Anyway, I just have a simple question. The header logo doesn’t link to the mainpage. Whats the code snippet I need to make it do that?

    Thanks!
    Graham

  38. Graham says:

    Oh, And I thought I might mention the possibility of a social bookmark extension. Something along the lines of a portlet that has the digg button, the reddit button, delicious, technorati, you know all the main players.

  39. Jean says:

    Hi

    Is there a way to change the fixed size of the page, which is 85% too narrow for me, compared to the monobook skin ?

    Thks a lot,
    Jean

  40. Jean says:

    Found the way to extend the width of the page.

    Modify the gumax_main.css as follows:
    /* page size */
    #gumax-page,
    #gumax-page-actions,
    #gumax-page-footer {
    max-width: 950px !important; /* need for Firefox */
    width: 950px; /* need for IE6 win */

    Jean

  41. Paul Gu says:

    Hi Jean,

    Great! That’s why I put it in main.css

  42. Paul Gu says:

    [quote comment=”996″]Great template.

    I am trying to add more fields to the Create an Account page. Do you know how to do that? Thanks[/quote]

    I’m not sure what this is.

  43. Paul Gu says:

    [quote comment=”1045″]Hi,
    Amazing skin!! Finding it was like my prayers were answered.

    Anyway, I just have a simple question. The header logo doesn’t link to the mainpage. Whats the code snippet I need to make it do that?

    Thanks!
    Graham[/quote]

    I might release the fixed version which does that; or you could add the link in php file.

  44. Lisa Waters says:

    When a user doesn’t have a username and password yet and wants to create a new account, it asks for name, email, username and password to register. I would like to add additional fields. Do you know how to do that? Thanks

    Lisa

  45. Graham says:

    Hi Paul!
    Three things:
    1.)I was wondering, what is the file I would need to edit if I wanted the edit button to link to action=edit&section=new instead of just action=edit

    2.)How do I disallow users to move pages, and instead allow only the sysops to have the move button?

    3.)Are you available for hire? I need some coding done in the php mechanics of the site. Do you php? If so we should talk…

  46. Paul Gu says:

    [quote comment=”1071″]When a user doesn’t have a username and password yet and wants to create a new account, it asks for name, email, username and password to register. I would like to add additional fields. Do you know how to do that? Thanks

    Lisa[/quote]

    I guess using extension is the best way to do this.

  47. Paul Gu says:

    [quote comment=”1081″]Hi Paul!
    Three things:
    1.)I was wondering, what is the file I would need to edit if I wanted the edit button to link to action=edit&section=new instead of just action=edit

    2.)How do I disallow users to move pages, and instead allow only the sysops to have the move button?

    3.)Are you available for hire? I need some coding done in the php mechanics of the site. Do you php? If so we should talk…[/quote]

    1) If the page doesn’t exist, it will show section new.

    2) Protect page

    3) I’m not sure if I could have spare time since I got so many things to do. If you have something in your mind, send me the requirements and reasonable estimates, I’d like to give a try.

    Thanks,
    Paul

  48. Graham says:

    Hey Paul,
    Just wondering what the exact code is I would need to add to make the main logo link to main page. I know your busy so I don’t know if you’ll be able to dig it for me but if so… that would be amazing. I don’t know php :(

  49. Graham says:

    Also, I’ve searched and searched and cannot find where to remove the IP and Talk for this IP items that show next to log in / create account.

    How do I remove these? What file are they in?

    You’re awesome…

  50. Paul Gu says:

    [quote comment=”1189″]Also, I’ve searched and searched and cannot find where to remove the IP and Talk for this IP items that show next to log in / create account.

    How do I remove these? What file are they in?

    You’re awesome…[/quote]

    This can be done in LocalSettings.php:

    $wgShowIPinHeader = false;

    I’m quite busy now, I will add the link for the picture later.

  51. philip ng says:

    Really cool!

  52. woosht says:

    Fantastic skin Paul! Very slick and professional, and really adds a nice dimension to mediawiki.
    I’d like to disable the display of edit links for users that are not logged in (the edit link at the bottom is fine as is)
    I added “if($this->data[‘loggedin’]==1)”
    in between the close parenthesis and open curly bracket on line 223 of SGuMax.php but it didn’t have the effect I wanted.
    data[‘content_actions’] as $key => $action) if($this->data[‘loggedin’]==1) {

    any help would be greatly appreciated, and TIA!

  53. Paul Gu says:

    Hi woosht,

    I guess all you need to do is adding following in your LocalSettings.php:

    $wgGroupPermissions[‘*’][‘edit’] = false;

    Thanks,

    Paul

  54. woosht says:

    Hey Paul, thanks for the quick response!
    Your suggestion disabled editing, but the links still appear.. is there an easy solution to disable the display of the edit links next to each section?
    Thanks again

  55. Graham says:

    Hey paul,
    Just wondering if you would be so kind as to give me the code to make the header link to main_page?

    Thanks!

  56. Paul Gu says:

    [quote comment=”1413″]Hey paul,
    Just wondering if you would be so kind as to give me the code to make the header link to main_page?

    Thanks![/quote]

    Looking for code starting with id=”gumax-p-logo”, the link for that should be similar as this. It’s so simple if you know the php programming.

  57. Jaya says:

    Hi Paul,

    This is excellent work!

    Here is something that I would prefer to see in Mediawiki, not sure whether this is within your scope of work.

    – A page that shows the ‘RecentChanges’ page in a blog form, with small description of the changes. I found an extension,
    http://meta.wikimedia.org/wiki/Newest_Pages_Blog_%28extension%29

    but the formatting does not seem to match the template and for me it doesn’t seem to add much value to the ‘RecentChanges’ page.

    If you know of any similar work, please let me know as well.

    Thanks,
    Jaya

  58. Graham says:

    Paul,
    I was wondering if I could purchase the code to make the header link to main page. I realize its simple if one knows php, but I don’t know php. I’ve tried, but couldn’t figure it out. Plus, I figure your skins are so great that you could use some deserved support! So please tell me how much compensation you would like for the code snipped that I can copy paste into the skin, and I will gladly pay. You have my email.

  59. Paul Gu says:

    Hi Graham,

    You could make a donation through the link from my wiki. I will try to make the time and update the code. Thanks for support.

    Paul

  60. jmcgowan says:

    Hello,

    My name is Jesse McGowan, I am using your new skin (sgumax 3.1) at prisonerdavid.com. Thank you so much, it is a great skin.

    I was wondering if there was a way to bring in the “printable version” function. If you have time, please let me know. Peace. Thank you.

  61. Paul Gu says:

    Sure, I will look into it.

  62. Pierre says:

    Hi Paul,

    Great Skin!!

    One question, how do I show those menu’s on the homepage?
    The ones you show on the left on your homepage (main menu – my projects – about me) and also those little banners I like to show also.

    Thanks in advance
    Pierre

  63. Paul Gu says:

    My previous skins do not support multi-menu; The skin on my current Wiki is the next version of my skin, which supports multi-menu.

  64. Jonathan says:

    Hi, Paul.

    I really your latest Wiki design. When do you think it will be released for download?

    Keep up the good work.

    Jonathan

  65. Jonathan says:

    Hi, Paul.

    I really like your latest Wiki design. When do you think it will be released for download?

    Keep up the good work.

    Jonathan

  66. Paul Gu says:

    I still have some code to be completed; I’m also need to add “Printable Version” to it. The last thing is I need to test it under MediaWiki 1.10. After those, it will be ready for downloading.

    It might be a little bit delay, since I got a few other projects to do at the same time. The new skin should be available soon.

    Paul

  67. pin says:

    Hi, Paul
    Can you tell me how to move tab from right-align to left align?

    Please email me because I don’t surf check blog update very often.
    thanks,
    pin

  68. sean says:

    [quote comment=”869″]”Did you pay attention to upper case?”

    Yes[/quote]

    I am having the same problem as Leonardo did. I can not figure out how to get rid of that pesky “main page” part of my title. I am running MW 1.9 and my skin is yours rilgrey_01
    thank you

  69. Paul Gu says:

    [quote comment=”2240″][quote comment=”869″]”Did you pay attention to upper case?”

    Yes

    I am having the same problem as Leonardo did. I can not figure out how to get rid of that pesky “main page” part of my title. I am running MW 1.9 and my skin is yours rilgrey_01
    thank you[/quote]

    I want to clarify here, hiding title is nothing to do with my skin, and this is one of the feature of MediaWiki. This is not an issue that we are trying to solve.

    Thanks,

    Paul

  70. sean says:

    [quote comment=”2242″][quote comment=”2240″][quote comment=”869″]”Did you pay attention to upper case?”

    Yes

    I am having the same problem as Leonardo did. I can not figure out how to get rid of that pesky “main page” part of my title. I am running MW 1.9 and my skin is yours rilgrey_01
    thank you[/quote]

    I want to clarify here, hiding title is nothing to do with my skin, and this is one of the feature of MediaWiki. This is not an issue that we are trying to solve.

    Thanks,

    Paul[/quote]

    hey sorry about that…. Do you know how to hide or change the title?

  71. Matt says:

    I was wondering how difficult it would be to alter the skin a little to use more of the screen. This skins work well most of the time for us, but today I needed to create a fairly wide table (basically landscape) and found that I was wasting a little too much of the screen. Would it be very difficult to have a higher percentage of the screen used (width)?

  72. [quote comment=”2881″]I was wondering how difficult it would be to alter the skin … to have a higher percentage of the screen used (width)?[/quote]
    Gumax 3.0 works well with percent widths – see http://www.ehartwell.com/InfoDabble/MediaWiki:InfoDabble.css. The key changes are:

    body {width:100%; min-width:680px; max-width:none}

    #container {width:90%; min-width:680px; max-width:990px}

    #mainContent { padding-left:5%; padding-right:5%;}