Welcome to Gaia! ::

Reply Meri & Kimi's Inc.
[TUT] CSS: Manipulating Official Themes Goto Page: [] [<] 1 2

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

Meriko
Captain

Aged Gaian

12,400 Points
  • Cat Fancier 100
  • Mark Twain 100
  • Elocutionist 200
PostPosted: Mon Nov 14, 2005 5:43 pm


The entire "caption" section affects the captions. There are separate bits of code for the outline, corners, call-out triangles, and things like that. ^^
PostPosted: Wed Nov 16, 2005 2:23 am


Grunny Style Sheet:

/* GENERAL */

*
{
margin: 0;
padding: 0;
}

ul li
{
list-style-type: none;
}

dl dt
{
font-weight: bold;
}

/* CONTENT */

#content
{
background: #000;
padding: 10px;
}

#content a
{
color: #096A04;
}

#content #sidebar
{
position: absolute;
width: 230px;
left: 15px;
}

#content #main
{
margin-left: 240px;
}

/* SECTION */

.section
{
margin-bottom: 10px;
padding: 0 10px 10px 10px;
font-size: 12px;
background: #333 url(images/grunny_header_endcap.gif) top right no-repeat;
color: #666;
}

.section:after
{
margin: 0 -10px -10px -10px;
content: url(images/grunny_footer.gif);
background: url(images/grunny_footer_endcap.gif) bottom right no-repeat;
display: block;
line-height: .1;
}

.section h2
{
color: #C41B27;
font-size: 15px;
margin: 0 -10px 0 -10px;
text-indent: 40px;
height: 40px;
line-height: 35px;
background: url(images/grunny_header.gif) top left no-repeat;
}

.section .clear
{
clear: both;
}

.section .head
{
width: 48px;
height: 48px;
}

.section .torso
{
width: 96px;
height: 96px;
}

.section .body
{
width: 120px;
height: 150px;
}

.section .items li
{
display: inline;
}

.section .items li img
{
width: 30px;
height: 30px;
}

.section .online
{
background: url(images/status_online.gif) top left no-repeat;
padding-left: 20px;
}

.section .offline
{
background: url(images/status_offline.gif) top left no-repeat;
}

.section .hidden
{
background: url(images/status_hidden.gif) top left no-repeat;
}

.section .links
{
margin-bottom: 10px;
}

.section .links li
{
display: inline;
}

.section .date
{
text-align: right;
font-size: 10px;
font-weight: normal;
font-style: italic;
margin: 0 0 3px 3px;
}

/* CAPTION */

.caption
{
border: 2px solid #000;
background: #000;
}

.caption2
{
border: 2px solid #000;
background: #000;
}

.caption:before
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_tl.gif);
background: url(images/caption_tr.gif) top right no-repeat;
line-height: .1;
}

.caption:after
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_bl.gif);
background: url(images/caption_br.gif) bottom right no-repeat;
line-height: .1;
}

.caption2:before
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_tl.gif);
background: url(images/caption_tr.gif) top right no-repeat;
line-height: .1;
}

.caption2:after
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_bl.gif);
background: url(images/caption_br.gif) bottom right no-repeat;
line-height: .1;
}

.caption .message
{
position: relative;
left: -22px;
padding: 0 0 0 32px;
min-height: 45px;
margin: 0 -12px 0 0;
background: url(images/caption_ml.gif) top left no-repeat;
font-size: 13px;
font-weight: normal;
height: 45px;
}

.caption2 .message
{
position: relative;
right: -22px;
padding: 0 32px 0 0;
min-height: 45px;
margin: 0 0 0 -12px;
background: url(images/caption_mr.gif) top right no-repeat;
font-size: 13px;
font-weight: normal;
height: 45px;
}

.caption > .message
{
height: auto;
}

.caption2 > .message
{
height: auto;
}

/* ACCOUNT */

form
{
margin: 0 150px;
}

textarea
{
width: 100%;
height: 100px;
}

.textfield
{
width: 100%;
}

label
{
font-weight: bold;
}

