Catherine Theme - Atlus Game

[katie hunter]

This is one of my favorite custom skin :) We designed it and another person is coding it. Thanks to Mike for finding someone who is really cool working with <3 so this is pending final result. Work in progress, coding currently.

Here is the final preview (Some further changes might still be applied):

http://i.imgur.com/BFhuv08.jpg

I don't think i could have done the same theme with Xenforo, that is why i love Vbulletin <3

Probably few color tweaks will be needed by the footer but that is about it.

This was also shared for the purpose of learning and for designers to come up with unique custom skins. Combining different ideas and styles can make your vb forum looks really unique. Rather than the generic look we all look at based on the default vb look.

Demo is alive: http://forum.nihonomaru.com/?styleid=164

[ForceHSS]

Looks good even know pink is not a colour I would go with

[WEBDosser]

Luv it and pink not a problem :)

[katie hunter]

I will share a link once the demo goes live :) work in progress, next week there should be a demo, i believe.

Pink is fine :d this is the kind of pink many love, dark type of pink. The game is great btw but gets very hard!~ I never finished it. And it has 9 endings depending on the way you play.

http://youtu.be/lWCvJA6uuG4?t=3m3s

http://youtu.be/0TbWnYTXCw4

[JacquiiDesigns]

Wow! The theme is quite lovely actually.
As for the @XF dig... I find XF styling quite intuitive, 100% more user-friendly than vB 4 and not quite as "clunky" (so-to-speak) as vB 3. But yeah - Kinda love vB 3.

Anyway - Wonderful job on the skin design.
It's really nice and yeah - PINK FTW!

J.

[K4GAP]

Avatars and a status icon (at top) have remnants of white on the edges. I would suggest working on that. Love the footer.

[socialteenz]

This ain't a custom coded skin, small amount of modification is done on the purevb socialize (http://www.purevb.com/demo/forum.php?styleid=96) skin.

Just my 0.2 Cents.

[ozzy47]

This ain't a custom coded skin, small amount of modification is done on the purevb socialize (http://www.purevb.com/demo/forum.php?styleid=96) skin.

Just my 0.2 scents.

It does have the appearance to that skin.

[katie hunter]

Avatars and a status icon (at top) have remnants of white on the edges. I would suggest working on that. Love the footer.

Avatars are avatars :) some users will use rendered versions, others won't - it is not part of the skin. But yes my avatar is not perfectly rendered.

[TheLastSuperman]

This ain't a custom coded skin, small amount of modification is done on the purevb socialize (http://www.purevb.com/demo/forum.php?styleid=96) skin.

Just my 0.2 Cents.

Actually I coded this by hand from scratch (not the screenshots above see the ones below) then was asked to use the vB Socialize Skin since she had already acquired it respectively. It isn't "just" a small amount of modification as all the current graphics I was supplied were small i.e. the forum would have been 800px wide which imo is pretty small so I had to edit all images and cut/edit "stretch" them per say and then create the other required images to make this happen in vB4.

Very very rough draft, I was not even 15% into it honestly but here's what I had (some of the graphics supplied had to be edited, the header logo graphics w/ the "N" was already off by 1px and some other misc issues I was going to correct later until we changed direction, preview images one w/ navbar sub-links faded and then w/ hover effect and psaced out around her legs (like I said prior, I thought we were not using the socialize skin):

https://vborg.vbsupport.ru/attachment.php?attachmentid=147399
https://vborg.vbsupport.ru/attachment.php?attachmentid=147400

:eek: :cool:

[katie hunter]

Not to mention offending our designer who she made the entire style in photoshop, picture, background image, forum icons, header, footer. The entire Catherin theme.

This skin also requires php coding for the header and notification system. Live version of the header is on the forum but different style.

[tbworld]

Nice work :)

[K4GAP]

Avatars are avatars :) some users will use rendered versions, others won't - it is not part of the skin. But yes my avatar is not perfectly rendered.

What I've done before I used vb is I would clean up any avatars the members uploaded. Although I've never had so many members that I could not keep up. I'm just a stickler for details. As my soldiers used to say about me, "I'm ate up with it". That's mostly a guy saying, especially in the military.

[socialteenz]

Actually I coded this by hand from scratch (not the screenshots above see the ones below) then was asked to use the vB Socialize Skin since she had already acquired it respectively.
:eek: :cool:

No offense Mike, i have a lot of respect for you & i really do.

See the final result, it almost looks identical to the pure vb skin, except the header & footer. You did what you were asked to.

My point is this ain't a 100% custom coded skin & it has inspiration from socialize skin.

** removed personal comment **

I'm out of this thread, i don't want people to hunt me down for this post.

:p

Peace out.

[TheLastSuperman]

No offense Mike, i have a lot of respect for you & i really do.

See the final result, it almost looks identical to the pure vb skin, except the header & footer. You did what you were asked to.

My point is this ain't a 100% custom coded skin & it has inspiration from socialize skin.

I'm out of this thread, i don't want people to hunt me down for this post.

:p

Peace out.

