Log In
Dragon Weather Castform Don't have an account yet? Register now!
.

Forum Thread

[Stylish] How to edit the style of PH

Forum-Index Help Guides [Stylish] How to edit the style of PH
Pleiadesu
OFFLINE
Trainerlevel: 37

Forum Posts: 1,241
Posted: Thu, 23/04/2015 20:41 (8 Years ago)

TOO MUCH CODE WILL SLOW YOUR COMPUTER DOWN!

ALL THE CODES HERE ARE WRITTEN BY Cliff_Armor, NurseJoy and megamegashinka.

So I've found a way for you to edit the style of PH!
HOWEVER, for the code to work you need to have Stylish installed on your web browser. (You can find it in your browser's web store)*

My current theme using the codes below

So, go into Stylish and click 'Write new style'.

In the blank area, paste any of the codes below, then from the part below click 'Add', then choose 'URL starts with' and type 'http://pokeheroes'

Custom Party:
Show hidden content

Example.

#party_field {
background: Your color;
background: linear-gradient(Degree of gradient (Example: 135deg, 90deg), color1, color2)
}


Custom Main Page:
Show hidden content
#main {background : url(Your image url); background-size: auto}


Custom Userbar:
Show hidden content
#userbar {background: url(Your image url) !important; background-size:auto}


Custom Header:
Show hidden content
#header {background: url(Your image url) no-repeat !important; background-size:auto}


Custom Text Color:
Show hidden content

