1 (edited by Kushi 2012-07-31 19:30)

Topic: [Theme release]Hydrogen v2

Information

Theme Hydrogen, ver. 2.0
Completely rewritten Hydrogen theme with new clean, valid CSS.

Authors

I've used Iconic icon set ( under CC license ).

License

http://i.creativecommons.org/l/by-sa/3.0/88x31.png
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Screenshoots and features
  1. Old look with new CSS.
    http://i.minus.com/itOdUk7JArIxg.png

  2. Fixed vertical align of pages and many other bugs.
    http://i.minus.com/ibib7LkdsE8Yln.png

  3. New buttons with fresh icons.
    http://i.minus.com/ibqOM4cdkfCjJ.png

  4. New input buttons
    http://i.minus.com/iNJWw3as8Nu00.png

  5. Fresh quote and codebox.
    http://i.minus.com/i75V2Dg1wLwIG.png

  6. Simple to understand, rewritten and commented CSS.
    http://i.minus.com/ibfmMVSmEbXEl6.png

Demo

http://kushithemes.t15.org/
login: Hydrogen
password: demo

Download

https://dl.dropbox.com/u/82283017/punbb/9-av-download.png

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

Re: [Theme release]Hydrogen v2

Every theme may have own template - just put in theme dir file main.tpl or admin.tpl or help.tpl.
Not needed rewrite system template it may broken other themes.

3 (edited by Kushi 2011-11-11 20:28)

Re: [Theme release]Hydrogen v2

And that's a great news smile. I've added fixed version and demo in the first post.

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

Re: [Theme release]Hydrogen v2

ok is much better thanks!

Re: [Theme release]Hydrogen v2

in my monitor (1680) the background is short in the right side

Re: [Theme release]Hydrogen v2

Nice, but 1.5 mb background image is killing all PunBB speed.

7

Re: [Theme release]Hydrogen v2

You're right. I've changed it, to 162 KB repeating-x indexed png. It would also fix Your @fantasma problem.

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

Re: [Theme release]Hydrogen v2

BG file after optipng - 126k

http://pic.lg.ua/s/a8Pin

9

Re: [Theme release]Hydrogen v2

Reuploaded. Didn't know this tool, thanks.

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

10

Re: [Theme release]Hydrogen v2

Your theme is just awesome !
You did a great job, thx for sharing it

Re: [Theme release]Hydrogen v2

dimkalinux wrote:

126k

96K

12

Re: [Theme release]Hydrogen v2

Come on it's 21 century, we've got fast Internet ;P.

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

Re: [Theme release]Hydrogen v2

Russian tweakers forever!

14

Re: [Theme release]Hydrogen v2

Have you got the original png please ?
Because of hammered quality of the png, I see the red blue and green pixels on it (iiyame prolite 2409HDS) and it looks like granular, I don't know if it is volunteer

15 (edited by Kushi 2011-11-23 23:41)

Re: [Theme release]Hydrogen v2

Unfortunately I do not have it. But I've tried to fix it ( it was hard, because I can't see any errors ), maybe this one will look properly
http://i.minus.com/ibvjh8Z8VHgniw.png

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

16

Re: [Theme release]Hydrogen v2

Ok, no problem !

This png unfortunately does the same effect sad
Thanks for your hard work dude ! Realy awesome skin. I uncommented the max-width you setted in your css file, and put Arial by default ! Your skin is awesome ^^

Re: [Theme release]Hydrogen v2

Hi. First of all i want to say that this template is really awesome and i really like it. I'd like to contribute in making this template even better so i want to share some info about problems and bugs i found.

1) On Black Main Menu when "New Alerts" appear it sticks to "Index" text link. I recommend fix this by chaning in CSS

FROM:

#brd-admod span {
    margin-left: 0.75em;
}

TO:

#brd-admod span {
    margin-left: 0.75em;
    margin-right: 1em;
}

18 (edited by Kushi 2011-12-06 12:15)

Re: [Theme release]Hydrogen v2

Yeah, it may be wrong, cause there wasn't any alerts while I was making it and simply forgot about it wink. As soon as I relase new theme I would fix this one and reupload.


