CA Serenity (clean, web 2.0 design, vbadvanced support, many colors)

[CyberAlien]

Style name: CA Serenity
Style version: 1.0.0
vBulletin version: 3.6.7

Style includes 5 base schemes:
Demo (default): fluid version (http://www.stsoftware.biz/forum/index.php?styleid=31), fixed version (http://www.stsoftware.biz/forum/index.php?styleid=32) (ca_serenity.zip)
Demo (green): fluid version (http://www.stsoftware.biz/forum/index.php?styleid=37), fixed version (http://www.stsoftware.biz/forum/index.php?styleid=38) (ca_serenity_green.zip)
Demo (cyan): fluid version (http://www.stsoftware.biz/forum/index.php?styleid=39), fixed version (http://www.stsoftware.biz/forum/index.php?styleid=40) (ca_serenity_cyan.zip)
Demo (darkblue): fluid version (http://www.stsoftware.biz/forum/index.php?styleid=43), fixed version (http://www.stsoftware.biz/forum/index.php?styleid=44) (ca_serenity_darkblue.zip)
Demo (purple): fluid version (http://www.stsoftware.biz/forum/index.php?styleid=41), fixed version (http://www.stsoftware.biz/forum/index.php?styleid=42) (ca_serenity_purple.zip)

and unlimited additional color schemes: (click here (http://beta.colorizeit.com/index.php?style=vb_serenity))
https://vborg.vbsupport.ru/external/2009/07/61.jpg

Downloads:
CA Serenity: see attachment
CA Serenity Green: click here (http://beta.colorizeit.com/index.php?style=vb_serenity&rename0=CA%20Serenity%20Green%20%28fixed%29&rename1=CA%20Serenity%20Green%20%28fluid%29&images=images/ca_serenity_green&modified=0&color=1,b0208,h0-85,s00,d00,t02,v01,b10,h10,s10,d10,t12,v11,b2-1,h20,s20,d20,t20,v20,b3-1,h30,s30,d30,t30,v30)
CA Serenity Cyan: click here (http://beta.colorizeit.com/index.php?style=vb_serenity&rename0=CA%20Serenity%20Cyan%20%28fixed%29&rename1=CA%20Serenity%20Cyan%20%28fluid%29&images=images/ca_serenity_cyan&modified=0&color=1,b0208,h0-33,s00,d00,t02,v01,b10,h10,s10,d10,t12,v11,b2-1,h20,s20,d20,t20,v20,b3-1,h30,s30,d30,t30,v30)
CA Serenity DarkBlue: click here (http://beta.colorizeit.com/index.php?style=vb_serenity&rename0=CA%20Serenity%20DarkBlue%20%28fixed%29&rename1=CA%20Serenity%20DarkBlue%20%28fluid%29&images=images/ca_serenity_darkblue&modified=0&color=1,b0208,h09,s0-55,d00,t02,v01,b10,h129,s10,d10,t12,v11,b2-1,h20,s20,d20,t20,v20,b3-1,h30,s30,d30,t30,v30)
CA Serenity Purple: click here (http://beta.colorizeit.com/index.php?style=vb_serenity&rename0=CA%20Serenity%20Purple%20%28fixed%29&rename1=CA%20Serenity%20Purple%20%28fluid%29&images=images/ca_serenity_purple&modified=0&color=1,b0208,h075,s00,d00,t02,v01,b10,h10,s10,d10 ,t12,v11,b2-1,h20,s20,d20,t20,v20,b3-1,h30,s30,d30,t30,v30)

Additional colors:
Using ColorizeIt (http://beta.colorizeit.com) script you can create any color scheme.
Below are few pre-defined color schemes. If you don't like any of it, or want to replace some color, click on any color scheme and adjust quickly colors yourself. No image/html editing required - everything is done automatically. You just change colors, rename style and click "Download".

https://vborg.vbsupport.ru/external/2009/07/25.gif
CA Serenity Cyan/Yellow: click here (http://beta.colorizeit.com/index.php?style=vb_serenity&rename0=CA%20Serenity%20Cyan%20%28fixed%29&rename1=CA%20Serenity%20Cyan%20%28fluid%29&images=images/ca_serenity_cyan&modified=0&color=1,b0208,h0-33,s00,d00,t02,v01,b10,h145,s10,d10,t12,v11,b2-1,h20,s20,d20,t20,v20,b3-1,h30,s30,d30,t30,v30)

https://vborg.vbsupport.ru/external/2009/07/26.gif
CA Serenity Red/Yellow: click here (http://beta.colorizeit.com/index.php?style=vb_serenity&rename0=CA%20Serenity%20Red%20%28fixed%29&rename1=CA%20Serenity%20Red%20%28fluid%29&images=images/ca_serenity_red&modified=0&color=1,b0208,h0140,s060,d00,t02,v01,b10,h145,s10, d10,t12,v11,b2-1,h20,s20,d20,t20,v20,b3-1,h30,s30,d30,t30,v30)

https://vborg.vbsupport.ru/external/2009/07/27.gif
CA Serenity Orange: click here (http://beta.colorizeit.com/index.php?style=vb_serenity&rename0=CA%20Serenity%20Orange%20%28fixed%29&rename1=CA%20Serenity%20Orange%20%28fluid%29&images=images/ca_serenity_orange&modified=0&color=1,b0208,h0-180,s078,d00,t02,v01,b10,h10,s10,d10,t12,v11,b2-1,h20,s20,d20,t20,v20,b3-1,h30,s30,d30,t30,v30)

https://vborg.vbsupport.ru/external/2009/07/28.gif
CA Serenity Green/Orange: click here (http://beta.colorizeit.com/index.php?style=vb_serenity&rename0=CA%20Serenity%20Green%20%28fixed%29&rename1=CA%20Serenity%20Green%20%28fluid%29&images=images/ca_serenity_green&modified=0&color=1,b0208,h0-78,s044,d00,t02,v01,b10,h131,s10,d10,t12,v11,b2-1,h20,s20,d20,t20,v20,b3-1,h30,s30,d30,t30,v30)


Notes:
- Demo forum shows only postbit_legacy, but usual postbit is also included in template and screenshot is available in attachment.
- Almost every template was modified to include rounded headers, not only index. So xml files are rather large.
- Style includes two versions for every color scheme: fixed and fluid width.
- vBAdvanced template files are included in every style in vbadvanced.xml

Installation:
Unpack zip file, upload contents of directory "upload" to your forum including subdirectories. Use fixed.xml or fluid.xml to install template.

vBAdvanced Installation:
Install normal style from fixed.xml or fluid.xml, in styles manager select "download/upload", put vbadvanced.xml in file field, in "merge into style" field select previously installed CA Serenity style and upload it. This will add vBAdvanced template files to style you previously installed.

PSD Files:
PSD files are in attachment
All color schemes are generated with ColorizeIt! script, so only default color is available in PSD. To change color in psd file use "hue/saturation" layer and change color values similar to values in colorizeit link.

[vigann]

very nice, i love all your CA styles
installed =)

[vip-q.com]

I like it :)

thanks man :)

Installed

[mikewiemholt]

Very nice looking (installed). Thanks!

[PoetJA-1975]

Very smooth skin - Nice work
Thanx for sharing ;)

Jacquii.

[Allan]

I like it, congrat ;)

[The Gift]

these are pissing me off, when i install them via admin panel, the .xml, it just makes the skin plain flat colors, no texture....looks nothing like the demo. why is that?

[CyberAlien]

Make sure you upload images to images/ca_serenity/
If that doesn't help, post link to your forum so I could take a look at what's wrong.

[CyberAlien]

Update.

Style is no longer beta. There were few changes in templates, javascript and images since beta version. Also added lots of new color schemes created with colorizeit beta (http://beta.colorizeit.com).

[vigann]

sweeet thanks cyberalien
nice work

[kaptanblack]

Ohh wonderful.nice ;) thanx

[BozzaJos]

I love this style! I'm in the middle of upgrading my forum to vb3.6.5 and wanted a new style. Well, I've found it! This is a great style and very good looking.

One question tho: I'm using the green version and when there is a new post it makes the sectionname and thread title all red. Is it possible to only show the new post icon and not make the titles red?

[CyberAlien]

Replace images/ca_serenity_green/misc/scripts_index.js content with this:var item = document.getElementById("forum0");
if(item)
{
var rows = item.getElementsByTagName("tr");
if(rows.length > 1)
{
item.style.display = '';
item = document.getElementById("forum0_div");
if(item)
{
item.style.display = '';
}
}
}

[Fireproof]

Great stuff - all your styles are amazing! Very clean and professional!

[Lee Wisener]

I used the vbadvanced xls and merged it in but it made the page look so much worse, trying to figure out why.

[Lee Wisener]

I see what happened, it made completely the wrong change to the image paths!!!

I manually corrected them and it worked fine.

[BozzaJos]

Replace images/ca_serenity_green/misc/scripts_index.js content with this:

Thanks CyberAlien... you're the man!

I just love this style. It looks so professional and it fits perfect with a lot of hacks! If you ever need an example of a site with this style and a lot of hacks installed (including vbadvanced) please let me know and I'll give you my url!

Thanks again for your help!

[CyberAlien]

Update

Style is updated for vBulletin 3.6.6.

[Celtkin]

Can you please update the template for 3.6.7 now :)

[CyberAlien]

It is up to date, as there aren't any template changes from 3.6.6 to 3.6.7

[Celtkin]

I fixed it. The fluid.xml would not upload because of the mismatch. I just changed

<style name="CA Serenity Green (fluid)" vbversion="3.6.6"

to

<style name="CA Serenity Green (fluid)" vbversion="3.6.7"

and it loaded without error.

[Purcelly]

Going to be using the banner rotater modification.
Where do I find the file path to the logo image to change it to my rotater information?

[CyberAlien]

Its a template variable $stylevar[titleimage]

[Purcelly]

Worked a treat, thank you

[Eric]

Very nice! I may be using this. Good work.

:)

[TheJackal56]

Very nice but I am having some issues with images.

Someone else had this earlier n this thread and stated it was with the path issue.

I am integrating with vbadvanced and header images are nit showing up correctly.

Where would I exactly change the settings to correct the path issue if indeed this is the problem?

Thanks,

[CyberAlien]

That depends on what images you have problems with. If its table header images, then edit replacements. If you have problems with backgrounds then in css replace all url(images/ca_serenity/ with absolute url. If folder images don't appear then edit style variables.

And its not a style problem, nor vBulletin problem, but CMS problem. All styles have paths to images set relative to forum root directory, and when root directory is being changed by some CMS it should try to alter html output itself, but it doesn't do that.

[BozzaJos]

CyberAlien, I see that you've updated this style. Anything important added or changes? I've installed your style before the update and was wondering if I have to update it.

[CyberAlien]

That update is only template changes from 3.6.5 to 3.6.7

[gg_luna128]

What about XHTML 1.0 validation?

http://validator.w3.org/check?uri=http://www.stsoftware.biz/forum/

[jerrygad]

Very nice skin. Thanks for sharing.
*Installed*

[CyberAlien]

Those errors are fixed in 3.6.7 version, I haven't updated my forum yet.

[lamerok]

how remove underline ?? i replace all underline to none in CSS options ... But many references have remained underline

[CyberAlien]

What's your forum url?

[lamerok]

<a href="http://cstrike.pri.ee" target="_blank">http://cstrike.pri.ee</a>

... maybe can somebody give me .xml file without Underline ? )

[CyberAlien]

That's default underline for all links. In css set text-decoration: none for main links css.

[lamerok]

At me already costs text-decoration: none ... can you make skin xml file without any underline ?

[CyberAlien]

You didn't add it to main links. In css editor I think its "body" block.

[InfoNirvana]

I am scared to use anything but the default skin for vb but I do like this Serenity one.

Gets rid of the fluffy stuff that shouldn't be on the navbar.

[CyberAlien]

That "fluffy stuff" is in quick links popup menu

[gg_luna128]

3.6.7 version does not validate XHTML. Here's a .mht for Opera 9 (file attached).

[CyberAlien]

ok. I'll check it later. If its the same "error" with <form> and </form> being in wrong places, then it doesn't really matter as those aren't real errors.

[gg_luna128]

And... I consider it redundant to have two Private Message notifications on forumhome template.

[Hexify]

Fantastic design, thanks!

[Hendrizius]

Unfortunately after Installing the default Skin, the imagesdirectory seems to be wrong. I tried adjusting the Paths but it still does not work. When applying another Style (Non Default Version) it works like a charm.

[CyberAlien]

That's because you have uploaded it incorrectly. http://www.d3scene.com/images/ca_serenity/ - no such directory

[Hendrizius]

Nope all Paths in the .css Files are wrong. Fixxed it manually.

You should use:
{$vbulletin->options[bburl]}/images/ca_serenity

instead. Makes it compatible with VBAdvanced :).

[CyberAlien]

Thanks a lot. I wasn't aware that variables were parsed in css.

[gg_luna128]

Found a bug... Forum descriptions aren't showing on THREADVIEW or FORUMVIEW if we configured vBulletin to show them.

[gg_luna128]

More bugs. I run a forum in a subdomain, and I'm using vBadvanced 3.0 RC1. The skin is looking for a spacer.gif that is not in the root folder of my site, it's on the subdomain, so it won't ever load :(

Maybe it's a problem with vBadvanced?

[CyberAlien]

spacer.gif is used from vBulletin options

[Hendrizius]

CyberAlien, could you make me a Logo for this Skin, or optimize the .psds, my logos are always looking different ><. On top if possible: "D3scene.com" below: "Start owning today....".

Thanks in advance.

[CyberAlien]

Its in attachment

[darkskies1]

Simply superb. --installed--

[Hendrizius]

Thank you very much :). Works perfect like this. 10/10 Points.

[gg_luna128]

spacer.gif is used from vBulletin options

Where? From the /images/misc dir? Nope, it's calling the root folder...

[CyberAlien]

Its in vBulletin Options -> Style and Language Settings -> Location of clear.gif

[gg_luna128]

It's spacer.gif, not clear.gif :P I thought that was it, too.

[Strafe]

I love your work CyberAlien. I'm using it in two of my forums:

http://www.luniafan.com/forums
http://www.fiestafan.com/forums

Just one small issue though. I was wondering if I am able to remove the grey 1-px borders around the avatars? Which template? And which line should I be removing?

Thanks!

[CyberAlien]

In postbit find this:<if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>and replace <td class="alt2"> with <td>

[Nutz]

Bit late but... good work. Nice to see a 'complete' style, with lots of work and care gone into it :)

Thanks,
Mat

[CurtisK]

nice skin but is it possible to get the 'last post' bits to be the same width on the fixed version?

it just looks a bit out of place

great work so far ;]

[Strafe]

In postbit find this:<if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>and replace <td class="alt2"> with <td>
Ok, great thanks a lot. That saved me some time.

[MillerLight]

Hello All!

Need some designer magic help :)

I want to use the right column hack with this thread, thats easy.

I need the html for the right column so it matches the rest of the skin, "Rounded corners, images, etc".

Can someone post the HTML for a right column that looks like the original skin, and pulls the images from the correct directory?

I am using CA Serenity Dark blue

Once the right column is in place, I can go in and add advertisements, links etc.

Appreciate any assistance!

[Strafe]

I have a question:
https://vborg.vbsupport.ru/
(Click above to see the question clearly.)

[Strafe]

Somebody help.

[goddess_dix]

hello. bit of a vb noob, and i'm trying to figure out how to get the forum category descriptions to display on the forum home in this style. hints appreciated.

[CyberAlien]

I have a question:
http://img177.imageshack.us/img177/3157/temp1gw4.gif
(Click above to see the question clearly.)
in css remove this:#maintable-first {
background: url(images/ca_serenity/misc/bg_logo1.gif) top left repeat-x;
padding-top: 6px;
}

hello. bit of a vb noob, and i'm trying to figure out how to get the forum category descriptions to display on the forum home in this style. hints appreciated.
Its removed because it doesn't fit in rounded headers.

[goddess_dix]

Its removed because it doesn't fit in rounded headers.

yeah, i figured as much, but i thought maybe i'd try to massage it. alter the graphic? use css to align it to the top with a solicd background color? put the description in a new table row under the graphic with a light gray background? i thought if i knew where i was looking, maybe i'd get some inspiration -or i'd hear how somebody else did it.

i'm also wondering some other stuff: i installed ultimate side columns and would like to recreate the rounded corners for these columns (and for a photopost install i have, too, once i find the templates that run it).

the number of templates these themes have is totally overwhelming to me, but that's a whole 'nother issue. i appreciate the work you guys like CA do to make it easier for folks like me a great deal. so thank you. :)

the code changes it tells you to add for this is pretty basic:

Open your header template and at the very end add

<!-- USC header edit start -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
$usc_left
<td valign="top">
<!-- USC header edit end -->

Open your footer template and above

$spacer_close

add

<!-- USC footer edit start -->
</td>
$usc_right
</tr>
</table>
<!-- USC footer edit end -->

That is all your template editing done.


and finally, i'm planning on using the main serentiy as the parent theme and use the other colors as child themes, to make it easier to change. it's looking nice so far. :)

anyway, any hints or tips on any of these subjects is appreciated. i'm trying to learn a lot of stuff to get things just so... :cool:

[Irfan Faruki]

Thanks You :)

