Close X

** CSS - The Gifts Box and Display **

Topic closed to new posts.
Callie Jean- *Has a New- Home

Ready, Set,- POUNCE!
 
 
Barked: Sun Jan 4, '09 8:13am PST 
We have an ID we can use to specify our gift box so we can change out the background. That ID is #gifts_box_static. This is also one area where we must use the "!important" phrase to make sure our changes work.

The default setting for the gift box is a background image with a border around it. We can change the background to a different image, to a color, to be transparent and we can change the color of the border.

To change the background image...

#gifts_box_static { background-image: url( YOUR-IMAGE-NAME ) !important; }

To change the background to a solid color...

#gifts_box_static {
    background-color: #44AA88 !important;
    background-image: none !important;
}

Note: Images sit on top of color. The image will still appear and cover up the color if we don't specify to remove it.

To change the background to transparent...
#gifts_box_static { background: transparent !important; }

Edited by author Mon Feb 22, '10 9:31pm PST

PJ *DB #29

Be Unique
 
 
Barked: Sun Jan 4, '09 8:14am PST 
To change the color of the border just add this property with the color code to the gift box...
    border-color: #880000 !important;

So a gift box with a color background and different color border will look something like this...

#gifts_box_static {
    background-color: #44AA88 !important;
    background-image: none !important;
    border-color: #880000 !important;
}

Note: The style and size of the border can also be changed, but we strongly recommend you DO NOT CHANGE those properties. The right edge of the gift box is extremely close to the right edge of the profile content box. Unfortunately, there just isn't much room to expand the border and not cause your profile to be pushed out to the right.

Oh, someone asked about the bow on the box... Well, it's the bow on the box. The way it is placed there cannot be controlled with CSS code. Besides, gifts always look better with bows on them.

Edited by author Mon Feb 22, '10 9:34pm PST

Callie Jean- *Has a New- Home

Ready, Set,- POUNCE!
 
 
Barked: Sun Jan 4, '09 8:14am PST 
There are some things that we do to our pages that will effect the way our display window for viewing gifts, rosettes and stars will look. Here are some things that you will need to adjust your display window so you can see what's in it when opened!

The background of the gift display window will pick up the background of your gift box. We have found if it is set to transparent or certain busy images, the opened display window can be hard to see. Here is a sample of the code you will need to change the background in the display window.

#gifts_box {
    background: #BFA370 !important
}

This sample shows a color background. You can also replace the color code with a url is an image if you like.

Edited by author Mon Feb 22, '10 9:36pm PST


PJ *DB #29

Be Unique
 
 
Barked: Sun Jan 4, '09 8:15am PST 
Do you make the Kitty Complexion/Doggie Dynamics box transparent? That also removes the white background behind the text message in the display box. Use this code to put it back in:

#gift_preview_message TABLE {
    background: #ffffff;
}

This will make the corners square instead of rounded, but the purpose of putting in this code is to be able to see your message.
Callie Jean- *Has a New- Home

Ready, Set,- POUNCE!
 
 
Barked: Sun Jan 4, '09 8:15am PST 
Does the text blend into the background because the colors are too similar? The font settings are picked up from your settings for 'TD' selector. If you happened to define the 'I' selector, that will override the TD definitions. You can change the font color in the display box with this:

I.ajax_gifts_messages {
    color: #444444 !important;
}

Edited by author Sat Jun 20, '09 7:00am PST

PJ *DB #29

Be Unique
 
 
Barked: Sun Jan 4, '09 8:16am PST 
This is an informational thread created by the admins at Pawsome Pages. As such, it is closed to further comments so to keep it simple for new members ( and some older ones wink ) to find the code they need.

Please feel free to start a new thread or use an existing thread on gift boxes should you have any questions.

Edited by author Sun Jan 4, '09 8:21am PST

Dakota

Principles ...- Values ...- Common Sense
 
 
Barked: Sat Feb 28, '09 12:35pm PST 
BUMP ...ing this up out of hidden threads.

Unrelated and repeat threads are removed to keep the Pawsome Pages forums clean and orderly so everyfur can find the help they need.

Please do your part to help by asking your questions in the thread that correlates with your question or problem.

Thank You
Callie Jean- *Has a New- Home

Ready, Set,- POUNCE!
 
 
Barked: Sat Nov 14, '09 4:34am PST 
Bump? naughty Just moving this one up in the queue!