Смяна на цветовата гама

G

Georgi Rakovski

New Member
Здравейте,

Попаднах случайно на един сайт http://predizvikai.me/ и се логнах в него. От дясно има едно малко панелче по-средата на екрана от което може да се сменят цветовите гами на сайта.
Може ли някой да ми каже как и аз да си направя такова за моя стил ?
Не държа да има толкова цветови гами колкото в този сайт, може и само 1. Моя сайт е тъмен и искам да направя възможност за потребителите да го направят по-светъл.
 
  • Like
Реакции: Sky
От: Смяна на цветовата гама

Е лесно, пазиш си променливите в база данни и от админ панела си ги сетваш , а пък после в html ще е нещо от рода на : <div class=" <?php if(isset($header-style)) { echo $headerstyle} else echo $default-style}; ?>"> Ако тръгнеш да правиш така тези работи, по-добре е да не смесваш много сървърна логика с презентационна. Надявам се схвана идеята, кода е само примерен и не е удачен като цяло.
s
Това е ламерския вариант, другия вариантss е с темплейтни системи, но като цяло те правят същото по доста по-красив начин.
 
От: Смяна на цветовата гама

stuklen каза:
По-скоро с овъррайдване на стилове, така много грубо.
Увеличете...

По удачно е един JQuery, който ще сменя дивовете с аякс от база данните, аз дори ползвам такова нещо вмомента. Знам, че е кофти кода, просто е за да схване идеята, тези неща се правят през js предимно. Поне е най-удачно, понеже не пипаш html-a, а имаш примерно div class="red" , div class="pink" и според избора на юзера се сетва и се променя с jquery.
 
От: Смяна на цветовата гама

Ще съм много благодарен, ако някой ми прати 1 прост html файл, който сменя бекграунда само, аз мисля, че ще се оправя нататък.
Не ме бива никак с jquery, но с css-то ще се оправя.

Разбирам, че това добавя само един css файл под оригиналния и в него трябва да са класовете от оригиналния и аз само да им сменям бекграунда.
 
От: Смяна на цветовата гама

Ок ще ти пратя аз какво ползвам

<select id="skin-colorpicker" class="hide">
<option data-skin="no-skin" value="#438EB9">#438EB9</option>
<option data-skin="skin-1" value="#222A2D">#222A2D</option>
<option data-skin="skin-2" value="#C6487E">#C6487E</option>
<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
</select>


това е колор пикера



<script type="text/javascript">
jQuery(function($) {

$('#simple-colorpicker-1').colorpicker({pull_right:true}).on('change', function(){
var color_class = $(this).find('option:selected').data('class');
var new_class = 'widget-box';
if(color_class != 'default') new_class += ' widget-color-'+color_class;
$(this).closest('.widget-box').attr('class', new_class);
});

</script>
Сещаш се каква е идеята, имам и клас на боди <body class="skin-2"> -> тоест слагаш си даден клас в див и после го сменяш с jquery.
Примерно


$(function(){
var menu = $('#menu'),
pos = menu.offset();

$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('slow', function(){
$(this).removeClass('default').addClass('fixed').fadeIn('slow');
});



} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('slow', function(){
$(this).removeClass('fixed').addClass('default').fadeIn('slow');
});


}
});


$(".closemeny").click(function() {
menu.fadeOut('slow', function(){
$('#menu').removeClass('fixed').addClass('default').fadeIn('slow');
});
});
});
 
От: Смяна на цветовата гама

Тествах го, но не сработи при мен. Просто съм си зле и ще трябва да ми прати някой готов вариант в html файл.
Става и на ЛС.
 
От: Смяна на цветовата гама

Е няма да работи, нормално... Щото има други функции. Хайде отиди в гугъл и напиши how to change DIV class or ID with Jquery и до 00:00 ще си си го направил сам ( всичко ). И какво да ти пращаме като дори не ти знаем сайта, имаш css-и, имаш html ид-та/ класове и т.н..

Всичко сме ти обяснили, ако не -> пускаш си оферта в пазара и ще ти излезе 20-30 лева. поне ако си си дефинирал ти css-a и само се подава на девелопера класовете, които ще се сменят.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе