CODForums moves to xenForo!

Carlos said:
My existing CSS Node code were single file images. Let me find the code for ya:
[one sec]
Click to expand...

You'll have to insert the coordinates per node icon in your EXTRA.CSS the code won't help me, i know what code you have in your extra you just have to add coordinates for each one and link the image path to the sprite image.
 
Shelley said:
You'll have to insert the coordinates per node icon in your EXTRA.CSS the code won't help me, i know what code you have in your extra you just have to add coordinates for each one and link the image path to the sprite image.
Click to expand...
But... but.. where?
Code: 
.node.node_38 .linkNodeInfo  .nodeIcon, .node.node_38 .categoryForumNodeInfo .nodeIcon {
background-image: url("http://www.codforums.com/ForumIcons/forum-read-38.png");
background-position: 0px 0px;
}

.node.node_45 .forumNodeInfo .nodeIcon, .node.node_45 .categoryForumNodeInfo .nodeIcon {
    background-image: url("http://www.codforums.com/ForumIcons/forum-read-45.png");
    background-position: 0px 0px;
    opacity: 1.0;
}
.node.node_45 .forumNodeInfo.unread .nodeIcon, .node.node_45 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("http://www.codforums.com/ForumIcons/forum-unread-45.png");
    background-position: 0px 0px;
}
:confused:
 
.node.node_38 .linkNodeInfo .nodeIcon, .node.node_38 .categoryForumNodeInfo .nodeIcon {
background-image: url("http://www.path/to/sprite.png");
background-position: 0px 0px; <<<<<< Insert coordinates to image each icon will have different coordinates
}

.node.node_45 .forumNodeInfo .nodeIcon, .node.node_45 .categoryForumNodeInfo .nodeIcon {
background-image: url("http://www.path/to/sprite.png");
background-position: 0px 0px; <<<<<< Insert coordinates to image each icon will have different coordinates
opacity: 1.0;
}
 
Ahh.... Those background areas! I thought I had to add something new. *slaps head*

Okay, @Shelley @Sheldon new question then:

Going by this sheet:
Code: 
.sprites { background: url(sprites.png) no-repeat; }
.forum-read-10 { width: 48px; height 48px; background-position: 0 0; }
.forum-read-11 { width: 48px; height 48px; background-position: 0 -1029px; }
.forum-read-14 { width: 48px; height 48px; background-position: 0 -1078px; }
.forum-read-15 { width: 48px; height 48px; background-position: 0 -1127px; }
.forum-read-22 { width: 48px; height 48px; background-position: 0 -1176px; }
.forum-read-23 { width: 48px; height 48px; background-position: 0 -1225px; }
.forum-read-25 { width: 48px; height 48px; background-position: 0 -1274px; }
.forum-read-31 { width: 48px; height 48px; background-position: 0 -1323px; }
.forum-read-32 { width: 48px; height 48px; background-position: 0 -1372px; }
.forum-read-38 { width: 48px; height 48px; background-position: 0 -1421px; }
.forum-read-39 { width: 48px; height 48px; background-position: 0 -147px; }
.forum-read-4 { width: 48px; height 48px; background-position: 0 -1470px; }
.forum-read-40 { width: 48px; height 48px; background-position: 0 -1519px; }
.forum-read-41 { width: 48px; height 48px; background-position: 0 -1568px; }
.forum-read-42 { width: 48px; height 48px; background-position: 0 -1617px; }
.forum-read-43 { width: 48px; height 48px; background-position: 0 -1666px; }
.forum-read-45 { width: 48px; height 48px; background-position: 0 -1715px; }
.forum-read-5 { width: 48px; height 48px; background-position: 0 -1764px; }
.forum-read-6 { width: 48px; height 48px; background-position: 0 -1813px; }
.forum-read-9 { width: 48px; height 48px; background-position: 0 -1862px; }
.forum-unread-10 { width: 48px; height 48px; background-position: 0 -196px; }
.forum-unread-11 { width: 48px; height 48px; background-position: 0 -245px; }
.forum-unread-14 { width: 48px; height 48px; background-position: 0 -294px; }
.forum-unread-15 { width: 48px; height 48px; background-position: 0 -343px; }
.forum-unread-22 { width: 48px; height 48px; background-position: 0 -392px; }
.forum-unread-23 { width: 48px; height 48px; background-position: 0 -441px; }
.forum-unread-25 { width: 48px; height 48px; background-position: 0 -49px; }
.forum-unread-31 { width: 48px; height 48px; background-position: 0 -490px; }
.forum-unread-32 { width: 48px; height 48px; background-position: 0 -539px; }
.forum-unread-39 { width: 48px; height 48px; background-position: 0 -588px; }
.forum-unread-4 { width: 48px; height 48px; background-position: 0 -637px; }
.forum-unread-40 { width: 48px; height 48px; background-position: 0 -686px; }
.forum-unread-41 { width: 48px; height 48px; background-position: 0 -735px; }
.forum-unread-42 { width: 48px; height 48px; background-position: 0 -784px; }
.forum-unread-43 { width: 48px; height 48px; background-position: 0 -833px; }
.forum-unread-45 { width: 48px; height 48px; background-position: 0 -882px; }
.forum-unread-5 { width: 48px; height 48px; background-position: 0 -931px; }
.forum-unread-6 { width: 48px; height 48px; background-position: 0 -98px; }
.forum-unread-9 { width: 48px; height 48px; background-position: 0 -980px; }

