CSS Shop (Open)

Creatures · Post by **Merkwerkee** » April 22nd, 2012, 9:09:27 pm

Lufpleh wrote:This is my first CSS and I have no idea what to do!!! But anyways... I'm not sure if I have to use a form, so here goes...

For my colors, could I have just black? I think the colors for each element would look good on a black background. Could the colors for each element be red for fire, blue for water, green for earth, and something like white/silver for air?

For my theme could I do an earth, air, fire, water theme? So just incorporate the four elements in it! The more abstract the art, the better. I'll stick with that for now.

Feel free to do whatever looks best. I'm pretty lenient with anything. THANKS!!!

Code: Select all

.bg2{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #4CC417;
background-color: rgba(22, 84, 23,0.3) !important;
float: left;
width: 96% !important;
padding: 0px;
margin: 0px;
background-image: none;
-moz-transform:translate(-2em, 0em);
transform:translate(-2em, 0em);
-webkit-transform:translate(-2em, 0em);
}
.bg1{
text-align: center !important;
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #4CC417;
background-color: rgba(22, 84, 23,0.3) !important;
float: right;
width: 96% !important;
padding: 0px;
margin-right: -5px;
background-image: none;
-moz-transform:translate(2em, 0em);
transform:translate(2em, 0em);
-webkit-transform:translate(2em, 0em);
}
.headerbar{
background-image: url(http://img692.imageshack.us/img692/854/lfplhhdr.png);
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border: 1px groove #4CC417;
border-radius: 3em 1em;
background-color: rgba(22, 84, 23,0.3);
}
#page-footer .navbar{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #4CC417;
background-color: rgba(22, 84, 23,0.3) !important;
padding: 15px;
margin-left: -20px;
background-image: none;
}
#page-header .navbar{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #4CC417;
background-color: rgba(22, 84, 23,0.3) !important;
padding: 0px;
margin-left: 0px;
background-image: none;
}
#page-body{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #1589FF;
background-color: rgba(21, 27, 141,0.3);
width: 100% !important;
}
#page-footer{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #1589FF;
background-color: rgba(21, 27, 141,0.3);
width: 100% !important;
}
#page-header{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #1589FF;
background-color: rgba(21, 27, 141,0.3);
width: 100% !important;
}
input.button2{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #949494;
background-color: rgba(22, 84, 23,0.4);
background-image: url(http://m.s11.pollpigeon.com/media/quiz/four_elements_jpg_300x300_q85.jpg) !important;
}
.signature{
display: none;
}
* {
font-family: English !important;
color: white !important;
text-align: center !important;
}
#wrap{
background-image: none;
background-color: rgba(235, 0, 0, 0.4) !important;
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #910000;
}
body{
Background-image: url(http://img710.imageshack.us/img710/5288/bckgrndt.png);
background-size: 100% !important;
background-attachment: fixed !important;
}
span{
background: none;
display: none !important;
color: transparent;
}
.spoiler .inner{
-moz-border-radius: 1em 1em;
-webkit-border-radius: 1em 1em;
border-radius: 1em 1em;
background-color: rgba(0, 44, 0,0.5);
border: 1px groove #4CC417;
}
.border-right, .border-left, .border-top, .border-top-left, .border-top-right, .border-bottom{
background: none;
}
dl.left-box.details{
-moz-border-radius: 1em 1em;
-webkit-border-radius: 1em 1em;
border-radius: 1em 1em;
text-align: center !important;
}
.jumpbox{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #4CC417;
background-color: rgba(22, 84, 23,0.3);
}
.icon-gold{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #4CC417;
}
.custom_css_avatar img{
-moz-border-radius: 1em 3em;
-webkit-border-radius: 1em 3em;
border-radius: 1em 3em;
border: 1px groove #4CC417;
}

h3{
display: none;
}
.icon-ucp, .icon-logout, .leftside icon-home, .icon-home{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #4CC417;
background-color: rgba(22, 84, 23,0.3);
background-image: none;
}

dl.left-box{
-moz-border-radius: 1em 1em;
-webkit-border-radius: 1em 1em;
border-radius: 1em 1em;
float: right;
}
h2{
display: none;
} 
a:link, a.postlink:link{
text-decoration: none;
}
a:visited, a.postlink:visited{
color: dark gray;
text-decoration: none;
}
a:hover, a.postlink:hover{
font-size: 16px;
text-decoration: none;
background-color: transparent;
}

blockquote{
-moz-border-radius: 2em 2em !important;
-webkit-border-radius: 2em 2em !important;
border-radius: 2em 2em !important;
border:1px groove #4CC417 !important;
background-color: rgba(0, 44, 0,0.6) !important;
}

Okay, give that a try

Creatures · Post by **Lufpleh** » April 22nd, 2012, 9:14:35 pm

OH!

I really like it!!! THANK YOU!!! Maybe I'll be back for more if an idea ever comes up in my head. THANK YOU SO MUCH ONCE AGAIN!!!

Creatures · Post by **Nexosa** » April 23rd, 2012, 1:56:12 pm

Username:vivi
Colours:white,purple,pink
Theme:any hummingbird

Creatures · Post by **Merkwerkee** » April 23rd, 2012, 10:58:43 pm

vivi wrote:Username:vivi
Colours:white,purple,pink
Theme:any hummingbird

Code: Select all

.bg2{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(173, 14, 83,0.4) !important;
float: left;
width: 96% !important;
padding: 0px;
margin: 0px;
background-image: none;
-moz-transform:translate(-2em, 0em);
transform:translate(-2em, 0em);
-webkit-transform:translate(-2em, 0em);
}
.bg1{
text-align: center !important;
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(173, 14, 83,0.4) !important;
float: right;
width: 96% !important;
padding: 0px;
margin-right: -5px;
background-image: none;
-moz-transform:translate(2em, 0em);
transform:translate(2em, 0em);
-webkit-transform:translate(2em, 0em);
}
.headerbar{
background-image: url(http://img407.imageshack.us/img407/9045/vvhdr.png);
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border: 1px groove #FFFFFF;
border-radius: 3em 1em;
background-color: rgba(173, 14, 83,0.4);
}
#page-footer .navbar{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(173, 14, 83,0.4) !important;
padding: 15px;
margin-left: -20px;
background-image: none;
}
#page-header .navbar{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(173, 14, 83,0.4) !important;
padding: 0px;
margin-left: 0px;
background-image: none;
}
#page-body{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(246, 53, 138,0.4);
width: 100% !important;
}
#page-footer{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(246, 53, 138,0.4);
width: 100% !important;
}
#page-header{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(246, 53, 138,0.4);
width: 100% !important;
}
input.button2{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(173, 14, 83,0.4);
background-image: url(http://ak1.ostkcdn.com/images/products/3/P11460119.jpg) !important;
}
.signature{
display: none;
}
* {
font-family: FontleroyBrown !important;
color: white !important;
text-align: center !important;
}
#wrap{
background-image: none;
background-color: rgba(156, 45, 235, 0.4) !important;
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
}
body{
Background-image: url(http://www.freedesktopwallpapers4u.com/data/media/23/AnnasHummingbirdHoveringOnFlower.jpg);
background-size: 100% !important;
background-attachment: fixed !important;
}
span{
background: none;
display: none !important;
color: transparent;
}
.spoiler .inner{
-moz-border-radius: 1em 1em;
-webkit-border-radius: 1em 1em;
border-radius: 1em 1em;
background-color: rgba(106, 40, 126,0.5);
border: 1px groove #FFFFFF;
}
.border-right, .border-left, .border-top, .border-top-left, .border-top-right, .border-bottom{
background: none;
}
dl.left-box.details{
-moz-border-radius: 1em 1em;
-webkit-border-radius: 1em 1em;
border-radius: 1em 1em;
text-align: center !important;
}
.jumpbox{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(173, 14, 83,0.4);
}
.icon-gold{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
}
.custom_css_avatar img{
-moz-border-radius: 1em 3em;
-webkit-border-radius: 1em 3em;
border-radius: 1em 3em;
border: 1px groove #FFFFFF;
}

h3{
display: none;
}
.icon-ucp, .icon-logout, .leftside icon-home, .icon-home{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove #FFFFFF;
background-color: rgba(173, 14, 83,0.4);
background-image: none;
}

dl.left-box{
-moz-border-radius: 1em 1em;
-webkit-border-radius: 1em 1em;
border-radius: 1em 1em;
float: right;
}
h2{
display: none;
} 
a:link, a.postlink:link{
text-decoration: none;
}
a:visited, a.postlink:visited{
color: dark gray;
text-decoration: none;
}
a:hover, a.postlink:hover{
font-size: 16px;
text-decoration: none;
background-color: transparent;
}

blockquote{
-moz-border-radius: 2em 2em !important;
-webkit-border-radius: 2em 2em !important;
border-radius: 2em 2em !important;
border:1px groove white !important;
background-color: rgba(68, 5, 159,0.6) !important;
}

Try that and let me know how it works

Creatures · Post by **Nexosa** » April 24th, 2012, 9:49:13 am

I like

Thank you

Creatures · Post by **Lufpleh** » April 24th, 2012, 9:44:32 pm

Here I am! Already back with another idea.

Can you try doing a theme of wish flowers/dandelions(I'm not sure what to call them) These are what they look like... http://t3.gstatic.com/images?q=tbn:ANd9 ... 9QiYKkq-dg
http://i.istockimg.com/file_thumbview_a ... -seeds.jpg

This time I don't really care about main colors. Nothing too bright though. So nothing like bright red or anything. Black, white, blue/green(But not a dark blue/green) would be fine.

Creatures · Post by **Merkwerkee** » April 24th, 2012, 10:18:57 pm

http://www.desktopwallpaperhd.com/wallp ... 1/1714.jpg
Like that?

Creatures · Post by **Lufpleh** » April 24th, 2012, 10:27:12 pm

Yup! That flower.

THANKS AGAIN!

Creatures · Post by **Merkwerkee** » April 24th, 2012, 11:12:18 pm

Lufpleh wrote:Here I am! Already back with another idea.

Can you try doing a theme of wish flowers/dandelions(I'm not sure what to call them) These are what they look like... http://t3.gstatic.com/images?q=tbn:ANd9 ... 9QiYKkq-dg
http://i.istockimg.com/file_thumbview_a ... -seeds.jpg

This time I don't really care about main colors. Nothing too bright though. So nothing like bright red or anything. Black, white, blue/green(But not a dark blue/green) would be fine.

Code: Select all

.bg2{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(255,255,255,0.4) !important;
float: left;
width: 96% !important;
padding: 0px;
margin: 0px;
background-image: none;
-moz-transform:translate(-2em, 0em);
transform:translate(-2em, 0em);
-webkit-transform:translate(-2em, 0em);
}
.bg1{
text-align: center !important;
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(255,255,255,0.4) !important;
float: right;
width: 96% !important;
padding: 0px;
margin-right: -5px;
background-image: none;
-moz-transform:translate(2em, 0em);
transform:translate(2em, 0em);
-webkit-transform:translate(2em, 0em);
}
.headerbar{
background-image: url(http://img233.imageshack.us/img233/4594/lfphdr.png);
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border: 1px groove black;
border-radius: 3em 1em;
background-color: rgba(255,255,255,0.4);
}
#page-footer .navbar{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(255,255,255,0.4) !important;
padding: 15px;
margin-left: -20px;
background-image: none;
}
#page-header .navbar{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(255,255,255,0.4) !important;
padding: 0px;
margin-left: 0px;
background-image: none;
}
#page-body{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(138, 138, 138,0.3);
width: 100% !important;
}
#page-footer{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(138, 138, 138,0.3);
width: 100% !important;
}
#page-header{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(138, 138, 138,0.3);
width: 100% !important;
}
input.button2{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(58, 58, 58,0.4);
background-image: url(http://www.brickworkz.com/clients/dandelion/originaldandy.jpg) !important;
}
.signature{
display: none;
}
* {
font-family: FontleroyBrown !important;
color: black !important;
text-align: center !important;
}
#wrap{
background-image: none;
background-color: rgba(88, 88, 88, 0.4);
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background: -o-linear-gradient (black, rgb(88, 88, 88) 20%, white 80%;
background: -ms-linear-gradient (black, rgb(88, 88, 88) 20%, white 80%;
background: -moz-linear-gradient (black, rgb(88, 88, 88) 20%, white 80%;
background: -webkit-linear-gradient (black, rgb(88, 88, 88) 20%, white 80%;
background: linear-gradient (black, rgb(88, 88, 88) 20%, white 80%;
}
body{
Background-image: url(http://www.desktopwallpaperhd.com/wallpapers/11/1714.jpg);
background-size: 100% !important;
background-attachment: fixed !important;
}
span{
background: none;
display: none !important;
color: transparent;
}
.spoiler .inner{
-moz-border-radius: 1em 1em;
-webkit-border-radius: 1em 1em;
border-radius: 1em 1em;
background-color: rgba(218, 218, 218,0.5);
border: 1px groove black;
}
.border-right, .border-left, .border-top, .border-top-left, .border-top-right, .border-bottom{
background: none;
}
dl.left-box.details{
-moz-border-radius: 1em 1em;
-webkit-border-radius: 1em 1em;
border-radius: 1em 1em;
text-align: center !important;
}
.jumpbox{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(255,255,255,0.4);
}
.icon-gold{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
}
.custom_css_avatar img{
-moz-border-radius: 1em 3em;
-webkit-border-radius: 1em 3em;
border-radius: 1em 3em;
border: 1px groove black;
}

h3{
display: none;
}
.icon-ucp, .icon-logout, .leftside icon-home, .icon-home{
-moz-border-radius: 3em 1em;
-webkit-border-radius: 3em 1em;
border-radius: 3em 1em;
border: 1px groove black;
background-color: rgba(255,255,255,0.4);
background-image: none;
}

dl.left-box{
-moz-border-radius: 1em 1em;
-webkit-border-radius: 1em 1em;
border-radius: 1em 1em;
float: right;
}
h2{
display: none;
} 
a:link, a.postlink:link{
text-decoration: none;
}
a:visited, a.postlink:visited{
color: dark gray;
text-decoration: none;
}
a:hover, a.postlink:hover{
font-size: 16px;
text-decoration: none;
background-color: transparent;
}

blockquote{
-moz-border-radius: 2em 2em !important;
-webkit-border-radius: 2em 2em !important;
border-radius: 2em 2em !important;
border:1px groove grey !important;
background-color: rgba(212, 212, 212,0.6) !important;
}

Let me know how it works. If you don't see the wrap, tell me and I'll undo my little experiment

Also, sorry about your header. It always looks so much worse when I upload them to the internet

Creatures · Post by **Lufpleh** » April 24th, 2012, 11:51:26 pm

WOW! I like this one even more! The header is fine. ;) And I'm not sure what the wrap is, but the overall CSS looks perfectly fine.

THANK YOU AGAIN!

MagiStream

CSS Shop (Open)

Re: CSS Shop (open)

Re: CSS Shop (open)

Re: CSS Shop (open)

Re: CSS Shop (open)

Re: CSS Shop (open)

Re: CSS Shop (open)

Re: CSS Shop (open)

Re: CSS Shop (open)

Re: CSS Shop (open)

Re: CSS Shop (open)