Welcome to Gaia! ::

Reply CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints)
[solved] Is it possible to do both?

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

Do you like the theme concept?
Yes
50%
 50%  [ 3 ]
So-So
50%
 50%  [ 3 ]
No
0%
 0%  [ 0 ]
Total Votes : 6


AvaVeridaE

 
Offline
PostPosted: Sat Apr 15, 2006 10:26 pm


I'm making a theme based on Okudagrams (the computer displays on Star Trek), and I've hit a wall. The border is supposed to go down the side like in the About box AND across the top, like in the Friends box. I can only figure out how to do it one way or the other.

I'm using this to do the side border:
background: url(*URL Here*) top left repeat-y;

And this to do the top border:
background: url(*URL Here*) top left repeat-x;


Is there some way to combine them? Can I do one of them some other way?

This is the entire theme, in case it helps.
/*
* This theme was designed and written by AvaveridaE.
*
* Theme (c) Samuel Hanes, Archindor Corp., 2006
* Okudagram concept (c) Paramount Pictures Inc.
*
* You may use and distribute this theme freely, provided
* that this copyright & license notice is attatched.
*/

/* Full Page */
#content
{
background-color: #000000;
color: #FFFFFF;
}

/* Section Titles */
.section h2
{
color: #FFFFFF;
}

/*** Sidebar ***/

/* Section Titles */
#sidebar .section h2
{
text-align: center;
}

/* Avatar Box */
#profile
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/red_top_tile.gif) top left repeat-x;
height: 1%;
}
#profile h2
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/red_corner.gif) top left no-repeat;
}
#bar
{
width: 20px;
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/red_side_tile.gif) top left repeat-y;
margin: -10px;
}
#bar #onlineButton { height: 60px; background: transparent url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/btn_online.gif) no-repeat; text-indent: -5000px;}
#bar #addButton {background: transparent url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/btn_addFriend.gif) no-repeat; height: 19px; width: 20px;}
#bar #msgButton {background: transparent url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/btn_pm.gif) no-repeat; height: 18px; width: 20px;}
#bar #tradeButton {background: transparent url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/btn_trade.gif) no-repeat; height: 19px; width: 20px;}
#bar #ignoreButton {background: transparent url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/btn_addIgnore.gif) no-repeat; height: 18px; width: 20px;}
#bar #addButton a {background: transparent url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/btn_ovr_addFriend.gif) -22px -90px no-repeat;}
#bar #msgButton a {background: transparent url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/btn_ovr_pm.gif) -22px -90px no-repeat;}
#bar #tradeButton a {background: transparent url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/btn_ovr_trade.gif) -22px -90px no-repeat;}
#bar #ignoreButton a {background: transparent url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/btn_ovr_addIgnore.gif) -22px -90px no-repeat;}

/* Details Box */
#details
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/red_top_tile.gif) top left repeat-x;
}
#details h2
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/red_corner.gif) top left no-repeat;
}

/* Wishlist */
#wishlist
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_top_tile.gif) top left repeat-x;
}
#wishlist h2
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_corner.gif) top left no-repeat;
}

/*** Main ***/

/* Sections */
#main .section
{
margin-left: 10px;
}

/* Section Titles */
#main .section h2
{
text-indent: 35px;
}

/* About */
#about
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_side_tile.gif) top left repeat-y;
}
#about h2
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_corner.gif) top left no-repeat;
}

/* Friends */
#friends
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/red_top_tile.gif) top left repeat-x;
}
#friends h2
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/red_corner.gif) top left no-repeat;
}

/* Journal */
#journal
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_top_tile.gif) top left repeat-x;
}
#journal h2
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_corner.gif) top left no-repeat;
}

/* Multimedia */
#multimedia
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_top_tile.gif) top left repeat-x;
}
#multimedia h2
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_corner.gif) left top no-repeat;
}

/* Comments */
#comments
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/red_top_tile.gif) left top repeat-x;
}
#comments h2
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/red_corner.gif) left top no-repeat;
}

/* Signature */
#signature
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_top_tile.gif) top left repeat-x;
}
#signature h2
{
background: url(http://img.photobucket.com/albums/v663/swordforge/Gaia Themes/Okudagram/blue_corner.gif) left top no-repeat;
}
PostPosted: Wed Apr 19, 2006 1:22 am


You've almost got it. Put your corner image in your header as you've done and your verticle image as the body background, but the make the header background the color that you want it for the bar.

Your coding would look like this then (assuming you want red):

#profile h2 {background: url(CORNER IMAGE URL) top left no-repeat #9F0B0B; }

#profile {background: url(VERTICAL BAR IMAGE URL) top left repeat-y #000000; }

As long as you actually have the black be part of the image, it will cover the red or blue of your background, making the corner look rounded still and you'll only need the one image. biggrin

Ava R.
Crew

3,500 Points
  • Gaian 50
  • Treasure Hunter 100
  • Hygienic 200
 
Offline

AvaVeridaE

 
Offline
PostPosted: Thu Apr 20, 2006 12:38 am


Thanks. I hadn't thought of that because I was tiling an image, but you're right, it works. Thank you!
Reply
CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints)
 
Manage Your Items
Other Stuff
More
Get GCash
Offers
More
Get Items
More Items
More
Where Everyone Hangs Out
Other Community Areas
  • Guilds
    fan clubs for the stuff you love
  • Chat
    chat in real time with other Gaians
  • Art Arenas
    browse & rate gaian art galleries
  • Clans
    play zOMG with others
More
Virtual Spaces
Fun Stuff
More
Gaia's Games
Mini-Games
More
Play with GCash
Play with Platinum
More