We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Bubbleboo; ... this is dark???
Topic Started: Aug 6 2007, 07:25 AM (745 Views)
byeee
Member Avatar
Member
[ *  *  *  * ]
Name: Bubbleboo
Author: byeee
Skin Number: Uh... I'd say 5 or 6. I've made more but they were mostly quick adaptations of one skin to different colours.
Date Created: 1-3 August, approximately. Light changes on August 7th.
Side Notes: I know the buttons aren't ready, they will be ready once I release the button set.
It was also meant to be a dark skin.

Preview of Bubbleboo!
Due to demands, I've changed the text colours a bit so everyone's happy.
Preview of Bubbleboo Light!

Scroll down for the lighter CSS.

Board Wrappers -> Header & Body
Code:
 
<body>
<div id="ipbwrapper">
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>
<p style="text-align:center">Skin created by <b>byeee</b>. Find more great skins at the <b><a href="http://forums.ifskinzone.net/index.php?act=idx" target="_blank">IF Skin Zone</a></b>.</p>


Board Wrappers -> Footer
Code:
 
</div>


CSS - original (dark) colours
Code:
 
form { display:inline }
img { border:0; vertical-align:middle }
BODY { margin:5px; background:#05262c url(http://i5.ifrm.com/11617/115/pip/b.gif) top center repeat-y fixed; font-family:Verdana, Helvetica, Arial, sans-serif; font-size:11px; color:#305558 }
TABLE, TD, textarea, input, select { font-family:inherit; font-size:100% }
a:link, a:visited { text-decoration:none; color:#306566 }
a:hover, a:active { text-decoration:underline; color:#346c6b }
#ipbwrapper { width:782px; margin:auto }

fieldset.search { padding:6px; line-height:150% }
label { cursor:pointer }

img.attach { border:1px outset #093639; padding:2px }

.googleroot { padding:6px; line-height:130% }
.googlechild { margin-left:30px; padding:6px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { color: #306566 }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:130%; font-weight:bold; color:#306566 }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:90%; color:#104c4b }

.caldate { margin:0; padding:4px; background:#0e3338; font-size:100%; font-weight:bold; text-align:right; color:#1b5958 }

.warngood { color:green }
.warnbad { color:red }

#padandcenter { margin:auto; padding:14px 0px; text-align:center }

#profilename { font-size:250%; font-weight:bold }
#calendarname { font-size:200%; font-weight:bold }

#photowrap { padding:6px }
#phototitle { border-bottom:1px solid #093639; font-size:220% }
#photoimg   { margin-top:15px; text-align:center }

#ucpmenu { width:23%; border:1px solid #093639; background:#083034;line-height:150% }
#ucpmenu p { margin:0; padding:2px 3px 6px 5px }
#ucpcontent { width:auto; border:1px solid #093639; background:#083034; line-height:150% }
#ucpcontent p { margin:0; padding:10px }

#ipsbanner { position:absolute; top:1px; right:5% }
#logostrip { margin:0; padding:0; border:1px solid #093639 }
#submenu { margin:3px 0px; border:1px solid #093639; background:url(http://i5.ifrm.com/11617/115/pip/s.gif); font-size:90%; font-weight:bold }
#submenu a:link, #submenu a:visited { font-size:90%; text-decoration:none; color:#305558 }
#submenu a:hover, #submenu a:active { font-size:90%; text-decoration:none; color:#327074 }
#userlinks { border:1px solid #093639; background:url(http://i5.ifrm.com/11617/115/pip/s.gif) center left }

#navstrip { padding:6px 0px; font-weight:bold }
#navstrip img { margin-bottom:2px }

.activeuserstrip { padding:6px; background:#083034 }

.pformstrip { margin-top:1px; padding:7px; background:url(http://i5.ifrm.com/11617/115/pip/t.gif) bottom left; font-size:90%; font-weight:bold; color:#246b6e }
.pformstrip div { line-height:20px }
.pformleft  { width:25%; margin-top:1px; padding:6px; border-top:1px solid #093639; border-right:1px solid #093639; background: #083034 }
.pformleftw { width:40%; margin-top:1px; padding:6px; border-top:1px solid #093639; border-right:1px solid #093639; background: #083034 }
.pformright { margin-top:1px; padding:6px; border-top:1px solid #093639; background: #083034 }

.post1 { background: #0f3235 }
.post2 { background: #0f3135 }
.postlinksbar { margin-top:1px; padding:7px; font-size:90%; background:#0c3236 }

.row1 { padding:2px 8px; background:#093135 }
input.row1{ background:#083034; color:#305558 }
.row2 { background:#083034 }
.row3 { background:#0c3135 }
.row4 { background:#083034 }

.darkrow1 { background:#0a3638; color:#246b6e }
.darkrow2 { background:url(http://i5.ifrm.com/11617/115/pip/i.gif); color:#305558 }
.darkrow3 { background:#083034; color:#305558 }

.hlight { background: #0f3235 }
.dlight { background: #0f3135 }

.titlemedium { margin:0px; padding:7px; background:url(http://i5.ifrm.com/11617/115/pip/t.gif) bottom left; font-size:90%; font-weight:bold; color:#246b6e }

.maintitle { height:13px; padding:8px 0px 9px 22px; background:url(http://i5.ifrm.com/11617/115/pip/m.gif) 1px 0px; vertical-align:middle; font-weight:bold; letter-spacing:1px; color:#032325 }
.maintitle a:link, .maintitle  a:visited, .maintitle a:hover, .maintitle  a:active { text-decoration:none; color:#032325 }

.plainborder { border:0 }
.plainborder table { background:#073f3e }
.tableborder { margin:0; padding:0; border:1px solid #093639; background:#042c31 }
div.tableborder { width:780px }
#ucpcontent .tableborder, table .tableborder { width:auto }
div.row4 { border-color:#093639!important }
.tablefill { padding:6px; border:1px solid #0b3e41; background:#093338 }
.tablepad { padding:6px; background:#093135 }
div.tablepad, div.tablepad table { background:#093135!important }
div.tablepad table td font { color:#306566!important }
div.tablepad table td input { margin:1px 2px 4px; vertical-align:middle }
.tablebasic { width:100%; margin:0; padding:0; border:0 }

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

.desc { font-size:90%; color:#104c4b }
.edit { margin-left:10px; font-size:80%; font-style:italic }

.signature { font-size:90%; color:#0e4445 }
.postdetails { font-size:90% }
.postcolor { font-size:110%; line-height:160% }

.normalname { font-size:110%; font-weight:bold }
.unreg { color:#306566 }

.searchlite { background:#042c31; font-weight:bold; color:#305558 }

#QUOTE { padding:2px; border:1px solid #0b3e41; background:#093338; color:#2f5f5e }
#CODE { padding:2px; border:1px solid #0b3e41; background:#093338; font-family:Courier, 'Courier New', Verdana, Arial; color:#2f5f5e }

.copyright { font-size:80%; line-height:12px }

.codebuttons  { margin:1px 2px; padding:1px 3px; font-size:90% }
.forminput, .textinput, .radiobutton, .checkbox  { padding:2px }
.forminput, .codebuttons, div.tablepad table input { border:1px solid #0b3e41; background:#093338; color:#2f5f5e }
.textinput, .pformright textarea { border:1px solid #2e4a4a; background:#11373b; color:#345b5b }
.radiobutton,.checkbox, .pformright input { margin:1px 2px 4px; vertical-align:middle }
.row3 .forminput { margin-top:0; margin-bottom:0 }

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

.purple { font-weight:bold; color:purple }
.red { font-weight:bold; color:red }
.green { font-weight:bold; color:green }
.blue { font-weight:bold; color:blue }
.orange { font-weight:bold; color:#F90 }


CSS - lighter colours
Code:
 
form { display:inline }
img { border:0; vertical-align:middle }
BODY { margin:5px; background:#05262c url(http://i5.ifrm.com/11617/115/pip/b.gif) top center repeat-y fixed; font-family:Verdana, Helvetica, Arial, sans-serif; font-size:11px; color:#508d8e }
TABLE, TD, textarea, input, select { font-family:inherit; font-size:100% }
a:link, a:visited { text-decoration:none; color:#599b9a }
a:hover, a:active { text-decoration:underline; color:#82b8b7 }
#ipbwrapper { width:782px; margin:auto }

fieldset.search { padding:6px; line-height:150% }
label { cursor:pointer }

img.attach { border:1px outset #093639; padding:2px }

.googleroot { padding:6px; line-height:130% }
.googlechild { margin-left:30px; padding:6px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { color: #599b9a }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:130%; font-weight:bold; color:#599b9a }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:90%; color:#2a8685 }

.caldate { margin:0; padding:4px; background:#0e3338; font-size:100%; font-weight:bold; text-align:right; color:#2c8887 }

.warngood { color:green }
.warnbad { color:red }

#padandcenter { margin:auto; padding:14px 0px; text-align:center }

#profilename { font-size:250%; font-weight:bold }
#calendarname { font-size:200%; font-weight:bold }

#photowrap { padding:6px }
#phototitle { border-bottom:1px solid #093639; font-size:220% }
#photoimg   { margin-top:15px; text-align:center }

#ucpmenu { width:23%; border:1px solid #093639; background:#083034;line-height:150% }
#ucpmenu p { margin:0; padding:2px 3px 6px 5px }
#ucpcontent { width:auto; border:1px solid #093639; background:#083034; line-height:150% }
#ucpcontent p { margin:0; padding:10px }

#ipsbanner { position:absolute; top:1px; right:5% }
#logostrip { margin:0; padding:0; border:1px solid #093639 }
#submenu { margin:3px 0px; border:1px solid #093639; background:url(http://i5.ifrm.com/11617/115/pip/s.gif); font-weight:bold }
#submenu a:link, #submenu a:visited { font-size:90%; text-decoration:none; color:#508d8e }
#submenu a:hover, #submenu a:active { font-size:90%; text-decoration:none; color:#599b9a }
#userlinks { border:1px solid #093639; background:url(http://i5.ifrm.com/11617/115/pip/s.gif) center left }

#navstrip { padding:6px 0px; font-weight:bold }
#navstrip img { margin-bottom:2px }

.activeuserstrip { padding:6px; background:#083034 }

.pformstrip { margin-top:1px; padding:7px; background:url(http://i5.ifrm.com/11617/115/pip/t.gif) bottom left; font-size:90%; font-weight:bold; color:#319293 }
.pformstrip div { line-height:20px }
.pformleft  { width:25%; margin-top:1px; padding:6px; border-top:1px solid #093639; border-right:1px solid #093639; background: #083034 }
.pformleftw { width:40%; margin-top:1px; padding:6px; border-top:1px solid #093639; border-right:1px solid #093639; background: #083034 }
.pformright { margin-top:1px; padding:6px; border-top:1px solid #093639; background: #083034 }

.post1 { background: #0f3235 }
.post2 { background: #0f3135 }
.postlinksbar { margin-top:1px; padding:7px; font-size:90%; background:#0c3236 }

.row1 { padding:2px 8px; background:#093135 }
input.row1{ background:#083034; color:#508d8e }
.row2 { background:#083034 }
.row3 { background:#0c3135 }
.row4 { background:#083034 }

.darkrow1 { background:#0a3638; color:#319293 }
.darkrow2 { background:url(http://i5.ifrm.com/11617/115/pip/i.gif); color:#508d8e }
.darkrow3 { background:#083034; color:#508d8e }

.hlight { background: #0f3235 }
.dlight { background: #0f3135 }

.titlemedium { margin:0px; padding:7px; background:url(http://i5.ifrm.com/11617/115/pip/t.gif) bottom left; font-size:90%; font-weight:bold; color:#319293 }

.maintitle { height:13px; padding:8px 0px 9px 22px; background:url(http://i5.ifrm.com/11617/115/pip/m.gif) 1px 0px; vertical-align:middle; font-weight:bold; letter-spacing:1px; color:#032325 }
.maintitle a:link, .maintitle  a:visited, .maintitle a:hover, .maintitle  a:active { text-decoration:none; color:#031a1b }

.plainborder { border:0 }
.plainborder table { background:#073f3e }
.tableborder { margin:0; padding:0; border:1px solid #093639; background:#042c31 }
div.tableborder { width:780px }
#ucpcontent .tableborder, table .tableborder { width:auto }
div.row4 { border-color:#093639!important }
.tablefill { padding:6px; border:1px solid #0b3e41; background:#093338 }
.tablepad { padding:6px; background:#093135 }
div.tablepad, div.tablepad table { background:#093135!important }
div.tablepad table td font { color:#599b9a!important }
div.tablepad table td input { margin:1px 2px 4px; vertical-align:middle }
.tablebasic { width:100%; margin:0; padding:0; border:0 }

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

.desc { font-size:90%; color:#2a8685 }
.edit { margin-left:10px; font-size:80%; font-style:italic }

.signature { font-size:90%; color:#1b8180 }
.postdetails { font-size:90% }
.postcolor { font-size:110%; line-height:160% }

.normalname { font-size:110%; font-weight:bold }
.unreg { color:#599b9a }

.searchlite { background:#042c31; font-weight:bold; color:#508d8e }

#QUOTE { padding:2px; border:1px solid #0b3e41; background:#093338; color:#589897 }
#CODE { padding:2px; border:1px solid #0b3e41; background:#093338; font-family:Courier, 'Courier New', Verdana, Arial; color:#589897 }

.copyright { font-size:80%; line-height:12px }

.codebuttons  { margin:1px 2px; padding:1px 3px; font-size:90% }
.forminput, .textinput, .radiobutton, .checkbox  { padding:2px }
.forminput, .codebuttons, div.tablepad table input { border:1px solid #0b3e41; background:#093338; color:#589897 }
.textinput, .pformright textarea { border:1px solid #2e4a4a; background:#11373b; color:#539190 }
.radiobutton,.checkbox, .pformright input { margin:1px 2px 4px; vertical-align:middle }
.row3 .forminput { margin-top:0; margin-bottom:0 }

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

.purple { font-weight:bold; color:purple }
.red { font-weight:bold; color:red }
.green { font-weight:bold; color:green }
.blue { font-weight:bold; color:blue }
.orange { font-weight:bold; color:#F90 }


Hope you like it!

Edited 7 August with the addition of the Light version.
Offline Profile Quote Post Goto Top
 
Moonflightspark
Member Avatar
Member
[ *  * ]
Nice, but a bit dark for my taste, though...
[I may not be getting a correct view of it, I have a dark monitor]
Offline Profile Quote Post Goto Top
 
kansasrules
Member
[ * ]
it's ok, IMO


7/10
Offline Profile Quote Post Goto Top
 
Jordinus
Member
[ * ]
nice lol i like him... hmmmmm i put a 8.5/10... because it's a nice idea
Offline Profile Quote Post Goto Top
 
pepe_starr-ZNR
Member
[ * ]
I like it, but it's as said above a bit too dark.

8/10
Offline Profile Quote Post Goto Top
 
byeee
Member Avatar
Member
[ *  *  *  * ]
That might be because I made it with a dark skin in mind. =D
Text might be hard to see on dark monitors but if it was too light it would have been too much of a contrast. I chose to make it a little more cohesive, although, as you said, dark.

Edit: I've messed around with the colours a bit and came up with Bubbleboo Light. Check the first post.
Offline Profile Quote Post Goto Top
 
Megume
Member Avatar
Member
[ *  * ]
nice blending and color choice
Offline Profile Quote Post Goto Top
 
darkest_ange
Member
[ * ]
nice skin.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Dark · Next Topic »
Add Reply