The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Add an icon.....

+4
Joost
Ape
LucianoMicle
JennyorAlice
8 posters

Go down

In progress Add an icon.....

Post by JennyorAlice April 21st 2022, 6:22 pm

Okay. I'm trying to follow the instructions on this article here because I have the option on my forum that members can add an icon to their username if they wish (it's one of the things you can "purchase" in the points shop). I don't know if I'm just not following the instructions correctly on the article or if the icon I'm using isn't working but the icon isn't showing up on the forum. I thought I did everything the article said to do (never had a problem with it before).
JennyorAlice
JennyorAlice
Active Poster

Female Posts : 1154
Reputation : 50
Language : U. S. English
Location : U. S. A.

View user profile https://thefiresidechats.forumotion.com/

Back to top Go down

In progress Re: Add an icon.....

Post by LucianoMicle April 21st 2022, 9:01 pm

Hi friend, @JennyorAlice
Surely the problem will be in the same CSS of the tutorial, if you want to share the CSS to verify if it does not have errors or failure of the icon like other things.

Greetings.
LucianoMicle
LucianoMicle
Forumember

Posts : 61
Reputation : 2
Language : Spanish / English

View user profile http://lucianomicle.foroactivo.com/

Back to top Go down

In progress Re: Add an icon.....

Post by Ape April 22nd 2022, 12:44 am

Do you have the members in a group ? or will it be any member who buys the icon ?


Add an icon..... Left1212Add an icon..... Center11Add an icon..... Right112
Add an icon..... Ape_b110
Add an icon..... Keep_s10
Add an icon..... Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17640
Reputation : 1884
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Add an icon.....

Post by JennyorAlice April 23rd 2022, 2:58 pm

LucianoMicle wrote:Hi friend, @JennyorAlice
Surely the problem will be in the same CSS of the tutorial, if you want to share the CSS to verify if it does not have errors or failure of the icon like other things.

Greetings.

Here is the CSS I'm currently using.....
Code:

a[href="https://thefiresidechats.forumotion.com/u9"] {
            background: url("https://2img.net/i/fa/i/smiles/fresse.png") no-repeat;
            padding-left: 19px;
            padding-top: 2px;
        }

Ape wrote:Do you have the members in a group ? or will it be any member who buys the icon ?

The member is not in a group. It's just individual members that are buying the icon.
JennyorAlice
JennyorAlice
Active Poster

Female Posts : 1154
Reputation : 50
Language : U. S. English
Location : U. S. A.

View user profile https://thefiresidechats.forumotion.com/

Back to top Go down

In progress Re: Add an icon.....

Post by Ape April 23rd 2022, 4:26 pm

Give this a try


Code:
 a[href="https://thefiresidechats.forumotion.com/u9"] {
                    background: url("https://2img.net/i/fa/i/smiles/fresse.png") no-repeat !important;
                    padding-left: 19px !important;
                    padding-top: 2px !important;
                }

some times you have to tell the CSS files to do it not just list it so adding the code
Code:
!important
at the end of each line will make it do it if it likes it or not.


Add an icon..... Left1212Add an icon..... Center11Add an icon..... Right112
Add an icon..... Ape_b110
Add an icon..... Keep_s10
Add an icon..... Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17640
Reputation : 1884
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Add an icon.....

Post by JennyorAlice April 23rd 2022, 4:33 pm

Ape wrote:Give this a try


Code:
 a[href="https://thefiresidechats.forumotion.com/u9"] {
                    background: url("https://2img.net/i/fa/i/smiles/fresse.png") no-repeat !important;
                    padding-left: 19px !important;
                    padding-top: 2px !important;
                }

some times you have to tell the CSS files to do it not just list it so adding the code
Code:
!important
at the end of each line will make it do it if it likes it or not.

Tried that. Still not working.
JennyorAlice
JennyorAlice
Active Poster

Female Posts : 1154
Reputation : 50
Language : U. S. English
Location : U. S. A.

View user profile https://thefiresidechats.forumotion.com/

Back to top Go down

In progress Re: Add an icon.....

Post by Ape April 23rd 2022, 4:43 pm

Okay remove this part from the code
Code:
https://thefiresidechats.forumotion.com
you don't need the address of the forum just the user ID Wink
Code:
a[href="/u9"] {
background: url("https://2img.net/i/fa/i/smiles/fresse.png") no-repeat !important;
padding-left: 19px !important;
padding-top: 2px !important;
}

Add an icon..... Captu551

If you want to add more members with the same icon do it like this
Code:
a[href="/u9"], ]a[href="/u2"], ]a[href="/u12"]{
background: url("https://2img.net/i/fa/i/smiles/fresse.png") no-repeat !important;
padding-left: 19px !important;
padding-top: 2px !important;
}


