New messages Members Forum rules Search
  • Page 1 of 1
  • 1
Forum moderator: kostova, Brazen  
uCoz Support Forum by uCozers » Coding » CSS » User Background Customization (sml[Default])
User Background Customization
kostovaDate: Sunday, 2009 August 09, 1:48 AM | Message # 1
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
This is a bit of a tutorial/idea, but it requires sacrifice of the field:website.

This idea includes profile background change at will, and all it requires is knowledge of css.
example/mock-up:

Code
$BODY$ <---just a quick replacement for all the codes that go in a profile page.
<div class="userbackground"></div>

The css:
Code
div.userbackground {background:url(<?if($_WWW$)?>$_WWW<?endif?>) repeat-x repeat-y;z-index:20;width:100%;height:100%;}
$BODY$ {z-index:21;}

If you are an avid html/css validator, you might want to put the css code into an inline stylesheet so the code parses without having errors.

Basically, you're using a z-index property to go behind your design and/or repeat the user's desired $_WWW$ or background image depending on how large their bg is.

Alternatively, you can do this:

Code
<img src="$_WWW$" style="z-index:20;width:100%;height:100%;"/>
<$BODY$ style="z-index:21;"></$BODY$>

The only problem is that if the image the user has submitted in placement of the Website field is smaller than the browser width, which in that case ANY, if not all images are like that, will be stretched. You can however, do the min-width/min-height solution for it or some form of javascript to resize properly and repeat if necessary.

Again, the $BODY$ is just my laziness to copy the profile page html layout.

I'm going to experiment with trying out the other fields instead of website, seeing as the website field is important for communication of users. ICQ seems the ideal replacement, but it only allows numbers.

Edited Byheysupp - Monday, 2009 August 10, 5:43 AM
 
Z10Date: Sunday, 2009 August 09, 1:57 AM | Message # 2
Font size: A | A |
Major
Group: uCozer
Message: 100
[ ]
Offline
This seems like an Interesting Concept, I might try fooling around with this. happy

"When life gives you lemons, make orange juice. Sit back, relax, and let the world wonder how you did it."
 
kostovaDate: Sunday, 2009 August 09, 4:59 AM | Message # 3
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
You can also go this way instead of using z-index properties.
body {background:url(<?if($_WWW$)?>$_WWW<?endif?>);}

I'm contemplating on whether to use it, here's a code I've devised if AOL allows http://,

Code
<a href="<?if($AOL$)?>http://www.$AOL$<?else?>/index/8-$USER_ID$<?endif?>"><?if($AOL$)?>http://www.$AOL$<?else?>/index/8-$USER_ID$<?endif?></a>

and in the Page for Editing User's Personal Data,
We add the "http://www." exactly near the AOL field to make users think the field already has the http://www. in it because it's max-length is not sufficient enough to create a long enough url. Especially for users that use, for example, a myspace url, facebook url, or one such as a deviantart which can get pretty long.

Edited Byheysupp - Sunday, 2009 August 09, 7:32 AM
 
Miss_StephxxDate: Monday, 2009 September 21, 1:23 AM | Message # 4
Font size: A | A |
Lieutenant
Group: uCozer
Message: 56
[ ]
Offline
well heyssup can i see ur website wwhere u use that

 
kostovaDate: Monday, 2009 September 21, 1:48 AM | Message # 5
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
Quote (Miss_Stephxx)
well heyssup can i see ur website wwhere u use that
As of now I can't show you.
Working on a redesign, but I might be able to provide some screenshots from the previous design..
 
Miss_StephxxDate: Monday, 2009 September 21, 1:56 AM | Message # 6
Font size: A | A |
Lieutenant
Group: uCozer
Message: 56
[ ]
Offline
okay

 
KroneDate: Tuesday, 2009 October 20, 2:05 AM | Message # 7
Font size: A | A |
Lieutenant
Group: uCozer
Message: 79
[ ]
Offline
Has anybody already tested this? If so please send me a screenshot smile

http://www.gamescenterarcade.com/
 
uCoz Support Forum by uCozers » Coding » CSS » User Background Customization (sml[Default])
  • Page 1 of 1
  • 1
Search:


Copyrights uCozers 2009 - 2024 To TOP
Refresh Smileys Manager