Replace icons on home page

Go down

In progress Replace icons on home page

Post by betclever on October 26th 2014, 4:29 pm

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,

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

In progress Re: Replace icons on home page

Post by Sir Chivas™ on October 26th 2014, 7:09 pm

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.
avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6810
Reputation : 433
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: Replace icons on home page

Post by betclever on October 26th 2014, 7:12 pm

Hello,

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

Thanks,

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

In progress Re: Replace icons on home page

Post by Ange Tuteur on October 26th 2014, 9:31 pm

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"
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: Replace icons on home page

Post by betclever on October 26th 2014, 9:35 pm

Hello Ange Tuteur,

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

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

In progress Re: Replace icons on home page

Post by Ange Tuteur on October 26th 2014, 9:39 pm

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.. */
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: Replace icons on home page

Post by betclever on October 26th 2014, 9:40 pm

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,

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

In progress Re: Replace icons on home page

Post by Ange Tuteur on October 26th 2014, 9:48 pm

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: Replace icons on home page

Post by betclever on October 26th 2014, 9:50 pm

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...

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

In progress Re: Replace icons on home page

Post by _Twisted_Mods_ on October 26th 2014, 9:58 pm

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
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

In progress Re: Replace icons on home page

Post by Ange Tuteur on October 26th 2014, 10:00 pm

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: Replace icons on home page

Post by betclever on October 26th 2014, 10:05 pm

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" />

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

In progress Re: Replace icons on home page

Post by Ange Tuteur on October 26th 2014, 10:19 pm

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;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: Replace icons on home page

Post by betclever on October 26th 2014, 11:25 pm

It works perfectly Ange tuteur, thanks again!

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

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

In progress Re: Replace icons on home page

Post by Ange Tuteur on October 26th 2014, 11:31 pm

You're welcome. ^^

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

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum