Free Customizeable User Profile
Replies
I decided I wanted a new, very simple profile, so I decided to code one up. Since I've been so thankful for 's free pet profiles free pet profile templates by Lea (updated 1/10/21), I decided to do a little work to make this available to others as well.
View at my profile:
Please read through the notes, because there are a couple more steps than just pasting in the code!
Step 0: Choose your art
See the cute little human drawing I have? You're going to want to choose your own piece of art to feature on your profile. For best results, this image should have a transparent background. Don't forget to credit whoever made the art in the comments section!
Step 1: Prep your profile
Go to Edit Profile.
In Column 1, put any sections you want to see on your profile EXCEPT the comment box. You MUST have the Profile section in here somewhere.
In Column 2, put ONLY your comment box.
In Column 3, add a new Blank Section.
Edit your Blank Section and paste the following code:
Step 2: Add in the code
Next, you'll want to visit your Profile Preferences.
Copy and paste in the code.
Step 3: Change the colors
There are three segments where you may want to edit colors.
Hex Color Picker | Browse color schemes that already have the hex colors chosen.
, {text-align: left; overflow: hidden; padding: 0px; background: linear-gradient(107deg, , , ); border: thin double ; border-radius: 5px;} /* main box colors */
The background of the boxes is a gradient made up of three colors, AAAAAA, BBBBBB, and CCCCCC. Choose three colors you like and put the hex codes in their place.
The border around the boxes is color DDDDDD.
a, a:visited {color: !important;} /* link colors */
Change EEEEEE for the color of your link text.
.wishlist_item img {border: thin double ; border-radius: 5px; padding: 1px; height: 50px; width: 50px; opacity: 0.8;}
Change FFFFFF for the color of the border around wishlist items (if you have them showing).
Step 4: Add in a background
The example background was created at http://dragdropsite.github.io/waterpipe.js but will need to be saved to your own image hosting site (like imgur or Photobucket). You can use any other picture you want as well though!
Under the background section, you're going to want to add your image link in between the quote marks. (Note the code doesn't say "Image link here" so that it works even before you've gotten to this step.)
body {background: url('IMAGE LINK HERE') no-repeat center center fixed; background-size: cover;}
Step 5: Fixing the art
You may have noticed two things about your artwork. One is that there's a funny white line next to it.
What you're going to do is preview your profile, right click on the white line and choose either "Inspect" or "Inspect Element" depending on what browser you have. You should see this:
You're going to want to copy that number and put it here:
### {background: none;}
(If you're having trouble with this part, feel free to ping me and I'll try to help!)
The other thing you might notice is that your image may overlap your profile sections too much. What you're going to look for is this section:
{position:absolute; width:2px; height:400px; left:180px; top:180px;}
You're going to want to decrease the number in left:180px until it looks right. If you get all the way down to 0px and it's still overlapping too much, you can go into the negatives.
Step 6: Hiding the Headers
Once you're done and happy with how it looks, you'll probably want to hide the headers that say things like 'Pets' and 'Profile.' Look for this
/* .header {display: none;} /
and remove the / and */. If you want to rearrange sections, you'll want to add these back later, otherwise there's nothing to grab onto!
Step 7: Fun Options
Look at Useful Profiles and Graphics Threads. In particular, you may want to look at the "Pet Headshot Overlays" section. :)
If you're having trouble, feel free to ping me and I'll try to help out! :)
Aahh.... I'm not sure what I'm doing wrong, but after going through the steps and updating my profile text, it didn't seem to change anything. I pasted the same code into a blank box and it turned it into a mess, so I've gotta reset but I'm not sure where I've went wrong ehehe...
Edit: I'm such a dummy, I forgot to add in the profile box like it said. Thank you for the code! I'll be figuring out how to edit it. The only thing I can't figure out is how to turn the static BG into a tiled one
Glad you were able to figure it out!
To change the background from a static one to a tiled one, you'll want to change this:
body {background: url('IMAGE LINK HERE') no-repeat center center fixed; background-size: cover;}
into this:
body {background: url('IMAGE LINK HERE') repeat;}
Thank you!! I was trying to do repeat-x,y, but I think thats an html code. CSS is new to me ;v;
Thanks! This looks really nice :) I'm still having some trouble as you can see on my profile.
The part that says "Blank Section" And I tried both .header {display: none;} and header {display: none;}
but the headers won't go away. Is there a way to get the background to be a gradient too? Right now I just set the color to black. Also the image you linked doesn't work for me, can you tell me the dimensions of what the background image should be in case I want to opt for an image background later?
The background of my textboxes is some kind of really light lavender like color, how do I change the color of that to something else?
Thanks again for making this, it looks nice!
For the header it should definitely be .header {display: none;}
Right now it looks like you don't have the . before the word header. Can you update it so I can take a look?
For the background image, it doesn't have to be a specific size because the way I've written it, it will always scale to the size of the browser. c: Just look for a large image enough image so it won't be blurry. I have to look into making it a gradient a bit more.
I noticed a typo in the image site; try this: http://dragdropsite.github.io/waterpipe.js
The background of your textboxes is going to always be a lighter version of whatever you set here:
, {text-align: left; overflow: hidden; padding: 0px; background: linear-gradient(107deg, , , );.
So for me, right now it looks like a light brown color.
(Also, if you want to use pastebin & send me a link to your code, I'll look over it some more in detail.)
Thank you! The link works yay, I now have a pretty background so the gradient background is not really needed anymore. Is it possible set a color myself for the inside of the textboxes? I just don't think this color matches the brown very well as it looks more pink to me and would rather have a more gold/orange type color there :)
I made a pastebin account, it's my first time so I hope I'm doing this right: https://pastebin.com/gF80HYaE
Alright, got the headers fixed and found how to change the textbox colors. Here's the new code.
For the color of the boxes, you'll need to change:
.block {background: ;}
right near the top. (You may also need to double check under "fixing the art" segment if that shows up with a background and just make sure I got the number right!).
It's perfect now, thank you so much! :D
Here I am again, hope you don't mind me coming with another request? ^_^ Pretty please~
Is it possible for me to also get my pets with large(preferably customisable) pictograms like you have on your profile? :) the 60x60px just aren't really doing it for me, too small. Maybe making it bigger would also fix their names, because right now they are not directly underneath their images. :(
I updated the old pastebin with the current code: https://pastebin.com/gF80HYaE
Sure!
This is to make the picture larger; just put this in wherever.
.avatar_head {width: 100px !important; height: 100px !important; margin-left: 15px !important;}
This is for each custom pet image. You'll need to copy and paste this for each pet.
* .avatar_head {background: url(CUSTOM IMAGE URL) no-repeat !important; background-size: contain !important; border: none; }
You'll have to count your pets (starting with 0 not 1!) to put in the correct number. BUT, for more options, I suggest looking at Subeta CSS Compendium under "Basic - Pet Shot Overlays" since it's explained there a lot better than I can.
Thank you so much!
Hello! I am having trouble removing the headers.
Could you look into my code and see where I am making my mistake?? code
Thanks! :)
| | | |
Ahh, that's totally my fault! I fixed it but then forgot to put the link to the new code up.
Just delete this entire section and it should work!
/* -----------------------
When you're done editing the profile, remove
the /* / from the segment below. If you
need to edit it in the future, then put the
/ */ back!
-------------------------- */
Let me know if you still have trouble. :)
Do you know how I can make my wishlist items make correct usage of the space they have? Because right now they are all in a vertical row, whilst there can easily fit 3 wishlist items on the horizontal row instead of just 1.
That's something you do from the "Edit Profile" section (the same place you add the blank section at the beginning). On the wishlist section, click the little edit icon and it lets you set how many items per row. :)
(Don't forget to comment out the .header {display: none;} part so you can edit it easily!)