Well the way I was going about it in my initial screenshots, it would have been 100% custom as I used nothing from the socialize skin that was from scratch but you're right I'm doing as instructed so the person gets what they want ;).

So far so good, little more adjustment and such:
https://vborg.vbsupport.ru/attachment.php?attachmentid=147409

Also you two try not to "egg" each other on, you're both entitled to your own opinions but no need to post little comments and rile someone up, know what I mean? :cool:

[BBNZowner]

I think it's a great looking skin. Who cares if it's based on a commercial skin? If I was the website owner I'd be very happy with the outcome.

[Digital Jedi]

The whole "100% custom" thing is a myth anyway. If a style were 100% custom, we would have designed our own forum script first. All skins are built off of, and limited by, the original vB default. If you happen to use one of the seven base colors in the spectrum, even if you haven't incorporated or built off of another style, odds are it's going to look like somebody's. I personally prefer when a skin makes it hard to tell what forum script you're using. Regular Socialize is pretty obviously vB 4. Superman's, you can't tell. Which is as it should be.

[WEBDosser]

So when do we get to download this?..

[katie hunter]

So when do we get to download this?..

Um, that is for my site.. it is not for free to download, i am also not selling it.

[WEBDosser]

O!.. Right OK then :(

[TheLastSuperman]

O!.. Right OK then :(

Yuuup and sorry she had a premade skin and then I customized it, even if I had not it still would not be available :p.

Someone can do me some good graphics I'm open to suggestions though (I'm finishing this update (https://vborg.vbsupport.ru/showthread.php?t=269253) before doing any new styles though and I'm about 65% done).

Aiming to finish this Catherine style tonight for Katie too :D.

[katie hunter]

Yuuup and sorry she had a premade skin and then I customized it, even if I had not it still would not be available :p.

Someone can do me some good graphics I'm open to suggestions though (I'm finishing this update (https://vborg.vbsupport.ru/showthread.php?t=269253) before doing any new styles though and I'm about 65% done).

Aiming to finish this Catherine style tonight for Katie too :D.

I think we will be releasing the demo this weekend :0) since everyone is busy during the Holiday.

Merry Christmas everyone.

[CAG CheechDogg]

Yuuup and sorry she had a premade skin and then I customized it, even if I had not it still would not be available :p.

Someone can do me some good graphics I'm open to suggestions though (I'm finishing this update (https://vborg.vbsupport.ru/showthread.php?t=269253) before doing any new styles though and I'm about 65% done).

Aiming to finish this Catherine style tonight for Katie too :D.

What graphics do you need Superman, I am pretty darn good with photoshop if I may say so myself.

[katie hunter]

This skin will finally come alive if no delays by this Sunday :) Can't wait!

Thanks to Mike (https://vborg.vbsupport.ru/member.php?u=274667) and Nelson (https://vborg.vbsupport.ru/member.php?u=140639) for their combined efforts and work <3 This was not an easy skin, especially the up/down scroll that i like it to work the same way like our homepage, meaning that the middle part scroll under Catherin legs, if that made sense :d

From the live test demo (Still few more tweaks here and there)
http://i.imgur.com/GUoO5b7.jpg

Nelson has done the default (http://forum.nihonomaru.com/) skin of our forum as well.

[katie hunter]

Here is a link to the skin on the live forum :) few style tweaks and there is 1 bug that we are addressing but this is the final result thanks to Mike and Nelson for coding it.

http://forum.nihonomaru.com/?styleid=164

[ozzy47]

Looking pretty sharp, I would suggest working on the performance of the site after that, as you can see here it is not the greatest, http://www.webpagetest.org/result/140204_QT_2AF/1/details/

But other than that, kick azz job on the site. :)

[katie hunter]

Thanks :) it is a heavy skin because of the background image is large, not sure what i can do about that.

http://forum.nihonomaru.com/images/styles/socialize/background.jpg
http://forum.nihonomaru.com/images/styles/socialize/logo2.png

There are few big images around the skin.

[ozzy47]

You need to optimize the images. Ask Mike to take a look, in that site report, you can optimize the images at calls 45,46,51,77 and that will save a substantial amount of bytes.

I would also try adding this to your htaccess, to cache some of the stuff.

<IfModule mod_mime.c>
AddType text/css .css
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A2628000
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType video/asf A2628000
ExpiresByType video/avi A2628000
ExpiresByType image/bmp A2628000
ExpiresByType application/java A2628000
ExpiresByType video/divx A2628000
ExpiresByType application/msword A2628000
ExpiresByType application/x-msdownload A2628000
ExpiresByType image/gif A2628000
ExpiresByType application/x-gzip A2628000
ExpiresByType image/x-icon A2628000
ExpiresByType image/jpeg A2628000
ExpiresByType application/vnd.ms-access A2628000
ExpiresByType audio/midi A2628000
ExpiresByType video/quicktime A2628000
ExpiresByType audio/mpeg A2628000
ExpiresByType video/mp4 A2628000
ExpiresByType video/mpeg A2628000
ExpiresByType application/javascript A2628000
ExpiresByType application/x-javascript A2628000
ExpiresByType application/vnd.ms-project A2628000
ExpiresByType application/vnd.oasis.opendocument.database A2628000
ExpiresByType application/vnd.oasis.opendocument.chart A2628000
ExpiresByType application/vnd.oasis.opendocument.formula A2628000
ExpiresByType application/vnd.oasis.opendocument.graphics A2628000
ExpiresByType application/vnd.oasis.opendocument.presentation A2628000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A2628000
ExpiresByType application/vnd.oasis.opendocument.text A2628000
ExpiresByType audio/ogg A2628000
ExpiresByType application/pdf A2628000
ExpiresByType image/png A2628000
ExpiresByType application/vnd.ms-powerpoint A2628000
ExpiresByType audio/x-realaudio A2628000
ExpiresByType application/x-shockwave-flash A2628000
ExpiresByType application/x-tar A2628000
ExpiresByType image/tiff A2628000
ExpiresByType audio/wav A2628000
ExpiresByType audio/wma A2628000
ExpiresByType application/vnd.ms-write A2628000
ExpiresByType application/vnd.ms-excel A2628000
ExpiresByType application/zip A2628000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>

<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>

<FilesMatch "\.(css|CSS|)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Step by Step guide to speed up your VB4 (forum only)"
</IfModule>
</FilesMatch>
<FilesMatch "\.(rtf|rtx|svg|svgz|txt|xsd|xsl|RTF|RTX|SVG|SVGZ|T XT|XSD|XSL|)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Step by Step guide to speed up your VB4 (forum only)"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx |exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov |qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|o dg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram |swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw |zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DO CX|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|MDB|MID|MIDI|M OV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|ODB|ODC|ODF |ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|R AM|SWF|TAR|TIF|TIFF|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|X LW|ZIP)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "Step by Step guide to speed up your VB4 (forum only)"
</IfModule>
</FilesMatch>



ExpiresActive on
ExpiresByType application/javascript "access plus 30 days"
ExpiresByType image/jpg "access plus 30 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/gif "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType text/css "access plus 7 days"

# BEGIN Compress text files
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype

[Max Taxable]

Thanks :) it is a heavy skin because of the background image is large, not sure what i can do about that.

