Replace icons on home page

[betclever]

Hi all,

Is there any possibility to replace images from the template I'm using to other sports icons but only on the homepage?

In fact, I want to keep the balls system for sub-forums...

Here is a print screen to give an exemple:



You can see the orange ball when a new message has been posted and I want to keep this system but only for sub-forums.

Thanks,

[Sir Chivas™]

Hi,

Can you please provide both your forum URL and forum version? We might be able to do this via template editing. I'll give it a try and if I do succeed, I'll post the correct answer here. 


Please be patient due to my lack of activity,
Sir Chivas.

[betclever]

Hello,

I'm using PHPBB3 and the URL to my website is: www.betclever.net

Thanks,

[Ange Tuteur]

Hello betclever,

Go to Administration Panel > Display > Pics management > Advanced > Icones for the forum

You can change the icons here :



The subforum icons for topics can be found in "Icons for topics"

[betclever]

Hello Ange Tuteur,

I know this manipulation but I have different sports and have to apply icons for each sport.

[Ange Tuteur]

You could add an image in the description of that forum, and adjust its position with CSS. An image with a class for example :

Code:

<img class="descImg" src="/myimage.gif" />

Replace /myimage.gif by the URL of your image.

Then you could adjust it with CSS, depending on where you want to display it.

Code:

.descImg {
  /* properties.. */
}

[betclever]

I just to replace the ball with the image.
Shall I do what you have posted to replace the ball with the icon I want?

Thanks,

[Ange Tuteur]

Since the way to change those Icons is by pics management, yes I think using the descriptions could be a easy way to hide the images. Once you insert the images with a classname, you should be able to reposition them over the icons on the homepage.

[betclever]

Ok, see print screen after the change:



Can we remove the blue ball and replace it with the icon?

PS: I can do it via the CP but it will apply this thing on sub-forums too and that's not good...

[_Twisted_Mods_]

the blue ball should be in you acp>display>pictures&colors>pictures management>advanced

either the "icons for the forms" tab
or "icons for topics" tab

[Ange Tuteur]

Add this to your CSS :

Code:

.forabg dl.icon {
  background:none !important;
  position:relative;
}

.descImg {
  position:absolute;
  left:1%;
  top:30%;
}

The first rule will hide the icons, and contain the new icons. The second rule is for positioning the icons. I made a rough test so it may need adjustments.

[betclever]

Almost perfect Ange tuteur !

Here is the result:



Just center the icon like the blue ball and it's perfect!

Shall I add this code for each forum?

Code:

<img class="descImg" src="/myimage.gif" />


[Ange Tuteur]

After taking a look, I think the best choice is to set it as a background image on a block. Instead of using the image tag, we'll use a div :

Code:

<div class="blocImg" style="background-image:url(/myimage.gif)"></div>

Same as before, just replace /myimage.gif by the URL of your image.

Then use this CSS :

Code:

.forabg dl.icon {
  background:none !important;
  position:relative;
}

.blocImg {
  width:50px;
  background-repeat:no-repeat;
  background-position:center;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
}

[betclever]

It works perfectly Ange tuteur, thanks again!

I will replace them tomorrow but I did a test and it was wonderful.

[Ange Tuteur]

You're welcome. ^^

You can leave your topic open until you replace them all, just in case you run into any problems.