Modifying #user modules

[Ysera]

Hi there! I decided to try and make my very first customized user lookup but have never coded using CSS before. So I have a specific question.

 

Is there a way to adjust each specific element of #user groups? (Sorry, I don't know what they're called.) If possible, I don't want to hide them and use HTML, because then, I'd have to manually update my stats.

 

For example, for #usercollections, I want to change the position of the stamps, battledome, etc.

 

Also, when I removed the "user lookup", my links and bold don't work anymore. How do I fix this? If it helps, here's my userinfo code:

 

#userinfo .contentModuleTable {
position: absolute;
top:485px;
left:140px;
width:345px;
height:265px;
}
#userinfo table table table {
border: 0 !important;
}
#userinfo img {
visibility: hidden;
}
#userinfo .medText table table img { visibility: hidden; }

 

and the code I used to remove the user lookup:

 

.content div a img, .content div b {
display: none;
}

[Mouseykins]

ok the modules are called:

#userinfo this is where your shield and other stats are.

#usershop this is your shop module

#usercollections is where your avatars and stamps and such are displayed

#userneopets is your neopets

#userneohome is your neohome

#usertrophies is your trophies module

#habitarium is your habitarium and this one can be removed from your layout if you wish.

#ncmall is the one with your NC Mall collection albums and wishlist. This one can also be removed from your layout.

 

It is against the rules to hide and retype your stats so don't do that. as for changing the position of the items in a module, you can't do that.

 

To help with your links not showing up I'd need more information before I can help. But I think it lies with one of your codes blocking out the entire thing. I'm not entirely sure how you did yours but I just hid the images and replaced them as part of the background.

What you could try is replacing one of the hiddens with visible so you can see which one is causing it.

[Ysera]

Thanks snwangl.

 

Too bad about the module items not being modifiable.

 

Yeah, I figured one of the codes was blocking it and I think it's the userlookup code. But even knowing that, I don't know how to fix it. Here's my code at the moment:

 

<div id="me">
Lookup under construction for the next 2 days or so.
</div>
<div id="links">
<br>My Links:
<br><br><a href="http://www.neopets.com/~JubbyJubJack">JubbyJubJack's Guide to Neopia</a>
<br><a href="http://www.neopets.com/~jamila233">Jamila's Food Club Betting Page</a>
<br><a href="http://www.neopets.com/~Kaikuto">Kaikuto's CSS Guide</a>
<br><a href="http://www.neopets.com/~Kacizilla">Kacizilla's Image Mapping Guide</a>
</div>
<style>
body {
background: #1e8787 url("http://i46.tinypic.com/sdfbwl.png") repeat-y top center;
text-align: center;
}
.content div a img, .content div b {
display: none;
}
.contentModule div a img, .contentModule div b {
display: inline;
}
.contentModuleHeader, #ban, #ncmall, #habitarium, #userneohome, #footer, .user, #nst, .sidebar, .brand-mamabar, hr, #ban {
display: none;
}
.contentModuleHeaderAlt {
display: none;
}
#main {
position: relative !important;
height: 100%;
width: 935px;
border: none;
margin-top: 0;
}
#header {
background: url("http://i46.tinypic.com/a2u71i.png") no-repeat top center;
height: 1600px;
width: 935px;
}
#content {
width: 935px;
margin-left: 3px;
margin-top: -140px;
border: 0px;
font: 14px Arial;
color: #FFFFFF;
}
.contentModule div {
top: 0;
}
.contentModuleContent {
background: transparent;
}
.contentModule, .contentModuleTable, #userinfo, .medText table {
border: none;
}
#userinfo .contentModuleTable {
position: absolute;
top: 485px;
left: 140px;
width: 345px;
height: 265px;
}
#userinfo table table table {
border: 0 !important;
}
#userinfo img {
visibility: hidden;
}
#userinfo .medText table table img {
visibility: hidden;
}
#usercollections {
position: absolute;
left: 530px;
top: 880px;
width: 332px;
height: 300px;
line-height: 95%;
}
#usercollections img {
visibility: visible;
}
#usershop {
position: absolute;
left: 135px;
top: 820px;
width: 210px;
height: 256px;
}
#usershop img {
visibility: visible;
}
#userneopets {
position: absolute;
left: 120px;
top: 1230px;
}
#userneopets img {
width: 170px;
height: 170px;
}
#usertrophies {
position: absolute;
left: 135px;
top: 1550px;
width: 732px;
}
#me {
position: absolute;
left: 500px;
top: 485px;
width: 300px;
height: 300px;
text-align: left;
}
#links {
position: absolute;
left: 140px;
top: 580px;
text-align: left;
}
A:link {
color: #f8aefd;
text-decoration: none;
font-weight: bold;
}
A:visited {
color: #a7c9fd;
text-decoration: none;
font-weight: bold;
}
AHOVER {
color: #d354d0;
text-decoration: none;
font-weight: bold;
}
ul.dropdown {
top: 40px;
background: #1e8787;
border: 2px solid #FFFFFF;
}
LI:hover UL.dropdown A {
color: #FFFFFF;
}
#navigation { width: 800px; }
#template_nav {
margin-top: -2px;
margin-left: -5px;
}
.nav_image img {
margin-left: 0px;
visibility: hidden;
display: block;
}
</style>

 

 

I'm not entirely sure how you did yours but I just hid the images and replaced them as part of the background.

 

I'm trying to do this but when I make them hidden, they also don't become clickable. How do I add the links back? Did you use an image map?

 

EDIT: Nevermind this. I solved it by adding

display: table-cell;

in the #userinfo img.

 

So, my only problem is the unclickable links. I did some debugging and it seems it wasn't the removal of the userlookup that's blocking it. I can't figure it out, though. Sigh.

[Mouseykins]

Oh one thing about your code that you should do is put all your CSS at the top and then your HTML at the bottom.

As for your links I have no idea. I've never run into that problem before. Maybe try adding one somewhere else just to test and see if that works.

I really don't know what to suggest.

[Ysera]

No worries. I'll try your suggestion to put css first before html when I get home. Thanks!

 

EDIT.

Ok, I now know what I've been doing wrong. There wasn't a problem with my links. Sigh. I put my links div over the #userinfo module because I wanted to save space. It turned out that the #userinfo covers up the links. When I changed the position of the div, I could click the links.

 

 

Ah well. Now I know what I can and can't do. :laughingsmiley:

[Mouseykins]

Well I'm glad you got it figured out. :)