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 a color + image to a specific group at the top of posts without JavaScript

5 posters

Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Add a color + image to a specific group at the top of posts without JavaScript

Post by كونان2000 April 11th 2024, 12:17 am

Hello everyone

With this trick, you can add a color to a specific group that appears at the top of posts
and You can also add photos to a specific group,

I know it's a common trick, but it was using JavaScript

Now you don't need to use JavaScript-jQuery

A trick I discovered that I wanted to share with you Bingo

Add a color + image to a specific group at the top of posts without JavaScript Ocia_a12
----------------------------------------------




phpBB2:



All versions
-------------

Find the next part in viewtopic_body template
Code:
<!-- BEGIN displayed -->

replace it with
Code:
 
<!-- BEGIN displayed -->
<div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>


Save and publish Add a color + image to a specific group at the top of posts without JavaScript 644535217

Installing the CSS
Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
Code:
* {
    text-decoration: none;
}

.conan2000-flower [style="color:?????"] {
    cursor: default;
    color: #0000 !important;
    display: block;
    background: ?????;
}

.conan2000-flower,.conan2000-flower strong {
    cursor: default;
    color: #0000 !important;
}
.conan2000-flower {
    background: #bcc2c7;
}
Replace question marks in CSS code with group color (HEX color OR color name i.e : red)


Add a color + image to a specific group at the top of posts without JavaScript Ocia_a14

CSS: An image of a specific group
Code:
.conan2000-flower [style="color:?????"] strong {
    background: url(https://i.servimg.com/u/f73/11/60/75/36/admini10.png) no-repeat;
}
Replace question marks in CSS code with group color


Add a color + image to a specific group at the top of posts without JavaScript Admini10 Add a color + image to a specific group at the top of posts without JavaScript Helper10 Add a color + image to a specific group at the top of posts without JavaScript Top10


_____________________________________________________________________
banana
كونان2000
كونان2000
Forumember

Male Posts : 205
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

skouliki, YoshiGM, SarkZKalie, TonnyKamper, poesia-verses and King Baldwing IV like this post

Back to top Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

Post by YoshiGM April 11th 2024, 4:21 pm

Hmm interesting.. We can save some loading resources using a simple template edit instead of a JS.

Good job :p
YoshiGM
YoshiGM
Active Poster

Male Posts : 1502
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

Post by tikky April 11th 2024, 6:46 pm

better is use the group as a reference (demo) but it's a good trick
tikky
tikky
Forumember

Posts : 898
Reputation : 157
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

Post by كونان2000 April 11th 2024, 11:55 pm

Thanks @YoshiGM and @tikky ^^

tikky wrote:better is use the group as a reference (demo) but it's a good trick
Oh I didn't know about it before but Glasses
The trick is in my first post
It is easy to modify and does not require expert programmers
It works on all versions the same way
lol!






كونان2000
كونان2000
Forumember

Male Posts : 205
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

Back to top Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

Post by Mihai April 26th 2024, 3:11 am

كونان2000 wrote:
Hello everyone

With this trick, you can add a color to a specific group that appears at the top of posts
and You can also add photos to a specific group,

I know it's a common trick, but it was using JavaScript

Now you don't need to use JavaScript-jQuery

A trick I discovered that I wanted to share with you Bingo

Add a color + image to a specific group at the top of posts without JavaScript Ocia_a12
----------------------------------------------




phpBB2:



All versions
-------------

Find the next part in viewtopic_body template
Code:
<!-- BEGIN displayed -->

replace it with
Code:
 
<!-- BEGIN displayed -->
<div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>


Save and publish Add a color + image to a specific group at the top of posts without JavaScript 644535217

Installing the CSS
Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
Code:
* {
    text-decoration: none;
}

.conan2000-flower [style="color:?????"] {
    cursor: default;
    color: #0000 !important;
    display: block;
    background: ?????;
}

.conan2000-flower,.conan2000-flower strong {
    cursor: default;
    color: #0000 !important;
}
.conan2000-flower {
    background: #bcc2c7;
}
Replace question marks in CSS code with group color (HEX color OR color name i.e : red)


Add a color + image to a specific group at the top of posts without JavaScript Ocia_a14

CSS: An image of a specific group
Code:
.conan2000-flower [style="color:?????"] strong {
    background: url(https://i.servimg.com/u/f73/11/60/75/36/admini10.png) no-repeat;
}
Replace question marks in CSS code with group color


Add a color + image to a specific group at the top of posts without JavaScript Admini10 Add a color + image to a specific group at the top of posts without JavaScript Helper10 Add a color + image to a specific group at the top of posts without JavaScript Top10


_____________________________________________________________________
banana

Hello,

my suggestion is to make that color for each group for ModernBB and AwesomeBB for the header, where the title is included for the topic creations - and when someone replys (from the staff ofc, to show the color also... and so on!) - and for members to show default color...
Mihai
Mihai
Forumember

Male Posts : 857
Reputation : 37
Language : Romanian, English
Location : Bucharest, Romania

https://allprojects.forumotion.com/

كونان2000 likes this post

Back to top Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

Post by كونان2000 April 27th 2024, 1:01 am

hi @Mihai
ok Dawa
: AwesomeBB:
كونان2000
كونان2000
Forumember

Male Posts : 205
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

TonnyKamper likes this post

Back to top Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

Post by Mihai April 27th 2024, 3:15 am

كونان2000 wrote:hi @Mihai
ok Dawa
: AwesomeBB:
can you send an screenshot please? Also the tag </span-div> is totally wrong!
Mihai
Mihai
Forumember

Male Posts : 857
Reputation : 37
Language : Romanian, English
Location : Bucharest, Romania

https://allprojects.forumotion.com/

Back to top Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

Post by كونان2000 April 27th 2024, 4:37 am

كونان2000
كونان2000
Forumember

Male Posts : 205
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

Back to top Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

Post by Beyonder April 29th 2024, 10:45 am

Interesting!
Beyonder
Beyonder
Forumember

Male Posts : 723
Reputation : 29
Language : English
Location : Beyond Realm

http://fictionalomniverse.forumotion.com/

Back to top Go down

Add a color + image to a specific group at the top of posts without JavaScript Empty Re: Add a color + image to a specific group at the top of posts without JavaScript

Post by كونان2000 April 30th 2024, 1:06 am

Thanks @Beyonder ^^
كونان2000
كونان2000
Forumember

Male Posts : 205
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

Back to top Go down

Back to top

- Similar topics

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