(KNOWN BUGS: The code may or may not work. I am currently reading up on PH's style info so do not ask me to fix this.)

Body text color works fine, but the others may not work.

Link custom color:
link {color: your color here (lowercase)}

Body text custom color:
body {color: your color here}

Hover text color (The color when you hover over a text link, for example.):
hover {color: your color here}

Visited link text color:
visited {color: your color here}


Depending on what changes you want, copy & paste this in the blank area.

Underneath, press 'specify' and change the stuff to 'URL starts with' and 'http://pokeheroes.com/'


Custom Background:
Show hidden content
(KNOWN BUGS: Background bleeds over to widgets.)
(There is no known way to stop this bug, as I have tried blocking the sources of the images for the interaction widgets. Meanwhile, you can enjoy the cool 'backdrop' of your widgets (I'm so sorry... I'm working on it, really!)

Code version 1.1.2 (NEW: Added support for smaller pictures, the code now automatically resizes them.)

(EDIT: Please PalPad me any bugs! I'll try my best to fix them!)

Here's an example.

body{background: transparent url(YOUR IMAGE HERE)no-repeat center top fixed!important;background-size:auto!important;}


Underneath, press 'specify' and change the stuff to 'URL starts with' and 'http://pokeheroes.com/'


Custom Cursor:
Show hidden content
body, a {cursor: url(YOUR IMAGE HERE), default!important}


Custom Site Fonts
Show hidden content
The code only works with fonts supported by CSS. You can find a list here.
h1, td, a, h2, body, feeds, textarea {font-family: "Your Font"}


CSS tags that work with the background: (Ex: your userpage, palpad, friendlist)
Show hidden content
userp_top, userp_box, div.poll_selector, td.poll_selector, span.userp_username are all things from your userpage you can manipulate.
private_chat and chat_head are both things from your palpad that you can manipulate.
friend_bar is currently undergoing experimentation.

WHEN YOU START USING YOUR
Example Tag {background-color: Random Color}
codes, make sure you stick a big !important after the color.


Quote from NurseJoyHi I've discovered some new codes for redesigning your userpage's about me and some other boxes which share the same CSS ID.
Here is the example:See

the code:

#userp_box {
background: url(YOUR IMAGE URL) ;
background-size: auto;
}


Note:Most content share same ID,so all will be colored in same way!!

To image your footer, see this,and use the code below

#footer {
background: url(YOUR IMAGE URL) ;
background-size: auto;
}




Click save and you're done!

*If you use Safari, go here and download Stylish. After that, instead of 'URL starts with' choose 'URL Prefix'.
megamegashinka
OFFLINE
Trainerlevel: 44

Forum Posts: 31
Posted: Thu, 23/04/2015 21:48 (8 Years ago)
thankss <3 hehehe
Pleiadesu
OFFLINE
Trainerlevel: 37

Forum Posts: 1,241
Posted: Fri, 24/04/2015 05:21 (8 Years ago)
CODE UPDATE!
Now has support for small pictures, the browser resizes them automatically!
Rage || More rage || Ultimate rage
"Don't let someone else make you feel guilty or ashamed about something you don't have control over, whether it is your skin color, your sexual preference or otherwise."
- Alex Bolton (I Hate Everything)
Pleiadesu
OFFLINE
Trainerlevel: 37

Forum Posts: 1,241
Posted: Mon, 27/04/2015 02:02 (8 Years ago)
BUMP
and lots of updates thanks to megamegashinka!
Rage || More rage || Ultimate rage
"Don't let someone else make you feel guilty or ashamed about something you don't have control over, whether it is your skin color, your sexual preference or otherwise."
- Alex Bolton (I Hate Everything)
DragonSumedh
OFFLINE
Trainerlevel: 95

Forum Posts: 1,639
Posted: Mon, 27/04/2015 02:03 (8 Years ago)
have u got permission from any mod for this


Anime-Planet.com - anime | manga | watch anime online
Pleiadesu
OFFLINE
Trainerlevel: 37

Forum Posts: 1,241
Posted: Mon, 27/04/2015 02:05 (8 Years ago)
@Dragon: Yup.
Rage || More rage || Ultimate rage
"Don't let someone else make you feel guilty or ashamed about something you don't have control over, whether it is your skin color, your sexual preference or otherwise."
- Alex Bolton (I Hate Everything)
-Strek-
OFFLINE
Trainerlevel: 36

Forum Posts: 561
Posted: Mon, 27/04/2015 16:03 (8 Years ago)
thanks to mega mega shinka and dakar and stylish is available in chrome web store
SaltyCactus
OFFLINE
Trainerlevel: 66

Forum Posts: 550
Posted: Mon, 27/04/2015 18:27 (8 Years ago)
I WAS WAITING FOR THIS OMG THANK YOU THANK YOU THANK YOU.

I found a better way to do the linear gradient code for the party_field

background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */

Example

also for the cursor code instead of the way you have it you can have it like this * {cursor: url(http://cur.cursors-4u.net/cursors/cur-8/cur740.png), default!important}. Which lets you have the cursor even when you are hovering over a link.
Pleiadesu
OFFLINE
Trainerlevel: 37

Forum Posts: 1,241
Posted: Tue, 28/04/2015 00:19 (8 Years ago)
Hmm, thanks.

Also, MASSIVE UPDATES! megamegashinka and I've unearthed some more CSS tags for the pal pad, user page, and friendlist!
Rage || More rage || Ultimate rage
"Don't let someone else make you feel guilty or ashamed about something you don't have control over, whether it is your skin color, your sexual preference or otherwise."
- Alex Bolton (I Hate Everything)
Navuso
OFFLINE
Trainerlevel: 69

Forum Posts: 1,829
Posted: Tue, 28/04/2015 16:40 (8 Years ago)
Thanks to your guide, and using a little CSS coding that I haven't used in years, I've got a rather unique layout, now. It might not be the easiest to read long blocks of text on, but it's appealing to me and it's not that hard for me to use :3

Plus, it's got a lot more color and my own flare to the site!

Screenshots:


A few areas that can be edited that aren't mentioned in the first post:
#lovebox - The give a hug/feed a berry parts on the index page.
#newsbox - The news area
#post_text - When you're posting a new message/thread, the area you type in.
#party_box - Party on the Notifications page
twinArmageddons
OFFLINE
Trainerlevel: 21

Forum Posts: 54
Posted: Tue, 28/04/2015 20:28 (8 Years ago)
This is AWESOME!

Thanks~

...I made my icon. (My OC is on it :P)
Am I pretty good at art?



Woop.
AoTora
OFFLINE
Trainerlevel: 65

Forum Posts: 1,312
Posted: Wed, 29/04/2015 11:31 (8 Years ago)
For some reason no matter what I do I cannot make the background work O.o

Aaand done :D

My beautiful new warm look on this site :3
I am collecting spinda plooshies OwO
Ikea
OFFLINE
Trainerlevel: 40

Forum Posts: 626
Posted: Fri, 01/05/2015 12:28 (8 Years ago)
Thanks so much for this, after two days of trying to find perfect stuff to add, i've come up with a nice, cold husky themed background. i love it <3


Breathe
VIXX_Bin
OFFLINE
Trainerlevel: 46

Forum Posts: 536
Posted: Wed, 06/05/2015 20:23 (8 Years ago)
Whoa, this is weird (in a good way). I found a way to make things transparent, like the header and such.

The only thing I can't figure out how to alter is the stuff Navuso mentioned. It won't work for me.


Disregard this, after a bit of tinkering I managed to figure it out. Thanks for the wonderful guide.

[R.I.P J2 (Granny), aged 105]
Space-Cookie
OFFLINE
Trainerlevel: 31

Forum Posts: 394
Posted: Thu, 07/05/2015 23:34 (8 Years ago)
I wish I could do this, but I can't download stuff..
Pleiadesu
OFFLINE
Trainerlevel: 37

Forum Posts: 1,241
Posted: Thu, 07/05/2015 23:37 (8 Years ago)
You don't need to, it's a browser extension. (Of course, if you use Safari, that's a different story.)
Rage || More rage || Ultimate rage
"Don't let someone else make you feel guilty or ashamed about something you don't have control over, whether it is your skin color, your sexual preference or otherwise."
- Alex Bolton (I Hate Everything)
Local_Coconut
OFFLINE
Trainerlevel: 8

Forum Posts: 1
Posted: Tue, 26/05/2015 13:52 (8 Years ago)
ooooOOOH THIS IS COOL
Puru
OFFLINE
Trainerlevel: 31

Forum Posts: 100
Posted: Thu, 28/05/2015 05:16 (8 Years ago)

Title: Pal Pad:Two more codes!

Pal Pad: If you want the inner color of Pal Pad like this-
Like this
Then,use StyleBot from the Chrome Web Store and Right-Click on your Pal Pad.Go to StyleBot option and click Style Element.
Write the following- (You cannot paste it!)


#private_chat {
background: Your Color;
}


To test,open you Pal Pad. ^^

Pal Pad: If you want the inner image of Pal Pad like this-
Image!
Then,use StyleBot from the Chrome Web Store and Right-Click on your Pal Pad.Go to StyleBot option and click Style Element.
Write the following- (You cannot paste it!)


#private_chat {
background: url(Your image url);
background-size: auto;
}


To test,open you Pal Pad. ^^

Note:This is not my PC!My is Windows 7 Ultimate!Its of anyone other...


Puru
OFFLINE
Trainerlevel: 31

Forum Posts: 100
Posted: Thu, 28/05/2015 16:24 (8 Years ago)

Title: Some More new Codes

Hi I've discovered some new codes for redesigning your userpage's about me and some other boxes which share the same CSS ID.
Here is the example:See

the code:

#userp_box {
background: url(YOUR IMAGE URL) ;
background-size: auto;
}

Note:Most content share same ID,so all will be colored in same way!!

To image your footer, see this,and use the code below

#footer {
background: url(YOUR IMAGE URL) ;
background-size: auto;
}





