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 options, appearing at the top of topics to change the background color, text, and codes

+4
YoshiGM
Ape
poesia-verses
كونان2000
8 posters

Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Add options, appearing at the top of topics to change the background color, text, and codes

Post by كونان2000 May 1st 2024, 10:35 am

Hello everyone!
Add options, appearing at the top of topics to change the background color, text, and codes
Add options, appearing at the top of topics to change the background color, text, and codes Y3iBdr2
https://i.postimg.cc/G3B9J7Dt/Animation.gif
-------------------------------------------

:It works on all versions of the forum
Add options, appearing at the top of topics to change the background color, text, and codes 31-20e3  12 colors
Add options, appearing at the top of topics to change the background color, text, and codes 32-20e3  transparent color
Add options, appearing at the top of topics to change the background color, text, and codes 33-20e3  return button to default mode


Installation method
__________________________________



Find the next part in viewtopic_body template
Code:
{POLL_DISPLAY}
replace it with
Code:

{POLL_DISPLAY}
<div class="post-COUNT">
 <script>document.write('<style type="text/css">.post-COUNT { text-align: center; border: solid #00000040 1px; margin: 10px; padding: 5px; border-radius: 10px; background: #fff;}.qonan2000 { position: relative; display: inline-block;} .qonan2000-content { display: none; position: absolute; background-color: #f9f9f9; width: 140px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 999999;} .close-btn-h1 { position: absolute; right: 0; top: 10px; cursor: pointer; line-height: 0; font-size: 30px;  font-weight: bold; color: red;} button.qonan2000-btn-h1 { border: solid #00000040 1px; margin-right: 13px; padding: 5px;}.conan20000-post,.konan2000-content,.konann2000-content, .conan2000-post{ cursor: pointer; padding: 7px;} .conan20000,.konan2000,.konann2000,.conan2000 { border: solid 1px #0000006b; background: white; margin: 4px; display: inline-block;} div#konan2000-Default,div#konann2000-Default,div#conan2000-Default,div#conan20000-Default { cursor: pointer; background: #0000; border: solid 1px #0000004a; width: 100%; margin: 0;} .conan2000:hover, .conan20000:hover,.konan2000:hover,.konan2000:hover { background: #0000003d !important;} blockquote,blockquote font, .quote_content font,dl.codebox {color: initial;} </style>');</script>
  
<!-- Text colors for posts -->                  
<div class="qonan2000">              
<button class="qonan2000-btn-h1">text posts</button><div class="qonan2000-content"><span class="close-btn-h1">×</span><div class="konan2000-content-color">
    <div class="ko0nan2000" style="background: #2a013a;color: #ffffff;width: 100%;margin-bottom: 11px;">text</div>          
    <div class="konan2000" data-color="#F44336"><div class="konan2000-content" style="background:#F44336"></div></div>
    <div class="konan2000" data-color="#FF9800"><div class="konan2000-content" style="background:#FF9800"></div></div>
    <div class="konan2000" data-color="#FFEB3B"><div class="konan2000-content" style="background:#FFEB3B"></div></div>
    <div class="konan2000" data-color="#4CAF50"><div class="konan2000-content" style="background:#4CAF50"></div></div><br />
    <div class="konan2000" data-color="#00BCD4"><div class="konan2000-content" style="background:#00BCD4"></div></div>
    <div class="konan2000" data-color="#2196F3"><div class="konan2000-content" style="background:#2196F3"></div></div>
    <div class="konan2000" data-color="#9C27B0"><div class="konan2000-content" style="background:#9C27B0"></div></div>
    <div class="konan2000" data-color="#E91E63"><div class="konan2000-content" style="background:#E91E63"></div></div><br />
    <div class="konan2000" data-color="#FFFFFF"><div class="konan2000-content" style="background:#FFFFFF"></div></div>
    <div class="konan2000" data-color="#9E9E9E"><div class="konan2000-content" style="background:#9E9E9E"></div></div>
    <div class="konan2000" data-color="#000000"><div class="konan2000-content" style="background:#000000"></div></div>
    <div class="konan2000" data-color="#5D4037"><div class="konan2000-content" style="background:#5D4037"></div></div><br />
    <div class="konan2000" data-color="#0000" style="background: #0000;border: solid 1px #0000;cursor: pointer;">transparent</div><br />
    <div class="konan2000" id="konan2000-Default">Restore Default</div>