Add an icon..... Left1212Add an icon..... Center11Add an icon..... Right112
Add an icon..... Ape_b110
Add an icon..... Keep_s10
Add an icon..... Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17640
Reputation : 1884
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

TonnyKamper likes this post

Back to top Go down

In progress Re: Add an icon.....

Post by JennyorAlice April 23rd 2022, 4:55 pm

Ape wrote:Okay remove this part from the code
Code:
https://thefiresidechats.forumotion.com
you don't need the address of the forum just the user ID Wink
Code:
a[href="/u9"] {
background: url("https://2img.net/i/fa/i/smiles/fresse.png") no-repeat !important;
padding-left: 19px !important;
padding-top: 2px !important;
}

Add an icon..... Captu551

If you want to add more members with the same icon do it like this
Code:
a[href="/u9"], ]a[href="/u2"], ]a[href="/u12"]{
background: url("https://2img.net/i/fa/i/smiles/fresse.png") no-repeat !important;
padding-left: 19px !important;
padding-top: 2px !important;
}

Tried that. Still not working.
JennyorAlice
JennyorAlice
Active Poster

Female Posts : 1154
Reputation : 50
Language : U. S. English
Location : U. S. A.

View user profile https://thefiresidechats.forumotion.com/

Back to top Go down

In progress Re: Add an icon.....

Post by Ape April 23rd 2022, 5:01 pm

Do you have a test account i can use to test this please

If yes please PM me the info.

Thanks.

Ape


Add an icon..... Left1212Add an icon..... Center11Add an icon..... Right112
Add an icon..... Ape_b110
Add an icon..... Keep_s10
Add an icon..... Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17640
Reputation : 1884
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Add an icon.....

Post by Ape April 23rd 2022, 6:08 pm

Hmm i am using the code here
Code:
a[href="/u9"] {
  background: url("https://2img.net/i/fa/i/smiles/fresse.png") no-repeat !important;
  padding-left: 19px !important;
  padding-top: 2px !important;
}
It works.
Add an icon..... Captu552
did you clear your browser before you looked ?
also you might find this will not show if you are logged out as some members report that they don't see it until they log in.



Add an icon..... Left1212Add an icon..... Center11Add an icon..... Right112
Add an icon..... Ape_b110
Add an icon..... Keep_s10
Add an icon..... Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17640
Reputation : 1884
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Add an icon.....

Post by JennyorAlice April 23rd 2022, 10:48 pm

Ape wrote:Hmm i am using the code here
Code:
a[href="/u9"] {
  background: url("https://2img.net/i/fa/i/smiles/fresse.png") no-repeat !important;
  padding-left: 19px !important;
  padding-top: 2px !important;
}
It works.
Add an icon..... Captu552
did you clear your browser before you looked ?
also you might find this will not show if you are logged out as some members report that they don't see it until they log in.


I am using that code that you have there and it's not working.



JennyorAlice
JennyorAlice
Active Poster

Female Posts : 1154
Reputation : 50
Language : U. S. English
Location : U. S. A.

View user profile https://thefiresidechats.forumotion.com/

Back to top Go down

In progress Re: Add an icon.....

Post by Joost April 23rd 2022, 11:06 pm

@JennyorAlice , do you have clear the cache in your browser?
I have test the css code above and it's works on my side. Smile
Joost
Joost
Active Poster

Male Posts : 1188
Reputation : 158
Language : Dutch, English
Location : The Netherlands

View user profile https://ondersteun.actieforum.com/

Back to top Go down

In progress Re: Add an icon.....

Post by Ape April 24th 2022, 1:35 pm

If you are happy for me to have a test account with Admin tools I will take a look for you see what the problem is.
If you have a test account please PM me it Wink

Also try and the CSS files to the top or bottom then try again.


Add an icon..... Left1212Add an icon..... Center11Add an icon..... Right112
Add an icon..... Ape_b110
Add an icon..... Keep_s10
Add an icon..... Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17640
Reputation : 1884
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Add an icon.....

Post by Ape April 26th 2022, 2:28 am

Your PM has been received with thanks.
Please read our forum rules: ESF General Rules


Add an icon..... Left1212Add an icon..... Center11Add an icon..... Right112
Add an icon..... Ape_b110
Add an icon..... Keep_s10
Add an icon..... Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17640
Reputation : 1884
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Add an icon.....

Post by Ape April 26th 2022, 2:58 am

okay that was a Easy fix I found the problem Wink but found a new problem.

In your CSS files you have the following code right at the bottom of your CSS files
Code:
e:Select Content
Not sure what this is for as it don't look to be doing anything and it is blocking your CSS files after it so any thing you add after that code Breaks My advice is to remove that code.
The code can be found at the bottom of your CSS files at 226

