Изменить тему / CSS в зависимости от пользователя

Question

Я создаю продукт, который мы в конечном итоге собираем на white-label. Сейчас я пытаюсь найти наилучший способ программно выполнить эти требования, чтобы пользователь мог обновить базовый дизайн сайта (например, цвет заголовка и т. Д.) Через форму своего профиля / настроек.

Требования:

1. Пользователь может обновить логотип (это завершено)
2. Пользователь может обновлять основные элементы дизайна (на основе CSS), такие как цвет заголовка, цвет нижнего колонтитула, цвет боковой панели - все основные переопределения CSS

Мы не хотим использовать ASP.Net Themes / Skins, потому что это требует хранения статических тем в локальной файловой системе. Мы хотели бы использовать CSS, чтобы переопределить базовый стиль и сохранить его в базе данных.

Наш первоначальный план состоит в том, чтобы сохранить CSS в простом поле varchar в базе данных и записать этот CSS на главную страницу события Pre-Init, используя "!" переопределить базовые стили. Это лучшее решение? Если нет, что вы сделали для выполнения этой функции /

Answer 1

Я был там несколько месяцев назад. Хотя использование динамического CSS, сгенерированного выделенным обработчиком / сервлетом, было первым решением, для улучшения производительности теперь создается специальный CSS для файла, перекрывающего основные элементы стандартного CSS:

<link rel="stylesheet" href="standard.css" />
<link rel="stylesheet" href="<%= customer_code %>/custom_style.css" />
...
<img scr="<%= customer_code %>/logo.png" />

Каждый пользовательский CSS будет иметь свой собственный URL, так что вы можете настроить их кеширование в браузере.

Это позволит вам сэкономить за каждый запрос , которые пользователи сделают:

1. трафик из базы данных на прикладной уровень
2. трафик от уровня приложения до браузера
3. некоторые вычисления на прикладном уровне

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

Answer 2

Сначала определите, какие ресурсы можно заменить и можно ли добавлять ресурсы. Вам нужно будет где-то хранить их; для небольших ресурсов, таких как логотипы, вероятно, подходит БД, в противном случае вам нужно беспокоиться о размере в БД.

Тогда вы можете определить, какую функциональность вы хотите настроить для пользователя: только цвета или целые стили? Если это просто цвета, вы можете определить некоторые переменные в файле CSS и динамически обслуживать файл, загружая данные из базы данных. Файл CSS может называться styles.asp и содержать такой код:

.header_area {
  border: 1px solid <%=headerBorderColor%>;
  background-color:  <%=headerBGColor%>;
  foreground-color:  <%=headerFGColor%>;
}

(Синтаксис, который я использовал, - это синтаксис JSP, я не знаю ASP, но идея та же.)

Кроме того, пользователь может указать всю таблицу стилей, либо заменив таблицу по умолчанию, либо дополнив ее. Затем сохраните весь лист в БД и предоставьте его по собственному URL (не вставляйте его на страницу).

<link rel="stylesheet" href="default_styles.css">
<link rel="stylesheet" href="white_label_css.asp">

Убедитесь, что вы правильно установили заголовки кэша и тип содержимого в файле css, если обслуживаете его с помощью страницы asp.

Если вас беспокоит, какой контент пользователь может поместить в файл white_label_css, вы можете ограничить его, создав специальный инструмент, который генерирует CSS и сохраняет его в БД. Например, вместо того, чтобы позволять пользователю загружать любой файл и сохранять его в БД, пользователь должен будет заполнить веб-форму с подробным описанием того, какие настройки он хочет сделать. Таким образом, вы можете гарантировать, что разрешены только определенные правила / изменения CSS (но они могут быть недостаточно гибкими). ​​

Answer 3

Мне нравится идея использования динамического CSS с использованием ASP.Net Handler ...

<link rel="stylesheet" href="style.ashx" />

style.ashx

<!--WebHandler Language="C#" Class="StyleSheetHandler"-->

StyleSheetHandler.cs

public class StyleSheetHandler : IHttpHandler {
        public void ProcessRequest (HttpContext context)
        {   
            context.Response.ContentType = "text/css";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;

            string css = BuildCSSString(); //not showing this function

            context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(600));
            context.Response.Cache.SetCacheability(HttpCacheability.Public);
            context.Response.Write( css );
        }

        public bool IsReusable
        {
            get { return true; }
        }

}

Функция BuildCSSString () создаст CSS на основе значений, хранящихся в базе данных, и вернет его для переопределения базового стиля на главной странице.

Answer 4

Если я правильно понял, вы хотите внести изменения в цвет и типографику. Как насчет макета? Если мы предположим, что изменятся только цвет и типографика, мы можем повторно использовать те же классы стилей в конце существующего базового CSS-файла и, таким образом, переопределить стили (используя! Важный, хотя и хорошая идея, предотвращает переопределение пользователями своих стили).

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

1. Встроенный CSS
2. Создайте файловый раздел, куда вы можете записать сгенерированные CSS-файлы и позволить браузерам ссылаться на это местоположение (создавая программную ссылку?)
3. Используйте Ajax, получите CSS и измените DOM

Если компоновка изменится, мы находимся в более густом супе, я бы избежал этого, поскольку сложности, связанные со сценариями / обработкой событий, слишком велики.

Answer 5

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

Попробуйте здесь или здесь в качестве введения.

Answer 6

Я думаю, это зависит от того, насколько ваши пользователи разбираются в CSS. Если они веб-разработчики или имеют такую ​​склонность, то, вероятно, хорошо написать CSS. Если нет, то вам придется либо генерировать его статически на основе их ввода и сохранять в базе данных, либо вы можете просто сохранить введенные значения и динамически сгенерировать CSS с помощью пользовательского обработчика.

Подход с использованием собственного обработчика может означать, что вы можете подставлять значения прямо в середине CSS, не беспокоясь о важности!

Answer 7

Я бы не использовал предложение! Important и вместо этого просто следил за тем, чтобы их значения отображались в теге <style> после импорта обычных таблиц стилей.

В противном случае, я бы сделал то же самое.

Answer 8

Предлагаемый вами способ заключается в том, как бы я решил эту проблему: загрузите контролируемые пользователем значения (возможно, только цвета и размеры шрифта) в таблицу, связанную с пользователем.

Логотип / аватар, который должен иметь пользователь, может быть сохранен в БД или в виде файла на ФС.