|
Indulgence; Black & Purple
|
|
Topic Started: Jan 10 2011, 04:18 AM (9,703 Views)
|
|
Leonardo
|
Jan 10 2011, 04:18 AM
Post #1
|
- Posts:
- 7,637
- Group:
- Members
- Member
- #256,601
- Joined:
- March 10, 2007
|

Information:
Author: Leonardo Date Created: 6-January 11 Skin Preview: click for full preview Graphics: http://resources.zetaboards.com/topic/5109366/1/ Side Notes: Was made with a battle (http://resources.zetaboards.com/topic/5107488/1/) ZB Conversion is found here: http://resources.zetaboards.com/topic/5110080/1/
Edits Allowed? Minor edits such as font-size, font colour. Nothing that would change the overall design.
Javascript: (Adding Jquery to Invisionfree for the menu effects)
- Code:
-
<script type="text/javascript" src="http://z4.ifrm.com/30084/149/0/f5092046/jQuery_v144_Mini.js"></script>
Header & Body:Change the logo and the menu links.
- Code:
-
<center><div id="wrap">
<div id="logo"> <a href="http://zX.invisionfree.com/BOARDNAME/index.php"> <img src='http://z3.ifrm.com/2/101/0/p385014/Logo.png' alt='' /> </a> </div>
<div id="menu"> <a href="http://zX.invisionfree.com/BOARDNAME/index.php">Home</a> <a href="http://zX.invisionfree.com/BOARDNAME//index.php?act=Search&f=">Search</a> <a href="http://zX.invisionfree.com/BOARDNAME//index.php?act=Members">Members</a> <a href="http://zX.invisionfree.com/BOARDNAME//index.php?act=calendar">Calendar</a> <a href="http://zX.invisionfree.com/BOARDNAME//index.php?act=Help">FAQ</a> <a href="http://zX.invisionfree.com/BOARDNAME//index.php?act=site">Portal</a> </div>
<% BOARD HEADER %> <div id="container"> <% NAVIGATION %> <% BOARD %> <% STATS %> </div>
Footers: Do not remove anything from here.
- Code:
-
<center>Indulgence by <a href="http://resources.zetaboards.com">Leonardo</a> of <a href="http://resources.zetaboards.com">ZNR</a></center> </div> </center> <script type="text/javascript"> $('#menu a').css('position', 'relative').hover(function () { $(this).animate({top: '-10px'}, 'fast'); }, function () { $(this).animate({top: 0}, 'fast'); }); </script>
<script type='text/javascript'><!-- // 3-part maintitle d = document.getElementsByTagName('DIV') for (n = 0; n!=-1; n++) { if (d[n].className == 'maintitle' && d[n].parentNode.id != 'ucpmenu' && d[n].parentNode.id != 'ucpcontent') { c = d[n].innerHTML d[n].innerHTML = "<div class='left'><div class='right'><div class='text'>" + c + "</div></div></div>" } } // --></script>
CSS:
Spoiler: click to toggle - Code:
-
#wrap, #ipbwrapper { width: 90%; margin: 100px auto 30px; text-align:left!important; } #container { background: ; padding: 20px; border: 0px solid #080809; } #ipbwrapper #logostrip { display: block; background: transparent; text-align:center; margin-bottom: 50px; } #ipbwrapper #submenu { display: block; width: 100%; text-align:center; padding: 10px; text-transform: uppercase; } #ipbwrapper #submenu a { color: #FFFFFF; padding: 10px 15px; font-weight: bold; text-decoration: none; text-align:center; } #logo { background: transparent; text-align:center; margin-bottom: 60px;} #menu { text-align:center; width: 100%; padding: 10px; text-transform: uppercase; } #menu a { color: #FFFFFF; padding: 10px 15px; font-weight: bold; text-decoration: none; } #menu a:hover, #ipbwrapper #submenu a:hover { position: relative; top: -10px; }
html { overflow-x: auto; overflow-y: auto; }
form { display:inline; } img { vertical-align:middle; border:0px } BODY { font-family: Arial, sans-serif; font-size: 11px; color: #767676; margin:0px 10px 0px 10px;background: #101012 url(http://z3.ifrm.com/2/101/0/p385013/Background.gif) no-repeat top; } TABLE, TR, TD { font-family: Arial, sans-serif; font-size: 11px; color: #767676; } a:link, a:visited, a:active { text-decoration: none; color: #CCCCCC } a:hover { color: #804ca9; text-decoration: none; }
fieldset.search { padding:6px; line-height:150%; border: 0px!important } label { cursor:pointer; }
img.attach { border:0px;padding:2px }
.googleroot { padding:6px; line-height:130% } .googlechild { padding:6px; margin-left:30px; line-height:130% } .googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; } .googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; } .googlepagelinks { font-size:1.1em; letter-spacing:1px } .googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }
li.helprow { padding:0px; margin:0px 0px 10px 0px } ul#help { padding:0px 0px 0px 15px }
option.cat { font-weight:bold; } option.sub { font-weight:bold;color:#CCCCCC } .caldate { text-align:right;font-weight:bold; font-size:11px; color:#804ca9; padding:2px;margin: 5px 5px 0px 50px; } form div.tableborder td.row1 { border:none!important; } form div.tableborder td.row1 .caldate { color:#804ca9;background: url(http://z3.ifrm.com/2/101/0/p385036/mtcenter.gif) repeat-x; border:1px solid #000; border-top: 0px; padding: 4px; }
.warngood { color:green } .warnbad { color:red }
#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }
#profilename { font-size:28px; font-weight:bold; } #calendarname { font-size:22px; font-weight:bold; }
#photowrap { padding:6px; border:1px solid #000;background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; margin: 5px; } div#photowrap table.tablebasic td.row1 { background: none!important; } #phototitle { font-size:13px; color:#804ca9;background: url(http://z3.ifrm.com/2/101/0/p385036/mtcenter.gif) repeat-x; text-transform: uppercase; border: 1px solid #000; padding: 10px; } #photoimg { text-align:center; margin-top:15px }
#ucpmenu { line-height:150%;width:22%; border:1px solid #000;background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; } #ucpmenu div.pformstrip, #ucpcontent div.pformstrip { border-top: 1px solid #000; } #ucpmenu p { padding:2px 5px 6px 9px;margin:0px; } #ucpmenu p a { border-left: 2px solid #CCCCCC; padding: 0px 3px; } #ucpmenu p a:hover { border-left: 2px solid #804ca9; } #ucpcontent { background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; border:1px solid #000;line-height:150%; width:auto } #ucpcontent p { padding:10px;margin:0px; } #ucpmenu .maintitle, #ucpcontent .maintitle { padding-left: 10px; } #ucpcontent .tableborder { width: 98%; margin: 0px auto 0px auto; } #ucpcontent .titlemedium a { color: #CCCCCC; } #ucpcontent td.pformstrip { border: 1px solid #000; border-bottom:0px; background: #09090a url(http://z3.ifrm.com/2/101/0/p385399/pform.gif) top repeat-x; } td#ucpcontent div.tableborder div.titlemedium { border: 1px solid #000; border-bottom:0px; }
#ipsbanner { position:absolute;top:1px;right:5%; } #logostrip, #submenu, #ipbwrapper #submenu img { display:none; } #userlinks { background: transparent }
#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }
.activeuserstrip, .postlinksbar, div.darkrow1 { border-right: 1px solid #000; border-left: 1px solid #000; }
.activeuserstrip, .pformstrip, .postlinksbar { background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; color:#767676;font-weight:bold;padding:7px;margin-top:1px } .pformleft { background: #09090a url(http://z3.ifrm.com/2/101/0/p385399/pform.gif) top repeat-x; padding:6px; margin-top:1px;width:25%; border-left:1px solid #000; border-right:1px solid #000; } .pformleftw { background: #09090a url(http://z3.ifrm.com/2/101/0/p385399/pform.gif) top repeat-x; padding:6px; margin-top:1px;width:40%; border-top:0px solid #000; border-right:1px solid #000; } .pformright { background: #09090a url(http://z3.ifrm.com/2/101/0/p385399/pform.gif) top repeat-x; padding:6px; margin-top:1px;border-right:1px solid #000; } table.tableborder .pformstrip { border: 1px solid #000; border-bottom:0px; background: #09090a url(http://z3.ifrm.com/2/101/0/p385399/pform.gif) top repeat-x; }
.hlight, .dlight, .post1, .post2, .row1, .row2, .row3, .row4 { background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x;} .row4 { background-color: #09090a; } div.row4 { background: transparent!important; border: 0px solid #1b1d1f!important; padding: 2px; }
.post1, .post2 { padding: 20px; }
div div div.row4 { background-color: #09090a!important; padding: 10px; -moz-background-clip: padding!important; -webkit-background-clip: padding!important; background-clip: padding-box!important; border: 10px solid rgba(0,0,0,0.2)!important; margin-bottom: 20px; } td.row4 div.row4 { border: 0px!important; background: none!important; margin:0px!important; }
div.tableborder div.row4 { background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x!important; border: 1px solid #000!important; margin:0px!important; }
.darkrow1, .darkrow2, .darkrow3 { background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; }
div.darkrow2 { border: 1px solid #000; border-top:0px; } div.darkrow3 { border: 0px!important; background: none!important; }
.titlemedium { font-weight:bold; color:#804ca9; padding:7px; margin:0px; background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; } .titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #CCCCCC }
.plainborder { border:0px solid #000;background: none; } .plainborder .maintitle { padding:6px 0px 6px 0px; text-align: center; border:0px; } .plainborder table { border:0px; background-color:#000 }
.tableborder { border:5px solid #1b1d1f;background-color:#000; padding:0px; margin:0px; margin-top: 20px; width:100%; -moz-border-radius-topright: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-right-radius: 8px; -webkit-border-top-left-radius:8px; border-top-right-radius: 8px; border-top-left-radius: 8px; }
.tablefill { background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; border: 1px solid #000; padding:6px; } .tablepad { background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; border: 1px solid #000; padding:6px } .tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }
.wrapmini { float:left;line-height:1.5em;width:25% } .pagelinks { float:left;line-height:1.2em;width:35% }
.desc { font-size:10px; color:#767676 } .edit { font-size: 9px }
.signature { font-size: 10px; color: #CCCCCC } .postdetails { font-size: 10px } .postcolor { font-size: 12px; line-height: 160% }
.normalname { font-size: 12px; font-weight: bold; color: #CCCCCC; padding-left: 10px; } .normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px } .unreg { font-size: 11px; font-weight: bold; color: #900 }
.searchlite { font-weight:bold; color:#CCCCCC; background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; }
#QUOTE, #CODE { font-family: Arial; font-size: 11px; color: #767676; background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x!important; border: 1px solid #000; padding: 10px; }
.post1 table, .post2 table { background: #0f0f10 url(http://z3.ifrm.com/2/101/0/p385036/mtcenter.gif) repeat-x; padding: 4px 0px 0px 0px; border: 1px solid #000; border-top: 0px; } td.post1 table b, td.post2 table b { color:#FFFFFF!important; padding-left: 20px; }
.copyright { font-family: Arial, Sans-Serif; font-size: 9px; line-height: 12px }
.codebuttons { font-size: 11px; font-family: Arial, helvetica, sans-serif; vertical-align: middle; color:#CCCCCC;background: url(http://z3.ifrm.com/2/101/0/p385036/mtcenter.gif) repeat-x; border: 1px solid #000; padding: 5px 2px; margin: 2px; } .codebuttons:hover { color: #804ca9} select.codebuttons { color: #000; } .forminput, .textinput, .radiobutton, .checkbox, textarea { font-size: 11px; font-family: arial, helvetica, sans-serif; vertical-align: middle; background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; border: 1px solid #000; color: #CCCCCC; padding: 4px; }
.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:0px solid #FFF;border-bottom:0px solid #FFF }
.purple { color:purple;font-weight:bold } .red { color:red;font-weight:bold } .green { color:green;font-weight:bold } .blue { color:blue;font-weight:bold } .orange { color:#F90;font-weight:bold }
/* MAINTITLE */ .maintitle { font-weight:bold; color:#804ca9;background: url(http://z3.ifrm.com/2/101/0/p385036/mtcenter.gif) repeat-x; text-transform: uppercase; font-size: 13px; padding: 13px 0px 8px 0px; text-align: left; } .maintitle .left { border: 0px; background: url(http://z3.ifrm.com/2/101/0/p385037/mtleft.gif) no-repeat top left; } .maintitle .right { border: 0px; background: url(http://z3.ifrm.com/2/101/0/p385038/mtright.gif) no-repeat right top; height: auto; } .maintitle img { display:none; }
div.tableborder div.maintitle { padding: 0px; }
.maintitle .text { border: 0px; text-align: left; padding: 13px 0px 8px 50px; } .maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #804ca9} .maintitle a:hover { text-decoration: none;color:#CCCCCC } .maintitle img{ display:none; } td.maintitle { border-right: 1px solid #000; border-left: 1px solid #000; } table.tablebasic td.maintitle { padding-left: 10px; }
input.row1 { color: #CCCCCC; background: none!important; margin: 2px!important; font-family: arial!important; }
/*SEARCH*/ div.tableborder div.tablepad { background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x!important; border: 1px solid #000; } div.tableborder div.tablepad table { background: transparent!important; } div.tableborder div.tablepad table font { font-family:"Arial", "Bitstream Vera Sans", "Verdana", sans-serif; font-size: 12px;color: #CCCCCC; } div.tableborder div.tablepad input {font-family: "Arial", "Bitstream Vera Sans", "Verdana", sans-serif; font-size: 12px; vertical-align: middle; color: #CCCCCC; background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x!important; border: 1px solid #000; margin: 1px; } div.tableborder div.tablepad img { display: none; }
/*PORTAL*/ #ipbwrapper .maintitle { padding: 10px; border: 1px solid #000; } #ipbwrapper td.row4 div.tableborder div.desc { background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x!important; border: 1px solid #000; } #ipbwrapper td.row4 div.tableborder div.row2 { border: 1px solid #000; border-bottom:0px; } #ipbwrapper td.row2 { border: 1px solid #000; border-top:0px; } #ipbwrapper .post1 { border: 1px solid #000; border-top:0px; padding: 4px; } #ipbwrapper table.tableborder, div#ipbwrapper table.tableborder td.row4 { border: 0px!important; background: transparent!important; }
/*POLL*/ div.tablepad td { background:transparent!important;} form div.pformstrip { border-right: 1px solid #000; border-left: 1px solid #000; border-bottom: 0px!important; } form div.tablepad { border-bottom: 0px!important; }
/* Registration Page*/ table.tablebasic .pformleft, table.tablebasic .pformleftw, table.tablebasic .pformright {background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x!important; border:0px!important;} table.tablebasic .row1 { padding: 4px; } table.tablebasic { border-collapse:seperate; border-spacing:1px; }
/*BMA*/ .tablefill .pformstrip { border: 0px!important; background: none; } .tablefill .tableborder {background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; border-right: 1px solid #000; border-left:1px solid #000; border-bottom: 1px solid #000; } .tablefill .pformright, .tablefill .pformleft {border:0px; background: none;} .tablefill .titlemedium { padding:5px;margin-top:1px;font-size:11px; background: #09090a url(http://z3.ifrm.com/2/101/0/p385035/pixel.gif) top repeat-x; border-top: 1px solid #000; }
Edited by Helena, Jun 21 2012, 03:54 PM.
|
|
|
| |
|
Pando
|
Jan 10 2011, 04:30 AM
Post #2
|
- Posts:
- 3,202
- Group:
- Members
- Member
- #384,273
- Joined:
- April 16, 2010
|
epic as usual Leonardo, you must make a ZB version and graphics!
Also, if you were to use a PNG as the background then use a PNG compressor it would look a lot better
|
|
|
| |
|
Leonardo
|
Jan 10 2011, 04:43 AM
Post #3
|
- Posts:
- 7,637
- Group:
- Members
- Member
- #256,601
- Joined:
- March 10, 2007
|
The background is a .gif but if you are referring to the logo, it looks fine for me in Windows and all browsers (perhaps it's a Mac thing?).
|
|
|
| |
|
Pando
|
Jan 10 2011, 04:54 AM
Post #4
|
- Posts:
- 3,202
- Group:
- Members
- Member
- #384,273
- Joined:
- April 16, 2010
|
- Leonardo
- Jan 10 2011, 04:43 AM
The background is a .gif but if you are referring to the logo, it looks fine for me in Windows and all browsers (perhaps it's a Mac thing?). I'm referring to the .gif background. If you were to save as a PNG then use compressor the image wouldn't be such a big file size and there would be no posterization (or browser HEX code incompatibilities). And since you're using JQuery you can try caching the image.Spoiler: click to toggle - Code: HTML
-
<script type="text/javascript"> //<![CDATA[ <img src="http://z3.ifrm.com/2/101/0/p385013/Background.gif" class="cache" alt="" /> //]]> </script>
|
|
|
| |
|
Leonardo
|
Jan 10 2011, 05:09 AM
Post #5
|
- Posts:
- 7,637
- Group:
- Members
- Member
- #256,601
- Joined:
- March 10, 2007
|
- Pandorasaurus
- Jan 10 2011, 04:54 AM
- Leonardo
- Jan 10 2011, 04:43 AM
The background is a .gif but if you are referring to the logo, it looks fine for me in Windows and all browsers (perhaps it's a Mac thing?).
I'm referring to the .gif background. If you were to save as a PNG then use compressor the image wouldn't be such a big file size and there would be no posterization (or browser HEX code incompatibilities). And since you're using JQuery you can try caching the image. Spoiler: click to toggle - Code: HTML
-
<script type="text/javascript"> //<![CDATA[ <img src="http://z3.ifrm.com/2/101/0/p385013/Background.gif" class="cache" alt="" /> //]]> </script>
Yes it would cut down the file size but 64kb isn't that much of a worry
|
|
|
| |
|
Nimor
|
Jan 10 2011, 01:02 PM
Post #6
|
- Posts:
- 506
- Group:
- Members
- Member
- #386,658
- Joined:
- October 2, 2010
|
Epic! Simply epic.
|
|
|
| |
|
dpk.
|
Jan 10 2011, 02:43 PM
Post #7
|
- Posts:
- 57
- Group:
- Members
- Member
- #383,874
- Joined:
- March 16, 2010
|
Converted to ZB = godly theme.
It's amazing how it is, now.
|
|
|
| |
|
renegade-xx.
|
Jan 10 2011, 04:26 PM
Post #8
|
- Posts:
- 248
- Group:
- Members
- Member
- #275,452
- Joined:
- May 30, 2007
|
i love this.
|
|
|
| |
|
ChanceOL
|
Jan 10 2011, 04:45 PM
Post #9
|
- Posts:
- 255
- Group:
- Members
- Member
- #349,380
- Joined:
- July 17, 2008
- I'm Browsing With
- Chrome
- Latest Design
- http://i.imgur.com/yVEpvQx.png
|
Really nice work there Leonardo!
|
|
|
| |
|
UnstoppableForce
|
Jan 10 2011, 06:04 PM
Post #10
|
- Posts:
- 143
- Group:
- Members
- Member
- #165,907
- Joined:
- April 16, 2006
|
Really nice skin there Leonardo. I agree, would make an excellent ZB theme.
|
|
|
| |
|
Swim-ZNR
|
Jan 10 2011, 09:14 PM
Post #11
|
- Posts:
- 352
- Group:
- Members
- Member
- #385,894
- Joined:
- August 7, 2010
- Latest Design
- Pink Envy, Red vs Blue
|
Agreed about ZB. You NEED to convert it Leonardo.
|
|
|
| |
|
Raymond
|
Jan 10 2011, 09:16 PM
Post #12
|
- Posts:
- 3,688
- Group:
- Members
- Member
- #260,090
- Joined:
- March 24, 2007
|
Word! This is sick!
|
|
|
| |
|
skyrocket
|
Jan 10 2011, 09:56 PM
Post #13
|
- Posts:
- 1,455
- Group:
- Members
- Member
- #325,576
- Joined:
- February 9, 2008
|
NIce to see something new from you Leonardo. I love this theme.
|
|
|
| |
|
Delirium
|
Jan 11 2011, 05:19 AM
Post #14
|
- Posts:
- 5,686
- Group:
- Members
- Member
- #83,901
- Joined:
- June 24, 2005
|
- Pandorasaurus
- Jan 10 2011, 04:30 AM
Also, if you were to use a PNG as the background then use a PNG compressor it would look a lot better 
I really like this, Leo, great job on it.
|
|
|
| |
|
Leonardo
|
Jan 11 2011, 06:13 AM
Post #15
|
- Posts:
- 7,637
- Group:
- Members
- Member
- #256,601
- Joined:
- March 10, 2007
|
Thanks guys. Appreciate it.
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|