#account ul li
{
display: inline;
}

fieldset
{
margin-bottom: 10px;
}

/* PROFILE */

#profile #bar
{
height: 22px;
margin-left: 12px;
}

#profile #bar li
{
display: inline;
float: left;
}

#profile #bar #status
{
background: url(images/action_bar_frontcap.gif) top left no-repeat;
}

#profile #bar #friend
{
width: 33px;
}

#profile #bar #message
{
width: 29px;
}

#profile #bar #trade
{
width: 28px;
}

#profile #bar #ignore
{
width: 34px;
}

#profile .avatar
{
position: relative;
}

#profile .caption
{
position: absolute;
top: 80px;
left: 110px;
width: 105px;
}

#profile .status
{
background: url(images/action_bar_frontcap.gif) top left no-repeat;
margin-left: 10px;
}

/* DETAILS */

#details
{
height: 1%; /* Holly Hack */
}

#details #stats
{
float: right;
width: 100px;
margin: 0 0 10px 10px;
}

/* WISHLIST */

#wishlist .questing
{
background: url(images/wishlist_questing.gif) top right no-repeat;
}

#wishlist .bought
{
background: url(images/wishlist_bought.gif) top right no-repeat;
}

#wishlist .donated
{
background: url(images/wishlist_donated.gif) top right no-repeat;
}

/* ABOUT */

#about
{
height: 1%; /* Holly Hack */
}

/* GUILDS */

/* MULTIMEDIA */

/* JOURNAL */

/* FRIENDS */

#friends
{
height: 1%; /* Holly Hack */
}

#friends #friendGroup
{
margin-top: 10px;
}

#friends #friendGroup li
{
float: left;
width: 110px;
height: 130px;
text-align: center;
}

#friends #friendGroup li img
{
width: 96px;
height: 96px;
}

/* COMMENTS */

#comments dl dt
{
position: relative;
padding-top: 10px;
}

#comments dl dt.avatar img
{
position: absolute;
left: 0;
}

#comments dl dt.avatar2 div
{
text-align: right;
}

#comments dl dt.avatar2 img
{
position: absolute;
right: 0;
width: 120px;
}

#comments dl
{
padding-bottom: 90px;
}

#comments dl dd
{
margin: 0 120px 0 100px;
}

#comments .delete
{
margin-top: 10px;
text-align: right;
}

#comments #pagination li
{
display: inline;
}

#comments .admin li
{
text-align: right;
}

/* SIGNATURE */

#signature
{
text-align: center;
}

#signature h2
{
text-align: left;
}

/* MODERATE */

#moderate
{
padding: 10px;
border: 1px solid #639;
background: #9775B7;
}

#moderate a
{
color: #639;
}

#moderate li
{
display: inline;
}

LabTech143

6,700 Points
  • Beta Citizen 0
  • Beta Treasure Hunter 0
  • Beta Explorer 0

Pirate Pinkie

PostPosted: Sat Nov 19, 2005 8:31 pm


I finally got it. You have NO idea how much this has helped me! heart

Thank you! heart whee
PostPosted: Mon Nov 21, 2005 12:44 am


Ruevian
I don't suppose anyone here knows how to make a background fixed?

I realize it's a bit late, but in case anyone needs it: you just put 'fixed' after the background URL, like this:
body
{
background: url('img url') fixed;
}

Aiko Destiny

Icy Knight

10,400 Points
  • Snowball Hero 200
  • Caroling Champ 100
  • Frozen Solid 200

Blasfemica

PostPosted: Thu Dec 08, 2005 1:20 pm


CSS rulez! blaugh
PostPosted: Sat Feb 25, 2006 12:29 am


Meri your shop kicks bum

Zama-Tisaru

Divine Demigod

6,150 Points
  • Supreme Supporter 500
  • Tycoon 200
  • Wall Street 200

Kairi Mi

PostPosted: Sun Feb 26, 2006 10:43 am


