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

AvaVeridaE

Offline

Posted: 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;
}

Posted: 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

50
100
200

Offline

AvaVeridaE

Offline

Posted: 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!

Welcome to Gaia! ::

Gaia Guilds

CODED - The CSS/Profile guild [OPEN!]

Quick Reply

More Information