[Irfan Faruki]

Hi
I really like the style but i am having problems changing the header logo & Text. Every time i open PSD with PhotoShop 7 i get an error saying "One of the layer is corrupt". Also how to i get rid of Grey bar that on top?

Please help

Irfan

[goddess_dix]

irfan- this post (http://https://vborg.vbsupport.ru/showpost.php?p=1298422&postcount=68)right above yours tells you how to remove the colored bar; while it's green in that example, that's because he's using the green theme.

on the photoshop, have you tried to download another copy of the header? the other, easy solutions is simply to use one of the included finished logos for the size, make the background transparent (so it will blend into the subtle gradient at the top, and make your own logo without the psd file. you don't really need it to make your own logo area-only if you want to modify the one that's there.

hope that helps.

[fotografik]

Stupid question - Does importing (running the *.xml file) this style do anything to the default VB styles, or does it add another new hierarchy of styles/templates.

[BozzaJos]

Hey CyberAlien,

I just tried out a new banner for my site (using CA Serenity Green) but it has a bit more width than my previous one. Coz of that it made a banner look really weird lol. 50% is the normal gray background colour but the rest is white background colour. Is this coz the banner has more width than the default banner? Is there a way to fix this?

Screenshot:
http://img409.imageshack.us/img409/8253/cagreenproblemgn2.th.png (http://img409.imageshack.us/my.php?image=cagreenproblemgn2.png)

Hope you can help me out mate.

Thanks in advance!

[auday1982]

hello and salam

great one CA ...i did some change ...see the green one on iraqsn.com/forums ...

u remember me ca - i am a member on ur forums ...long time ago i posted there some modifications for phpbb Aphrodite , but now i use vb

thanks a lot ca ....i like ur job

[auday1982]

Stupid question - Does importing (running the *.xml file) this style do anything to the default VB styles, or does it add another new hierarchy of styles/templates.

hello and salam
after running the xhtml file , upload the images to yourforum/images and u should have a folder called ca serenity

it is new folder ...new template ...no change to the default

[auday1982]

hello

guys

the wysiwyg s screwed up ...not wide enaugh .,..color picker doesnt work

i am trying to fix it nothing can happen

please help

[Captain DDL]

Could you make me a logo, CyberAlien? I don't have the Triplex font, else I would.

Main Text: Sarcastic Gamer Forums
Sub Text: Satire. Sarcasm. News. Occasional Facts.

Thanks a lot!

[captainglow]

Hi,

first of all thanks for the great style!

Some of my members are asking for a members list - and I recognized that the members list is gone with your skin.

So how can I activate the list again?

Thanks for answering my stupid question.

Andy

[mp34play]

Thank you for this awesome style. Installed!

[goddess_dix]

Hello All!

Need some designer magic help :)

I want to use the right column hack with this thread, thats easy.

I need the html for the right column so it matches the rest of the skin, "Rounded corners, images, etc".

Can someone post the HTML for a right column that looks like the original skin, and pulls the images from the correct directory?



i can't give you the exact code off the top of my head, but i did manage to reuse the rounded corners for my test site.

look at the replacement variables at the end of your style variables in the admin-

<ca-hdr> and </ca-hdr> - this was a bit confusing to me at first because the table structure is slightly different. he's using a table all by itself for the rounded corner area, you can't plug it directly in. i was expecting to have an exact mapping from the rounded corner tables to the standard table, and that's not how it works. the rounded corner code has an extra table it in...

basically, the structure i was seeing is this -

<ca-hdr>
<td> content area for the sidebar</td>
</ca-hdr>

when i was comparing templates with the default for the last upgrade, i was able to see the differences in the code and get the effect for sidebars. (currently workign on another sidebar problem with aligning in the showpost pages, but that's another issue.)

maybe this will help get you on the right track anyway.

[Floob]

Great Style. Any chance of one for 3.6.8?

[jon_argent]

How do I add items to the navbar for this style? Only asking, as I installed the arcade, but no link has appeared...

[chuchukuttie]

Please make these awesome lookin' skins for 3.6.8 :'-( please...

[PurpleButterfly]

Please make these awesome lookin' skins for 3.6.8 :'-( please...

https://vborg.vbsupport.ru/external/2007/10/24.gif

[Keesa]

Beautiful skins you have.

[Chance4Today]

Can anyone help me here I have nothing on the left columns of the forum?

[Artes_Marciales]

Amazing Work,
Thanks!!! :)

[Artes_Marciales]

Hi, how could add the link in the I circulate red, so that the not registered users can create their bill.

http://img139.imageshack.us/img139/7643/capture3yc6.gif

I have tried to modify the header, but my knowledge are very small and I have problems with the charts :o

Any help about this?

Kind Regards! :)

[Tralala80]

What about 3.6.8 version?

[247Callan]

Really great stuff you've got here, Proudly Installed! :)

[bds123]

Does this style work on 3.6.8?

[tech4um.com]

Does this style work on 3.6.8?

same question here

[swissbob]

Looking forward to a 3.7 version :)

[gfc]

Just read in the Forums of CyberAlien that there may won't be an upgrade of the styles to 3.7

[Angel-Wings]

Too bad :(

To the questions above - yes - it works with 3.6.8 up to 3.6.10

[furnival]

Oh man. How do I upgrade this beauty to 3.8 myself?