Добавить Новости В Шаблон Ночь
#1
Отправлено 01 Февраль 2016 - 02:39
Цвет фона блока серенький. Новости в 3 одинаковых по ширине столбика со структурой как в примере. И с возможностью перевода всего текста на другой язык, конечно.
Вы молодцы!
#2
Отправлено 01 Февраль 2016 - 12:54
Ingleest (01 Февраль 2016 - 02:39) писал:
Цвет фона блока серенький. Новости в 3 одинаковых по ширине столбика со структурой как в примере. И с возможностью перевода всего текста на другой язык, конечно.
Вы молодцы!
Здравствуйте. Как понимаем нужна карусель, чтобы если было былее 4-х новостей, их можно было перелистывать. Или достаточно на главной показать 4 новости и далее просто разместить ссылку на раздел Новостей?
#3
Отправлено 01 Февраль 2016 - 14:11
MikDark (01 Февраль 2016 - 12:54) писал:
Слева поставить маленький блок "Интересное видео" с видяшкой. По клику на заглавие блока открывается страничка с другими видео.
Справа блок из 3 последних новостей. И ссылка на раздел Новостей - по клику на заглавии этого раздела. Каждый из 3 баннеров новостей - ссылка на соответствующую новость в разделе Новостей. В конце ссылку ставить не надо.
Итого здесь получается 4 блока: 1 - видео (40% ширины), 2,3,4 (по 20%) - новости.
Сообщение отредактировал Ingleest: 01 Февраль 2016 - 14:13
#4
Отправлено 01 Февраль 2016 - 14:42
Ingleest (01 Февраль 2016 - 14:11) писал:
Слева поставить маленький блок "Интересное видео" с видяшкой. По клику на заглавие блока открывается страничка с другими видео.
Справа блок из 3 последних новостей. И ссылка на раздел Новостей - по клику на заглавии этого раздела. Каждый из 3 баннеров новостей - ссылка на соответствующую новость в разделе Новостей. В конце ссылку ставить не надо.
Итого здесь получается 4 блока: 1 - видео (40% ширины), 2,3,4 (по 20%) - новости.
В шаблоне HTML найдите код:
</div> {% ENDIF %} {% ENDIF %} <!-- /END Товары на главной, Новинки, Хиты -->и после него добавьте:
{% IF index_page %} <div id="content" class="wrap"> <div class="container"> <div class="col-md-6 col-xs-12 col-left"> <iframe style="width:100%;height:350px;" src="https://www.youtube.com/embed/IhmBWr77Sog" frameborder="0" allowfullscreen></iframe> </div> {% IF index_page && TARIFF_FEATURE_NEWS %} {% IF news_list_all_empty=0 || news_list_shop_empty=0 || news_list_articles_empty=0 || news_list_mass_media_empty=0 %} {% FOR news_list_all %} <div class="col-md-2 col-xs-12 col-left"> {news_list_all.TITLE} {news_list_all.TEXT_SHORT} </div> {%IF news_list_all.index >3%}{break}{%ENDIF%} {% ENDFOR %} {%ENDIF%} {%ENDIF%} </div> </div> {%ENDIF%}
вместо
<iframe style="width:100%;height:350px;" src="https://www.youtube.com/embed/IhmBWr77Sog" frameborder="0" allowfullscreen></iframe>
напишите код своего ролика в youtube и пришлите, пожалуйста, ссылку, где есть такое же отображение новостей как на присланном скриншоте.
#5
Отправлено 01 Февраль 2016 - 15:01
MikDark (01 Февраль 2016 - 14:42) писал:
</div> {% ENDIF %} {% ENDIF %} <!-- /END Товары на главной, Новинки, Хиты -->и после него добавьте:
{% IF index_page %} <div id="content" class="wrap"> <div class="container"> <div class="col-md-6 col-xs-12 col-left"> <iframe style="width:100%;height:350px;" src="https://www.youtube.com/embed/IhmBWr77Sog" frameborder="0" allowfullscreen></iframe> </div> {% IF index_page && TARIFF_FEATURE_NEWS %} {% IF news_list_all_empty=0 || news_list_shop_empty=0 || news_list_articles_empty=0 || news_list_mass_media_empty=0 %} {% FOR news_list_all %} <div class="col-md-2 col-xs-12 col-left"> {news_list_all.TITLE} {news_list_all.TEXT_SHORT} </div> {%IF news_list_all.index >3%}{break}{%ENDIF%} {% ENDFOR %} {%ENDIF%} {%ENDIF%} </div> </div> {%ENDIF%}
вместо
<iframe style="width:100%;height:350px;" src="https://www.youtube.com/embed/IhmBWr77Sog" frameborder="0" allowfullscreen></iframe>
напишите код своего ролика в youtube и пришлите, пожалуйста, ссылку, где есть такое же отображение новостей как на присланном скриншоте.
Это здесь: www fabiansmith .ру
#8
Отправлено 02 Февраль 2016 - 01:51
<div class="col-md-2 col-xs-12 col-left"> {news_list_all.TITLE} {news_list_all.TEXT_SHORT} </div>
замените на:
<div class="col-md-2 col-xs-12 col-left"> <a href="{news_list_all.URL}"> {% IF news_list_all.index = 1 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 2 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 3 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ENDIF %} <div class="news_date">{news_list_all.TIME | date("d.m.Y")}</div> <div class="news_title">{news_list_all.TITLE}</div> </a> </div>
текст замените на ссылки
#9
Отправлено 02 Февраль 2016 - 03:05
Vaccina (02 Февраль 2016 - 01:51) писал:
<div class="col-md-2 col-xs-12 col-left"> {news_list_all.TITLE} {news_list_all.TEXT_SHORT} </div>
замените на:
<div class="col-md-2 col-xs-12 col-left"> <a href="{news_list_all.URL}"> {% IF news_list_all.index = 1 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 2 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 3 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ENDIF %} <div class="news_date">{news_list_all.TIME | date("d.m.Y")}</div> <div class="news_title">{news_list_all.TITLE}</div> </a> </div>
текст замените на ссылки
Вакцина, а как же... красивая серенькая рамочка, заголовки-ссылки и новости-плитки?
#10
Отправлено 02 Февраль 2016 - 04:00
{% IF index_page %} <div id="content" class="wrap"> <div class="container"> <div class="col-md-6 col-xs-12 col-left"> <iframe src="https://player.vimeo.com/video/38326171" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> {% IF index_page && TARIFF_FEATURE_NEWS %} {% IF news_list_all_empty=0 || news_list_shop_empty=0 || news_list_articles_empty=0 || news_list_mass_media_empty=0 %} {% FOR news_list_all %} <div class="col-md-2 col-xs-12 col-left"> <a href="{news_list_all.URL}"> {% IF news_list_all.index = 1 %} <img src="{ASSETS_IMAGES_PATH}belvoir.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 2 %} <img src="{ASSETS_IMAGES_PATH}Charles1.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 3 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ENDIF %} <div class="news_date">{news_list_all.TIME | date("d.m.Y")}</div> <div class="news_title">{news_list_all.TITLE}</div> </a> </div> {%IF news_list_all.index >3%}{break}{%ENDIF%} {% ENDFOR %} {%ENDIF%} {%ENDIF%} </div> </div> {%ENDIF%}
замените на:
{% IF index_page %} <div id="content" class="wrap news_block"> <div class="container"> <div class="col-md-6 col-xs-12 col-left"> <h3>Интересное видео</h3> <iframe src="https://player.vimeo.com/video/38326171" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> {% IF index_page && TARIFF_FEATURE_NEWS %} <div class="col-md-6 col-xs-12 col-left news"> <h3>Интересные новости</h3> {% IF news_list_all_empty=0 || news_list_shop_empty=0 || news_list_articles_empty=0 || news_list_mass_media_empty=0 %} {% FOR news_list_all %} <div class="col-md-4 col-xs-12 col-left"> <a href="{news_list_all.URL}"> {% IF news_list_all.index = 1 %} <img src="{ASSETS_IMAGES_PATH}belvoir.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 2 %} <img src="{ASSETS_IMAGES_PATH}Charles1.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 3 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ENDIF %} <div class="news_date">{news_list_all.TIME | date("d.m.Y")}</div> <div class="news_title">{news_list_all.TITLE}</div> </a> </div> {%IF news_list_all.index >3%}{break}{%ENDIF%} {% ENDFOR %} {%ENDIF%} </div> {%ENDIF%} </div> </div> {%ENDIF%}д
далее в main.css добавьте:
.news_block { padding: 10px 0; background: #B29A6D; margin: 0 auto; width: 90%; } .news_block h3 { display: inline-block; position: relative; font-size: 16px; line-height: 120%; color: #fff; letter-spacing: 2px; text-transform: uppercase; font-weight: normal; font-family: tahoma; padding: 10px 0; margin-bottom: 18px; } .news > div { background: #fff; margin: 0 1%; width: 31.3333333%; padding: 0; } .news .news_date { color: #67221d; font-size: 14px; margin: 10px 0; padding: 0 10px; font-family: tahoma; } .news_title { color: #3f3a34; font: italic 14px Georgia; padding: 0 10px; }
#11
Отправлено 02 Февраль 2016 - 11:57
Vaccina (02 Февраль 2016 - 04:00) писал:
{% IF index_page %} <div id="content" class="wrap"> <div class="container"> <div class="col-md-6 col-xs-12 col-left"> <iframe src="https://player.vimeo.com/video/38326171" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> {% IF index_page && TARIFF_FEATURE_NEWS %} {% IF news_list_all_empty=0 || news_list_shop_empty=0 || news_list_articles_empty=0 || news_list_mass_media_empty=0 %} {% FOR news_list_all %} <div class="col-md-2 col-xs-12 col-left"> <a href="{news_list_all.URL}"> {% IF news_list_all.index = 1 %} <img src="{ASSETS_IMAGES_PATH}belvoir.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 2 %} <img src="{ASSETS_IMAGES_PATH}Charles1.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 3 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ENDIF %} <div class="news_date">{news_list_all.TIME | date("d.m.Y")}</div> <div class="news_title">{news_list_all.TITLE}</div> </a> </div> {%IF news_list_all.index >3%}{break}{%ENDIF%} {% ENDFOR %} {%ENDIF%} {%ENDIF%} </div> </div> {%ENDIF%}
замените на:
{% IF index_page %} <div id="content" class="wrap news_block"> <div class="container"> <div class="col-md-6 col-xs-12 col-left"> <h3>Интересное видео</h3> <iframe src="https://player.vimeo.com/video/38326171" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> {% IF index_page && TARIFF_FEATURE_NEWS %} <div class="col-md-6 col-xs-12 col-left news"> <h3>Интересные новости</h3> {% IF news_list_all_empty=0 || news_list_shop_empty=0 || news_list_articles_empty=0 || news_list_mass_media_empty=0 %} {% FOR news_list_all %} <div class="col-md-4 col-xs-12 col-left"> <a href="{news_list_all.URL}"> {% IF news_list_all.index = 1 %} <img src="{ASSETS_IMAGES_PATH}belvoir.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 2 %} <img src="{ASSETS_IMAGES_PATH}Charles1.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 3 %} <img src="ссылка на изображение" alt="{news_list_all.TITLE}" /> {% ENDIF %} <div class="news_date">{news_list_all.TIME | date("d.m.Y")}</div> <div class="news_title">{news_list_all.TITLE}</div> </a> </div> {%IF news_list_all.index >3%}{break}{%ENDIF%} {% ENDFOR %} {%ENDIF%} </div> {%ENDIF%} </div> </div> {%ENDIF%}д
далее в main.css добавьте:
.news_block { padding: 10px 0; background: #B29A6D; margin: 0 auto; width: 90%; } .news_block h3 { display: inline-block; position: relative; font-size: 16px; line-height: 120%; color: #fff; letter-spacing: 2px; text-transform: uppercase; font-weight: normal; font-family: tahoma; padding: 10px 0; margin-bottom: 18px; } .news > div { background: #fff; margin: 0 1%; width: 31.3333333%; padding: 0; } .news .news_date { color: #67221d; font-size: 14px; margin: 10px 0; padding: 0 10px; font-family: tahoma; } .news_title { color: #3f3a34; font: italic 14px Georgia; padding: 0 10px; }
Пожалуйста, помогите подправить блоки. Одна новость выше заголовка прыгнула. И нужно вытянуть новости по вертикали на высоту видео, как в скриншоте. И я не могу найти, как поменять фон текста каждой новости (не всего блока).
#12
Отправлено 02 Февраль 2016 - 13:30
Ingleest (02 Февраль 2016 - 11:57) писал:
Пожалуйста, помогите подправить блоки. Одна новость выше заголовка прыгнула. И нужно вытянуть новости по вертикали на высоту видео, как в скриншоте. И я не могу найти, как поменять фон текста каждой новости (не всего блока).
Здравствуйте, попробуйте сделать следующее.
В main.css найдите код:
.news_block h3 { display: inline-block; position: relative; font-size: 16px; line-height: 120%; color: #fff; letter-spacing: 2px; text-transform: uppercase; font-weight: normal; font-family: tahoma; padding: 10px 0; margin-bottom: 18px; }
и замените на код:
.news_block h3 { display: inline-block; position: relative; font-size: 16px; line-height: 120%; color: #fff; letter-spacing: 2px; text-transform: uppercase; font-weight: normal; font-family: tahoma; padding: 10px 0; width: 100%; text-align: center; margin-bottom: 18px; }
Изменить цвет фона, если я всё правильно понимаю, то в main.css найдите код:
.news_title { color: #3f3a34; font: italic 14px Georgia; padding: 0 10px; }
и замените на код:
.news_title { color: #3f3a34; font: italic 14px Georgia; padding: 0 10px; background: #цвет; }
Значение цвета становите нужный Вам.
#13
Отправлено 02 Февраль 2016 - 14:08
1) вытянуть новости, чтобы блоки всегда одной высоты были - как высота видео (которая может меняться)?
2) поставить единый фон в блоке каждой новости (взамен кусков белого поля background для даты и title новости) и
3) сделать, чтобы этот фон менял цвет при наведении мышки?
Сообщение отредактировал Ingleest: 02 Февраль 2016 - 15:05
#14
Отправлено 02 Февраль 2016 - 15:08
Ingleest (02 Февраль 2016 - 14:08) писал:
1) вытянуть новости, чтобы блоки всегда одной высоты были - как высота видео (которая может меняться)?
2) поставить единый фон в блоке каждой новости (взамен кусков белого поля background для даты и title новости) и
3) сделать, чтобы этот фон менял цвет при наведении мышки?
В main.css найдите код:
.news > div { background: #fff; margin: 0 1%; width: 47.9%; padding: 0; }
и замените на код:
.news > div { background: #fff; margin: 0 1%; width: 47.9%; padding: 0; height:280px; }
#15
Отправлено 02 Февраль 2016 - 16:05
Юля123 (02 Февраль 2016 - 15:08) писал:
.news > div { background: #fff; margin: 0 1%; width: 47.9%; padding: 0; }
и замените на код:
.news > div { background: #fff; margin: 0 1%; width: 47.9%; padding: 0; height:280px; }
.news > div { background: #fff; margin: 0 1%; width: 47.9%; padding: 0; height:280px; }
Я тут намудрил с шириной блоков Новостей... Как сделать, чтобы они корректно висели, деля свободное пространство от видео до края рамки пополам?
#16
Отправлено 02 Февраль 2016 - 17:36
Ingleest (02 Февраль 2016 - 14:08) писал:
1) вытянуть новости, чтобы блоки всегда одной высоты были - как высота видео (которая может меняться)?
2) поставить единый фон в блоке каждой новости (взамен кусков белого поля background для даты и title новости) и
3) сделать, чтобы этот фон менял цвет при наведении мышки?
Извините, не заметила, как Вы отредактировали сообщение.
2) В main.css найдите код:
.news > div { background: #fff; margin: 0 1%; width: 47.9%; padding: 0; } .news .news_date { color: #363636; font-size: 14px; font-weight:bold; margin: 10px 0; padding: 0 10px; font-family: tahoma; } .news_title { color: #000000; font: italic 14px Georgia; padding: 0 10px; }
и замените на код:
.news > div { background: #363636; margin: 0 1%; padding: 0; float: right !important; } .news .news_date { color: #fff; font-size: 14px; font-weight:bold; margin: 10px 0; padding: 0 10px; font-family: tahoma; } .news_title { color: #fff; font: italic 14px Georgia; padding: 0 10px; }
Если я Вас не так поняла, то уточните, что имеется ввиду под словом "background"? Картинка к новости?
3) Уточните а какой цвет должен меняться, и будет замечательно, если Вы прикрепите скриншот.
Ingleest (02 Февраль 2016 - 16:05) писал:
Я тут намудрил с шириной блоков Новостей... Как сделать, чтобы они корректно висели, деля свободное пространство от видео до края рамки пополам?
В шаблоне HTML найдите код:
{% IF index_page && TARIFF_FEATURE_NEWS %} <div class="col-md-6 col-xs-12 col-left news"> <h3>Huvitavad uudised</h3> {% IF news_list_all_empty=0 || news_list_shop_empty=0 || news_list_articles_empty=0 || news_list_mass_media_empty=0 %} {% FOR news_list_all %} <div class="col-md-4 col-xs-12 col-left"> <a href="{news_list_all.URL}"> {% IF news_list_all.index = 1 %} <img src="{ASSETS_IMAGES_PATH}belvoir.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 2 %} <img src="{ASSETS_IMAGES_PATH}Charles1.jpg" alt="{news_list_all.TITLE}" /> {% ENDIF %} <div class="news_date">{news_list_all.TIME | date("d.m.Y")}</div> <div class="news_title">{news_list_all.TITLE}</div> </a> </div> {%IF news_list_all.index >3%}{break}{%ENDIF%} {% ENDFOR %} {%ENDIF%} </div> {%ENDIF%} </div> </div> {%ENDIF%}
и замените на код:
{% IF index_page && TARIFF_FEATURE_NEWS %} <div class="col-md-6 col-xs-12 col-right news"> <h3>Huvitavad uudised</h3> {% IF news_list_all_empty=0 || news_list_shop_empty=0 || news_list_articles_empty=0 || news_list_mass_media_empty=0 %} {% FOR news_list_all %} <div class="col-md-5 col-xs-12 col-right"> <a href="{news_list_all.URL}"> {% IF news_list_all.index = 1 %} <img src="{ASSETS_IMAGES_PATH}belvoir.jpg" alt="{news_list_all.TITLE}" /> {% ELSEIF news_list_all.index = 2 %} <img src="{ASSETS_IMAGES_PATH}Charles1.jpg" alt="{news_list_all.TITLE}" /> {% ENDIF %} <div class="news_date">{news_list_all.TIME | date("d.m.Y")}</div> <div class="news_title">{news_list_all.TITLE}</div> </a> </div> {%IF news_list_all.index >3%}{break}{%ENDIF%} {% ENDFOR %} {%ENDIF%} </div> {%ENDIF%} </div> </div> {%ENDIF%}
#17
Отправлено 02 Февраль 2016 - 18:08
Фон обведенного рамочкой нужно растянуть до нижней границы видео и сделать, чтобы он менял цвет при наведении мышки. У меня сейчас вот так это отображается (на нетбуке). Допускаю, что на полноэкранных компьютерах это выглядит нормально. На планшете надо проверять.
Сообщение отредактировал Ingleest: 02 Февраль 2016 - 19:53
#18
Отправлено 02 Февраль 2016 - 18:14
#19
Отправлено 02 Февраль 2016 - 19:52
#20
Отправлено 03 Февраль 2016 - 00:45
Ingleest (02 Февраль 2016 - 18:14) писал:
.news_block { padding: 10px 0; background: #363636; margin: 0 auto; width: 90%; }
после него пропишите:
.news_block .container { width: 100%; }
Также добавьте стили для адаптации блока видео(хотя, возможно, будет лучше заранее вставить видео поменьше размером):
.news_block .container .col-md-6.col-xs-12.col-left { position: relative; padding-bottom: 30%; height: 0; overflow: hidden; } .news_block .container .col-md-6.col-xs-12.col-left iframe { top: 0; left: 0; height: 100%; width: 100%; position: absolute; }
Ingleest (02 Февраль 2016 - 18:08) писал:
Фон обведенного рамочкой нужно растянуть до нижней границы видео и сделать, чтобы он менял цвет при наведении мышки. У меня сейчас вот так это отображается (на нетбуке). Допускаю, что на полноэкранных компьютерах это выглядит нормально. На планшете надо проверять.
.news > div { background: #363636; margin: 0 1%; padding: 0; float: right !important; }
замените на:
.news > div { background: #363636; margin: 0 1%; padding: 0; float: right !important; height: 82%; } .news > div:hover { background: #000000; }
цвет в последнем измененном блоке подставьте свой.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных