SERENITY -> CSS & HTML

CSS & HTML

Track this topic | Email this topic | Print this topic

Admin

Posted: Feb 8 2011, 06:26 AM

quote

Administrator

Group: Admin
Posts: 6
Member No.: 1
Joined: 1-September 10

To get the nifty rounded buttons, put these in your ACP > Images:

CODE

<div class="topicbutton">TEXT</div>

<div class="postbutton">TEXT</div>

<div class="minbutton" style="position: relative; top: -10px;">TEXT</div>

Topic buttons: locked, poll only, add reply, new topic, new poll, topic options, new event.

Post buttons: quote, edit, report, delete

Min buttons: yim, aol, msn, icq, card, pm, www, ^^^, email.

For proper positioning for the right-aligned ^^^ button, which takes you to the top of the page, use <div class="minbutton" style="position: relative; top: -4px;">^^^</div>.

Header/body:

CODE

<table align="center" width="880px" style="background-color: #ebe9ea; border-radius: 30px; -moz-border-radius: 30px;"><tr><td colspan="2" width="800px" style="background-color: #ebe9ea; padding-top: 10px; border-radius: 30px; -moz-border-radius: 30px;">
<table align="center" class="toptable" cellspacing="0" cellpadding="0"><td><div id="linkbar"> <a href="http://z7.invisionfree.com/novia01/index.php?act=site">PORTAL</a>     <a href="http://z7.invisionfree.com/novia01/index.php?">INDEX</a>    
<a href="http://z7.invisionfree.com/novia01/index.php?act=Help">HELP</a>    
<a href="http://z7.invisionfree.com/novia01/index.php?act=Search&f=">SEARCH</a>    
<a href="http://z7.invisionfree.com/novia01/index.php?act=Members">MEMBERS</a>    
<a href="http://z7.invisionfree.com/novia01/index.php?act=calendar">CALENDAR</a></div>

<% BOARD HEADER %>
<% NAVIGATION %></td></table>

</td></tr>

<tr>
<td valign="top">
<div class="sidebar"><div class="maintitle"><img src="http://img.photobucket.com/albums/v638/marvolo/legerdemain/sidebar1-2.png"></div>
<div class="sbbg"><div class="sbtitle">sidebar text</div>
<div class="sbdesc">This sidebar will expand to fit your text.
<br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div></div>

<div class="sbbg"><div class="sbtitle">sidebar text</div>
<div class="sbdesc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div></div>

<div class="sbbg"><div class="sbtitle">sidebar text</div>
<div class="sbdesc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div></div></div>

</td>

<td width="750px" class='0' valign="top" style="padding-right: 5px;">
<% BOARD %>
<% STATS %>

Footer:

CODE

<div class="credit" align="center">Skin by <b> novia</b> of <a href="http://forums.redcarpetrebellion.org/" target="_blank">RED CARPET & REBELLION</a>, <a href="http://rpg-directory.com">RPG-D</a>, and <a href="http://z10.invisionfree.com/shadowplay">Shadowplay</a>.</div><br></td></tr></table><br>

CODE

html { overflow-x: hidden; overflow-y: auto; }

