Userpage Customization Tips and Tricks

This thread is pinned.

page 3 of 3 « Previous 1 2 3 71 total items

jakuro

jakuro

殁 4 LIFE

Cancel

I've been workin' on my page anndddd.. so far its okay, but I can't seem to finalize it! I have taken screenshots of my userpage and pointed out exactly what I want to change. I need help changing the color of the following:

Screenshot 1
Screenshot 2
Screenshot 3

Any of these that you know how to fix, please post :O I'm sure others seek to change these as well.

Signature
	Image
::wake up in a dying world looking like the antidote::

SolemnSerpent

SolemnSerpent

"Fate, up against your will."

Cancel

Screenshot 1:

To change the color of your username next to those links.

#breadcrumbs i {
color: #xxxxxx;
}

To change the color of the Minitoyko > Members > Country links

#breadcrumbs a {
color: #xxxxxx;
}

To change the color of the hover of the links.

#breadcrumbs a:hover {
color: #xxxxxx;
}

The wallpaper favorite/dimension text

.wallpapers dd p {
color: #xxxxxx;
}

Blue lines in the menu

#menu li:first-child {
border-top: 1px solid #xxxxxx;
}

#menu dd {
border-bottom: 1px solid #xxxxxx;

Achievements completed color

.admin {
color: #xxxxxx !important;
}

Not completed achievements

#menu li
color: #xxxxxx;
}

Screenshot 2:

Browse wallpaper code

#content .more {
background-color: #xxxxxx;
color: #xxxxxx;
}

"Currently watching" text color

#posts dd li {
color: #xxxxxx;
}

Timestamp & rating text color in watchlist

#menu .children span {
color: #xxxxxx;
}

Shoutbox color, then timestamp for the shoutbox messages

#menu #shoutbox dd {
color: #xxxxxx;
}

#menu #shoutbox dt span {
color: #xxxxxx;
}

Screenshot 3:

Blue box around the comment area in guestbook & shoutbox

#quick-reply textarea, form input[type="text"] {
border-top: 2px solid #xxxxxx;
border-left: 2px solid #xxxxxx;
border-right: 2px solid #xxxxxx;
border-bottom: 2px solid #xxxxxx;
}

Blue text that says "replying to Username"

form p {
color: #xxxxxx;
}

User's personal phrases & special titles

#posts dt p { color: #xxxxxx;}

I hope I covered everything; let me know if I left a code out by mistake, and if you have anymore requests, shoot away.

Also, it's best to do coding like this in Google Chrome, or Firefox + Firebug (Add-on for Firefox). Right click on certain items on your page, and click 'Inspect Element' - it'll show you the CSS coding, and once your familiar enough, you can edit anything on your page.

“I didn’t attend the funeral, but I sent a nice letter saying I approved of it.” —Mark Twain
“There's nothing wrong with you that reincarnation won't cure.” —Jack E. Leonard
Good Links: Tagging Guide || FAQ || Policy || "No Pixiv Allowed" || "If you're having girl problems, I feel bad for you son..."

jakuro

jakuro

殁 4 LIFE

Cancel

DUUUUUDE, awesome! Perfect! I figured out as much as I could but this will definitely top it off, thanks so much!

merged: 11-27-2011 ~ 03:08am
How do you change the little icon at the top of your page tab in the browser, like the user: http://maplerose.minitokyo.net
http://i42.tinypic.com/e7bg9j.jpg
See that little maple leaf next to the page name? o.o

Signature
	Image
::wake up in a dying world looking like the antidote::

tsuyutsuki

tsuyutsuki

The comeback (?)

Cancel

To change your favicon to you have paste this code on your HTML:

<link rel="shortcut icon" href=" LINK NAME HERE ">

You just have to paste the URL of the image there. Also, the image has to be 16 x 16 pixels. :D
I have one myself, and I love it XD

Avatar and Signature design by xxKurumi
Signature
	Image

ati

ati

Hi friends

Cancel

hi fist of all Aw, Thanks guys! i use this codes its cool
but i need more to look greet my page
plz tell me more thanks..........:)

I use this