Meriko
Use this code to place an image behind your commenters. Replace the YOURIMAGEHERE with your own image. I believe the image should be the usual avatar file size (120 wide x 150 tall) or smaller for best results. You can use the same image for both lines or you can use two different ones. The second image provided will end up flipped horizontally, so keep this in mind if you're adding text or have some other aspect that would be affected by flipping the image.
Quote:
#comments dl dt.avatar img
{
background: url('YOURIMAGEHERE');
}
#comments dl dt.avatar2 img
{
filter: fliph;
background: url('YOURIMAGEHERE');
}


I love this thing!!! >>But there's a mess-up, at least on mine, for the commenter thing (what I just quoted) It doubled my image (check profile, they're green mushrooms) and now all the people are missing and part of the word bubble is cut off...helpish!

Thank you for making this!!! heart
PostPosted: Sun Feb 26, 2006 10:45 am


LabTech143
Grunny Style Sheet:

/* GENERAL */

*
{
margin: 0;
padding: 0;
}

ul li
{
list-style-type: none;
}

dl dt
{
font-weight: bold;
}

/* CONTENT */

#content
{
background: #000;
padding: 10px;
}

#content a
{
color: #096A04;
}

#content #sidebar
{
position: absolute;
width: 230px;
left: 15px;
}

#content #main
{
margin-left: 240px;
}

/* SECTION */

.section
{
margin-bottom: 10px;
padding: 0 10px 10px 10px;
font-size: 12px;
background: #333 url(images/grunny_header_endcap.gif) top right no-repeat;
color: #666;
}

.section:after
{
margin: 0 -10px -10px -10px;
content: url(images/grunny_footer.gif);
background: url(images/grunny_footer_endcap.gif) bottom right no-repeat;
display: block;
line-height: .1;
}

.section h2
{
color: #C41B27;
font-size: 15px;
margin: 0 -10px 0 -10px;
text-indent: 40px;
height: 40px;
line-height: 35px;
background: url(images/grunny_header.gif) top left no-repeat;
}

.section .clear
{
clear: both;
}

.section .head
{
width: 48px;
height: 48px;
}

.section .torso
{
width: 96px;
height: 96px;
}

.section .body
{
width: 120px;
height: 150px;
}

.section .items li
{
display: inline;
}

.section .items li img
{
width: 30px;
height: 30px;
}

.section .online
{
background: url(images/status_online.gif) top left no-repeat;
padding-left: 20px;
}

.section .offline
{
background: url(images/status_offline.gif) top left no-repeat;
}

.section .hidden
{
background: url(images/status_hidden.gif) top left no-repeat;
}

.section .links
{
margin-bottom: 10px;
}

.section .links li
{
display: inline;
}

.section .date
{
text-align: right;
font-size: 10px;
font-weight: normal;
font-style: italic;
margin: 0 0 3px 3px;
}

/* CAPTION */

.caption
{
border: 2px solid #000;
background: #000;
}

.caption2
{
border: 2px solid #000;
background: #000;
}

.caption:before
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_tl.gif);
background: url(images/caption_tr.gif) top right no-repeat;
line-height: .1;
}

.caption:after
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_bl.gif);
background: url(images/caption_br.gif) bottom right no-repeat;
line-height: .1;
}

.caption2:before
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_tl.gif);
background: url(images/caption_tr.gif) top right no-repeat;
line-height: .1;
}

.caption2:after
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_bl.gif);
background: url(images/caption_br.gif) bottom right no-repeat;
line-height: .1;
}

.caption .message
{
position: relative;
left: -22px;
padding: 0 0 0 32px;
min-height: 45px;
margin: 0 -12px 0 0;
background: url(images/caption_ml.gif) top left no-repeat;
font-size: 13px;
font-weight: normal;
height: 45px;
}

.caption2 .message
{
position: relative;
right: -22px;
padding: 0 32px 0 0;
min-height: 45px;
margin: 0 0 0 -12px;
background: url(images/caption_mr.gif) top right no-repeat;
font-size: 13px;
font-weight: normal;
height: 45px;
}

.caption > .message
{
height: auto;
}

