Как к сайту подключить 2 файла css?

Question

[Кирилл]

Здравствуйте! Надо мне создать сайт и в моей системе управления сделать переключатель двух-трех файлов css, чтобы на сайте менялись цвета. Как мне сделать такой переключатель? Спасибо огромное.

Comments

[Кирилл]

к примеру есть сайт, надо сделать его синий и красный, вся цветовая гамма будет прописана в css и надо сделать, чтобы пользователь выбрал с какого css будет показывать его сайт. как это сделать?

Answer 1

[Иван Антонов]

Задаешь id стилю, который будет меняться:

<link rel="stylesheet" href="general.css" id="style">

Для смены выполняешь JavaScript:

document.getElementById('style').setAttribute('href', 'red.css');

Comments

[Кирилл]

как его можно переключить типа radio? или другой вариант?

[Иван Антонов]

Чтобы сохранилось навсегда используйте куки. Либо в БД для каждого пользователя отдельно.

[Иван Антонов]

<button onclick="document.getElementById('style').setAttribute('href', 'red.css');">Красный</button>

[Кирилл]

Куки только для одного. мне сохранка навсегда нужна я css ни разу в БД не сохранял, подскажите как это сделать? и как сам переключатель? чтобы выбрать какой css включить, заранее спасибо огромное

[Иван Антонов]

quant78: Объясните сначала для чего вам это нужно. Тогда я скажу как лучше сделать.

[Кирилл]

Иван Антонов: Я пишу сейчас сайт, заказчику надо в админ панели управления сайтом, чтобы я поставил переключатель и сделал 2 файла css с разной цветовой гаммой и чтобы он сам не важно как нажатием кнопки или еще как то менял красного на синий и наоборот, чтобы на всегда и для любых людей, для любого пользователя. так как?

[Иван Антонов]

quant78: тогда тебе нужно в конфиг файл добавить значение для стиля (например имя файла), и при щелчке на кнопку менять его.

[Иван Антонов]

В Админке:

<?php
if (isset($_POST['change_css'])) {
  $style = $_POST['style'];
  // Здесь сохраняем стиль
}
?>
<form method="POST" action="">
  <label><input type="radio" name="style" value="red.css"> Красный</label>
  <label><input type="radio" name="style" value="green.css"> Зеленый</label>
  <button type="submit" name="change_css">Сохранить</button>
</form>

На сайте:

<?php
  $style = // загружаем стиль из источника в который сохранили
?>
<link rel="stylesheet" href="<?php echo $style ?>" id="style">

[Кирилл]

а тот нужен код? и как это сделать? я очень прошу помогите полностью, заранее спасибо огромное.

[Кирилл]

Иван Антонов: а где // Здесь сохраняем стиль, писать и $style = // загружаем стиль из источника в который сохранили тоже самое? а второй файл css как загрузить?

[Кирилл]

просто до конца не понял код: $style = // загружаем стиль из источника в сюда пишем в путь к css а второй файл, у Вас же красны и зеленый? спасибо огромное

[Кирилл]

Иван Антонов: я очень прошу подскажите пожалуйста: $style = // загружаем стиль из источника в который сохранили что сюда писать первый css показали в коде второй?

[Кирилл]

Иван Антонов: я очень прошу пожалуйста помогите, подставьте везде свои значения а я на свои заменю, я очень прошу, спасибо огромное

[Иван Антонов]

admin.php

<?php
// Проверяем выполнилась ли форма
if (isset($_POST['change_css'])) {
    // Имя выбранного стиля
    $style = $_POST['style'];
    // Файл где сохраняется имя выбранного стиля
    $path_to_config = 'config.txt';
    // Открываем файл в режиме перезаписи
    $fp = fopen($path_to_config, 'w');
    // Записываем имя стиля
    fwrite($fp, $style);
    // Закрываем файл
    fclose($fp);

    echo '<p style="color: #008000">Стиль сохранен</p>';
}
?>
<form method="POST" action="">
    <label><input type="radio" name="style" value="red.css"> Красный</label>
    <label><input type="radio" name="style" value="green.css"> Зеленый</label>
    <button type="submit" name="change_css">Сохранить</button>
</form>

index.php

<?php
// Получаем содержимое файла в котором хранится имя стиля
$style = file_get_contents('config.txt');
?>
<link rel="stylesheet" href="<?php echo $style ?: 'default.css' ?>">

[Иван Антонов]

Возможных вариантов реализации множество, я сделал самый простой.

[Кирилл]

