Petlookup stuff...

[Tigurr]

Well, I've been working on the lookup of one of my pets, because I was inspired by someone who had amazing looking petlookups. But there are a lot of things I don't know how to do, and its difficult to find guides that go in depth, or are updated for the current layout of Neopets...

even so, I'm sorry if I overlooked something D:

 

In any case, I've numbered my problem areas...well, so far.

 

 

1: can I remove this?

2: Is it possible to change the font in these headers in more detail? Like, is it possible to change the size or the alignment?

3: How can I get my lookup to be more in the middle? Its like everything is being pushed to the right. :c

4: How can I remove these images?

 

Sorry for all the questions, I feel really demanding :'D but if anyone can help with anything at all that would be great.

You can see my pet's lookup for yourself here. It doesn't seem to show up properly on IE for some reason, though :x

[Cornflakes]

1. Yep, easily.

2. Alignment, maybe...depends on how wide the cell is. /shrugs/ I would have to do a little tinkering before I can say whether it's possible to change alignment or not. But you can definitely change the size. Easily :)

3. Lookups are easy to center.

4. I'm pretty sure you can take those images out.

 

IE sucks royally as a browser. However, it is important to make all coding cross-browser compliant.

 

I will tinker with your codes and see what I come up with. ;)

 

Copy and paste this into your pet's lookup:

<style type="text/css">
body{background:#A2D1E8;text-align:center;}
#header,#ban,#footer,.brand-mamabar,.sidebar{display:none;}
td{color:#056482;font:11px arial narrow;}
#main{border:0px none;width:800px;margin:0px auto;background:none;}
#content{width:800px;margin:0px auto;}
.contentModuleHeader,.contentModuleHeaderAlt{background:none;color:#297BA3;text-align:center;font:18px verdana;letter-spacing:1px;}
.contentModule,.contentModuleTable{border:0px none;}
.contentModuleContent table img{display:none;}
.contentModuleContent div img{display:inline;}
.contentModuleContent div img{display:none;}
.contentModuleContent #rating_ballot img{display:inline;}
</style>

test test test test.

 

If you have any questions at all, feel free to ask :)

[Tigurr]

Thank you! That was really helpful :3 And now I do indeed have some more things to ask :'D

 

I'd like to remove the little 'send' button next to the 'Neopet' header, and I also want to put an image above the bit that says 'ColaFlavouredPopcorn the Baby Tonu'. So...yeah...how? *-*

[Izzy ♥]

I have an in-depth guide :) Clickie!

[Tigurr]

I have an in-depth guide :) Clickie!

Thanks, I shall take a look at it :3

[Cornflakes]

Thank you! That was really helpful :3 And now I do indeed have some more things to ask :'D

 

I'd like to remove the little 'send' button next to the 'Neopet' header, and I also want to put an image above the bit that says 'ColaFlavouredPopcorn the Baby Tonu'. So...yeah...how? *-*

 

Alllrighty then...

 

<style type="text/css">
body{background:#C8E7FC;text-align:center;}
#navigation,.user,#header a img,#ban,#footer,.brand-mamabar,.sidebar{display:none;}
#header{height:120px;background:transparent url(http://www.mutablefire.com/neopets/headerbg.jpg)top left no-repeat;border:0px none;}
td{color:#056482;font:11px hand of sean;}
#main{border:0px none;width:800px;margin:0px auto;background:none;}
#content{width:800px;margin:0px auto;}
.contentModuleHeader,.contentModuleHeaderAlt{background:none;color:#056482;text-align:center;font:15px i hate comic sans;letter-spacing:2px;font-weight:bold;text-transform:lowercase;}
.contentModule,.contentModuleTable{border:0px none;}
.contentModuleContent table img{display:none;}
.contentModuleContent div img {display:none;}
.contentModuleContent #rating_ballot img{display:inline;}
#main a{color:#056482;}
#main a:hover{color:#00D533;}
#CustomNeopetView{height:400px;width:400px;}
</style>

<font size="3">⋆<a href="http://www.neopets.com/myaccount.phtml">account</a>⋆<a href="http://www.neopets.com/customise/">customise</a>⋆<a href="http://www.neopets.com/games/arcade.phtml">games</a>⋆<a href="http://www.neopets.com/explore.phtml">explore</a>⋆<a href="http://www.neopets.com/nf.phtml">news</a>⋆<a href="http://www.neopets.com/petcentral.phtml">pet central</a>⋆<a href="http://www.neopets.com/neoboards/index.phtml">boards</a>⋆<a href="http://www.neopets.com/objects.phtml">shops</a>⋆<a href="http://ncmall.neopets.com/mall/shop.phtml⋆page=&cat=">nc mall</a>⋆</font>

 

1. Only you can see the "send" button. ;)

 

2. Okay, putting an image in above the pet name gets a little tricky...but I have managed to make you something at Breakpack's lookup.

 

The tricky part is that we're actually using the Neopets #header div and just giving it a new background. So if you want to change the image, you have to put the new image location on the part that says "#header{background:transparent url(http://www.mutablefire.com_etcetc)}

and when you put in a new image, you'll have to put in how tall that image is where it says "#header{height:120px;}

 

Additionally, the fonts you want to use (like I Hate Comic Sans and Hand of Sean) cannot be seen by anyone who doesn't have them installed, which is a LOT of people. (I have thousands of fonts and I have never heard of Hand of Sean!) I recommend using websafe fonts. Google 'web safe fonts' for lists of what will pretty much work for everyone.

 

:king:

[Tigurr]

Alllrighty then...

 

1. Only you can see the "send" button. ;)

...that makes sense, actually. Ehehe. :'D

 

2. Okay, putting an image in above the pet name gets a little tricky...but I have managed to make you something at Breakpack's lookup.

Thank you! :3

 

Additionally, the fonts you want to use (like I Hate Comic Sans and Hand of Sean) cannot be seen by anyone who doesn't have them installed, which is a LOT of people. (I have thousands of fonts and I have never heard of Hand of Sean!) I recommend using websafe fonts. Google 'web safe fonts' for lists of what will pretty much work for everyone.

Yup, I knew that. :3 I wasn't planning on keeping them, but thank you, I think I will look that up.

 

Edit: I think I'm pretty much finished now! Thank you again for all your help! :'D

Edited June 21, 2010 by Tigurr

[Cornflakes]

;) Happy to help!

 

