Applications icons

[Shnepsey]

Hi guys, 

i have recently installed codegame's skin, named cold space.

Now, in their website it shows a screenshot of the skin and in that screenshot there's an icon next to every application.

 

picture here :

http://codegame.net/uploads/imgs/cgn_1358015476__dkzfp.png

 

As you can see, for example

Where it says "Forums" there's a picture of a house next to it.

 

Basically the same thing like webflake, you see next to members(for example)

There is an icon of a person.

 

 

Now, my problem is... 

in my forum it doesn't show the icons it shows on codegame's website.. how do I solve this?

 

 

thanks

-Shnepsey.

[Skreamzja]

Well I don't really know why you keep saying my code never worked for you?

 

Hmm.

 

So here is what your going to do.

 

ACP > Looks and Feel > Skin Name > ipb_styles.css

 

and copy / paste this to the bottom of the board.

#nav_app_forums a:before {
content:"";
display:inline-block;
margin:-6px 8px -5px 0;
background:url(http://icons.iconarchive.com/icons/ahdesign91/icloud/16/Contacts-Group-icon.png) no-repeat top left;
width:16px;
height:16px;
}

and then remove the code you previously added.

[Shnepsey]

Help anyone ?

[Lock Down]

The picture doesn't work. And saying the pictures are ??  Different than your pictures? You do not have any pictures? 

[Shnepsey]

The picture doesn't work. And saying the pictures are ??  Different than your pictures? You do not have any pictures? 

This one should work then

http://i1.ytimg.com/vi/0c94Pr7e7_M/maxresdefault.jpg

 

As you can see, above the logo where all the applications tabs located in.

There is a little icon next to every tab.

For example, next to "forums" theres an icon of a little house.

 

The question is how do I enable it on my forum? or add these..

[Skreamzja]

you would need to add some css code for that mate. For example here is the forums one I've just cooked up.

#nav_app_forums a:before {
content:"";
display:inline-block;
margin:-6px 8px -5px 0;
background:url({style_images_url/image-here.png) no-repeat top left;
width:16px;
height:16px;
}

This is just some mock so you might need to tweak them a little with height and width.

[Shnepsey]

you would need to add some css code for that mate. For example here is the forums one I've just cooked up.

#nav_app_forums a:before {
content:"";
display:inline-block;
margin:-6px 8px -5px 0;
background:url({style_images_url/image-here.png) no-repeat top left;
width:16px;
height:16px;
}

This is just some mock so you might need to tweak them a little with height and width.

 

i dont understand how do I know what I'm supposed to fill up in this code? and also where do i put it ?

[Skreamzja]

i dont understand how do I know what I'm supposed to fill up in this code? and also where do i put it ?

 

It's just CSS code you would add to the bottom of the ipb_styles.css.

 

You would need to change the background code to an image link in your forum skin folder.

[Shnepsey]

It's just CSS code you would add to the bottom of the ipb_styles.css.

 

You would need to change the background code to an image link in your forum skin folder.

 

I did what you said, it seems like it made spaces on applications menu, between the applications I made it for..

But it won't show the icon I putted for it..

And yes, I did change the location of the icon from the code you gave above..

 

Thats how that code looks now :

 

#nav_app_forums a:after {
content:"";
display:inline-block;
margin:-6px 8px -5px 0;
background:url({style_images_url}/forumskin/menu_icons/Forums.png) no-repeat top left;
width:16px;
height:16px;
}

Edited August 8, 2014 by Shnepsey

[Lock Down]

Have you tried to right click the image spacee/holder and see what location it is looking for it by choosing open in new tab or properties?

[Shnepsey]

Have you tried to right click the image spacee/holder and see what location it is looking for it by choosing open in new tab or properties?

I don't understand, what do you mean?

[Lock Down]

I thought you said there is an empty space in front of the forum name. If there is then you can right click (with your mouse) that empty space and choose open in new tab or properties.

And it will show the location of the image it is trying to load. Check that folder to make sure the image exists in that folder.

[Shnepsey]

I thought you said there is an empty space in front of the forum name. If there is then you can right click (with your mouse) that empty space and choose open in new tab or properties.

And it will show the location of the image it is trying to load. Check that folder to make sure the image exists in that folder.

 

 

I think you misunderstood.

 

Look what I did was simple, I made a folder in my skin icons folder named menu_icons.

And just copied the location to the code he gave me..

 

This is how it looked like before I did it : 

 

 

Now it looks like this : 

 

 

 

You see, there's a space after the text "Forums".

In that space there should be an icon that I picked but for some reason it won't show..

[Skreamzja]

well there seems to be an issue there with your CSS

 

remove this part from the background

forumskin/

[Lock Down]

When you use inspect that nav bar or view page source what does it show for the area are on the right side of the tabs??

I think you misunderstood.

 

Look what I did was simple, I made a folder in my skin icons folder named menu_icons.

And just copied the location to the code he gave me..

 

This is how it looked like before I did it : 

 

 

Now it looks like this : 

 

 

 

You see, there's a space after the text "Forums".

In that space there should be an icon that I picked but for some reason it won't show..

[Shnepsey]

When you use inspect that nav bar or view page source what does it show for the area are on the right side of the tabs??

 

Nothing? just the normal stuff that always been there.