HomeAdd options, appearing at the top of topics to change the background color, text, and codes
+4
YoshiGM
Ape
poesia-verses
كونان2000
8 posters
Page 1 of 1
Add options, appearing at the top of topics to change the background color, text, and codes
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,
12 colors + transparent color + return button to default mode
https://i.postimg.cc/G3B9J7Dt/Animation.gif
-----------------------------------
Add options, appearing at the top of topics to change the background color, text, and codes,
12 colors + transparent color + return button to default mode
https://i.postimg.cc/G3B9J7Dt/Animation.gif
-----------------------------------
I find that in many forums there is a choice of colors
The user can choose his favorite color.
Therefore, there is no point in writing a new color program
That's why I wanted to create a special color program for posts and not for the entire forum
-----
Find the next part in viewtopic_body template
- Code:
{POLL_DISPLAY}
- Code:
{POLL_DISPLAY}
<div class="page-color"></div>
Installing the JavaScript
__________________________________________________________________________
Title * : as you like
Placement : In topics
- AwesomeBB:
- Code:
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, .conan2000-post{ cursor: pointer; padding: 7px;} .conan20000,.konan2000,.conan2000 { border: solid 1px #0000006b; background: white; margin: 4px; display: inline-block;} div#konan2000-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 { background: #0000003d !important;} </style>');
$(function(){
$(function(){
$('.page-color').after('<div class="post-COUNT">
<div class="qonan2000">
<button class="qonan2000-btn-h1">text color</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>
<div class="qonan2000">
<button class="qonan2000-btn-h1">Background color</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>
<div class="qonan2000">
<button class="qonan2000-btn-h1">code color</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>');
});
$(document).ready(function(){
$(".qonan2000-btn-h1").click(function(){
var qonan2000Content = $(this).next(".qonan2000-content");
$(".qonan2000-content").not(qonan2000Content).hide();
qonan2000Content.toggle();
});
$(document).on('click', '.close-btn-h1, .close-btn-h1:contains("×")', function() {
$(this).closest('.qonan2000-content').hide();
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.qonan2000').length) {
$(".qonan2000-content").hide();
}
});
});
$(document).ready(function(){
// Function to apply background color
function applyBackgroundColor(color) {
$('.codebox,blockquote').css('background-color', color);
// Save the selected color to cookies
Cookies.set('background-Color', color);
}
// Function to restore default background color
function restoreDefaultColor() {
$('.codebox,blockquote').css('background-color', '');
Cookies.remove('background-Color');
}
// Retrieve the last selected color from cookies
var lastColor = Cookies.get('background-Color');
if(lastColor){
applyBackgroundColor(lastColor);
}
// Event handler for clicking on circles
$('.conan20000').click(function(){
var color = $(this).data('color');
if(color === "transparent") return; // Skip transparent color
applyBackgroundColor(color);
});
// Event handler for restoring default color
$('#conan20000-Default').click(function(){
restoreDefaultColor();
});
});
$(document).ready(function(){
// Function to apply background color
function applyBackgroundColor(color) {
$('.post').css('background-color', color);
// Save the selected color to cookies
Cookies.set('backgroundColor', color);
}
// Function to restore default background color
function restoreDefaultColor() {
$('.post').css('background-color', '');
Cookies.remove('backgroundColor');
}
// Retrieve the last selected color from cookies
var lastColor = Cookies.get('backgroundColor');
if(lastColor){
applyBackgroundColor(lastColor);
}
// Event handler for clicking on circles
$('.conan2000').click(function(){
var color = $(this).data('color');
if(color === "transparent") return; // Skip transparent color
applyBackgroundColor(color);
});
// Event handler for restoring default color
$('#conan2000-Default').click(function(){
restoreDefaultColor();
});
});
$(document).ready(function(){
// Function to apply color
function applycolor(color) {
$('.post-content,font').css('color', color);
// Save the selected color to cookies
Cookies.set('Color', color);
}
// Function to restore default color
function restoreDefaultColor() {
$('.post-content,font').css('color', '');
Cookies.remove('color');
}
// Retrieve the last selected color from cookies
var lastColor = Cookies.get('Color');
if(lastColor){
applycolor(lastColor);
}
// Event handler for clicking on circles
$('.konan2000').click(function(){
var color = $(this).data('color');
if(color === "transparent") return; // Skip transparent color
applycolor(color);
});
// Event handler for restoring default color
$('#konan2000-Default').click(function(){
restoreDefaultColor();
});
});
// This tutorial was written by كونان2000, //
// Using AI //
});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var n=e.Cookies,o=e.Cookies=t();o.noConflict=function(){return e.Cookies=n,o}}())}(this,(function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)e[o]=n[o]}return e}return function t(n,o){function r(t,r,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=t+"="+n.write(r,t)+c}}return Object.create({set:r,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var t=document.cookie?document.cookie.split("; "):[],o={},r=0;r<t.length;r++){var i=t[r].split("="),c=i.slice(1).join("=");try{var u=decodeURIComponent(i[0]);if(o[u]=n.read(c,u),e===u)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){r(t,"",e({},n,{expires:-1}))},withAttributes:function(n){return t(this.converter,e({},this.attributes,n))},withConverter:function(n){return t(e({},this.converter,n),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(n)}})}({read:function(e){return'"'===e[0]&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"})}));
- PunBB:
- Code:
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, .conan2000-post{ cursor: pointer; padding: 7px;} .conan20000,.konan2000,.conan2000 { border: solid 1px #0000006b; background: white; margin: 4px; display: inline-block;} div#konan2000-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 { background: #0000003d !important;} </style>');
$(function(){
$(function(){
$('.page-color').after('<div class="post-COUNT">
<div class="qonan2000">
<button class="qonan2000-btn-h1">text color</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>
<div class="qonan2000">
<button class="qonan2000-btn-h1">Background color</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>
<div class="qonan2000">
<button class="qonan2000-btn-h1">code color</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>');
});
$(document).ready(function(){
$(".qonan2000-btn-h1").click(function(){
var qonan2000Content = $(this).next(".qonan2000-content");
$(".qonan2000-content").not(qonan2000Content).hide();
qonan2000Content.toggle();
});
$(document).on('click', '.close-btn-h1, .close-btn-h1:contains("×")', function() {
$(this).closest('.qonan2000-content').hide();
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.qonan2000').length) {
$(".qonan2000-content").hide();
}
});
});
$(document).ready(function(){
// Function to apply background color
function applyBackgroundColor(color) {
$('.codebox dd.cont_code,.codebox, blockquote').css('background-color', color);
// Save the selected color to cookies
Cookies.set('background-Color', color);
}
// Function to restore default background color
function restoreDefaultColor() {
$('.codebox dd.cont_code,.codebox, blockquote').css('background-color', '');
Cookies.remove('background-Color');
}
// Retrieve the last selected color from cookies
var lastColor = Cookies.get('background-Color');
if(lastColor){
applyBackgroundColor(lastColor);
}
// Event handler for clicking on circles
$('.conan20000').click(function(){
var color = $(this).data('color');
if(color === "transparent") return; // Skip transparent color
applyBackgroundColor(color);
});
// Event handler for restoring default color
$('#conan20000-Default').click(function(){
restoreDefaultColor();
});
});
$(document).ready(function(){
// Function to apply background color
function applyBackgroundColor(color) {
$('.pun .postmain').css('background-color', color);
// Save the selected color to cookies
Cookies.set('backgroundColor', color);
}
// Function to restore default background color
function restoreDefaultColor() {
$('.pun .postmain').css('background-color', '');
Cookies.remove('backgroundColor');
}
// Retrieve the last selected color from cookies
var lastColor = Cookies.get('backgroundColor');
if(lastColor){
applyBackgroundColor(lastColor);
}
// Event handler for clicking on circles
$('.conan2000').click(function(){
var color = $(this).data('color');
if(color === "transparent") return; // Skip transparent color
applyBackgroundColor(color);
});
// Event handler for restoring default color
$('#conan2000-Default').click(function(){
restoreDefaultColor();
});
});
$(document).ready(function(){
// Function to apply color
function applycolor(color) {
$('.pun .entry-content,font').css('color', color);
// Save the selected color to cookies
Cookies.set('Color', color);
}
// Function to restore default color
function restoreDefaultColor() {
$('.pun .entry-content,font').css('color', '');
Cookies.remove('color');
}
// Retrieve the last selected color from cookies
var lastColor = Cookies.get('Color');
if(lastColor){
applycolor(lastColor);
}
// Event handler for clicking on circles
$('.konan2000').click(function(){
var color = $(this).data('color');
if(color === "transparent") return; // Skip transparent color
applycolor(color);
});
// Event handler for restoring default color
$('#konan2000-Default').click(function(){
restoreDefaultColor();
});
});
// This tutorial was written by كونان2000, //
// Using AI //
});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var n=e.Cookies,o=e.Cookies=t();o.noConflict=function(){return e.Cookies=n,o}}())}(this,(function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)e[o]=n[o]}return e}return function t(n,o){function r(t,r,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=t+"="+n.write(r,t)+c}}return Object.create({set:r,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var t=document.cookie?document.cookie.split("; "):[],o={},r=0;r<t.length;r++){var i=t[r].split("="),c=i.slice(1).join("=");try{var u=decodeURIComponent(i[0]);if(o[u]=n.read(c,u),e===u)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){r(t,"",e({},n,{expires:-1}))},withAttributes:function(n){return t(this.converter,e({},this.attributes,n))},withConverter:function(n){return t(e({},this.converter,n),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(n)}})}({read:function(e){return'"'===e[0]&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"})}));
You can add, remove, or change a specific color
Through the following line in JavaScript
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>
I hope you like it
This tutorial is applicable to the following forum version : AwesomeBB - punbb
I will work on other versions upon request
_____________________________________________________________________
Last edited by كونان2000 on May 2nd 2024, 6:16 am; edited 5 times in total
كونان2000- Forumember
-
Posts : 205
Reputation : 93
Language : Arabic -
skouliki, SarkZKalie, TonnyKamper, poesia-verses and King Baldwing IV like this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
by poesia-verses May 1st 2024, 12:32 pm
does this color apply to all topics at once? or to one topic
good job
good job
poesia-verses- Forumember
- Posts : 529
Reputation : 21
Language : and small english -
كونان2000 likes this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
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.
|
Ape- Administrator
- Posts : 19160
Reputation : 1995
Language : fluent in dork / mumbojumbo & English haha -
كونان2000 likes this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
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
Good job :p
YoshiGM- Active Poster
- Posts : 1502
Reputation : 144
Language : Spanish & English
Location : Mexico -
كونان2000 likes this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
by TonnyKamper May 1st 2024, 7:27 pm
Very nice job !
TonnyKamper- Active Poster
-
Posts : 1050
Reputation : 78
Language : Dutch/English
Location : DSF Admin -
كونان2000 likes this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
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
If you have time i would like to apply it in the punbb version
Thank you for your time
skouliki- Manager
- Posts : 15180
Reputation : 1696
Language : English,Greek
Location : Greece -
TonnyKamper and كونان2000 like this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
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
------
The code contains cookies and works on all posts
My first post has been edited
Now it works on punbb version
https://i.imgur.com/jYbzAfw.gif
I am very happy with all your kind comments
thank you all
------
hi @poesia-versespoesia-verses wrote:does this color apply to all topics at once? or to one topic
good job
The code contains cookies and works on all posts
hi @skoulikiskouliki wrote: Very nice
If you have time i would like to apply it in the punbb version
Thank you for your time
My first post has been edited
Now it works on punbb version
https://i.imgur.com/jYbzAfw.gif
كونان2000- Forumember
- Posts : 205
Reputation : 93
Language : Arabic -
skouliki and TonnyKamper like this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
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
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- Manager
- Posts : 15180
Reputation : 1696
Language : English,Greek
Location : Greece -
TonnyKamper likes this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
by كونان2000 May 2nd 2024, 8:44 pm
hello @skouliki
Your forum is a little difficult because it is not visible to guests
I'm not sure it will work well
Find the next part in JavaScript
replace it with
https://i.servimg.com/u/f30/20/35/61/89/30398916.png
Your forum is a little difficult because it is not visible to guests
I'm not sure it will work well
Find the next part in JavaScript
- Code:
font
replace it with
- Code:
.pun .entry-content font,font:not(.user-basic-info font, strong font)
https://i.servimg.com/u/f30/20/35/61/89/30398916.png
كونان2000- Forumember
- Posts : 205
Reputation : 93
Language : Arabic -
TonnyKamper and poesia-verses like this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
by skouliki May 2nd 2024, 10:35 pm
Thank you 
i will try it when i will return from vacation
Have a nice day
i will try it when i will return from vacation Have a nice day
skouliki- Manager
- Posts : 15180
Reputation : 1696
Language : English,Greek
Location : Greece -
TonnyKamper likes this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
by Obscure May 2nd 2024, 11:14 pm
I really like this idea! I may try this out! Thank you for sharing!
Obscure- Forumember
- Posts : 48
Reputation : 10
Language : English
Location : USA -
Re: Add options, appearing at the top of topics to change the background color, text, and codes
by كونان2000 May 3rd 2024, 6:23 pm
You're welcome! Wishing you safe travels and a wonderful vacationskouliki wrote:Thank you
Have a nice day
That's great to hear! Thanks ^^Obscure wrote:I really like this idea! I may try this out! Thank you for sharing!
كونان2000- Forumember
- Posts : 205
Reputation : 93
Language : Arabic -
skouliki likes this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
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
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- Forumember
- Posts : 529
Reputation : 21
Language : and small english -
Re: Add options, appearing at the top of topics to change the background color, text, and codes
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
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
Last edited by كونان2000 on May 7th 2024, 4:38 am; edited 1 time in total
كونان2000- Forumember
- Posts : 205
Reputation : 93
Language : Arabic -
Re: Add options, appearing at the top of topics to change the background color, text, and codes
by Mihai May 6th 2024, 9:35 pm
Where is the english language?كونان2000 wrote:hi @poesia-verses ,
Humm
je n'ai pas compris ton message
Mais si vous voulez que chaque topic ait sa propre couleur
Vous pouvez le faire en supprimant les cookies de code
Mihai- Forumember
- Posts : 857
Reputation : 37
Language : Romanian, English
Location : Bucharest, Romania -
Re: Add options, appearing at the top of topics to change the background color, text, and codes
by كونان2000 May 7th 2024, 4:46 am
Oops, I was just talking to Pinguino In the French support forum 
----
I forgot that I am in the English support forum
Sorry, it has been corrected
Thank you, Mihai
----
I forgot that I am in the English support forum
Sorry, it has been corrected
Thank you, Mihai
كونان2000- Forumember
- Posts : 205
Reputation : 93
Language : Arabic -
TonnyKamper and poesia-verses like this post
Re: Add options, appearing at the top of topics to change the background color, text, and codes
by skouliki Yesterday at 1:16 pm
@كونان2000 it worked very well thank you and sorry for the late reply
skouliki- Manager
- Posts : 15180
Reputation : 1696
Language : English,Greek
Location : Greece -
Similar topics» Change color of post background and text color.
» Change Text Box Background Color
» Change Color of text background
» My background color does not change when I edited it! I can't see the forum topics
» wana change all widget title background and Text color
» Change Text Box Background Color
» Change Color of text background
» My background color does not change when I edited it! I can't see the forum topics
» wana change all widget title background and Text color
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
