Russian TYPO3 community - Изменение стиля для новостей. Как?

Russian TYPO3 community (http://forum.typo3.ru/index.php)

- Общие вопросы (http://forum.typo3.ru/forumdisplay.php?f=12)

- - Изменение стиля для новостей. Как? (http://forum.typo3.ru/showthread.php?t=6425)

Изменение стиля для новостей. Как?

Здравствуйте

Я установил екстэншн tt_news. Сделал страничку со списком новостей (LIST). Добавил несколько записей с новостями для примера.

Теперь хочу подкорректировать стиль отображения новостей под стиль своего сайта. Где это можно сделать? Никак не пойму толи нужно править какой-то css-файл напрямую, толи вставлять куски css в TypoScript?

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

Подключены все статические шаблоны для CSS:
CSS Styled Content (css_styled_content)
CSS-based tmpl (tt_news)
default CSS-styles (tt_news)

Насколько я понимаю tt_news у меня использует так называемый "new CSS-based template"

отключить стили по умолчанию и свой css, ну а куда - как вам удобнее.

Отключить умолчательные стили через plugin.tt_news.DEFAULT_CSS_STYLE >
затем создать собственный css-файл (возможно, скопировав часть из умолчательного) и подключить этот файл через page.includeCSS.myfile = fileadmin/templates/css/news.css

Спасибо за подробные объяснения. А не лучше ли будет свой css записать в plugin.tt_news.DEFAULT_CSS_STYLE и таким образом заменить умолчание?

тогда при обновлении расширения у вас сотрется ваш файл

Не сотрётся ничего... Если в TS писать.
Просто держать весь CSS в "TS-переменной" очень неудобно... Других соображений нет.

ДА ;) торможу от жары.
только не проще ли не "выбрасывать" дефолтные стили, а просто их не подключать? Зачем лишний шаблон (default CSS-styles (tt_news) ) в инклюдах?

Тоже верно...

Согласен с тем, что 'деражать весь CSS в "TS-переменной" очень неудобно'. C этим понятно.
Хочу задать последний вопрос на эту тему.
Шаблон default CSS-styles (tt_news) по сути содержит в себе очень простую конструкцию:

Код:

plugin.tt_news {

   _CSS_DEFAULT_STYLE (

/*тут размещён CSS по умолчанию*/

   )

}

То есть если такую же конструкцию я помещу в корневой шаблон страницы, то получится полный аналог шаблона default CSS-styles (tt_news). Правильно?
Если это так, то тогда подключать default CSS-styles (tt_news) действительно не имеет смысла.

естественно! Вообще-то это просто пример. Так же как и html-шаблон по умолчанию.

Тоже создал страничку для отображение новостей. Как описано в мануале по tt_news отредактировал значение по-умолчанию в ” TypoScript Object B rowser ” на значение plugin.tt_news.templateFile = fileadmin/templates/tt_news_template.html , с этим всё понятно, также в папке templates которая находится в fileadmin создал CSS файл на основе файла tt_news_v2_styles.css из typo3conf\ext\tt_news\res. В настройки шаблона убрал из include default CSS-stules (tt_news),CSS-Based tmpl (tt_news) и table-based tmpl (tt_news ) , а в TS setup этоже шаблона пыталься подключать свой CSS файл , ни каких результатов это не дало. Нечего вообще не отображается. Подскажите с чем это связано?

Цитата:

Сообщение от djolejek (Сообщение 22672)

tt_news_template.html - оно есть в наличии? Это должна быть например копия typo3conf\ext\tt_news\pi\tt_news_v2_template.html

CSS-Based tmpl (tt_news) или table-based tmpl (tt_news )(он же typo3conf\ext\tt_news\pi\tt_news_v2_template.html) надо оставить. Это HTML шаблоны. Ввыбери один из них. ТОжесамое что и твой tt_news_template.html.

Я Просто не подключаю default CSS-stules (tt_news), нужные CSS-определения тупо дописываю в главный style.css

Цитата:

Сообщение от surfman (Сообщение 22675)

tt_news_template.html - оно есть в наличии? Это должна быть например копия typo3conf\ext\tt_news\pi\tt_news_v2_template.html

Да так и есть, tt_news_template.html не идёт в наличии с ext его я создаю на основе typo3conf\ext\tt_news\pi\tt_news_v2_template.html, так я делаю потому что так было предложено сделать в мануале по tt_news. Здесь работает всё замечательно, шаблон tt_news_template.html меняю как хочу и работает как часы, но меня волнует другое, как теперь прикрутить свою CSS к этому шаблону, но не используя главную CSS которая валяется в ... где она валяется кстате говоря?не здесь ли typo3conf\ext\tt_news\res\tt_news_v2_styles.css? вообщем я ещё это не выеснял так как мне этот вариант не подходит , мне нужно свои CSS использовать так как на разных страницах отображение хочу использовать разное.

Цитата:

Сообщение от surfman (Сообщение 22675)

CSS-Based tmpl (tt_news) или table-based tmpl (tt_news )(он же typo3conf\ext\tt_news\pi\tt_news_v2_template.html) надо оставить. Это HTML шаблоны. Ввыбери один из них. ТОжесамое что и твой tt_news_template.html.

Я Просто не подключаю default CSS-stules (tt_news), нужные CSS-определения тупо дописываю в главный style.css

Спасибо за разъяснение по поводу CSS-Based tmpl (tt_news) и table-based tmpl (tt_news ), я так понял нужно включить что нибудь одно из этих, а default CSS-styles (tt_news) - это что? Вроде как демка CSS стиля? И где она тоже валяется интересно?

1. Сначала подключаете html. Либо путем подключения одного из статических шаблонов, тогда вы назначаете глобально на весьсайт шаблон.
Либо путем plugin.tt_news.templateFile = fileadmin/templates/tt_news_template.html, тогда вы просто переопределяете включенный статический шаблон.
А default CSS-styles (tt_news) просто не подключаете.

2. Все работает?. Открываете получившиюся HTML-страничку, как текстовый документ. Ищите там разные DIV-ы с класами типа <div class="news-list-date">. А потом в своем главном css-файле присваиваете стили, какие нравятся.
.news-list-date, .news-catRootline {
font-size:0.8em;
font-weight:bold;
color:#004fa3;
margin-bottom:5px;
}

А если вы хотите менять сами названия класов <div class="news-list-date"> на <div class="my_class">, то надо через TS переопределять эти классы. Либо вручную в самом tt_news_template.html, но там их мало.

Что бы посмотреть какие классы где генерятся, смотрите файл typo3conf\ext\tt_news\static\ts_new\setup.txt и меняйте.
Тоесть надо поменять catmenu_stdWrap.wrap = <div class="news-catmenu">|</div> в 120-й строке этого файла.
значит в TS в соответствующем месте catmenu_stdWrap.wrap = <div class="my_style">|</div>

Это способ в лоб. А вообще эти свойства описаны в мануале.

Цитата:

Сообщение от surfman (Сообщение 22679)

А потом в своем главном css-файле присваиваете стили, какие нравятся.
.news-list-date, .news-catRootline {
font-size:0.8em;
font-weight:bold;
color:#004fa3;
margin-bottom:5px;
}

Где находится у вас главная CSS? и почему не работает plugin.tt_news._CSS_DEFAULT_STYLE = fileadmin\template\tt_news_v2_styles.css

Когда я делал шаблон лля сайта, то в хедере было <link href="images/style.css" rel="stylesheet" type="text/css" />
Когда Темплейтволя генерит шаблон, то путь fileadmin\template\ доставляется и все.

Все статические находятся в вапке static, и когда вы подключаете default CSS-styles (tt_news) через включение статических шаблонов, то данные з файла typo3conf\ext\tt_news\static\css\setup.txt копируются в временно создаваемый файл <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_8192c2092f.css" />. А если default CSS-styles (tt_news) не подключить, просто не будет стилевого оформления на странице.

tt_news_v2_styles.css это тоже самое, наверно, просто чтобы не лазили в static\css\setup.txt

Резюмирую:

Вывел для себя оптимальный способ «Изменения стиля новостей».

После установки расширения tt_news нужно подключить статический шаблон CSS-Based tmpl (tt_news). Далее, если нам нужно использовать свой html шаблон и свой CSS нужно сделать ряд переопределений. При подключение шаблона html вопросов не возникает:
Есть несколько путей , приведу в пример только 2
1. При добавление плагина в контент , в самой настройки плагина во вкладки templates мы можем указать пусть к своему html шаблону (который предварительно скопировали от сюда typo3conf\ext\tt_news\pi\tt_news_v2_template.html в рабочею папку fileadmin\templates ) и именно этот плагин будет работать с этим шаблоном.
2. Второй путь , можно в главном шаблоне всего сайта корневого каталога переопределить константу plugin.tt_news.templateFile = typo3conf/ext/tt_news/pi/tt_news_v2_template.html к примеру на это plugin.tt_news.templateFile = fileadmin/templates.
Первый способ мы меняем только для плагина , а второй меняет путь к шаблону по умолчанию

Стояла проблема подключить к своему шаблону свой созданный стиль CSS.
После долгих разбирательств в мануалах, и время препровождения на форуме , при помощи всех участников форума а так же отдельное спасибо surfman, реализовал подключение следующей строчкой в корневом каталоге основного шаблона TS setup:
page.includeCSS.myfile = fileadmin/template/tt_news_v2_styles.css

или этой

page.stylesheet = fileadmin/template/tt_news_v2_styles.css

обращаю внимание на слешы, первый раз у меня они были повёрнуты вот так:

page.stylesheet = fileadmin\template\tt_news_v2_styles.css (НЕ ВЕРНО!), что совсем не работало и не давало ни каких результатов.

к сожалению эта строчка так и не заработала

plugin.tt_news._CSS_DEFAULT_STYLE = fileadmin/template/tt_news_v2_styles.css

Так как ещё много приходиться разбератся в Typo3 незнаю всех тонкостей и различий между этим строчками page.includeCSS.myfile = fileadmin/template/tt_news_v2_styles.css
И page.stylesheet = fileadmin/template/tt_news_v2_styles.css. Подключаю теперь CSS первый способом (первой строчкой)

Этап подключения CSS для новостей пройден, переходим к дальнейшему изучению.

я сделал проще)
просто запихнул стили в Главный css шаблона, и всё отлично...

djolejek. Немного мыслите не стой стороны. Все что касается внешнего стилевого вида сайта - это связано с HTML+CSS, а не с TYPO3. Поэтому тут надо мыслить, опираясь на знания HTML+CSS, тоесть как оно работает. А TYPO3 - вы лиш выбираете способ подключения стилей. И не важно как вы их подключите, важен порядок.
1. Статический. ТОгда стили всунутся в stylesheet_8192c2092f.css, который по умолчанию первый в хедере.
2. page.includeCSS.myfile - наверно этот файл будет включен после stylesheet_8192c2092f.css, поэтому если там будут одинаковые классы, то стиль будет братся из следующего файла.
3. При создании шаблона вы пишете свой CSS, обычно он включается самым последним в хедере.
В какой файл вы запихнете дизайн новостей, не важно. НО я за то, чтобы все в один файл ложить, это оптимальней.

я правда не знаю как отключить stylesheet_8192c2092f.css. Может кто знает.

И еще, 90% новостей подключаю через TS, а чать вручную.
В TS пишу plugin.tt_news.templateFile = fileadmin/templates.html, но когда вставляю плагин вручную, то в закладке "шаблон" по умолчанию стоит путь на ext\tt_news\pi\tt_news_v2_template.html, и если его не стереть то плагин сохранит эту настройку.

Цитата:

Сообщение от surfman (Сообщение 22724)

Сделал не большой анализ, всего того, о чём идёт речь, про стили:

Эксперимент показал что <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_8192c2092f.css" /> подключается когда мы в Include static добавляем CSS Styled Content (css_styled_content), так же в manual-е Futuristic Template Building (FTB) в конце странице 17 говорится про этот css_styled_content следующие:

«Установка css_styled_content для рендеринга контента
Прежде чем элементы контента могут быть показаны, нам нужен соотв. статический шаблон TypoScript, который
занимается рендерингом. Это известно из всех других разработок в TYPO3, так что здесь ничего нового; только
отредактируйте Запись Шаблона и добавьте статический шаблон “CSS Styled Content”»

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

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

Кстате на ум пришло ещё один способ подключение CSS для новостей. Мы же добавляем в наш главный html шаблон (на основе которого создаём сайт через TV) СSS строчку и можно ещё добавать какую нибудь строчку подключив ещё какой нибудь CSS тем самым установить порядок и последовательность их подключения в результирующем сайте.

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

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_8192c2092f.css" />

Затем подключается тот файл который я подключал для новостей

<link rel="stylesheet" type="text/css" href="fileadmin/template/tt_news_v2_styles.css" />

И наконец последний файл который подрубался в самом шаблоне html
<link href="fileadmin/template/main/res/stylesheet.css" rel="stylesheet" type="text/css" />

О мне на ум пришла другая идея. Вообще в html шаблоне не использовать link, ну не подключать их , а все CSS подрубать через page.includeCSS.myfile = fileadmin/template/tt_news_v2_styles.css таким образом будет проще порядок следования CSS в head отследить.

Кстате я не очень понял про второй пункт

Цитата:

Сообщение от surfman (Сообщение 22724)

2. page.includeCSS.myfile - наверно этот файл будет включен после stylesheet_8192c2092f.css, поэтому если там будут одинаковые классы, то стиль будет братся из следующего файла.

Если к примеру у меня стоит

<link rel="stylesheet" type="text/css" href="fileadmin/template/tt_news_v2_styles.css" />

А затем

<link href="fileadmin/template/main/res/stylesheet.css" rel="stylesheet" type="text/css" />

И в том и в другом файле будут одни классы, кому уйдёт приоритет ?

Цитата:

Сообщение от surfman (Сообщение 22724)

И еще, 90% новостей подключаю через TS, а чать вручную.
В TS пишу plugin.tt_news.templateFile = fileadmin/templates.html, но когда вставляю плагин вручную, то в закладке "шаблон" по умолчанию стоит путь на ext\tt_news\pi\tt_news_v2_template.html, и если его не стереть то плагин сохранит эту настройку.

Здесь Вы совершено правы, на 100% с вами согласен )