</div></div></div>          
 
<!-- Background colors for posts -->                
<div class="qonan2000">
<button class="qonan2000-btn-h1">Background posts</button><div class="qonan2000-content"><span class="close-btn-h1">×</span><div class="conan2000-post-color">
    <div class="ko0nan2000" style="background: #003e5c;color: #ffffff;width: 100%;margin-bottom: 11px;">background</div>        
    <div class="conan2000" data-color="#F44336"><div class="conan2000-post" style="background:#F44336"></div></div>
    <div class="conan2000" data-color="#FF9800"><div class="conan2000-post" style="background:#FF9800"></div></div>
    <div class="conan2000" data-color="#FFEB3B"><div class="conan2000-post" style="background:#FFEB3B"></div></div>
    <div class="conan2000" data-color="#4CAF50"><div class="conan2000-post" style="background:#4CAF50"></div></div><br />
    <div class="conan2000" data-color="#00BCD4"><div class="conan2000-post" style="background:#00BCD4"></div></div>
    <div class="conan2000" data-color="#2196F3"><div class="conan2000-post" style="background:#2196F3"></div></div>
    <div class="conan2000" data-color="#9C27B0"><div class="conan2000-post" style="background:#9C27B0"></div></div>
    <div class="conan2000" data-color="#E91E63"><div class="conan2000-post" style="background:#E91E63"></div></div><br />
    <div class="conan2000" data-color="#FFFFFF"><div class="conan2000-post" style="background:#FFFFFF"></div></div>
    <div class="conan2000" data-color="#9E9E9E"><div class="conan2000-post" style="background:#9E9E9E"></div></div>
    <div class="conan2000" data-color="#000000"><div class="conan2000-post" style="background:#000000"></div></div>
    <div class="conan2000" data-color="#5D4037"><div class="conan2000-post" style="background:#5D4037"></div></div><br />
    <div class="conan2000" data-color="#0000" style="background: #0000;border: solid 1px #0000;cursor: pointer;">transparent</div><br />
    <div class="conan2000" id="conan2000-Default">Restore Default</div>
</div></div></div>
                  
<!-- Text colors for codes and quotes -->                
<div class="qonan2000">              
<button class="qonan2000-btn-h1">code text</button><div class="qonan2000-content"><span class="close-btn-h1">×</span><div class="konann2000-content-color">
    <div class="ko0nann2000" style="background: #2a013a;color: #ffffff;width: 100%;margin-bottom: 11px;">text</div>          
    <div class="konann2000" data-color="#F44336"><div class="konann2000-content" style="background:#F44336"></div></div>
    <div class="konann2000" data-color="#FF9800"><div class="konann2000-content" style="background:#FF9800"></div></div>
    <div class="konann2000" data-color="#FFEB3B"><div class="konann2000-content" style="background:#FFEB3B"></div></div>
    <div class="konann2000" data-color="#4CAF50"><div class="konann2000-content" style="background:#4CAF50"></div></div><br />
    <div class="konann2000" data-color="#00BCD4"><div class="konann2000-content" style="background:#00BCD4"></div></div>
    <div class="konann2000" data-color="#2196F3"><div class="konann2000-content" style="background:#2196F3"></div></div>
    <div class="konann2000" data-color="#9C27B0"><div class="konann2000-content" style="background:#9C27B0"></div></div>
    <div class="konann2000" data-color="#E91E63"><div class="konann2000-content" style="background:#E91E63"></div></div><br />
    <div class="konann2000" data-color="#FFFFFF"><div class="konann2000-content" style="background:#FFFFFF"></div></div>
    <div class="konann2000" data-color="#9E9E9E"><div class="konann2000-content" style="background:#9E9E9E"></div></div>
    <div class="konann2000" data-color="#000000"><div class="konann2000-content" style="background:#000000"></div></div>
    <div class="konann2000" data-color="#5D4037"><div class="konann2000-content" style="background:#5D4037"></div></div><br />
    <div class="konann2000" data-color="#0000" style="background: #0000;border: solid 1px #0000;cursor: pointer;">transparent</div><br />
    <div class="konann2000" id="konann2000-Default">Restore Default</div>