Иван Антонов: отлично что простой, а где подключение файла css, у меня есть 2 файла, один стандартный и второй который клиент, может его выбрать, другая цветовая гамма сайта будет выбирает radio, один это default.css а второй? Спасибо огромное.

[Иван Антонов]

quant78: Где хотите, там и храните, только укажите правильный путь до файлов в radio

[Иван Антонов]

quant78: если вы не заметили я вам тут предоставил целых 3 цветовых схемы.
По умолчанию стоит default.css в админке можно выбрать red.css или green.css или добавить свои варианты.

[Кирилл]

Иван Антонов: спасибо огромное, завтра или послезавтра попробуем

Answer 2

[Дмитрий Кравченко]

...
<head>
    <link href="css/common.css" rel="stylesheet">

    <?php if($user['color_scheme']): ?>
        <link id="themelink" href="css/<?=$user['color_scheme']?>.css" rel="stylesheet">
    <?php else: ?>
        <link href="css/default.css" rel="stylesheet">
    <?php endif; ?>

</head>
...
<input type="radio" value="theme1" name="theme">
<input type="radio" value="theme2" name="theme">

var themelink = $('#themelink')
$('input[name="theme"]').on('change', function(){
  var theme = this.value;
  themelink.attr('href', 'css/'+theme+'.css');
  $.post('/some/server/path',{theme:theme}).then(function(response){
    console.log('theme has been changed');
  })
});

Comments

[Кирилл]

и дальше? это же не все? если взять переключатель radio, то как? спасибо огромное

[Дмитрий Кравченко]

quant78: это же очевидно, нужно менять путь до темы. Заапдейтил ответ.

[Кирилл]

Дмитрий Кравченко: после обновлениния оно сбрасываться будет

[Дмитрий Кравченко]

quant78: если нужно сохранять изменения, делаем пост запрос

[Кирилл]

всмысле форму? а так перерисовывать то что Вы написали?

[Дмитрий Кравченко]

quant78: я заапдейтил ответ, пост запрос можно сделать аяксом. По большому счету все равно как, можно и формой, если такой вариант устраивает

[Кирилл]

я ставлю: ?

это первый radio
это второй?

Извините за такие вопросы я просто запутался

[Кирилл]

[code] это первый
это второй?
[/code]

[Дмитрий Кравченко]

quant78: я не понял вопроса

[Кирилл]

я ставлю: <input type="radio" value="theme1" name="theme">
<input type="radio" value="theme2" name="theme">
<input type=submit name=color_scheme>?

это первый radio <link href="css/common.css" rel="stylesheet"> ?
это второй? <link href="css/default.css" rel="stylesheet">
Форму я сиавлю в админку чтобы клиент выбрал, а код на сайт?
Извините за такие вопросы я просто запутался

[Дмитрий Кравченко]

quant78:
1. Форму ставите там, где хотите дать возможность сменить тему.
1.1. Аттрибуты value у радио баттонов поставьте соответственно названиям ваших тем.

2. Сохраняете для конкретного пользователя где-то эту настройку (в базе данных, допустим).

3. На той странице (или страницах), где, собственно, будет меняться эта тема, нужно в head секцию добавить css файл темы в случае, если у пользователя сохранена настройка темизации. В моем примере common.css - это пример общих стилей, которые подключаться будут в любом случае, default.css - файл темы по умолчанию, на случай, если никакой настройки у пользователя нет.

[Кирилл]

дефолт первы, а второй common?
а скрипт на какую страницу?

[Кирилл]

как мне пописать если несколько стилей, надо же какой то путь поставить?

[Дмитрий Кравченко]

quant78: что конкретно из тех пунктов, которые я описал, непонятно?

[Кирилл]

Дмитрий Кравченко: голова кругом идет, мне код написали говорят он самый верный, я не могу подставить значения:

В Админке:

<?php
if (isset($_POST['change_css'])) {
  $style = $_POST['style'];
  // Здесь сохраняем стиль
}
?>
<form method="POST" action="">
  <label><input type="radio" name="style" value="red.css"> Красный</label>
  <label><input type="radio" name="style" value="green.css"> Зеленый</label>
  <button type="submit" name="change_css">Сохранить</button>
</form>



На сайте:

<?php
  $style = // загружаем стиль из источника в который сохранили
?>
<link rel="stylesheet" href="<?php echo $style ?>" id="style">

не понятно что и куда подставить?

[Дмитрий Кравченко]

