Как мне предоставить пользователям возможность настраивать CSS в своих профилях?

Question

Дорогой stackoverflowers,

У меня есть сайт, где я должен предоставить пользователям возможность изменять некоторые элементы на странице своего профиля.

Как цвет линии, шрифт, цвета фона и логотипа и т.д.

Как бы один сделать это лучший способ? Создайте поле TEXT в таблице user_profiles, где они могут ввести свои css, а на странице профиля - <style type="text/css">$user->customCss</style>?

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

Я знаю один сайт, который делает это, reddit.com, там каждый субреддит имеет разные темы. Моды субредадов могут изменить почти все, что я думаю. Как вы думаете, reddit это делает?

Answer 1

Не делайте этого. Рассмотрим различные типы пользователей:

1. Нетехнические. Вероятно, они не знают, что такое CSS, и они случайно сломают вещи. Поддержите кошмар.

2. Технический. Эти ребята могут воспользоваться вариантом, но даже как разработчик, для настройки чего-то вроде моей страницы профиля, Я бы предпочел использовать подборщики цветов и выпадающие меню.

3. Smart-ass технический: они собираются попытаться изо всех сил разбить весь макет, и они, вероятно, добьются успеха. Вы можете делать некоторые напуганные вещи, используя только один элемент.

Answer 2

Если вы хотите, чтобы пользователи могли выбирать темы, я бы предложил создать для них пользовательские файлы CSS. Вот как я это делаю на своем сайте.

• Создайте отдельные файлы CSS с параметрами стиля, которые вы хотите. В этих CSS-файлах необходимо иметь только определенные цвета, логотипы и т. Д. Это в дополнение к вашему основному файлу CSS.
• Когда пользователь выбирает тему, введите путь/имя в базе данных под профилем пользователей.
• Когда пользователь входит в систему, сохраните тему в сеансе.
• Если пользователь изменяет тему, обновите значение сеанса.

На стороне сервера (при условии, что вы используете PHP), сделайте что-нибудь подобное.

<link rel="stylesheet" type="text/css" href="/css/main.css"> 
<link rel="stylesheet" type="text/css" href="/css/themes/ 
<?php echo ($_SESSION["user_theme"]) ? $_SESSION["user_theme"] : 'blue' ?>.css">