</div></div></div>
                  
<!-- Background colors for codes and quotes -->                
<div class="qonan2000">
<button class="qonan2000-btn-h1">code Background</button><div class="qonan2000-content"><span class="close-btn-h1">×</span><div class="conan20000-post-color">
    <div class="ko0nan2000" style="background: #003e5c;color: #ffffff;width: 100%;margin-bottom: 11px;">background</div>        
    <div class="conan20000" data-color="#F44336"><div class="conan20000-post" style="background:#F44336"></div></div>
    <div class="conan20000" data-color="#FF9800"><div class="conan20000-post" style="background:#FF9800"></div></div>
    <div class="conan20000" data-color="#FFEB3B"><div class="conan20000-post" style="background:#FFEB3B"></div></div>
    <div class="conan20000" data-color="#4CAF50"><div class="conan20000-post" style="background:#4CAF50"></div></div><br />
    <div class="conan20000" data-color="#00BCD4"><div class="conan20000-post" style="background:#00BCD4"></div></div>
    <div class="conan20000" data-color="#2196F3"><div class="conan20000-post" style="background:#2196F3"></div></div>
    <div class="conan20000" data-color="#9C27B0"><div class="conan20000-post" style="background:#9C27B0"></div></div>
    <div class="conan20000" data-color="#E91E63"><div class="conan20000-post" style="background:#E91E63"></div></div><br />
    <div class="conan20000" data-color="#FFFFFF"><div class="conan20000-post" style="background:#FFFFFF"></div></div>
    <div class="conan20000" data-color="#9E9E9E"><div class="conan20000-post" style="background:#9E9E9E"></div></div>
    <div class="conan20000" data-color="#000000"><div class="conan20000-post" style="background:#000000"></div></div>
    <div class="conan20000" data-color="#5D4037"><div class="conan20000-post" style="background:#5D4037"></div></div><br />
    <div class="conan20000" data-color="#0000" style="background: #0000;border: solid 1px #0000;cursor: pointer;">transparent</div><br />
    <div class="conan20000" id="conan20000-Default">Restore Default</div>
</div></div></div>                  
</div>
Save and publish Add options, appearing at the top of topics to change the background color, text, and codes 644535217


Installing the JavaScript
__________________________________________________________________________

Title * : as you like
Placement : In topics
-------------------
phpBB3-ModernBB-AwesomeBB:

PunBB-Invision:

phpBB2:
----------------------------------------------


You can add, remove, or change a specific color
Through the following line in html

text color
Code:
<div class="konan2000" data-color="#F44336"><div class="konan2000-content" style="background:#F44336"></div></div>

posts background
Code:
 <div class="conan2000" data-color="#F44336"><div class="conan2000-post" style="background:#F44336"></div></div>

code background
Code:
 <div class="conan20000" data-color="#F44336"><div class="conan20000-post" style="background:#F44336"></div></div>

text  code
Code:
<div class="konann2000" data-color="#F44336"><div class="konann2000-content" style="background:#F44336"></div></div>
-----

We hope you liked this tutorial queen



_____________________________________________________________________
banana
 Add options, appearing at the top of topics to change the background color, text, and codes 26ab  Add options, appearing at the top of topics to change the background color, text, and codes 1f534  Add options, appearing at the top of topics to change the background color, text, and codes 1f535