I have found a problem and can't work out why it's doing it as I made an order to not show the icon more then once but it has made 3 of them not the 1
Add an icon..... Captu554
I will tag @pedxz he is great with things like this Wink
@pedxz the members post with the icon is here https://thefiresidechats.forumotion.com/t140-chatbox-on-forum#421


Add an icon..... Left1212Add an icon..... Center11Add an icon..... Right112
Add an icon..... Ape_b110
Add an icon..... Keep_s10
Add an icon..... Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17640
Reputation : 1884
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Add an icon.....

Post by Niko April 26th 2022, 11:00 am

@Ape I have also took the change of having a look at it, and with the CSS code that has been added now
Code:
a[href="/u9"]{
background:url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat!important;
padding-left:19px!important;
padding-top:2px!important}

it works perfectly Wink

Add an icon..... Scher174
Niko
Niko
Hyperactive

Male Posts : 2462
Reputation : 127
Language : English, Italian, French
Location : Italy

View user profile https://www.fmcodes.net/

TonnyKamper likes this post

Back to top Go down

In progress Re: Add an icon.....

Post by pedxz April 26th 2022, 3:57 pm

Hello @JennyorAlice (and @Ape),

Ape wrote:I have found a problem and can't work out why it's doing it as I made an order to not show the icon more then once but it has made 3 of them not the 1
Add an icon..... Captu554
Add in the stylesheet (CSS) the following code
Code:
.poster-profile > br + a[href^="/u"], .avatar a[href^="/u"] {
  background-image: none !important;
  padding: 0 !important;
}
and replace
Code:
a[href="/u9"] {
  background: url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat !important;
  padding-left: 19px !important;
  padding-top: 2px !important;
}
to
Code:
a[href="/u9"]:not(.profile-icon):not(.mainmenu) {
  background: url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat !important;
  padding-left: 19px !important;
  padding-top: 2px !important;
}
pedxz
pedxz
Forumember

Posts : 677
Reputation : 136
Language : 🇵🇹

View user profile https://www.forumotion.com/create-forum/modernbb

Ape and TonnyKamper like this post

Back to top Go down

In progress Re: Add an icon.....

Post by JennyorAlice April 27th 2022, 12:34 am

pedxz wrote:Hello @JennyorAlice (and @Ape),

Ape wrote:I have found a problem and can't work out why it's doing it as I made an order to not show the icon more then once but it has made 3 of them not the 1
Add an icon..... Captu554
Add in the stylesheet (CSS) the following code
Code:
.poster-profile > br + a[href^="/u"], .avatar a[href^="/u"] {
  background-image: none !important;
  padding: 0 !important;
}
and replace
Code:
a[href="/u9"] {
  background: url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat !important;
  padding-left: 19px !important;
  padding-top: 2px !important;
}
to
Code:
a[href="/u9"]:not(.profile-icon):not(.mainmenu) {
  background: url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat !important;
  padding-left: 19px !important;
  padding-top: 2px !important;
}

@pedxz
@Ape

That got rid of the 3rd smiley but the second smiley is still there..
JennyorAlice
JennyorAlice
Active Poster

Female Posts : 1154
Reputation : 50
Language : U. S. English
Location : U. S. A.

View user profile https://thefiresidechats.forumotion.com/

Back to top Go down

In progress Re: Add an icon.....

Post by Niko April 27th 2022, 1:35 am

@JennyorAlice is your forum version still PhpBB2?
Because editing templates and adding a class on the avatar would help us in giving you a easy css code to solve even the "second smiley" Wink
Niko
Niko
Hyperactive

Male Posts : 2462
Reputation : 127
Language : English, Italian, French
Location : Italy

View user profile https://www.fmcodes.net/

TonnyKamper and pedxz like this post

Back to top Go down

In progress Re: Add an icon.....

Post by pedxz April 27th 2022, 7:35 pm

@JennyorAlice: Ok Replace this
Code:
a[href="/u9"]:not(.profile-icon):not(.mainmenu) {
          background: url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat !important;
          padding-left: 19px !important;
          padding-top: 2px !important;
        }
to
Code:
        a[href="/u9"]:not(.profile-icon):not(.mainmenu) {
          background: url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat;
          padding-left: 19px;
          padding-top: 2px;
        }
and
Code:
.poster-profile > br + a[href^="/u"], .avatar a[href^="/u"] {
          background-image: none !important;
          padding: 0 !important;
        }
to
Code:
.postdetails a[href^="/u"], .avatar a[href^="/u"] {
          background-image: none !important;
          padding: 0 !important;
        }
pedxz
pedxz
Forumember