form { display:inline; }
img �{ vertical-align:middle; border:0px }
BODY { font-family: �georgia, times, serif; font-size: 10px; color: #766c6c; margin: 10px; background-color: #dddddd; }
TABLE, TR, TD { font-family: georgia, serif; font-size: 10px; color: #766c6c; border-collapse: collapse; }
a:link, a:visited, a:active { text-decoration: none; color: #918989; }
a:hover { color: #aaa4a4; text-decoration: none; }

fieldset.search { background-color: #dddddd; line-height:150%; border-radius: 30px; -moz-border-radius: 30px; padding: 10px; border: 0px; position: relative; left: -270px; width: 300px; }
.search legend strong { font-weight: normal!important; position: relative; top: 10px; text-shadow: 0px 0px 3px #efefef; }
label { cursor:pointer; }

div.row4 ins, iframe#google_ads_frame2 { position: relative!important; left: -32px!important; }

img.attach { 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: #7b706f; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; 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 { }
option.sub { color:#555 }
.caldate { text-align: center; font-size:9px; color:#787878; background-color:#d2d2d2; padding:5px; margin:0px }

.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; }
#calendarname { font-size:22px; }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid 5e5657 }
#photoimg � { text-align:center; margin-top:15px }

#ucpmenu � �{ line-height:150%;width:22%; }
#ucpmenu p �{ padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { line-height:150%; width:auto }
#ucpcontent p �{ padding:10px;margin:0px; }

td#ucpcontent { background-color: #d5d5d5; border-radius: 50px 50px 0px 0px; -moz-border-radius: 50px 50px 0px 0px; }

#ipbwrapper { background-color: #ebe9ea; width: 880px; margin-right: auto; margin-left: auto; border-radius: 30px; -moz-border-radius: 30px; padding: 20px; }
#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:0px; padding:6px 0px 12px 0px; text-align:center }
#submenu �{ display:none; }
table#userlinks { text-align: center!important; text-transform: uppercase; letter-spacing: 1px; width: 750px; margin-left: auto; margin-right: auto; }
table#userlinks strong, table#userlinks b { font-style: italic; font-weight: normal; }
table#userlinks td, div#linkbar { text-align: center!important; font-size: 8px!important; padding: 20px 0px; margin: 0px; }

#linkbar { text-align: center!important; text-transform: uppercase; letter-spacing: 1px; width: 750px; margin-left: auto; margin-right: auto; background-image: url(http://img.photobucket.com/albums/v638/marvolo/mainfade.png); border-radius: 30px 30px 0px 0px; -moz-border-radius: 30px 30px 0px 0px; padding: 20px 0px; }

#navstrip �{ text-align:center; text-transform: uppercase; letter-spacing: 1px; width: 750px; margin-left: auto; margin-right: auto; font-size: 8px; padding: 4px 0px 10px 0px; position: relative; top: -65px; }

.pformleft �{ background-color: #dddddd; padding:2px; margin-top:2px;width:25%; text-align: center; text-shadow: 0px 0px 3px #efefef; }
.pformleftw { background-color: #dddddd; padding:6px; margin-top:2px;width:40%; }
.pformright { background-color: #dddddd; padding:2px; margin-top:1px; }
div.desc strong a, th.titlemedium a b { font-weight: normal!important; }
.postlinksbar strong a, .pformleft b, td.row3 strong { font-weight: normal!important; letter-spacing: 1px; }

.postlinksbar a:link, .postlinksbar a:visited, .postlinksbar a:active { color: #9a9494 }

.row1, .post1, .post2, input.row1, .row3 { background-color: #dddddd }

.row2, .row4, #ucpcontent p, #ucpmenu p { background-color: #d5d5d5 }

.row4 b a { font-size: 9px; font-weight: normal!important; position: relative; left: 20px; font-style: italic; text-transform: uppercase; letter-spacing: 1px; }

div.row4 { padding: 5px!important; padding-bottom: 2px!important; text-transform: uppercase!important; font-size: 8px!important; border-color: transparent!important; width: 600px!important; margin-left: auto; margin-right: auto; text-align: center; border-radius: 20px 20px 0px 0px; -moz-border-radius: 20px 20px 0px 0px; }

.credit { background-color: #d5d5d5; text-transform: uppercase!important; font-size: 8px!important; border-color: transparent!important; width: 600px!important; margin-left: auto; margin-right: auto; text-align: center; padding: 5px; padding-bottom: 10px; position: relative; top: -5px; border-radius: 0px 0px 20px 20px; -moz-border-radius: 0px 0px 20px 20px; }

.darkrow1, .wrapmini { display:none; }
.darkrow2 { background-image: url(http://img.photobucket.com/albums/v638/marvolo/darkrowcontainer.png); background-repeat: no-repeat; height: 85px; color: #7b706f; }
.darkrow3 { background-color: #d5d5d5; padding-top: 5px; color:#7b706f; }

.hlight { background-color: #d5d5d5 }
.dlight { background-color: #e3e2e1 }

.titlemedium, .pformstrip, .activeuserstrip, .postlinksbar, input.row1 { font-weight: normal; font-size: 9px!important; font-family: georgia!important; text-align:center; color: #a29b9b!important; padding:2px; margin:0px; background-color: #d5d5d5; text-transform: uppercase; text-shadow: 0px 0px 3px #ffffff; }
.titlemedium �a:link, .titlemedium �a:visited, .titlemedium �a:active �{ color: #7b706f }

.activeuserstrip { margin-bottom: 20px; }

.maintitle { border-radius: 50px 50px 0px 0px; -moz-border-radius: 50px 50px 0px 0px; font-family: georgia; font-size: 20px; vertical-align middle; text-align: center; font-weight: light; color: #766c6c; padding: 17px 20px 4px 5px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/mainfade.png); text-transform: uppercase; text-shadow: 0px 0px 2px #efefef; }
.maintitle b { font-weight: normal!important; font-style: italic; }
.maintitle a:link, .maintitle �a:visited, .maintitle �a:active { color: #766c6c; text-decoration: none; }
.maintitle a:hover { color: #a69fa0; }

.plainborder { background-color:#d5d5d5; border-radius: 50px 50px 0px 0px; -moz-border-radius: 50px 50px 0px 0px; margin-top:10px; }
.tableborder { padding:0px; margin:0px; width: 100%; }
.tablefill � { background-color: #d5d5d5; padding:2px; }
table.tablefill b { font-weight: normal!important; text-transform: uppercase; }
.tablepad � �{ background-color:#d5d5d5;padding:6px }
.tablebasic �{ width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }

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

.desc { font-size: 9px; color:#766C6C; display: block; padding: 10px; background-image: url(http://i55.tinypic.com/20rahzp.png); background-position: 40px 0px; text-align: center; margin: 1px 20px; }
.edit { font-size: 9px }

.signature � { font-size: 10px; }
.postdetails { font-size: 10px }
span.postdetails { display: block; text-align: center; font-style: italic; }
span.postdetails b a { display: none; }
div.row4 span { position: relative; left: -40px; }
.postcolor � { font-size: 11px; line-height: 160%; padding: 5px; }

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

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

#QUOTE { font-family: georgia, Arial; font-size: 10px; color: #5a5a5a; background-color: #d2d2d2; padding: 6px; margin-right: 10px; margin-left: 5px }
#CODE �{ font-family: Verdana, Arial; �font-size: 9px; color: #544242; background-color: #d2d2d2; padding6px; margin-right: 10px; margin-left: 5px }

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

.codebuttons �{ background-color: #d5d5d5; font-size: 9px; font-family: georgia; vertical-align: middle; border: 1px solid transparent; margin:1px; padding: 1px 3px; color: #6c665e; text-shadow: 0px 0px 2px #efefef; }
.codebuttons:hover { border: 1px solid #bfbdbd; }

.textinput { font-family: georgia, verdana, sans-serif; font-size: 11px; border: 0px; background-color: #d5d5d5; padding: 5px; color: #504846; margin-top: 3px; text-align: left!important; }
.forminput, .radiobutton, .checkbox �{ font-family: georgia; font-size: 10px; vertical-align: middle; color: #5e5657; padding: 3px; background-color: #d5d5d5!important; border-color: #d5d5d5!important; text-align: center!important; border: 0px!important; margin: 1px; text-shadow: 0px -2px 4px #ffffff; }
select.forminput, .pformright textarea { background-color: #d5d5d5!important; border-color: #d5d5d5!important; font-family: georgia!important; border: 0px; }

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

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

.toptable { width: 750px; background-color: #d5d5d5; border-radius: 30px; -moz-border-radius: 30px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/topcontainer.png); background-position: bottom center; background-repeat: no-repeat; padding: 0px 0px 85px 0px; }

.sidebar { margin: 0px 5px; padding-bottom: 100px; width: 251px; border-radius: 50px; -moz-border-radius: 50px; background-image: url(http://img.photobucket.com/albums/v638/marvolo/widebarfooter.png); background-repeat: no-repeat; background-position: center bottom; background-color: #d5d5d5; }

.sbbg { background-image: url(http://img.photobucket.com/albums/v638/marvolo/30lightgrey.png); border-radius: 10px; -moz-border-radius: 10px; padding: 5px; margin-bottom: 20px; }
.sbtitle { font-size: 20px; vertical-align middle; text-align: center; color: #766c6c; text-transform: uppercase; text-shadow: 0px 0px 2px #efefef; }
.sbdesc { font-size: 9px; color:#766C6C; display: block; padding: 5px; background-image: url(http://i55.tinypic.com/20rahzp.png); background-position: 40px 0px; background-repeat: none; text-align: center; margin: 2px; background-color: #d2d2d2; }

.minbutton, .topicbutton, .postbutton { font-size: 9px; display: inline!important; padding: 10px; background-image: url(http://i55.tinypic.com/20rahzp.png); background-position: 40px 0px; text-align: center; margin: 1px; }
.minbutton { border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 10px 10px; }
.postbutton { border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; }
.topicbutton { border-radius: 10px; -moz-border-radius: 10px; text-transform: uppercase; letter-spacing: 1px; font-style: italic; }

</style>
<script language='javascript'>
if ( location.search.indexOf('showforum')!=-1) {
document.write("<style>td.row4 b { font-size: 9px; text-transform: uppercase; font-weight: normal!important; } .desc { padding: 2px; text-align: left; }</style>")}
if ( location.search.indexOf('act=calendar')!=-1) {
document.write("<style>.darkrow1 { display: inline!important; background-color: #e3e1e2; } div.tableborder div.pformstrip { background-color: transparent!important; background-image: url(http://img.photobucket.com/albums/v638/marvolo/darkrowcontainer.png); background-repeat: no-repeat; height: 95px; color: #7b706f; vertical-align: top; position: relative; top: -13px; background-color: #d2d2d2; padding: 0px 10px 10px 10px; }</style>")}
if ( location.search.indexOf('act=site')!=-1) {
document.write("<style>td.row4 { min-width: 260px; background-color: #ebe9ea!important; } div.tablepad { margin: 0px 5px; padding-bottom: 100px; background-repeat: no-repeat; background-image: url(http://img.photobucket.com/albums/v638/marvolo/widebarfooter.png); background-position: center bottom; } .maintitle { margin:0px 5px; } </style>")}
if ( location.search.indexOf('act=Search')!=-1) {
document.write("<style>div.titlemedium { background-color: transparent!important; background-image: url(http://img.photobucket.com/albums/v638/marvolo/darkrowcontainer.png); background-repeat: no-repeat; height: 85px; color: #7b706f; }</style>")}
if ( location.search.indexOf('act=Members')!=-1) {
document.write("<style>td.pformstrip { background-color: transparent!important; background-image: url(http://img.photobucket.com/albums/v638/marvolo/darkrowcontainer.png); background-repeat: no-repeat; height: 85px; color: #7b706f; vertical-align: top; }</style>")}
if ( location.search.indexOf('act=Msg')!=-1) {
document.write("<style>div.row4 { width: auto!important; }</style>")}
</script>
<style type="text/css">

^^^

dfg	Posted: May 16 2011, 05:24 PM quote
Unregistered	Where are the buttons?
	^^^

loehz	Posted: Jul 29 2011, 08:28 PM quote
Newbie Group: Members Posts: 1 Member No.: 5 Joined: 29-July 11	teste
	pm email ^^^

Guest	Posted: Nov 11 2011, 04:50 PM quote
Unregistered	test pretty good skin <3 of course all your skins are amazinf ;D
	^^^

Guest	Posted: Oct 11 2012, 07:00 PM quote
Unregistered	AVVKNSA NSA
	^^^

Guest	Posted: Dec 24 2012, 08:09 PM quote
Unregistered	teststetadsjoqbfb
	^^^

Le Guesty	Posted: Dec 30 2012, 09:56 AM quote
Unregistered	very lovely
	^^^

« Next Oldest | Test Forum 2 | Next Newest »

Create your own social network with a free forum.
Learn More · Sign-up Now