http://forum.nihonomaru.com/images/styles/socialize/background.jpg
http://forum.nihonomaru.com/images/styles/socialize/logo2.png

There are few big images around the skin.Easy fixes.

Background (425kb smaller):
https://vborg.vbsupport.ru/external/2014/02/21.jpg


Logo2 (172kb smaller):
https://vborg.vbsupport.ru/external/2014/02/22.jpg


pagePattern (300kb smaller)
https://vborg.vbsupport.ru/external/2014/02/23.jpg



Just click on them, download them to your computer, change the names of them to match what's on the server, and upload them to overwrite existing.

This will take almost 1 MB off your pageload with no loss in quality.

Trim the fat.



NOTE! Logo posted here is a progressive jpg now, not a PNG. So you'll have to change the script to point to that one.

[TheLastSuperman]

And not a one of those were mine, I only take blame for the bloated .png's in Avenger Blue LOL!

I do appreciate you two helping Katie out though I've had one hello of a migraine today and been swamped lately so this helped her wrap this style up today ;).

Edit: Ohh and shout out to Nelson too that Katie mentioned a post or two above, he actually finished the last remaining things on the site :D.

[ozzy47]

No problem, we all help where we can. :)

[Max Taxable]

And not a one of those were mine, I only take blame for the shotty .png's in Avenger Blue LOL!

I do appreciate you two helping Katie out though I've had one hello of a migraine today and been swamped lately so this helped her wrap this style up today ;).Actually the link Ozzy sent her to with her pageload details? There's a "view all images" link under the waterfall chart, and they GIVE you the optimized images. That's one of the really great features of that Patrick Meehan site.

Of course, I don't mind helping out but stuff like this is easy-peasy.

[ozzy47]

Now she is getting a 404 error on one of the images, http://forum.nihonomaru.com/images/button-home_left.gif

And a 302 on something to do with, scorecardresearch.com

[katie hunter]

Hi Ozzy :0) it should be fixed, correct url is now http://forum.nihonomaru.com/images/styles/socialize/button-home_left.gif

Thank you MAX

[TheLastSuperman]

Actually the link Ozzy sent her to with her pageload details? There's a "view all images" link under the waterfall chart, and they GIVE you the optimized images. That's one of the really great features of that Patrick Meehan site.

Of course, I don't mind helping out but stuff like this is easy-peasy.

Ohh it does? That's super nice and nifty too imo! What is the site?

[Max Taxable]

Ohh it does? That's super nice and nifty too imo! What is the site?http://webpagetest.org

The head tech of Google runs it, it's all about cleaning up the web by optimizing your sites.

[TheLastSuperman]

http://webpagetest.org

The head tech of Google runs it, it's all about cleaning up the web by optimizing your sites.

Ahh I knew of that site but have not used it in quite a while and had no clue they offered up optimized images though... heck last time I used that site it was for heavy integration of Akamai cdn in a vB forum.