Puru
OFFLINE
Trainerlevel: 31

Forum Posts: 100
Posted: Fri, 29/05/2015 05:18 (8 Years ago)

Title: update to old codes

Earlier I stated that all the boxes which share same ID on yours or anyone else's userpage will be colored and imaged in same way.Well I have found a way to color only the box inside the About me in
Color
ex=this

#userlog{
background-color: YOUR COLOR CODE;
}



#userlog{
background: url(YOUR IMAGE LINK);
}



To change the background image of a forum main part,like this,use the following code


#post_field {
background: url(YOUR IMAGE URL) ;
background-size: auto;
}


To set background color of a forum,use

#post_field {
background-color: YOUR COLOR CODE ;
}


To change color of your footer

#footer {
background-color: YOUR COLOR CODE ;
}


To change color of sidebar in forums(where the userpeofile links and avatars are located) ,use this:

td.post_info {
background-color: #00ffff;
}


EX.

To color your side navbar in a gradient way like this the code is:

#sidebar {
background: linear-gradient(YOUR COLOR,YOUR COLOR, YOUR COLOR, YOUR COLOR, YOUR COLOR, TOUR COLOR, YOUR COLOR);
/* For Safari 5.1 to 6.0 */
/* For Opera 11.1 to 12.0 */
/* Standard syntax (must be last) */
}


The code I used was this

#sidebar {
background: linear-gradient(red,ForestGreen, Aqua);
/* For Safari 5.1 to 6.0 */
/* For Opera 11.1 to 12.0 */
/* Standard syntax (must be last) */
}


Have you ever thought about changing the Pokemon boxes in your daycare which show which Pokemon are there.Well I am contributing some more codes to set its background color,image and gradient.The gradient in my daycare looks like this

To set a background color:

#party_field {
background-color: #00ffff;
}


background Image:

#party_field {
background: url(http://i.imgur.com/RF8zsdI.png) ;
background-size: auto;
}


Gradient:

#party_field {
background: linear-gradient(YOUR COLOR NAME,YOUR COLOR NAME,YOUR COLOR NAME );
/* For Safari 5.1 to 6.0 */
/* For Opera 11.1 to 12.0 */
/* Standard syntax (must be last) */
}