Posts : 677
Reputation : 136
Language : 🇵🇹

View user profile https://www.forumotion.com/create-forum/modernbb

TonnyKamper likes this post

Back to top Go down

In progress Re: Add an icon.....

Post by JennyorAlice April 28th 2022, 12:38 am

@pedxz

The second smiley is still there.
JennyorAlice
JennyorAlice
Active Poster

Female Posts : 1154
Reputation : 50
Language : U. S. English
Location : U. S. A.

View user profile https://thefiresidechats.forumotion.com/

Back to top Go down

In progress Re: Add an icon.....

Post by كونان2000 May 11th 2022, 2:37 am

hi
Try the following code
Code:
.name a[href="/u9"] {
    background: url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat;
    padding-left: 19px;
    padding-top: 2px;
}

Add an icon..... 96766510
كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 36
Reputation : 21
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

TheCrow likes this post

Back to top Go down

In progress Re: Add an icon.....

Post by TheCrow May 12th 2022, 8:19 pm

Hey,

Next time you want to do something in the posts that will affect only on one specific area, make sure you add the parent element as @كونان2000 did so you avoid having it shown on other places too. If you have a look in the inspect element, the
Code:
.name
span is a parent to all names in the profiles. So by adding that to your code you make the image appear only there. So
Code:
.name
you target that element and by adding the
Code:
a[href*="/u9"]
to it you make only the user with id 9 to have that image. So it is
Code:
.name a[href*="/u9"]{...}
to do what you want.

If you want multiple users to have the same image, you can try and duplicating the target group as:
Code:
.name a[href*="/u9"], .name a[href*="/u10"] {...}
etc.

Best regards,
TC.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6780
Reputation : 785
Language : Greek, English

View user profile https://forumote.forumotion.com

TonnyKamper and كونان2000 like this post

Back to top Go down

In progress Re: Add an icon.....

Post by JennyorAlice May 14th 2022, 4:47 pm

كونان2000 wrote:hi
Try the following code
Code:
.name a[href="/u9"] {
    background: url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat;
    padding-left: 19px;
    padding-top: 2px;
}

Add an icon..... 96766510

It's still showing the 2nd smiley.

@TheCrow
JennyorAlice
JennyorAlice
Active Poster

Female Posts : 1154
Reputation : 50
Language : U. S. English
Location : U. S. A.

View user profile https://thefiresidechats.forumotion.com/

Back to top Go down

In progress Re: Add an icon.....

Post by pedxz May 15th 2022, 10:45 am

@JennyorAlice: Have you use this code?
Code:
.postdetails a[href^="/u"], .avatar a[href^="/u"] {
                  background-image: none !important;
                  padding: 0 !important;
                }
Any code I shared above works
pedxz
pedxz
Forumember

Posts : 677
Reputation : 136
Language : 🇵🇹

View user profile https://www.forumotion.com/create-forum/modernbb

Back to top Go down

In progress Re: Add an icon.....

Post by TheCrow May 15th 2022, 3:31 pm

@JennyorAlice,

You have to remove all the previous codes and leave just that one in order for the icon to be shown only next to the name.

Regards,
TC.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6780
Reputation : 785
Language : Greek, English

View user profile https://forumote.forumotion.com

TonnyKamper likes this post

Back to top Go down

In progress Re: Add an icon.....

Post by JennyorAlice May 15th 2022, 9:01 pm

pedxz wrote:@JennyorAlice: Have you use this code?
Code:
.postdetails a[href^="/u"], .avatar a[href^="/u"] {
                  background-image: none !important;
                  padding: 0 !important;
                }
Any code I shared above works

This one isn't working.

TheCrow wrote:@JennyorAlice,

You have to remove all the previous codes and leave just that one in order for the icon to be shown only next to the name.

Regards,
TC.

I already have been removing the old ones whenever I try a new one.
JennyorAlice
JennyorAlice
Active Poster

Female Posts : 1154
Reputation : 50
Language : U. S. English
Location : U. S. A.

View user profile https://thefiresidechats.forumotion.com/

Back to top Go down

In progress Re: Add an icon.....

Post by TheCrow May 15th 2022, 9:34 pm

@JennyorAlice, you left one code in:
Add an icon..... Screen60
This code is adding the icon to every link. Not only the name one. You should remove that one too. Smile

Once you remove that code, add this one and it should be fixed:
Code:
.name a[href*="/u9"] {
    background: url(https://2img.net/i/fa/i/smiles/fresse.png)no-repeat;
    padding-left: 19px;
    padding-top: 2px;
}

Regards.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6780
Reputation : 785
Language : Greek, English

View user profile https://forumote.forumotion.com

كونان2000 likes this post

Back to top Go down

Back to top

- Similar topics

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