Of the columns; which two coordinates should I worry about?
 
Last edited:
Carlos said:
Ahh.... Those background areas! I thought I had to add something new. *slaps head*

Okay, new question then:

Going by this sheet:
Code: 
.sprites { background: url(sprites.png) no-repeat; }
.forum-read-10 { width: 48px; height 48px; background-position: 0 0; }
.forum-read-11 { width: 48px; height 48px; background-position: 0 -1029px; }
.forum-read-14 { width: 48px; height 48px; background-position: 0 -1078px; }
.forum-read-15 { width: 48px; height 48px; background-position: 0 -1127px; }
.forum-read-22 { width: 48px; height 48px; background-position: 0 -1176px; }
.forum-read-23 { width: 48px; height 48px; background-position: 0 -1225px; }
.forum-read-25 { width: 48px; height 48px; background-position: 0 -1274px; }
.forum-read-31 { width: 48px; height 48px; background-position: 0 -1323px; }
.forum-read-32 { width: 48px; height 48px; background-position: 0 -1372px; }
.forum-read-38 { width: 48px; height 48px; background-position: 0 -1421px; }
.forum-read-39 { width: 48px; height 48px; background-position: 0 -147px; }
.forum-read-4 { width: 48px; height 48px; background-position: 0 -1470px; }
.forum-read-40 { width: 48px; height 48px; background-position: 0 -1519px; }
.forum-read-41 { width: 48px; height 48px; background-position: 0 -1568px; }
.forum-read-42 { width: 48px; height 48px; background-position: 0 -1617px; }
.forum-read-43 { width: 48px; height 48px; background-position: 0 -1666px; }
.forum-read-45 { width: 48px; height 48px; background-position: 0 -1715px; }
.forum-read-5 { width: 48px; height 48px; background-position: 0 -1764px; }
.forum-read-6 { width: 48px; height 48px; background-position: 0 -1813px; }
.forum-read-9 { width: 48px; height 48px; background-position: 0 -1862px; }
.forum-unread-10 { width: 48px; height 48px; background-position: 0 -196px; }
.forum-unread-11 { width: 48px; height 48px; background-position: 0 -245px; }
.forum-unread-14 { width: 48px; height 48px; background-position: 0 -294px; }
.forum-unread-15 { width: 48px; height 48px; background-position: 0 -343px; }
.forum-unread-22 { width: 48px; height 48px; background-position: 0 -392px; }
.forum-unread-23 { width: 48px; height 48px; background-position: 0 -441px; }
.forum-unread-25 { width: 48px; height 48px; background-position: 0 -49px; }
.forum-unread-31 { width: 48px; height 48px; background-position: 0 -490px; }
.forum-unread-32 { width: 48px; height 48px; background-position: 0 -539px; }
.forum-unread-39 { width: 48px; height 48px; background-position: 0 -588px; }
.forum-unread-4 { width: 48px; height 48px; background-position: 0 -637px; }
.forum-unread-40 { width: 48px; height 48px; background-position: 0 -686px; }
.forum-unread-41 { width: 48px; height 48px; background-position: 0 -735px; }
.forum-unread-42 { width: 48px; height 48px; background-position: 0 -784px; }
.forum-unread-43 { width: 48px; height 48px; background-position: 0 -833px; }
.forum-unread-45 { width: 48px; height 48px; background-position: 0 -882px; }
.forum-unread-5 { width: 48px; height 48px; background-position: 0 -931px; }
.forum-unread-6 { width: 48px; height 48px; background-position: 0 -98px; }
.forum-unread-9 { width: 48px; height 48px; background-position: 0 -980px; }

