1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.



Invisionfree A Face In The Smoke [!]

Discussion in 'Dark Skins' started by Lockawinest, Apr 24, 2010.

  1. Offline

    Lockawinest Member

    Member Since:
    Jan 23, 2008
    Total Posts:
    353
    Likes Received:
    1
    • Awards
    Name of Skin: A Face In The Smoke
    Skin Maker: Lockawinest
    Forum Software: Invisionfree
    Color Scheme: Dark
    Custom notes: Edit at your own risk, javascript especially. Built for Chrome and Firefox since IE doesn't support css3. Sidebar components specifically marked for easy removal.

    Sidebar is easy most section by section codes should work. I use Metallicar's sidebar image code here.

    As for the sidebar handle, it's included in the tab folder, WHICH WAS PREVIOUSLY MISSING but is now uploaded. There is a blank tab you can use to make new tabs.

    Aside from the Sidebar, please keep the same.

    Live Preview: A Face In The Smoke
    Screen Shot: [IMG]
    Graphics? Graphics
    Codes:

    Javascript (for sidebar)
    Code: Select
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.1.js"></script>

<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',							  //class of the element that will be your tab
pathToTabImage: 'Sidebar tab image',		  //path to the image for the tab *required*
imageHeight: '21px',							   //height of tab image *required*
imageWidth: '143px',							   //width of tab image *required*    
tabLocation: 'top',					  //side of screen where tab lives, top, right, bottom, or left
speed: 300,							   //speed of animation
action: 'click',						  //options: 'click' or 'hover', action to trigger animation
topPos: '50%',						  //position from the top/ use if tabLocation is left or right
leftPos: '10px',						  //position from left/ use if tabLocation is bottom or top
fixedPosition: false					 //options: true makes it stick(fixed position) on scroll
});

});

</script>
    Header
    Code: Select
      <!-- required for sidebar -->
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html"></a>
<center><br><br>
SIDEBAR TEXT
</center><br><br></div>
<!-- required for sidebar -->

<center><table><td><br><br><table class="trans" cellpadding="10" cellspacing="0" width="800"style="padding: 40px;" valign="top" height="100%">
<tr> <td><center>
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<br>
<center>SKIN - <u>A Face In The Smoke</u> and all the corresponding graphics &#169; of <a href="http://rpg-directory.com/index.php?showuser=6435">Lockawinest</a> at RPG-Directory</center><br>
    Footer
    Code: Select
    </table><br><br>
    CSS
    Code: Select
    html { overflow-x: hidden; overflow-y: auto; }