Цитата:

Если к примеру у меня стоит

<link rel="stylesheet" type="text/css" href="fileadmin/template/tt_news_v2_styles.css" />

А затем

<link href="fileadmin/template/main/res/stylesheet.css" rel="stylesheet" type="text/css" />

И в том и в другом файле будут одни классы, кому уйдёт приоритет ?

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

CSS Styled Content - это обычный TS, какя то его маленькая часть - CSS. Эту часть я хочю хранить в основном css-файле. Это оптимальней. Если много включений, то дольше грузится сайт.
При желании можно просто менять в TS контейнеры новостей с разними именами классов, а не подключать файлы.

Цитата:

Сообщение от surfman (Сообщение 22742)

Ок. с этим всё понятно.

Цитата:

Сообщение от surfman (Сообщение 22742)

CSS Styled Content - это обычный TS, какя то его маленькая часть - CSS. Эту часть я хочю хранить в основном css-файле. Это оптимальней. Если много включений, то дольше грузится сайт.
При желании можно просто менять в TS контейнеры новостей с разними именами классов, а не подключать файлы.

Хорошо,вопрос в том на сколько это оптимальней и на сколько критично использовать именно подключения стилей через link . Я зашёл на такие сайты как mail.ru , http://typo3.org там как минимум по 4 стиля прикручино. Стоит ли так задумываться над этой ситуацией? Действительно или производительность так уж падает при таком подходе? Нужно ли ломать копья по такому вопросу?

