Userlookup Coding Advice?

[pulpfreeoj]

I was wondering if anyone could help me with coding my userlookup. The current code is as follows:

<style>
body {
background: #efefef;
}
body, td, p, div, .medText {
font: 8pt "franklin gothic medium";
line-height: 10pt;
color: #777;
font-weight: normal;
}
a:link, a:active, a:visited, a b, #navigation a, .medText b {
color: #777;
font-weight: normal;
}
a:hover, a b:hover, #navigation a:hover {
color: #ccc;
}
h1 {
text-align: right;
font: 10pt "tahoma";
font-weight: bold;
margin-right: 3px;
border-bottom: 1px dotted #dadada !important;
}
#b, #r, #l, .contentModule, UL.dropdown {
background: #fff;
border: 1px solid #dadada;
margin: 0 0 5px;
}
b, #b a, .medText b {
color: #555;
font: 7.5pt "georgia";
}
#footer, hr, #ban, #userneohome, .sf, #nst, .user.medText, .brand-mamabar, #habitarium {
display: none;
}
#header, #main, #content, .contentModuleTable, .contentModuleContent, h1, .trophy_cell, .content, p {
background: none;
margin: 0;
border: 0;
}
#template_nav {
margin-top: 20px;
;
}
#header, #header a img, .nav_image {
height: 38px !important;
}
#main {
margin: 0 0 0 180px;
width: 600px;
}
#content {
width: 600px;
margin-top: -25px;
}
.content {
padding: 0;
}
.contentModuleHeader, .contentModuleHeaderAlt {
background: none;
font: 15pt "franklin gothic medium";
color: #555;
}
table {
border-spacing: 0;
}
#side {
left: 5px;
top: 53px;
width: 170px;
}
#side b {
font-weight: bold;
}
p {
text-align: left;
padding: 5px;
}
#l a {
font: 20pt "georgia";
}
#p img {
padding: 3px;
;
height: 50px;
border: none;
}
#p a {
display: inline-block;
overflow: hidden;
margin: 2px 5px;
padding: 2px;
width: 25px;
background: #fff;
border: 1px solid #dadada;
}
</style><div id="side" style="position: fixed;">
<div id="l"><a href="/~Rainbow_Dipped">Link <i>!</i></a></div>
<div id="l"><a href="/~goodwool">Needlework Gallery Info! <i>!</i></a></div>
<div id="l">
<a href="/userlookup.phtml?user=pulpfreeoj">Main</a>
<a href="/userlookup.phtml?user=concentratedoj">Side</a>
</div>
<div id="b">
<h1>Info</h1>
<p>I'm OJ! A friendly Neopian with some lovely pets, just hanging around. I collect orange (and other citrus fruit) items for my gallery, knit, crochet and other needlework items for my side gallery at concentratedoj, and anything else pretty that catches my eye to sit in my SDB and be admired. I like to dress up my pets. I'm a bit solitary, but I don't bite much; feel free to neomail me if you have anything particular to say. Pets are <i>not</i> up for adoption and items outside of my shop aren't for sale, <i>unless otherwise specified.</i> </p>
</div>
<div id="b">
<h1>Status</h1>
<p>
<b>Neomail:</b> Open<br><b>Neofriends:</b> Closed<br><b>Guilds:</b> Closed</p>
</div>
<div id="b">
<h1>Working On</h1>
<p>- Both galleries!<br>- Final Pet Customs (Always)<br>- Next Bank Account Level</p>
</div>
<div id="l"><p>Counters/Trackers go here.</p></div>
<div id="p">
<a href="/petlookup.phtml?pet=knightofearth"><img src="http://pets.neopets.com/cpn/knightofearth/1/1.png"></a><ahref="/petlookup.phtml?pet=Rainbow_Dipped"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Rainbow_Dipped/1/1.png"></a><a href="/petlookup.phtml?pet=Tnuq"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Tnuq/1/1.png"></a>
<a href="/petlookup.phtml?pet=goodwool"><img src="http://pets.neopets.com/cpn/goodwool/1/1.png"></a><ahref="/petlookup.phtml?pet=angorabunny"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/angorabunny/1/1.png"></a><a href="/petlookup.phtml?pet=sehetep"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/sehetep/1/1.png"></a>
</div>
<div id="b">
<p>Lookup by <a href="/userlookup.phtml?user=l3lo0">l3lo0</a>! Get it <a href="/~Orgrimmar">here!</a></p>
</div>
</div>

i got this coding from this page (as shown by the credit at the bottom), and I really like how orderly it is and how it looks. The thing is that although I have been a Neopian for a long time my coding knowledge is still very minimal.

I was wondering, can anyone tell me how to tell which part of the code changes the font for each section? Those links at the top are larger than I would like and I would just like to be able to know how to change it so I can customize size, color and font in any section if I want to. Also, can someone tell me how to put a non-scrolling image in all that empty space on the right side of the background? It looks like it was made for that and I would love to put one there.

My ultimate goal is to have this as a base for a common layout for both my main and side account (and any future sides I may decide to make) with appropriate changes as needed, for maximum consistency. Any help would be appreciated.

 

This topic has been edited by a member of staff (Anime).
The topic was posted in the wrong area.
Please check your user inbox to see if you have been contacted regarding this topic.
Per the reason above, this topic has been MOVED from Graphics Help to Computers & Programming.

[cassyox]

oh ive acctually used these layouts before, the link you gave just goes to the website which layout did you use?, also what type/colour/size font would you like? i can change it for you... neomail me on neopets, i wont be able to do it right now but for sure within 24 hours :)

[Mouseykins]

For the background the code you want is:

body {
	background: url("IMGURL");
	background-color: pink;
	background-attachment: fixed;
}

You can change the color to suit your style and if you want to use an image you can insert the link where it says IMGURL. If you don't want your image to be fixed just delete that part.

 

To alter your font size, color and whatever else you want to do with it, you may need to do some trial an error. The easiest way to do that is try changing the color by putting green, blue, pink or something that will be noticeable. From there you know which section you changed and can alter the correct ones accordingly. Another way is in the code look for:

<div id="side" style="position: fixed;">

<div id="side"> is the name of the element so in your style codes look for the same name with a # in front of it, like this:

#side {
left: 5px;
top: 53px;
width: 170px;
}

In this case #side does not contain any text values, so you'd need to alter the ones with #l as that is the id for the links in that area.

 

Most of the time while using someone else's layouts it requires some trial and error. With practice you'll get better at identifying certain elements and how to adjust them the way you want them to look.

 

A site I love to use for coding help is w3schools. If you scroll down a little bit on their main page they even have a color picker that you can use to help change your colors. When using a name just use "purple" or for a hexcode use "#00000". I hope this helps! Let me know if you need more help. :)

[pulpfreeoj]

@cassyox: I am pretty sure the one I used is called 'original lookup.' Thanks for your offer to help but I would prefer to do it myself!

 

@Mouseykins: Thank you so much for the advice, this sounds like exactly what I need!

 

I really appreciate your help, guys.

[minsy]

not sure if it will work but you can try reducing the width or shifting this code to the left,

ie:

#template_nav {
position: relative;
margin-top: 20px;
left: 1em;
width: 60%;}

(google if not sure)

 

as compared to the original code:

#template_nav {
margin-top: 20px;
;
}

not sure how it will play out *sorry, i havent coded in a long time on neo!* because the links that neopets uses are actually images, so i tend to see many people just make their own navigations and keep the original nav to display:none or visibility: hidden.

 

ohhh and also to identify the elements better and what code edits which part on the front end, i use a plug in tool on chrome! its called CSS viewer :) it even helps you to identify the colors and hex codes!