.trans { background-image: url(http://i136.photobucket.com/albums/q194/DeturaTangerine/Smoke/innerbg-1.png); padding: 0px;border-top:0px solid #000;border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;-moz-border-radius: 10px 10px; }

.table{background-color:#000000; border: 6px solid #0f0f0f;}

form { display:inline; }
img  { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #7C7C7C; margin:0px 10px 0px 10px;background-color:#000; background-image: url(http://i136.photobucket.com/albums/q194/DeturaTangerine/Smoke/smokebg.png)}
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px;;}
a:link, a:visited, a:active { text-decoration: none; color: #696969 }
a:hover { color: #B0B0B0; text-decoration:none }


fieldset.search {background-image: url(http://i136.photobucket.com/albums/q194/DeturaTangerine/Smoke/innerbg-1.png); padding:6px; line-height:150% }
label { cursor:pointer; }

img.attach { border:2px outset #EEF2F7;padding:2px }
.googleroot  { padding:6px; line-height:130%; }
.googlechild { padding:6px; margin-left:30px; line-height:130%;background-image: url(http://i136.photobucket.com/albums/q194/DeturaTangerine/Smoke/innerbg.png); }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:10px; color: #696969; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#696969; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#696969 }


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:#161617 }
.caldate   { text-align:center;font-weight:bold;font-size:10px;color:#000;background-image: url(http://i136.photobucket.com/albums/q194/DeturaTangerine/Smoke/forumbar.png); background-position: center;border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px; -moz-border-radius-topleft:	 10px 10px;
-moz-border-radius-topright:    10px 10px; }

.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; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg   { text-align:center; margin-top:15px }

#ucpmenu    { line-height:150%;width:22%; background-color: #000;border:1px solid #000; }
#ucpmenu p  { padding:2px 5px 6px 10px;margin:0px; }
#ucpcontent { background-color: #000;border:1px solid #000;line-height:150%; width:auto }
#ucpcontent p  { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { padding:0px;margin:0px; }
#submenu   {display: none; background-color: #000;border-bottom:2px solid #000; font-size:10px;margin:3px 0px 3px 0px;color:#161617;font-weight:bold;}
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #696969; }
#subemenu a:hover { color: #0A1D26;}
#submenu img { display: none; }

#userlinks { background-color: #000;border-top:2px solid #000;border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px; -moz-border-radius: 10px 10px;}
#userlinks a:link, #userlinks a:visited, #userlinks a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #696969; }
#userlinks a:hover { color: #B0B0B0;}

#navstrip  { font-weight:bold;padding:6px 0px 6px 0px; }

.activeuserstrip { background-color: #000;border:1px solid #000; padding:6px }

.pformstrip { background-color: #000;font-weight:bold;padding:7px;margin-top:1px; border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
-moz-border-radius-bottomright: 10px 10px;
-moz-border-radius-bottomleft:  10px 10px; }
.pformleft  { background-color: #000; padding:6px; margin-top:1px;width:25%; border-top:1px solid #000; border-bottom:0px solid #000; }
.pformleftw { background-color: #000; padding:6px; margin-top:1px;width:40%; border-top:1px solid #000; }
.pformright { background-color: #000; padding:6px; margin-top:1px;border-top:1px solid #000; }

.post1 { background-color: #000;border:1px solid #000; }
.post2 { background-color: #000;border:1px solid #000; }
.postlinksbar { background-color: #000;border:0px solid #000;padding:7px;margin-top:1px;font-size:10px;}

.row1 { background-color: #000;border:1px solid #000; }
.row2 { background-color: #000;border:1px solid #000; border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px; -moz-border-radius: 10px 10px; }
.row3 { background-color: #000;border:1px solid #000; }
.row4 {border:1px solid #000;background-color: #000;border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px; -moz-border-radius: 10px 10px; }

.darkrow1 {background-color:#000;border:1px solid #000;border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px; -moz-border-radius: 10px 10px; }
.darkrow2 { background-color: #000;border:1px solid #000;border-bottom-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px; -moz-border-radius-bottomright: 10px 10px;
-moz-border-radius-bottomleft:  10px 10px; }
.darkrow3 { background-color: #000;border:1px solid #000; background-image: url(http://i136.photobucket.com/albums/q194/DeturaTangerine/Smoke/div1-1-1.png); background-position: bottom; background-repeat: no-repeat; vertical-align: text-top  }

.hlight { background-color: #000;border:1px solid #000; }
.dlight { background-color: #000;border:1px solid #000; }

.titlemedium { font-weight:bold; color:#161617; text-align:center; padding:0px; margin:0px; background-color: #000;border:1px solid #000;background-image: url(http://i136.photobucket.com/albums/q194/DeturaTangerine/Smoke/forumbar.png); background-position: center; border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px; -moz-border-radius-topleft:	 10px 10px;
-moz-border-radius-topright:    10px 10px; }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: none; color: #696969; }

.maintitle { vertical-align:middle;font-weight:bold; color:#fff;font-size:22px;font-family: book antiqua; letter-spacing:1px; padding:0px 0px 0px 5px; border:1px solid #000; border-bottom:0px solid #5B2121; border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px; background-color: #000;-moz-border-radius-topleft:	 10px 10px;
-moz-border-radius-topright:    10px 10px; }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #fff }
.maintitle a:hover { text-decoration: none; color:C1C1C1 }

.plainborder { border:4px solid #000;background-color:#000 }

.tablefill   { background-color: #000;border:1px solid #262626; border-top:1px solid #262626;padding:6px;  }
.tablepad { background-color:#090909;padding:6px }
.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }
.tableborder {background-color:#000;border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px; -moz-border-radius: 10px 10px; }

.wrapmini    { float:left;line-height:1.5em;width:25% }
.pagelinks   { float:left;line-height:1.2em;width:35% }

.desc { font-size:10px; color:#BEBEBE }
.edit { font-size: 10px }

.signature   { font-size: 10px; color: #BEBEBE }
.postdetails { font-size: 10px }
.postcolor   { font-size: 10px; line-height: 160% }

.normalname { font-size: 12px; font-weight: bold; color: #BEBEBE }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 10px; font-weight: bold; color: #BEBEBE }

.searchlite { font-weight:bold; color:#BEBEBE; background-color:#FF0 }

#QUOTE { font-family: Verdana, Arial; font-size: 10px; color: #898989; border: 0px solid #3D3D3D; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE  { font-family: Verdana, Arial; font-size: 8px; color: #898989; border: 0px solid #3D3D3D; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
.post1 table, .post2 table { padding: 0px; margin: 8px 0px 2px 0px;  border:1px solid #3D3D3D; color:#898989; }

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 10px; line-height: 12px; border:0px; }

.codebuttons  { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; background-color: #000;border:1px solid #000;color:#fff }
.forminput, .textinput, .radiobutton, .checkbox  { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; background-color: #000;border:1px solid #262626;color:#fff }

.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #000;border-bottom:1px solid #000 }

.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 }



#ipbwrapper { display: none; }
#submenu td:first-child { display: none; }


.slide-out-div {
padding-right: 8px; padding-left: 8px;  width: 200px;  background-image: url(http://i136.photobucket.com/albums/q194/DeturaTangerine/Smoke/innerbg-1.png); border: #000 0px solid;border-bottom-left-radius: 10px 10px;
-moz-border-radius-bottomlight: 10px 10px;
<!-- required for sidebar --> }   

.handle  {
background-color: #000; background-image: url(http://i136.photobucket.com/albums/q194/DeturaTangerine/Smoke/forumbar.png); background-position: center;border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
-moz-border-radius-bottomright: 10px 10px;
-moz-border-radius-bottomleft:  10px 10px;  border:0px solid #000;color:#151515;height:32px;width:200px;
<!-- required for sidebar -->}
    Lockawinest, Apr 24, 2010
    #1
  2. Offline

    seanbear. 1560.

    • 'D Contributor
    Member Since:
    Mar 2, 2007
    Total Posts:
    10,481
    Likes Received:
    92
    Gender:
    Male
    <div align=center><span style='font-size:17pt;line-height:100%'>DARK SKIN ARCHIVED</span>
    <span style='font-size:11pt;line-height:100%'>[color=7f323a]THANK YOU FOR YOUR SUBMISSION[/color]</span>
    Thank you for submitting to our skindex and contributing to making forums pretty everywhere! We appreciate your hard work, and look forward to seeing more from you!</div>
    seanbear., Apr 24, 2010
    #2
  3. Offline

    Arqueete Member

    Member Since:
    Feb 5, 2010
    Total Posts:
    142
    Likes Received:
    1
    Collapsible sidebar. This intrigues me.
    Arqueete, Apr 25, 2010
    #3
  4. Offline

    Lockawinest Member

    Member Since:
    Jan 23, 2008
    Total Posts:
    353
    Likes Received:
    1
    • Awards
    Thank you guys yet again!
    Lockawinest, Apr 29, 2010
    #4
  5. Offline

    blueberry pie New Member

    Member Since:
    Mar 18, 2010
    Total Posts:
    8
    Likes Received:
    1
    still working on revamping the site but it can be found HERE
    blueberry pie, May 4, 2010
    #5
  6. Offline

    Lint Roller Queen Mother

    • Support Skinner
    Member Since:
    Jan 14, 2009
    Total Posts:
    4,688
    Likes Received:
    1,675
    Gender:
    Female
    Location:
    Northern California
    • Awards
    <div align=center><span style='font-size:17pt;line-height:100%'>LISTED AS 'WOW' SKIN</span>
    <span style='font-size:11pt;line-height:100%'>[color=7f323a]THANK YOU FOR YOUR SUBMISSION[/color]</span>
    We've noticed this is a skin that catches the eye and is very aesthetically pleasing. Therefore we'd like to commend your efforts and have added you to the 'WOW Skins Thread. Congratulations!</div>
    Lint Roller, May 4, 2010
    #6
  7. Offline

    Lint Roller Queen Mother

    • Support Skinner
    Member Since:
    Jan 14, 2009
    Total Posts:
    4,688
    Likes Received:
    1,675
    Gender:
    Female
    Location:
    Northern California
    • Awards
    <div align=center><span style='font-size:17pt;line-height:100%'>LISTED IN THE SKINDEX</span>
    <span style='font-size:11pt;line-height:100%'>[color=7f323a]THANK YOU FOR YOUR SUBMISSION[/color]</span>
    We have added your work to the RPG-D Skindex. Thank you for your hard work!</div>
    Lint Roller, May 8, 2010
    #7
  8. Offline

    Remus Asriel Citius, Altius, Fortius. Impossible is nothing.

    Member Since:
    Feb 3, 2009
    Total Posts:
    1,411
    Likes Received:
    133
    Gender:
    Male
    Location:
    London
    Considering adapting the collapsible sidebar into The Aurora's new skin! Thanks a lot!
    Remus Asriel, May 21, 2010
    #8
  9. Offline

    Xerxes Member

    Member Since:
    Feb 23, 2010
    Total Posts:
    22
    Likes Received:
    0
    Whoa, this skin is awesome... I love the sidebar too! I wish I had a site I could use this on...
    Xerxes, May 22, 2010
    #9
  10. Offline

    wanderer The Terrifying Little Monster

    Member Since:
    Dec 30, 2009
    Total Posts:
    159
    Likes Received:
    36
    Gender:
    Female
    Location:
    England
    I am in complete awe of this skin, that sidebar is freaking amazing! Will definately adapt your skin to use here:
    http://z13.invisionfree.com/right_beside_you/index.php
    With full credit to you and your amazingness of course :p
    I hope you don't mind some minor edits to match the site, let me know if they are a problem. <3
    wanderer, Oct 13, 2011
    #10
  11. Offline

    paulad Insanity ROCKS!

    Member Since:
    Mar 26, 2011
    Total Posts:
    6
    Likes Received:
    1
    Gender:
    Female
    Location:
    Argentina
    Not opened yet and we truly hope you wouldn't mind that we changed so things, we just can't seem to figure out how to make the sidebar work :(

    http://z13.invisionfree.com/Its_Far_From_Over/index.php?
    paulad, Nov 8, 2011
    #11

Share This Page