quant78: что значит "не могу подставить значения"? Нужно просто скопировать этот код на соответствующие страницы. Ctrl+C -> Ctrl+V

[Кирилл]

Дмитрий Кравченко: ну и ?

$style = // загружаем стиль из источника в который сохранили

что сюда писать? это путь к css, а второй файл куда подключить?

[Дмитрий Кравченко]

quant78:
okay, для тех, кто в танке.
вместо строки
// Здесь сохраняем стиль
пишем
$_COOKIE['theme'] = $style;

вместо
$style = // загружаем стиль из источника в который сохранили
пишем
$style = $_COOKIE['theme'];

я не знаю что такое "второй файл"
вы вообще понимаете что происходит? хотя бы примерную схему работы веб-сайта?

[Кирилл]

Дмитрий Кравченко: да, но надо что с radio выбрал и таким он был даже после перезагрузки страницы, даже если вышел и снова зашел и где брать путь к css который у меня лежит?

[Дмитрий Кравченко]

quant78: у вас он где лежит? такой путь и пишете. в чем проблема? в примере предыдущего коммента тема сохранится в куки браузера и останется такой, пока куки кто-нибудь не почистит

[Кирилл]

ну а на другой машине он виден та не будет?

[Дмитрий Кравченко]

quant78: если не положить его в публично доступное место - конечно нет

[Кирилл]

ну вот мне надо в доступное место.

В Админке:

<?php
if (isset($_POST['change_css'])) {
  $style = $_POST['style'];
  $_COOKIE['theme'] = $style;
}
?>
<form method="POST" action="">
  <label><input type="radio" name="style" value="red.css"> Красный</label>
  <label><input type="radio" name="style" value="green.css"> Зеленый</label>
  <button type="submit" name="change_css">Сохранить</button>
</form>



На сайте:

<?php
   $style = $_COOKIE['theme'];
?>
<link rel="stylesheet" href="<?php echo $style ?>" id="style">

Так?

[Дмитрий Кравченко]

quant78: кладите стили рядом с другими стилями, которые есть на сайте. Да, так.

Answer 3

[JohnDaniels]

Я пишу сейчас сайт

я очень прошу помогите полностью

,kzzzzzzz

Answer 4

[Дмитрий Христоев]

как-то так https://www.youtube.com/watch?v=GNeKuKXQwCg

Answer 5

[MetaDone]

pcvector.net/scripts/layout_and_interface/138-pere...

Comments

[Кирилл]

он в куках сохраняется, а мне надо на всегда, если переключил и все.

Answer 6

[Ruslan]

Если у вас уже есть эти два файла стилей тогда в админке делайте форму

<form>
<input type="radio" name="css" value="path/to/first.css"> 
<input type="radio" name="css" value="path/to/second.css">
<input type="submit">
</form>

Далее сохраняете в конфиг нужное значение, а в самой странице находите выбранный файл и подключаете его.

Comments

[Кирилл]

В Админке:

<?php
if (isset($_POST['change_css'])) {
  $style = $_POST['style'];
  // Здесь сохраняем стиль
}
?>
<form method="POST" action="">
  <label><input type="radio" name="style" value="style/red.css"> Красный</label>
  <label><input type="radio" name="style" value="style/green.css"> Зеленый</label>
  <button type="submit" name="change_css">Сохранить</button>
</form>



На сайте:

<?php
  $style = // загружаем стиль из источника в который сохранили
?>
<link rel="stylesheet" href="<?php echo $style ?>" id="style">

правильно?
что здесь писать $style = // загружаем стиль из источника в который сохранили ? и здесь что писать? // Здесь сохраняем стиль ?

[Ruslan]

quant78: Там где сохраняем стиль надо написать скорее всего запрос в бд, где будет храниться запись об активном стиле.
А там где загружаем надо написать запрос к бд, чтобы получить активный стиль.

Answer 7

[Vkok]

< link href="css/первый.css" rel="stylesheet">
< link href="css/второй.css" rel="stylesheet">

Comments

[Кирилл]

это понятно, как мне сделать сам переключатель к примеру: это по умолчанию будет < link href="css/первый.css" rel="stylesheet"> а если он захочет то переключит на второй, так как сделать сам переключатель?

Answer 8

[Александр]

Можете, как вариант, подключить все css файлы, в каждом и этих файлов для css классов/id прописать класс враперы, например, для первого css файла пусть будет body.red, для второго - body.green, для третьего - body.yellow и т.д. И потом в DOM для body добавляя соответствующий класс (.red, .green, .yellow), будете получать необходимые цвета.