#content { background-color:#xxxxxx; }
body { background-color: #xxxxxx;}
blockquote { background-color: #xxxxxx;border-color: #xxxxxx;}
blockquote p, blockquote .name { color:#xxxxxx; }
blockquote blockquote, blockquote blockquote blockquote blockquote {background:#xxxxxx; border-color: #xxxxxx;}
#content h1 { color: #xxxxxx; }
#content h2 { color: #xxxxxx; }
b { font-weight: bold; }
i { text-decoration: italic; }
td { background: #xxxxxx; }
a:hover {color: #xxxxxx;}
#posts dd { background: #xxxxxx; }
.post-body p {color:#xxxxxx;}
#posts dd {border-top:2px dotted #xxxxxx;}
#posts dd ul:last-child {background:#xxxxxx;}
#posts dd li a { color: #xxxxxx; }
#posts dd ul:first-child a { color:#xxxxxx; }
#posts dd ul:last-child a { color:#xxxxxx; }
.post-stamp, .post-stamp * {color:#xxxxxx;}
#posts dd ul, #description ul:first-child { background: #xxxxxx; }
form input[type="text"], form input[type="password"], textarea, select, #login-form input[type="text"], #login-form input[type="password"] { background:#xxxxxx;color:#xxxxxx;}
#footer, #footer div { height: ***px; }
#partners a { color: #xxxxxx;}
#copyright, #copyright a { color: #xxxxxx; }
#menu a { color:#xxxxxx;}
#menu a:hover { color:#xxxxxx; }
#nav-bar li:hover, #nav-bar a:hover {
background:#xxxxxx;color: #xxxxxx;}
#nav-bar li ul li:hover, #nav-bar li ul a:hover, #sections li ul li:hover, #sections li ul a:hover {background-color: #xxxxxx;color:#xxxxxx;}
#nav-bar li ul, #sections li ul, #login-form { background:#xxxxxx;}
#nav-bar li ul a, #sections li ul a { color:#xxxxxx; }
#tabs a { color:#xxxxxx; }
#tabs li:hover a { background:#xxxxxx;color:#xxxxxx;}
.scans p a { color:#xxxxxx; }
#ad-toggle {background: #xxxxxx; }
#featured { background: #xxxxxx; }
#profile-actions a{background-color:#xxxxxx;}
#profile-actions a:hover{background-color:#xxxxxx; color:#xxxxxx;}
#menu dt {color:#xxxxxx;}
#menu dd, #menu * {color:#xxxxxx;text-align:center;}
.post-stamp, .post-stamp * { color:#xxxxxx;}
#posts dd li:hover a {color:#xxxxxx }
#content {background: #xxxxxx; font-size: 10px; border-top: #xxxxxx solid 2px;}
#menu { background-color: #xxxxxx; border-top: #xxxxxx solid 2px;}
#menu li {color: #xxxxxx;}
#menu h2 {color: #xxxxxx;}
#body {background-color: #xxxxxx;}
#tabs span {color:#xxxxxx;}
#nav-bar a { color: #xxxxxx; background: transparent!important;}
#sections a { color: #xxxxxx; background: #xxxxxx;}
#backbone h1 {color: #xxxxxx;}
#backbone h1 { font-size: 0 pt; }
#nav-bar li ul li:hover, #nav-bar li ul a:hover, #nav-bar li:hover {background-color: #xxxxxx;color:#xxxxxx;}
#sections li ul li:hover, #sections li ul a:hover, #sections li:hover {background-color: #xxxxxx;color:#xxxxxx;}
#breadcrumbs i {color: #xxxxxx;}
#breadcrumbs a {color: #xxxxxx;}
#breadcrumbs a:hover {color: #xxxxxx;}
.wallpapers dd p {color: #xxxxxx;}
#menu li:first-child {border-top: 2px solid #xxxxxx;}
#menu dd {border-bottom: 2px solid #xxxxxx;
.admin {color: #xxxxxx !important;}
#menu licolor: #xxxxxx;}
#content .more {background-color: #xxxxxx;color: #xxxxxx;}
#posts dd li {color: #xxxxxx;}
#menu .children span {color: #xxxxxx;}
#menu #shoutbox dd {color: #xxxxxx;}
#menu #shoutbox dt span {color: #xxxxxx;}
#quick-reply textarea, form input[type="text"] {
border-top: 2px solid #xxxxxx;
border-left: 2px solid #xxxxxx;
border-right: 2px solid #xxxxxx;
border-bottom: 2px solid #xxxxxx;}
form p {color: #xxxxxx;}
#posts dt p { color: #xxxxxx;}
#search-form input.text {background:#xxxxxx;border:medium none;color:#xxxxxxx;}#search-form span {background:#xxxxxx no-repeat scroll -200px 0;color:#xxxxxx;}
#nav-bar input.submit {background: #xxxxxx repeat scroll -310px 0;color:#xxxxxx;}
#search-form label {background:transparent no-repeat scroll 40px 0;color:#xxxxxx;}
#menu .more { background-color: #xxxxxx; }

Signature Image

  • Mar 15, 2012

tsuyutsuki

tsuyutsuki

The comeback (?)

Cancel

I'd say you have enough for a test so far. My suggestion is that you put up those codes and then check what you need to change directly. It's easier to give you more precise codes this way. :)
Also, thanks for the codes, I snatched a few for myself~ XD

Avatar and Signature design by xxKurumi
Signature
	Image

ati

ati

Hi friends

Cancel

thanks but i cant change my search bar
thas Y i want more
thanks anyway

Signature Image

  • Mar 15, 2012

tsuyutsuki

tsuyutsuki

The comeback (?)

Cancel

Now that's weird, the codes you posted there worked just fine on my Search Bar. :P


merged: 03-15-2012 ~ 09:41pm
Btw, does anyone how to/if I can change the FB icon? I got a green version I'd like to add.

Avatar and Signature design by xxKurumi
Signature
	Image

ati

ati

Hi friends

Cancel

i want to change this
http://img403.imageshack.us/img403/8254/capturefdt.png
you know?
plz

Signature Image

  • Mar 16, 2012

omegamax

omegamax

Pedro Roman

Cancel

Quote by atii want to change this
http://img403.imageshack.us/img403/8254/capturefdt.png
you know?
plz

Here the ID# involved on the search bar.

--- Entire Search Box Background:

#search-form input.text {
}

--- Drop Down Menu of Search Box:

#search-form div ul {
}

--- Tags Button of Search Box:

#search-form span {
}

---- Search Button of Search Box:

#nav-bar input.submit {
}

Regards,

nya ~

ati

ati

Hi friends

Cancel

Thanks but its not work i know its not full code
i am new here can you tell me full code
plz
omegamax
your page is so good

Signature Image

  • Mar 17, 2012

omegamax

omegamax

Pedro Roman

Cancel

Quote by atiThanks but its not work i know its not full code
i am new here can you tell me full code
plz
omegamax
your page is so good

Well... here the values of each one as they are on the site right now, what does each thing was explained on the post of above. Remember that you might only need to modify the color & background values of each one.

#search-form input.text {
background: url("static.png") repeat scroll -10px 0 #8CA4C4;
border: medium none;
color: #FFFFFF;
display: block;
float: left;
height: 22px;
line-height: 22px;
width: 190px;
}

#search-form span {
background: url("static.png") no-repeat scroll -200px 0 #4E719E;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 22px;
line-height: 20px;
padding: 0 3px;
}

#search-form div ul {
background: none repeat scroll 0 0 #132036;
float: none;
height: auto;
padding: 2px;
width: auto;
}

#nav-bar input.submit {
background: url("static.png") repeat scroll -310px 0 transparent;
border: medium none;
cursor: pointer;
height: 22px;
padding: 0 3px;
width: 62px;
}

nya ~

ati

ati

Hi friends

Cancel

Thanks but i must forget it.............:(

Signature Image

  • Mar 18, 2012

tsuyutsuki

tsuyutsuki

The comeback (?)

Cancel

Hey, does anyone know how to change the background behind avatars? :0

Avatar and Signature design by xxKurumi
Signature
	Image

aozoraskies

Linguistics

aozoraskies

MT Age: 50 Dog Years

Cancel

Just use:

.avatar {background: #****** url(****) ; }

You might have to add padding codes as well. ;3

"Catch on fire with enthusiasm and people will come for miles to watch you burn" ☆.。・ ψ( ^ω^ )ψ ・°☆
hetalia-axis-powers dgrayman-black-fighters anime-fans-united tag-licious userpageskindesigns linguistics-team make-your-best
Current fandoms: 999 (aka Nine Hours, Nine People, Nine Doors) // Dangan Ronpa // Persona 4 // Gakuen Kino --- From my cold! Dead! Hands!

tsuyutsuki

tsuyutsuki

The comeback (?)

Cancel

Arigato ne, Aoao~! <3

Avatar and Signature design by xxKurumi
Signature
	Image

elisadevelon

Moderator

elisadevelon

Requiescat in pace

Cancel

Hello, I want to ask if there's a code for hiding ONLY the text "Latest wallpaper: Whateverthename". Thanks for help in advance.

We work in the dark to serve the light. We are Assassins.
Signature Image

aozoraskies

Linguistics

aozoraskies

MT Age: 50 Dog Years

Cancel

Hi Elisa, I've checked the codes and unfortunately no. It's just written as <h2> , not in a specific div or class or anything. Sorry. ^^;

Edit: but if you just want it to affect the <h2> in #content and not the menu, here's a walkabout:

Quote:
#content h2 {display:none}

#content #preview h2, #content #posts h2, #content dl.wallpapers h2, #content ul.scans h2
{display:inherit!important }


It's not foolproof and the Popular Scans title gets hidden too, but eh. It's just a possibility. :)

And you can use other HTML heading tags to replace <h2> in your profile content : http://www.w3schools.com/tags/tag_hn.asp

and modify say, <h3> like this:

Quote:
h3 { font-size: 24px}

Hope this helps? haha

"Catch on fire with enthusiasm and people will come for miles to watch you burn" ☆.。・ ψ( ^ω^ )ψ ・°☆
hetalia-axis-powers dgrayman-black-fighters anime-fans-united tag-licious userpageskindesigns linguistics-team make-your-best
Current fandoms: 999 (aka Nine Hours, Nine People, Nine Doors) // Dangan Ronpa // Persona 4 // Gakuen Kino --- From my cold! Dead! Hands!

aozoraskies

Linguistics

aozoraskies

MT Age: 50 Dog Years

Cancel

Sheqel, Save us from Spammers.
//this has been a prayer

"Catch on fire with enthusiasm and people will come for miles to watch you burn" ☆.。・ ψ( ^ω^ )ψ ・°☆
hetalia-axis-powers dgrayman-black-fighters anime-fans-united tag-licious userpageskindesigns linguistics-team make-your-best
Current fandoms: 999 (aka Nine Hours, Nine People, Nine Doors) // Dangan Ronpa // Persona 4 // Gakuen Kino --- From my cold! Dead! Hands!

CharlieAscende

Commander of Ascendance Corp.

Cancel

How do you add your DeviantART journal along with the list of previous ones to your userpage? Does it have to do with adding "extra"s to it or what? (I'm not really fan of coding nor doing the whole customization complexes - It hurts my brain a little XD).

Cancel

One of the biggest problems I faced was choosing proper colors for my userpage.. i kinda suck at choosing the right palette -.-

But I guess even others might have had some problem while choosing colors suitable to a particular image they wanna use as header and want the userpage to match with it.
So, I'm sharing this site which I found today:
http://colrd.com/create/image-dna/
It allows you to choose main colors from the image easily, and it also has other facilities, you can check the link. I hope it helps ^^

and I hope this is not the wrong place to post this comment -.-'

Why die only once when you can die a little everyday

jakuro

jakuro

殁 4 LIFE

Cancel

How do I fix this overflow?!
The only thing i haven't tried is checking my menu width.. maybe then the inherit values would work.. I have no clue
image here

***EDIT****

I figured it out!
Here is my code:

Quote: #menu {background: #b6ffe2; border-top: 1px; border-left: 0px solid #ffffff; max-width: 300px; }


plus this:

Quote: #menu li {
border-bottom: 1px solid #01ff78;
list-style-image: url(http://i580.photobucket.com/albums/ss250/JakuroSigs/bowaccent.png);
list-style-position: inside;
padding: .1em 0 .1em 8%;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
}

merged: 04-29-2016 ~ 06:41pm
Remove that ugly image shadow!

Quote:
/*DROP SHADOW REMOVE*/
#nav-bar li div, #sections div, .wallpapers dt a, .scans li > a, #preview > a, .avatar, .ac_results, #search-form div div { background: transparent;
display: block; padding-top: 0px; margin: 0 auto; }
#nav-bar li ul, #sections ul, #login-form form, .wallpapers img, .scans img, #preview img, .avatar img, .ac_results ul, #search-form div ul {
display: block; margin: -0px 0px 0px 0px; }
#nav-bar li b, #sections div b, .wallpapers dt a b, .scans li > a b, #preview > a b, .avatar b, .ac_results b, #search-form div b { width: 0px; height: 0px;
display: block; position: relative; top: 0px; right: 0px; float: right; }
#nav-bar li i, #sections div i, .wallpapers dt a i, .scans li > a i, #preview > a i, .avatar i, .ac_results i, #search-form div i { width: 0px; height: 0px; bottom: 0; bottom left;
display: block; position: relative; left: 0px; }

Signature
	Image
::wake up in a dying world looking like the antidote::

rotten180

rotten180

Time Travel Is Never Easy

Cancel

Hi i need some help here, i seem to be in a odd situation, i know ive written my code correctly

Code:
h1 {
text-align: center;
color:red;
}

that being my css, and

Code:
<html>

<head>
<title>Rotten180</title>
</head>

<body>
<h1> Testing content, this should be in red</h1>
</body>

</html>


this being my html, in my preview i only seem to get the text in default gray, instead of the red

support S20-SignatureStudio !!
Signature Image
http://myanimelist.net/profile/mageara38

page 3 of 3 « Previous 1 2 3 71 total items

Back to Userpage Customization | Active Threads | Forum Index

Only members can post replies, please register.

This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies. Read more.