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.
The forum of the forums
+4
YoshiGM
Ape
poesia-verses
كونان2000
8 posters

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

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


    Male Posts : 206
    Reputation : 93
    Language : Arabic

    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 Wed May 01, 2024 3: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 Sat May 18, 2024 1:35 am; edited 7 times in total

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

    poesia-verses
    poesia-verses
    Forumember


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

    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 Wed May 01, 2024 5:32 am

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

    good job

    كونان2000 likes this post

    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19162
    Reputation : 1995
    Language : fluent in dork / mumbojumbo & English haha

    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 Wed May 01, 2024 7:36 am

    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

    كونان2000 likes this post

    YoshiGM
    YoshiGM
    Active Poster


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

    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 Wed May 01, 2024 9:18 am

    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

    كونان2000 likes this post

    TonnyKamper
    TonnyKamper
    Active Poster


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

    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 Wed May 01, 2024 12:27 pm

    Very nice job !

    كونان2000 likes this post

    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15187
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    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 Wed May 01, 2024 1:38 pm

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

    TonnyKamper and كونان2000 like this post

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


    Male Posts : 206
    Reputation : 93
    Language : Arabic

    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 Wed May 01, 2024 11:01 pm

    @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

    skouliki and TonnyKamper like this post

    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15187
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    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 Thu May 02, 2024 2: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 Thu May 16, 2024 6:11 am; edited 1 time in total

    TonnyKamper likes this post

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


    Male Posts : 206
    Reputation : 93
    Language : Arabic

    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 Thu May 02, 2024 1: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

    TonnyKamper and poesia-verses like this post

    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15187
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    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 Thu May 02, 2024 3:35 pm

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

    TonnyKamper likes this post

    Obscure
    Obscure
    Forumember


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

    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 Thu May 02, 2024 4:14 pm

    I really like this idea! I may try this out! Thank you for sharing!
    كونان2000
    كونان2000
    Forumember


    Male Posts : 206
    Reputation : 93
    Language : Arabic

    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 Fri May 03, 2024 11:23 am

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

    skouliki likes this post

    poesia-verses
    poesia-verses
    Forumember


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

    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 Fri May 03, 2024 1: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
    كونان2000
    كونان2000
    Forumember


    Male Posts : 206
    Reputation : 93
    Language : Arabic

    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 Mon May 06, 2024 12: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 Mon May 06, 2024 9:38 pm; edited 1 time in total
    Mihai
    Mihai
    Forumember


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

    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 Mon May 06, 2024 2: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?
    كونان2000
    كونان2000
    Forumember


    Male Posts : 206
    Reputation : 93
    Language : Arabic

    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 Mon May 06, 2024 9:46 pm

    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

    TonnyKamper and poesia-verses like this post

    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15187
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    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 Thu May 16, 2024 6:16 am

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

    كونان2000 likes this post

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


    Male Posts : 206
    Reputation : 93
    Language : Arabic

    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 Yesterday at 12: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

    skouliki, TonnyKamper and poesia-verses like this post


      Current date/time is Sun May 19, 2024 2:26 pm