Использование блочных элементов Tumblr во внешнем CSS - PullRequest
Новая
       40

Использование блочных элементов Tumblr во внешнем CSS

0 голосов
/ 06 января 2012

У меня проблемы с использованием функциональности пользовательских переменных Tumblr с внешним хостом CSS.

Фон
Темы Tumblr написаны как одна страница HTML со всеми CSS-файлами, хранящимися в <style> теги в документе <head>

Tumblr позволяет хранить пользовательские данные в переменной вашего имени, заключенной в фигурные скобки.Затем они могут быть применены в CSS.Примером может служить шестнадцатеричный цветной код, присоединяемый к {color:BackgroundColour}, который затем можно использовать вместо значения # в CSS.(Подробнее info )

Когда браузер отображает страницу, данные, хранящиеся в {color:BackgroundColor}, возвращаются в виде шестнадцатеричного кода, и все в порядке.

Проблема
Чтобы упростить разработку темы, я размещаю свой внешний CSS и размещаю ссылки в <head>
Когда страница отображается, мои пользовательские переменные возвращаются в том виде, в котором они написаны в CSS, а не вытягиваютприсоединенное значение.

Таким образом, страница отображает: 

#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
background-color:{color:BackgroundColor};  
}

Вместо: 

#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
background-color: #dedede;  
}

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

1 Ответ

0 голосов
/ 06 января 2012

Из-за моего ограниченного понимания механизма шаблонов Tumblr я не верю, что это возможно с помощью удаленно размещенного файла CSS. Все объявления переменных отображаются на стороне сервера и передаются клиенту с правильным синтаксисом. Независимо от того, как вы внедрили свой css-файл, размещенный извне, это будет слишком поздно, поскольку сервер уже предоставил содержимое.

Единственным компромиссом, который я мог бы увидеть, было бы разделение вашего css-файла на селекторы, которым требуются переменные, и те, которые не требуют.

Пример: блок стиля, содержащийся на странице Tumblr. 

<style type="text/css">
    #header{
        background-color:{color:BackgroundColor};  
    }
</style>

Внешний файл: 

#header{
    width: 600px;
    margin: 0;
    padding: 0;
    border: 0;
}

Таким образом, вы можете выполнить ваше требование к css-файлу, размещенному извне, но также использовать механизм tumblr.

...