Now, back to being sad and lonely because no one else asks for lookup help.

[Tigurr]

Not to worry, I have three other pets and my userlookup still to go! Muahahaha...

[Cornflakes]

Not to worry, I have three other pets and my userlookup still to go! Muahahaha...

 

Haha, you are doing great. I loooove the image you made for Cola. We might have to collaborate someday. I do graphics and stuff but I just can't seem to make the cute designs that everyone wants!

[Tigurr]

Haha, you are doing great. I loooove the image you made for Cola. We might have to collaborate someday. I do graphics and stuff but I just can't seem to make the cute designs that everyone wants!

Thanks :D It's probably going to take a lot of tweaking until I'm properly happy with it, though. :3

 

Sorry to double post, but according to my friend the header doesn't show up properly on IE. I decided to check myself, and its true D: Ignore the japanese text. :3

 

This post has been edited by a member of staff (Native) because of a violation of the forum rules.

Posts merged. Please don't double post to keep the forums free from 'extra posts'. Use the edit button instead.

Please check your user inbox to see if you have been contacted regarding this incident, then review our rules.

[Cornflakes]

Arrrrgh. Here I am harping about cross-browser compliancy...anyway, I'll find some kind of fix and then I'll edit this post when I find it. :)

 

Edit. Aha! I fixed it :D

 

<style type="text/css">
body{background:#C8E7FC;text-align:center;}
#navigation,.user,#header a img,#ban,#footer,.brand-mamabar,.sidebar{display:none;}
#header{width:800px;height:200px;background:#C8E7FC url(http://i384.photobucket.com/albums/oo282/tigurr/colacloud.png) top left no-repeat;border:0px none;padding:0px;margin:0px auto;}
td{color:#000000;font:9px tahoma;text-align:center;}
#main{border:0px none;width:800px;margin:0px auto;background:transparent;}
#content{width:800px;margin:0px auto;}
.contentModuleHeader,.contentModuleHeaderAlt{background:none;color:#056482;text-align:center;font:15px lucida console;letter-spacing:3px;font-weight:bold;text-transform:lowercase;}
.contentModule,.contentModuleTable{border:0px none;}
.contentModuleContent table img{display:none;}
.contentModuleContent div img {display:none;}
.contentModuleContent #rating_ballot img{display:inline;}
#main a{color:#056482;}
#main a:hover{color:#00D533;}
#CustomNeopetView{height:400px;width:400px;}
</style>

<font size="3" color="#056482"><a href="http://www.neopets.com/myaccount.phtml">account</a>•<a href="http://www.neopets.com/customise/">customise</a>•<a href="http://www.neopets.com/games/arcade.phtml">games</a>•<a href="http://www.neopets.com/explore.phtml">explore</a>•<a href="http://www.neopets.com/nf.phtml">news</a>•<a href="http://www.neopets.com/petcentral.phtml">pet central</a>•<a href="http://www.neopets.com/neoboards/index.phtml">boards</a>•<a href="http://www.neopets.com/objects.phtml">shops</a>•<a href="http://ncmall.neopets.com/mall/shop.phtml?page=&cat=">nc mall</a><p>-<p><B>Colapop</b> is the social outcast of his dysfunctional family. He spends his days as far from his home as he has the nerve to go, taking in the world around him and letting his imagination take control as he creates his own story world for himself.

<p>Despite this, Cola's true wish is to have a friend who understands him - preferably a friend who will pay him a little more attention than <b>Salt</b>, who seems to see him as more of a portable food-carrier.
</font>

 

Try Sakanori's lookup if you want proof that it works :P

[Tigurr]

Arrrrgh. Here I am harping about cross-browser compliancy...anyway, I'll find some kind of fix and then I'll edit this post when I find it. :)

 

Edit. Aha! I fixed it :D

Thank you again for being so helpful! :D

[Cornflakes]

No prob Bob :) Helping makes me feel all good inside.

[Tigurr]

I hope its okay to bump my thread back up ._.' I didn't think it would be worth making a new thread, as its still lookup/css related, only now I'm editing my userlookup.

 

So...how can I get rid of or change the colour of the grey lines, such as the one above 'trades, auctions,' etc and the ones dividing up the trophies?

And I've also noticed that some of the images (the ones above 'Secret Avatars, 'Key Quest Tokens' and so on) stretch the page a bit...can I remove those images? If so, can I pick which ones? (I like the secret avatar image :'D)

 

Oh and, on a similar note...is the picture I've put up too big? I mean, I really like it. But I don't know if an image that you have to scroll to see the whole thing is a bit...too big. :3

[Cornflakes]

1. To hide ugly lines, just add this little snippet of code:

hr{display:none;}

 

2. To remove "Key Quest" and other images,

#usercollections img{display:none;}

(That should work, it's either display:none or visibility:hidden, so if it doesn't work, try the visibility. I'm too tired to test it. :P

 

3. Your image is bigger than I would use, but it's all about what YOU want on your lookup, right? :) So resize it in Photoshop if you think it's too big, or keep it if you like it. :D

Just to let you know, I have a fairly big monitor (1600xwhatever) and I didn't have to scroll to see it all.

[Noog]

Just for anyone who crosses this topic: Our ad-blocking guides on TDN not only block the advertisements, but it also blocks out that stupid nick bar at the top ;)

[Cornflakes]

Just for anyone who crosses this topic: Our ad-blocking guides on TDN not only block the advertisements, but it also blocks out that stupid nick bar at the top ;)

 