Last edited by كونان2000 on May 18th 2024, 8:35 am; edited 7 times in total
كونان2000
كونان2000
Forumember

Male Posts : 206
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

skouliki, SarkZKalie, TonnyKamper, poesia-verses and Wizzard like this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by poesia-verses May 1st 2024, 12:32 pm

does this color apply to all topics at once? or to one topic

good job
poesia-verses
poesia-verses
Forumember

Male Posts : 531
Reputation : 21
Language : and small english

https://stihi-podval.forumotion.com/

كونان2000 likes this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by Ape May 1st 2024, 2:36 pm

poesia-verses wrote:does this color apply to all topics at once? or to one topic

good job

@poesia-verses
Please don't use bold or color and keep to the default text. This is reserved for the staff for moderation.
I will not warn you again. 2 days ban now in-place.
Please read our forum rules: ESF General Rules


Add options, appearing at the top of topics to change the background color, text, and codes Left1212Add options, appearing at the top of topics to change the background color, text, and codes Center11Add options, appearing at the top of topics to change the background color, text, and codes Right112
Add options, appearing at the top of topics to change the background color, text, and codes Ape_b110
Add options, appearing at the top of topics to change the background color, text, and codes Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19176
Reputation : 1996
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

كونان2000 likes this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by YoshiGM May 1st 2024, 4:18 pm

This can be useful, if a member wants to read the topic in any other color that is not the defult by the administrator.

Good job :p
YoshiGM
YoshiGM
Active Poster

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

http://asistencia.foroactivo.com/u21373

كونان2000 likes this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by TonnyKamper May 1st 2024, 7:27 pm

Very nice job !
TonnyKamper
TonnyKamper
Active Poster

Female Posts : 1050
Reputation : 78
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

كونان2000 likes this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by skouliki May 1st 2024, 8:38 pm

Very nice
If you have time i would like to apply it in the punbb version
Thank you for your time
skouliki
skouliki
Manager
Manager

Female Posts : 15211
Reputation : 1700
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper and كونان2000 like this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by كونان2000 May 2nd 2024, 6:01 am

@poesia-verses @YoshiGM @TonnyKamper @skouliki @Ape
I am very happy with all your kind comments
thank you all Add options, appearing at the top of topics to change the background color, text, and codes 45133
------

poesia-verses wrote:does this color apply to all topics at once? or to one topic
good job
hi @poesia-verses
The code contains cookies and works on all posts Dawa

skouliki wrote: Very nice
If you have time i would like to apply it in the punbb version
Thank you for your time
hi @skouliki
My first post has been edited

Now it works on punbb version Very good

Add options, appearing at the top of topics to change the background color, text, and codes JYbzAfw
https://i.imgur.com/jYbzAfw.gif
كونان2000
كونان2000
Forumember

Male Posts : 206
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

skouliki and TonnyKamper like this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by skouliki May 2nd 2024, 9:17 am

much appreciated

since i can not send you a pm i will post it here
the code works ok.. in my forum https://iconskouliki.forumgreek.com/ the text change includes also these areas  ) rank title, personal rank and others as you see in my image below
can the code exclude these areas ? obviously, the issue is not your code is the modifications my theme has 



Last edited by skouliki on May 16th 2024, 1:11 pm; edited 1 time in total
skouliki
skouliki
Manager
Manager

Female Posts : 15211
Reputation : 1700
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by كونان2000 May 2nd 2024, 8:44 pm

hello @skouliki

Your forum is a little difficult because it is not visible to guests Razz


I'm not sure it will work well blackeye

Find the next part in JavaScript
Code:
font

replace it with
Code:
.pun .entry-content font,font:not(.user-basic-info font, strong font)

Add options, appearing at the top of topics to change the background color, text, and codes 30398916
https://i.servimg.com/u/f30/20/35/61/89/30398916.png
كونان2000
كونان2000
Forumember