Of the columns; which two coordinates should I worry about?
Click to expand...

just add the background-position coordinates to each icon the icon.
 
Sheldon said:
Looks to me like 0 -539px etc..
Click to expand...
Looks like I got the answer I was looking for.

EDIT: Sorry, @Sheldon your idea didn't work. :(

This is what I did:
Code: 
/* Forum Icons */
.node.node_38 .linkNodeInfo  .nodeIcon, .node.node_38 .categoryForumNodeInfo .nodeIcon {
background-image: url("http://www.codforums.com/ForumIcons/sprites.png");
background-position: 0px 1421px;
}
EDIT: Hm. When I put in the minus sign ...it works? :confused:

HM. Interesting.
Shelley said:
Your icon width and height are already defined in the style properties. You don't have to worry about that.
Click to expand...
Hm. Thought so. Just making sure...
 
Last edited:
Carlos said:
Yeah, I know. It's just I didn't know I had to use the minus sign. I thought it was only just the numbers.
Click to expand...

Most of the coordinates (smilies, postratings) usually have negative coordinates inputs. You input the coordinates that you, yourself posted so they will have negative values.
 
Carlos,

After the work you've been doing with help from others here, if I were actually into games like COD, your site now resembles one that I would like to be apart of. Keep it up.
 
jmurrayhead said:
Carlos,

After the work you've been doing with help from others here, if I were actually into games like COD, your site now resembles one that I would like to be apart of. Keep it up.
Click to expand...
Thank you for the kind words.

New Update: All the forum categories has been translated into sprite sheets! :)
That's one down, one to go! :D
 
Carlos said:
Thank you for the kind words.

New Update: All the forum categories has been translated into sprite sheets! :)
That's one down, one to go! :D
Click to expand...
And you just cut out ~0.6 seconds on your load time. (y)

Before - http://www.webpagetest.org/result/131029_6J_RN2/
After - http://www.webpagetest.org/result/131030_QJ_KH9/

Now on to some other things. In those links above notice that really long blue bar? It's basically saying that your header image is taking a really long time to load. I see that it's currently a 244kb .png file. With you having a solid background there's no need for it to be a transparent png, here's a jpg version that's only 34kb.

CODFGhostsBanner2.webp


At first I couldn't even find these images until I noticed that they're in the rollover descriptions. Personally I'd just remove them or at the very least put them into an image sprite.
http://www.codforums.com/catIcons/CODFLobby.png
http://www.codforums.com/catIcons/ClanREC.png
http://www.codforums.com/catIcons/ClanChat.png
http://www.codforums.com/catIcons/ContentBunker.png
http://www.codforums.com/catIcons/CODMedia.png
http://www.codforums.com/catIcons/CODFAnnouncements.png
http://www.codforums.com/catIcons/CODFSuggestions.png
http://www.codforums.com/catIcons/CODFLounge.png
http://www.codforums.com/catIcons/CODFVG.png
http://www.codforums.com/catIcons/CODGc.png
http://www.codforums.com/catIcons/CODMW3.png
http://www.codforums.com/catIcons/MW2.png
http://www.codforums.com/catIcons/CODBO.png
http://www.codforums.com/catIcons/CODBO2c.png
 
Sheldon said:
Its not a solid black background either...
Click to expand...
Looks like you're correct, had to get my eye 2 inches from the screen to see it.

Here's a new header image that has the textured background laid under the transparent edges (instead of the solid color I'd done above).

CODFGhostsBanner3.webp
 
If anyone can do a better [header] banner than that above, please make one, and I'll upload it and apply it the next time I log into this account.

@Sheldon can I please use your CODForums camo logos? I need those in PNG's, please.
 

Similar threads

Moddis
Blasterforum moves to Xenforo!
Replies
8
Views
4K
Blasterdemon7
B
jauburn
PoetryCircle moves to Xenforo
Replies
5
Views
2K
cclaerhout
cclaerhout
Stuart Wright
AVForums moves to Xenforo
9 10 11
Replies
204
Views
136K
Stuart Wright
Stuart Wright
amogh
TEAMFIAT.COM moves from vBulletin to xenForo
Replies
5
Views
2K
emmy
emmy
Sonya
Making the move from vb4 to Xenforo
Replies
7
Views
1K
Alpha1
Alpha1
Top Bottom