При множественных линках думаю нужно говорить о конектах на сервер, я не думаю, что у вас и меня проект, которому критично количество запросов на сервер да и скорость загрузки css...

Я наткнулся на интересную статью по этому поводу, хочу узнать ваше мнение об этом. http://webo.in/articles/habrahabr/02...g-stylesheets/

Кстате ради интереса, можно попробывать убрать <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_8192c2092f.css" /> и всё запихать в одни CSS. попробывать такой вариант и вариант мой и сравнить скорость. Мне инетерсно попробывать это.

Да присем тут нагрузка на сервер.
Это со стороны клиента.
Просто когда файлы по 40кб то может нужно по отдельности, а там 6кб, проще не запрашивать.

Цитата:

Сообщение от surfman (Сообщение 22746)

Использование подключаемых файлов на практике обычно дает более быстрые страницы, т.к. браузеры кешируют файлы скриптов и CSS. Код javascript и CSS, который встраивается в HTML, загружается каждый раз, когда загружается сам HTML-документ. Это уменьшает количество необходимых HTTP-запросов, но увеличивает объем HTML. С другой стороны, если скрипты и таблицы стилей находятся в отдельных файлах, скэшированных браузером, размер HTML уменьшается, не увеличивая при этом количество HTTP-запросов.

З.Ы - подключение css не оказывает нагрузку. количество обращений к серверу - сокращается с количеством запрашиваемых клиентом файлов