Male Posts : 206
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

TonnyKamper and poesia-verses like this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by skouliki May 2nd 2024, 10:35 pm

Thank you 🙏 i will try it when i will return from vacation
Have a nice day
skouliki
skouliki
Manager
Manager

Female Posts : 15211
Reputation : 1700
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by Obscure May 2nd 2024, 11:14 pm

I really like this idea! I may try this out! Thank you for sharing!
Obscure
Obscure
Forumember

Female Posts : 48
Reputation : 10
Language : English
Location : USA

http://imgtest.forumotion.com/

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by كونان2000 May 3rd 2024, 6:23 pm

skouliki wrote:Thank you 🙏 i will try it when i will return from vacation
Have a nice day
You're welcome! Wishing you safe travels and a wonderful vacation Add options, appearing at the top of topics to change the background color, text, and codes 1f60a

Obscure wrote:I really like this idea! I may try this out! Thank you for sharing!
That's great to hear! Thanks ^^

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

Male Posts : 206
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

skouliki likes this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by poesia-verses May 3rd 2024, 8:14 pm

@كونان2000

Thank you. Now, if you could choose a color separately for each theme, then I would consider putting it on. and one more thing: so that when choosing a background color, the text color I need will be substituted. fabulous



-------------------------------------------------------------------------


oh, I guessed it! other user will have default colors


To make it visible to all users, you need to “throw” some code into the first post. I have a code on the forum, a background for messages with a picture. there's the code in the first post. well, in general, it’s labor-intensive and probably not that necessary
poesia-verses
poesia-verses
Forumember

Male Posts : 531
Reputation : 21
Language : and small english

https://stihi-podval.forumotion.com/

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by كونان2000 May 6th 2024, 7:11 pm

hi @poesia-verses ,

Humm
I didn't understand your mwii message
But if you want each topic to have its own color
You can do this by deleting code cookies

Shake


Last edited by كونان2000 on May 7th 2024, 4:38 am; edited 1 time in total
كونان2000
كونان2000
Forumember

Male Posts : 206
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by Mihai May 6th 2024, 9:35 pm

كونان2000 wrote:hi @poesia-verses ,

Humm
je n'ai pas compris ton message mwii
Mais si vous voulez que chaque topic ait sa propre couleur
Vous pouvez le faire en supprimant les cookies de code

Shake
Where is the english language?
Mihai
Mihai
Forumember

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

https://allprojects.forumotion.com/

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by كونان2000 May 7th 2024, 4:46 am

Oops,   I was just talking to Pinguino In the French support forum  Add options, appearing at the top of topics to change the background color, text, and codes 1-56
----
I forgot that I am in the English support forum  Laughing
Sorry, it has been corrected  


Thank you, Mihai
كونان2000
كونان2000
Forumember

Male Posts : 206
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

TonnyKamper and poesia-verses like this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by skouliki May 16th 2024, 1:16 pm

@كونان2000 it worked very well thank you and sorry for the late reply
skouliki
skouliki
Manager
Manager

Female Posts : 15211
Reputation : 1700
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

كونان2000 likes this post

Back to top Go down

Add options, appearing at the top of topics to change the background color, text, and codes Empty Re: Add options, appearing at the top of topics to change the background color, text, and codes

Post by كونان2000 May 18th 2024, 7:58 am

skouliki wrote: @كونان2000 it worked very well thank you and sorry for the late reply
thanks @skouliki Very Happy ,

The tutorial has been updated.
1 Now it works on all versions of the forum
2 Separating the HTML code from the Java code and minifying the JavaScript code
3 Add a fourth drop-down list to change the color of text in codes and quotes

Thank you all
كونان2000
كونان2000
Forumember

Male Posts : 206
Reputation : 93
Language : Arabic

https://anime.forumperso.com/

skouliki, TonnyKamper and poesia-verses like this post

Back to top Go down

Back to top

- Similar topics

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