Indeed *nods*

But, you can use css to block it for everyone that visits your lookups. Yay :) It's my personal way of fighting The System without breaking the rules!

Uhhh it's not against the rules right? :whistle:

[Noog]

Both our ad blocking methods and CSS aren't against the rules. Although its a matter of time before they put another coding filter that prevents you from blocking it.

[Tigurr]

1. To hide ugly lines, just add this little snippet of code:

hr{display:none;}

Thank you :3

The grey line in the user info box still shows up, though. I don't mind that much, but I thought I would say.

 

2. To remove "Key Quest" and other images,

#usercollections img{display:none;}

(That should work, it's either display:none or visibility:hidden, so if it doesn't work, try the visibility. I'm too tired to test it. :P

Thank you. :D

3. Your image is bigger than I would use, but it's all about what YOU want on your lookup, right? :) So resize it in Photoshop if you think it's too big, or keep it if you like it. :D

Just to let you know, I have a fairly big monitor (1600xwhatever) and I didn't have to scroll to see it all.

Thanks for your opinion. I might crop it to make the height less...I'll think about it, I'm too lazy to do it right now :3

[Cornflakes]

I invented a way to remove the grey border in #userinfo, but it only works in Firefox. I could never find an alternative method of doing it...maybe someone will come in here and post one? Let's keep our fingers crossed. :laughingsmiley:

 

Here are the codes in case you want them. /shrugs

 

#userinfo table table table{border-collapse:collapse;border-spacing:0;border:0px none;}
#userinfo table table table td, #userinfo table table table th{border:0px none;border-style:hidden;}

 

Bonus!

If you put your code between <style / > and < / style> tags (thanks Viridian!!), you can fudge the filters and use position to pop the items lower. I always found them to be too high in the div. In that case, just add this to the #userinfo table table table part:

position:relative;top:10px;

If you want to make it lower, just make the 10 into a 20 or whatever works for you.

[Tigurr]

I invented a way to remove the grey border in #userinfo, but it only works in Firefox. I could never find an alternative method of doing it...maybe someone will come in here and post one? Let's keep our fingers crossed. :laughingsmiley:

 

Here are the codes in case you want them. /shrugs

 

#userinfo table table table{border-collapse:collapse;border-spacing:0;border:0px none;}
#userinfo table table table td, #userinfo table table table th{border:0px none;border-style:hidden;}

It works for Google Chrome as well, apparently :D

 

Bonus!

If you put your code between <style / > and < / style> tags (thanks Viridian!!), you can fudge the filters and use position to pop the items lower. I always found them to be too high in the div. In that case, just add this to the #userinfo table table table part:

position:relative;top:10px;

If you want to make it lower, just make the 10 into a 20 or whatever works for you.

When I change the style tags like that, it makes the top part of my userlookup disappear D: am I doing something wrong?

[Cornflakes]

I have no idea. Haha

 

Anyway, here's the original thread if you want to investigate further. I gotta go cook supper. :P