EDIT

I've reuploaded theme, so it goes to ver. 0,9. I've changed the way of displaying images in buttons, re-organised DOM tree so it should display better on IE, and some other small fixes. Enjoy.

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

Re: [Theme release]Hydrogen v2

Hi. I've just noticed that you've made a cleanup in a file structure. Now it looks very nice, but there are still 2 problems.

Please take a look at footer you've made:


// Template code:

<div id="brd-about">
    <!-- forum_about -->
    <p id="copyright">Theme <strong>Hydrogen</strong> by <a href="http://punbb.informer.com/forums/user/61300/" />Kushi</a></p>
</div>

// Parsed into:

<p id="copyright">Forum oparte o: <strong><a href="punbb.informer.com/">PunBB</a></strong></p>
        <p id="copyright" class="visual-hidden">Theme <strong>Hydrogen</strong> by <a href="punbb.informer.com/forums/user/61300/" />Kushi</a></p>

As You may see:

2) The id="copyright" is duplicated in standard punBB footer and your paragraph.
3) You've made link do forum punbb.informer.com/forums/user/61300/ with self closed "a" tag. "/>"

Fixing these 2 simple problems you're template become 100% HTML 5 valid

20

Re: [Theme release]Hydrogen v2

Fixed and reuploaded.
Pozdrawiam wink

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

Re: [Theme release]Hydrogen v2

Now it's perfect!
Thank You very much.

Re: [Theme release]Hydrogen v2

anyone know how to do that modification ?
http://img542.imageshack.us/img542/7326/screenshotuv.jpg

23

Re: [Theme release]Hydrogen v2

Sure,
in Hydrogen/main.tpl it look something like

    <!-- forum_messages -->
    <div id="brd-navlinks" class="gen-content">
        <!-- forum_admod -->
        <!-- forum_navlinks -->
    </div>
    <div id="brd-wrap" class="brd">
    <div id="brd-head" class="gen-content">
        <!-- forum_skip -->
        <!-- forum_title -->
        <!-- forum_desc -->
    </div>
(...)

You have to put <div id="brd-navlinks" class="gen-content"> below <div id="brd-head" class="gen-content"> div. So it would look like.

    <!-- forum_messages -->
    <div id="brd-wrap" class="brd">
    <div id="brd-head" class="gen-content">
        <!-- forum_skip -->
        <!-- forum_title -->
        <!-- forum_desc -->
    </div>
    <div id="brd-navlinks" class="gen-content">
        <!-- forum_admod -->
        <!-- forum_navlinks -->
    </div>

You would have to do similar things in admin.tpl

Now it's time for CSS. You have to edit #brd-navlinks Hydrogen.min.css:322, make sure to delete position: absolute and position tags ( top: right: etc. ) and to add float:right;. So it would look something like this.

#brd-navlinks {
background: #222;
border: solid 0px;
color: #EEE;
height: 50px;
line-height: 50px;
float: right;
}

Then it's time for #brd-head in Hydrogen.min.css:438. Add float: left parameter so it would look something like that.

#brd-head {
color: whiteSmoke;
border: solid 0px;
padding: 0;
padding-left: 48px;
background: transparent;
float: left;
}

Last, but not least .brd-page in Hydrogen.min.css:1085.  Add margin-top, that suits your header height, by default it's

.brd-page {
background: whiteSmoke;
margin: 0 auto 0 auto;
padding: 1.5em;
position: relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 7px 7px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 7px 7px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 7px 7px;
margin-top: 92px; !important
}

Glad I could help smile. Please note, that I've added license to this theme.

If any of my dropbox link fails with 404 error, change dl.dropbox.com/u/56038890/punbb/*.zip in address to 82283017.

Currently working on rPlus - responsive theme for developers to create their own themes basing on this one.

Re: [Theme release]Hydrogen v2

okay TY smile i will try it smile

25 (edited by coolternet 2012-01-16 09:03)

Re: [Theme release]Hydrogen v2

hmmm i dont have the same result...

look http://img718.imageshack.us/img718/1563/sanstitrewok.png