.caption2 > .message
{
height: auto;
}

/* ACCOUNT */

form
{
margin: 0 150px;
}

textarea
{
width: 100%;
height: 100px;
}

.textfield
{
width: 100%;
}

label
{
font-weight: bold;
}

#account ul li
{
display: inline;
}

fieldset
{
margin-bottom: 10px;
}

/* PROFILE */

#profile #bar
{
height: 22px;
margin-left: 12px;
}

#profile #bar li
{
display: inline;
float: left;
}

#profile #bar #status
{
background: url(images/action_bar_frontcap.gif) top left no-repeat;
}

#profile #bar #friend
{
width: 33px;
}

#profile #bar #message
{
width: 29px;
}

#profile #bar #trade
{
width: 28px;
}

#profile #bar #ignore
{
width: 34px;
}

#profile .avatar
{
position: relative;
}

#profile .caption
{
position: absolute;
top: 80px;
left: 110px;
width: 105px;
}

#profile .status
{
background: url(images/action_bar_frontcap.gif) top left no-repeat;
margin-left: 10px;
}

/* DETAILS */

#details
{
height: 1%; /* Holly Hack */
}

#details #stats
{
float: right;
width: 100px;
margin: 0 0 10px 10px;
}

/* WISHLIST */

#wishlist .questing
{
background: url(images/wishlist_questing.gif) top right no-repeat;
}

#wishlist .bought
{
background: url(images/wishlist_bought.gif) top right no-repeat;
}

#wishlist .donated
{
background: url(images/wishlist_donated.gif) top right no-repeat;
}

/* ABOUT */

#about
{
height: 1%; /* Holly Hack */
}

/* GUILDS */

/* MULTIMEDIA */

/* JOURNAL */

/* FRIENDS */

#friends
{
height: 1%; /* Holly Hack */
}

#friends #friendGroup
{
margin-top: 10px;
}

#friends #friendGroup li
{
float: left;
width: 110px;
height: 130px;
text-align: center;
}

#friends #friendGroup li img
{
width: 96px;
height: 96px;
}

/* COMMENTS */

#comments dl dt
{
position: relative;
padding-top: 10px;
}

#comments dl dt.avatar img
{
position: absolute;
left: 0;
}

#comments dl dt.avatar2 div
{
text-align: right;
}

#comments dl dt.avatar2 img
{
position: absolute;
right: 0;
width: 120px;
}

#comments dl
{
padding-bottom: 90px;
}

#comments dl dd
{
margin: 0 120px 0 100px;
}

#comments .delete
{
margin-top: 10px;
text-align: right;
}

#comments #pagination li
{
display: inline;
}

#comments .admin li
{
text-align: right;
}

/* SIGNATURE */

#signature
{
text-align: center;
}

#signature h2
{
text-align: left;
}

/* MODERATE */

#moderate
{
padding: 10px;
border: 1px solid #639;
background: #9775B7;
}

#moderate a
{
color: #639;
}

#moderate li
{
display: inline;
}
What is a grunny?

Kairi Mi


someboyishere2

PostPosted: Thu Feb 01, 2007 8:35 pm


ok mrgreen
PostPosted: Fri Feb 15, 2008 7:44 pm


the signature thing is not working

P i lo t S l


gis001

PostPosted: Sun Mar 30, 2008 5:21 pm


wraaaaaaaaaah! wer wud i supposed to put this code.. pm me pleaaaaassse!!! redface cry cry
PostPosted: Sun Jul 20, 2008 3:58 am


Am i puting the code to the wrong place? Can someone tell me where to put the code? A really dum question but I'm confused.

Ateknia


Meriko
Captain

Aged Gaian

12,400 Points
  • Cat Fancier 100
  • Mark Twain 100
  • Elocutionist 200
PostPosted: Sun Jul 20, 2008 7:58 am


Here's where to put the code:

My Gaia > Account > Theme > Theme Override
Reply
Meri & Kimi's Inc.

Goto Page: [] [<] 1 2
 
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum