Jump to content

БЛОК НОВОСТИ - как такое сделать ?

Litesm
Litesm
in Invision Community 4 Support

Featured Replies

Posted
comment_161362

Как сделать вот такой вывод Блока новостей ? Раздел новости, как на этом примере.

Это плагин или это в ручную прописанный код ?

 

 

Снимок_экрана_2020-03-29_в_21_40_53.png

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/
    Share on other sites
    comment_161367

    обычный html css код

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161367
    Share on other sites
    comment_161370
    1 час назад, golandec сказал:

    обычный html css код

    Отличный развернутый ответ.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161370
    Share on other sites
    comment_161372
    53 минуты назад, mamyka сказал:

    Отличный развернутый ответ.

    а какой ответ ожидал автор? что спросил то и ответил, может мне ему еще предоставить код?

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161372
    Share on other sites
    • Author
    comment_161373
    46 минут назад, golandec сказал:

    а какой ответ ожидал автор? что спросил то и ответил, может мне ему еще предоставить код?

     к сожалению я не разбираюсь в CSS и слабо знаю HTML. Если бы такое можно было делать с помощью плагина - было бы круто. Если кто-то может подсказать код - было бы вообзе идеально ! :)) 
    IPBmafia создан же для помощи, верно ?

    Меню сделано достаточно интересно и я думаю что многим подобное решение было бы полезным

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161373
    Share on other sites
    comment_161374
    54 минуты назад, Litesm сказал:

     к сожалению я не разбираюсь в CSS и слабо знаю HTML. Если бы такое можно было делать с помощью плагина - было бы круто. Если кто-то может подсказать код - было бы вообзе идеально ! :)) 
    IPBmafia создан же для помощи, верно ?

    Меню сделано достаточно интересно и я думаю что многим подобное решение было бы полезным

    но помощь тут платная

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161374
    Share on other sites
    • Author
    comment_161376
    50 минут назад, DarkShy сказал:

    но помощь тут платная

    И сколько стоит написать такой код ? Можно написать в ЛС

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161376
    Share on other sites
    comment_161377

    не ко мне, я знаю, лишь, что тут деньги очень любят 

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161377
    Share on other sites
    comment_161378
    31 минуту назад, DarkShy сказал:

    не ко мне, я знаю, лишь, что тут деньги очень любят 

    По каким критериям появилось такое мнение?

    34 минуты назад, Litesm сказал:

    И сколько стоит написать такой код ? Можно написать в ЛС

    Исходный код страницы покажет весь html  и css, который нужен для такого блока.

    HTML код блока: 

    <div class="cRedHotNews">
		<a href="https://avvadon.org/forum/topic/13588-seminar-magistra-vo-francii-evropa-centr-s-14-po-17-maya/"><p><span>Семинар Магистра во Франции.<span></span>Ментальное пространство.</span></p></a>
    <a href="https://avvadon.org/forum/forum/607-safari/"><p><span>Онлайн проект Магистра "Сафари"<br>начнётся с 7 апреля.</span></p></a>
      <a href="https://avvadon.org/forum/forum/230-igra/"><p><span>Проект Магистра "Игра"</span></p></a>

	<a href="https://avvadon.org/forum/forum/380-geneticheskie-braslety/"><p><span>Проект Магистра "Генетические Браслеты"</span></p></a>
	</div>

    CSS:

    Спойлер 
    
.cRedHotNews {
     display: flex;
     flex-flow: column wrap;
     justify-content: space-between;
     width: 100%;
     height: 200px;
     padding: 0;
     margin: 15px 0;
 }
 
 .cRedHotNews a {
     position: relative;
     display: flex;
     justify-content: stretch;
     align-items: center;
     flex-flow: row wrap;
     height: calc(33.33% - 10px);
     width: calc(50% - 10px);
     background-color: #0e2944;
     background-image: url("/forum/uploads/set_resources_13/7648027f53cf6b288822afa39fd11f40_news_secondary.jpg");
     background-size: cover;
     color: white;
     font-size: 20px;
     line-height: 22px;
     border-radius: 16px;
     overflow: hidden;
 }
 
 .cRedHotNews a::after {
     position: absolute;
     display: block;
     right: 20px;
     font-family: "FontAwesome";
     font-size: 30px;
     content: "\f101";
 }
 
 .cRedHotNews a p {
     position: relative;
     margin: auto 20px;
     margin-left: 25px;
     padding-left: 15px;
     padding-right: 24px;
     max-height: 44px;
 }
 
 .cRedHotNews a p span {
     display: block;
     margin: 0;
     max-height: 44px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .cRedHotNews a p span::before {
     position: absolute;
     display: block;
     top: 0;
     left: 0;
     content: "";
     width: 5px;
     height: 100%;
     border-radius: 3px;
     background: white;
 }
 
 .cRedHotNews a:nth-child(1) {
     order: 4;
     height: 302px;
     font-size: 26px;
     line-height: 30px;
     background-color: #0e2944;
     background-image: url("/forum/uploads/set_resources_13/7648027f53cf6b288822afa39fd11f40_news_primary.jpg");
     background-position: center center;
     align-self: flex-end;
 }
 
 .cRedHotNews a:nth-child(1)::after {
     right: 30px;
     bottom: 25px;
     font-size: 40px;
 }
 
 .cRedHotNews a:nth-child(1) p {
     margin: 30px 30px 0 25px;
     padding-right: 0;
     max-height: inherit;
     align-self: flex-start;
 }
 
 .cRedHotNews a:nth-child(1) p span {
     max-height: inherit;
 }
 
 .cRedHotNews a:nth-child(1) p span::before {
     background-color: #c10000;
 }
 
 .cRedHotNews a:nth-child(2) {
     order: 1;
 }
 
 .cRedHotNews a:nth-child(2) p span::before {
     background-color: #df9a00;
 }
 
 .cRedHotNews a:nth-child(3) {
     order: 2;
 }
 
 .cRedHotNews a:nth-child(3) p span::before {
     background-color: #00ab14;
 }
 
 .cRedHotNews a:nth-child(4) {
     order: 3;
 }
 
 .cRedHotNews a:nth-child(4) p span::before {
     background-color: #005fce;
 }
 
 .cRedHotNews a:nth-child(1) span:nth-child(1) {
     margin-bottom: 30px;
     max-height: 90px;
 }
 
 .cRedHotNews a:nth-child(1) span:nth-child(2) {
     font-size: 20px;
     line-height: 22px;
     max-height: 88px;
 }
 
 .ipsCoverPhoto_photo {
     object-fit: cover;
     height: 100%;
 }
 
 @media screen and (max-width:979px) {
     #elLogo img {
         margin-left: auto;
         margin-top: 5vh;
         margin-bottom: 5vh;
     }
     .cRedHotNews {
         flex-wrap: nowrap;
         height: auto;
         min-height: 100px;
     }
     .cRedHotNews a {
         height: calc(22%);
         width: 100%;
         margin: 8px 0;
         font-size: 18px;
     }
     .cRedHotNews a p {
         margin: 20px;
         margin-left: 25px;
         max-height: inherit;
     }
     .cRedHotNews a p span {
         max-height: inherit;
     }
     .cRedHotNews a:nth-child(1) {
         order: 1;
         height: auto;
         min-height: calc(34% - 10px);
     }
     .cRedHotNews a:nth-child(1)::after {
         right: 20px;
         bottom: inherit;
         font-size: 40px;
     }
     .cRedHotNews a:nth-child(1) p {
         margin: 20px 20px 20px 25px;
         padding-right: 30px;
     }
     .cRedHotNews a:nth-child(1) span:nth-child(1) {
         font-size: 22px;
     }
     .cRedHotNews a:nth-child(1) span:nth-child(2) {
         font-size: 18px;
     }
     .cRedHotNews a:nth-child(2) {
         order: 2;
     }
     .cRedHotNews a:nth-child(3) {
         order: 3;
     }
     .cRedHotNews a:nth-child(4) {
         order: 4;
     }
     .newsFix {
         margin-top: 0;
     }
 }

     

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161378
    Share on other sites
    • Author
    comment_161379
    59 минут назад, Respected сказал:

    По каким критериям появилось такое мнение?

    Исходный код страницы покажет весь html  и css, который нужен для такого блока.

    HTML код блока: 

    
<div class="cRedHotNews">
		<a href="https://avvadon.org/forum/topic/13588-seminar-magistra-vo-francii-evropa-centr-s-14-po-17-maya/"><p><span>Семинар Магистра во Франции.<span></span>Ментальное пространство.</span></p></a>
    <a href="https://avvadon.org/forum/forum/607-safari/"><p><span>Онлайн проект Магистра "Сафари"<br>начнётся с 7 апреля.</span></p></a>
      <a href="https://avvadon.org/forum/forum/230-igra/"><p><span>Проект Магистра "Игра"</span></p></a>

	<a href="https://avvadon.org/forum/forum/380-geneticheskie-braslety/"><p><span>Проект Магистра "Генетические Браслеты"</span></p></a>
	</div>

    CSS:

      Скрыть контент 
    

.cRedHotNews {
     display: flex;
     flex-flow: column wrap;
     justify-content: space-between;
     width: 100%;
     height: 200px;
     padding: 0;
     margin: 15px 0;
 }
 
 .cRedHotNews a {
     position: relative;
     display: flex;
     justify-content: stretch;
     align-items: center;
     flex-flow: row wrap;
     height: calc(33.33% - 10px);
     width: calc(50% - 10px);
     background-color: #0e2944;
     background-image: url("/forum/uploads/set_resources_13/7648027f53cf6b288822afa39fd11f40_news_secondary.jpg");
     background-size: cover;
     color: white;
     font-size: 20px;
     line-height: 22px;
     border-radius: 16px;
     overflow: hidden;
 }
 
 .cRedHotNews a::after {
     position: absolute;
     display: block;
     right: 20px;
     font-family: "FontAwesome";
     font-size: 30px;
     content: "\f101";
 }
 
 .cRedHotNews a p {
     position: relative;
     margin: auto 20px;
     margin-left: 25px;
     padding-left: 15px;
     padding-right: 24px;
     max-height: 44px;
 }
 
 .cRedHotNews a p span {
     display: block;
     margin: 0;
     max-height: 44px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .cRedHotNews a p span::before {
     position: absolute;
     display: block;
     top: 0;
     left: 0;
     content: "";
     width: 5px;
     height: 100%;
     border-radius: 3px;
     background: white;
 }
 
 .cRedHotNews a:nth-child(1) {
     order: 4;
     height: 302px;
     font-size: 26px;
     line-height: 30px;
     background-color: #0e2944;
     background-image: url("/forum/uploads/set_resources_13/7648027f53cf6b288822afa39fd11f40_news_primary.jpg");
     background-position: center center;
     align-self: flex-end;
 }
 
 .cRedHotNews a:nth-child(1)::after {
     right: 30px;
     bottom: 25px;
     font-size: 40px;
 }
 
 .cRedHotNews a:nth-child(1) p {
     margin: 30px 30px 0 25px;
     padding-right: 0;
     max-height: inherit;
     align-self: flex-start;
 }
 
 .cRedHotNews a:nth-child(1) p span {
     max-height: inherit;
 }
 
 .cRedHotNews a:nth-child(1) p span::before {
     background-color: #c10000;
 }
 
 .cRedHotNews a:nth-child(2) {
     order: 1;
 }
 
 .cRedHotNews a:nth-child(2) p span::before {
     background-color: #df9a00;
 }
 
 .cRedHotNews a:nth-child(3) {
     order: 2;
 }
 
 .cRedHotNews a:nth-child(3) p span::before {
     background-color: #00ab14;
 }
 
 .cRedHotNews a:nth-child(4) {
     order: 3;
 }
 
 .cRedHotNews a:nth-child(4) p span::before {
     background-color: #005fce;
 }
 
 .cRedHotNews a:nth-child(1) span:nth-child(1) {
     margin-bottom: 30px;
     max-height: 90px;
 }
 
 .cRedHotNews a:nth-child(1) span:nth-child(2) {
     font-size: 20px;
     line-height: 22px;
     max-height: 88px;
 }
 
 .ipsCoverPhoto_photo {
     object-fit: cover;
     height: 100%;
 }
 
 @media screen and (max-width:979px) {
     #elLogo img {
         margin-left: auto;
         margin-top: 5vh;
         margin-bottom: 5vh;
     }
     .cRedHotNews {
         flex-wrap: nowrap;
         height: auto;
         min-height: 100px;
     }
     .cRedHotNews a {
         height: calc(22%);
         width: 100%;
         margin: 8px 0;
         font-size: 18px;
     }
     .cRedHotNews a p {
         margin: 20px;
         margin-left: 25px;
         max-height: inherit;
     }
     .cRedHotNews a p span {
         max-height: inherit;
     }
     .cRedHotNews a:nth-child(1) {
         order: 1;
         height: auto;
         min-height: calc(34% - 10px);
     }
     .cRedHotNews a:nth-child(1)::after {
         right: 20px;
         bottom: inherit;
         font-size: 40px;
     }
     .cRedHotNews a:nth-child(1) p {
         margin: 20px 20px 20px 25px;
         padding-right: 30px;
     }
     .cRedHotNews a:nth-child(1) span:nth-child(1) {
         font-size: 22px;
     }
     .cRedHotNews a:nth-child(1) span:nth-child(2) {
         font-size: 18px;
     }
     .cRedHotNews a:nth-child(2) {
         order: 2;
     }
     .cRedHotNews a:nth-child(3) {
         order: 3;
     }
     .cRedHotNews a:nth-child(4) {
         order: 4;
     }
     .newsFix {
         margin-top: 0;
     }
 }

     

     

    Благодарю! Всё гениально и просто оказалось ! 
    Теперь нужно погуглить куда вставлять этот код ))

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161379
    Share on other sites
    comment_161380
    3 минуты назад, Litesm сказал:

    еперь нужно погуглить куда вставлять этот код ))

    у приложения pages есть хорошие блоки для этого дела

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161380
    Share on other sites
    comment_161381
    1 час назад, Respected сказал:

    По каким критериям появилось такое мнение?

     

    по теме RSS канала для турбо-страниц

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161381
    Share on other sites
    • Author
    comment_161382
    3 минуты назад, aplayer сказал:

    у приложения pages есть хорошие блоки для этого дела

    я так туплю...извините.. Включил "режим Дизанера" и не пойму как его отключить

    всё нашел

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161382
    Share on other sites
    • Author
    comment_161383

    Имея HTML код и CSS я не аойму как и куда его вставлять ?

    Снимок экрана 2020-03-30 в 13.31.14.png

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161383
    Share on other sites
    comment_161384

    Litesm

    Спойлер

     Screenshot_7.png.65e07a3fef0aaffedf2b8e8b0fb07855.pngScreenshot_8.png.b8007ebbe21e7c69b3f866a8d707a311.pngScreenshot_9.thumb.png.45631417d22da4931735240dae48e57a.pngScreenshot_10.thumb.png.26020d62a4edf5e39056ddf7e5ee0625.pngScreenshot_11.thumb.png.3f23abd5ac7c940943bfecd2162639ab.pngScreenshot_12.png.6c405864efc8ad5e62780ac76554f28e.pngScreenshot_13.png.a2ac5b0dcc2776ae535729c52cc9725c.pngScreenshot_14.thumb.png.74a88a4ba18b1781a6e6e6e985bdabb9.pngScreenshot_15.thumb.png.2cf3d96bb329645aebfa94bc84d9b637.png

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161384
    Share on other sites
    • Author
    comment_161385
    3 минуты назад, golandec сказал:

    Litesm

      Скрыть контент

     Screenshot_7.png.65e07a3fef0aaffedf2b8e8b0fb07855.pngScreenshot_8.png.b8007ebbe21e7c69b3f866a8d707a311.pngScreenshot_9.thumb.png.45631417d22da4931735240dae48e57a.pngScreenshot_10.thumb.png.26020d62a4edf5e39056ddf7e5ee0625.pngScreenshot_11.thumb.png.3f23abd5ac7c940943bfecd2162639ab.pngScreenshot_12.png.6c405864efc8ad5e62780ac76554f28e.pngScreenshot_13.png.a2ac5b0dcc2776ae535729c52cc9725c.pngScreenshot_14.thumb.png.74a88a4ba18b1781a6e6e6e985bdabb9.pngScreenshot_15.thumb.png.2cf3d96bb329645aebfa94bc84d9b637.png

     

    Вау! Вы сделали мой день! 
    Очень подробно с пошаговой инструкцией !!! Супер! 

    Сделал всё по инструкции :)) Вышло вот так. Остальное наверное за CSS кодом

    Снимок экрана 2020-03-30 в 14.04.00.png

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161385
    Share on other sites
    comment_161386

    друг весь код ставь этот 

    <style>
.cRedHotNews {
     display: flex;
     flex-flow: column wrap;
     justify-content: space-between;
     width: 100%;
     height: 200px;
     padding: 0;
     margin: 15px 0;
 }
 
 .cRedHotNews a {
     position: relative;
     display: flex;
     justify-content: stretch;
     align-items: center;
     flex-flow: row wrap;
     height: calc(33.33% - 10px);
     width: calc(50% - 10px);
     background-color: #0e2944;
     background-image: url("/forum/uploads/set_resources_13/7648027f53cf6b288822afa39fd11f40_news_secondary.jpg");
     background-size: cover;
     color: white;
     font-size: 20px;
     line-height: 22px;
     border-radius: 16px;
     overflow: hidden;
 }
 
 .cRedHotNews a::after {
     position: absolute;
     display: block;
     right: 20px;
     font-family: "FontAwesome";
     font-size: 30px;
     content: "\f101";
 }
 
 .cRedHotNews a p {
     position: relative;
     margin: auto 20px;
     margin-left: 25px;
     padding-left: 15px;
     padding-right: 24px;
     max-height: 44px;
 }
 
 .cRedHotNews a p span {
     display: block;
     margin: 0;
     max-height: 44px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .cRedHotNews a p span::before {
     position: absolute;
     display: block;
     top: 0;
     left: 0;
     content: "";
     width: 5px;
     height: 100%;
     border-radius: 3px;
     background: white;
 }
 
 .cRedHotNews a:nth-child(1) {
     order: 4;
     height: 302px;
     font-size: 26px;
     line-height: 30px;
     background-color: #0e2944;
     background-image: url("/forum/uploads/set_resources_13/7648027f53cf6b288822afa39fd11f40_news_primary.jpg");
     background-position: center center;
     align-self: flex-end;
 }
 
 .cRedHotNews a:nth-child(1)::after {
     right: 30px;
     bottom: 25px;
     font-size: 40px;
 }
 
 .cRedHotNews a:nth-child(1) p {
     margin: 30px 30px 0 25px;
     padding-right: 0;
     max-height: inherit;
     align-self: flex-start;
 }
 
 .cRedHotNews a:nth-child(1) p span {
     max-height: inherit;
 }
 
 .cRedHotNews a:nth-child(1) p span::before {
     background-color: #c10000;
 }
 
 .cRedHotNews a:nth-child(2) {
     order: 1;
 }
 
 .cRedHotNews a:nth-child(2) p span::before {
     background-color: #df9a00;
 }
 
 .cRedHotNews a:nth-child(3) {
     order: 2;
 }
 
 .cRedHotNews a:nth-child(3) p span::before {
     background-color: #00ab14;
 }
 
 .cRedHotNews a:nth-child(4) {
     order: 3;
 }
 
 .cRedHotNews a:nth-child(4) p span::before {
     background-color: #005fce;
 }
 
 .cRedHotNews a:nth-child(1) span:nth-child(1) {
     margin-bottom: 30px;
     max-height: 90px;
 }
 
 .cRedHotNews a:nth-child(1) span:nth-child(2) {
     font-size: 20px;
     line-height: 22px;
     max-height: 88px;
 }
 
 .ipsCoverPhoto_photo {
     object-fit: cover;
     height: 100%;
 }
 
 @media screen and (max-width:979px) {
     #elLogo img {
         margin-left: auto;
         margin-top: 5vh;
         margin-bottom: 5vh;
     }
     .cRedHotNews {
         flex-wrap: nowrap;
         height: auto;
         min-height: 100px;
     }
     .cRedHotNews a {
         height: calc(22%);
         width: 100%;
         margin: 8px 0;
         font-size: 18px;
     }
     .cRedHotNews a p {
         margin: 20px;
         margin-left: 25px;
         max-height: inherit;
     }
     .cRedHotNews a p span {
         max-height: inherit;
     }
     .cRedHotNews a:nth-child(1) {
         order: 1;
         height: auto;
         min-height: calc(34% - 10px);
     }
     .cRedHotNews a:nth-child(1)::after {
         right: 20px;
         bottom: inherit;
         font-size: 40px;
     }
     .cRedHotNews a:nth-child(1) p {
         margin: 20px 20px 20px 25px;
         padding-right: 30px;
     }
     .cRedHotNews a:nth-child(1) span:nth-child(1) {
         font-size: 22px;
     }
     .cRedHotNews a:nth-child(1) span:nth-child(2) {
         font-size: 18px;
     }
     .cRedHotNews a:nth-child(2) {
         order: 2;
     }
     .cRedHotNews a:nth-child(3) {
         order: 3;
     }
     .cRedHotNews a:nth-child(4) {
         order: 4;
     }
     .newsFix {
         margin-top: 0;
     }
 }
</style>

<div class="cRedHotNews">
		<a href="https://avvadon.org/forum/topic/13588-seminar-magistra-vo-francii-evropa-centr-s-14-po-17-maya/"><p><span>Семинар Магистра во Франции.<span></span>Ментальное пространство.</span></p></a>
    <a href="https://avvadon.org/forum/forum/607-safari/"><p><span>Онлайн проект Магистра "Сафари"<br>начнётся с 7 апреля.</span></p></a>
      <a href="https://avvadon.org/forum/forum/230-igra/"><p><span>Проект Магистра "Игра"</span></p></a>

	<a href="https://avvadon.org/forum/forum/380-geneticheskie-braslety/"><p><span>Проект Магистра "Генетические Браслеты"</span></p></a>
	</div>

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161386
    Share on other sites
    • Author
    comment_161387
    4 минуты назад, golandec сказал:

    друг весь код ставь этот 

    
<style>
.cRedHotNews {
     display: flex;
     flex-flow: column wrap;
     justify-content: space-between;
     width: 100%;
     height: 200px;
     padding: 0;
     margin: 15px 0;
 }
 
 .cRedHotNews a {
     position: relative;
     display: flex;
     justify-content: stretch;
     align-items: center;
     flex-flow: row wrap;
     height: calc(33.33% - 10px);
     width: calc(50% - 10px);
     background-color: #0e2944;
     background-image: url("/forum/uploads/set_resources_13/7648027f53cf6b288822afa39fd11f40_news_secondary.jpg");
     background-size: cover;
     color: white;
     font-size: 20px;
     line-height: 22px;
     border-radius: 16px;
     overflow: hidden;
 }
 
 .cRedHotNews a::after {
     position: absolute;
     display: block;
     right: 20px;
     font-family: "FontAwesome";
     font-size: 30px;
     content: "\f101";
 }
 
 .cRedHotNews a p {
     position: relative;
     margin: auto 20px;
     margin-left: 25px;
     padding-left: 15px;
     padding-right: 24px;
     max-height: 44px;
 }
 
 .cRedHotNews a p span {
     display: block;
     margin: 0;
     max-height: 44px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .cRedHotNews a p span::before {
     position: absolute;
     display: block;
     top: 0;
     left: 0;
     content: "";
     width: 5px;
     height: 100%;
     border-radius: 3px;
     background: white;
 }
 
 .cRedHotNews a:nth-child(1) {
     order: 4;
     height: 302px;
     font-size: 26px;
     line-height: 30px;
     background-color: #0e2944;
     background-image: url("/forum/uploads/set_resources_13/7648027f53cf6b288822afa39fd11f40_news_primary.jpg");
     background-position: center center;
     align-self: flex-end;
 }
 
 .cRedHotNews a:nth-child(1)::after {
     right: 30px;
     bottom: 25px;
     font-size: 40px;
 }
 
 .cRedHotNews a:nth-child(1) p {
     margin: 30px 30px 0 25px;
     padding-right: 0;
     max-height: inherit;
     align-self: flex-start;
 }
 
 .cRedHotNews a:nth-child(1) p span {
     max-height: inherit;
 }
 
 .cRedHotNews a:nth-child(1) p span::before {
     background-color: #c10000;
 }
 
 .cRedHotNews a:nth-child(2) {
     order: 1;
 }
 
 .cRedHotNews a:nth-child(2) p span::before {
     background-color: #df9a00;
 }
 
 .cRedHotNews a:nth-child(3) {
     order: 2;
 }
 
 .cRedHotNews a:nth-child(3) p span::before {
     background-color: #00ab14;
 }
 
 .cRedHotNews a:nth-child(4) {
     order: 3;
 }
 
 .cRedHotNews a:nth-child(4) p span::before {
     background-color: #005fce;
 }
 
 .cRedHotNews a:nth-child(1) span:nth-child(1) {
     margin-bottom: 30px;
     max-height: 90px;
 }
 
 .cRedHotNews a:nth-child(1) span:nth-child(2) {
     font-size: 20px;
     line-height: 22px;
     max-height: 88px;
 }
 
 .ipsCoverPhoto_photo {
     object-fit: cover;
     height: 100%;
 }
 
 @media screen and (max-width:979px) {
     #elLogo img {
         margin-left: auto;
         margin-top: 5vh;
         margin-bottom: 5vh;
     }
     .cRedHotNews {
         flex-wrap: nowrap;
         height: auto;
         min-height: 100px;
     }
     .cRedHotNews a {
         height: calc(22%);
         width: 100%;
         margin: 8px 0;
         font-size: 18px;
     }
     .cRedHotNews a p {
         margin: 20px;
         margin-left: 25px;
         max-height: inherit;
     }
     .cRedHotNews a p span {
         max-height: inherit;
     }
     .cRedHotNews a:nth-child(1) {
         order: 1;
         height: auto;
         min-height: calc(34% - 10px);
     }
     .cRedHotNews a:nth-child(1)::after {
         right: 20px;
         bottom: inherit;
         font-size: 40px;
     }
     .cRedHotNews a:nth-child(1) p {
         margin: 20px 20px 20px 25px;
         padding-right: 30px;
     }
     .cRedHotNews a:nth-child(1) span:nth-child(1) {
         font-size: 22px;
     }
     .cRedHotNews a:nth-child(1) span:nth-child(2) {
         font-size: 18px;
     }
     .cRedHotNews a:nth-child(2) {
         order: 2;
     }
     .cRedHotNews a:nth-child(3) {
         order: 3;
     }
     .cRedHotNews a:nth-child(4) {
         order: 4;
     }
     .newsFix {
         margin-top: 0;
     }
 }
</style>

<div class="cRedHotNews">
		<a href="https://avvadon.org/forum/topic/13588-seminar-magistra-vo-francii-evropa-centr-s-14-po-17-maya/"><p><span>Семинар Магистра во Франции.<span></span>Ментальное пространство.</span></p></a>
    <a href="https://avvadon.org/forum/forum/607-safari/"><p><span>Онлайн проект Магистра "Сафари"<br>начнётся с 7 апреля.</span></p></a>
      <a href="https://avvadon.org/forum/forum/230-igra/"><p><span>Проект Магистра "Игра"</span></p></a>

	<a href="https://avvadon.org/forum/forum/380-geneticheskie-braslety/"><p><span>Проект Магистра "Генетические Браслеты"</span></p></a>
	</div>

     

    Понял. Подскажите куда.
    АЦ - Кастомизация - Внешний вид - Темы - Редактировать html/css, а там куда дальше ?

    Нужно обучающие видео курсы делать по IPS 4 )))

    Вышло вот так 

    Снимок экрана 2020-03-30 в 14.41.45.png

    Снимок экрана 2020-03-30 в 14.41.56.png

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161387
    Share on other sites
    comment_161388

    Litesm дай ссылку и данные от админки в л.с

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161388
    Share on other sites
    comment_161389
    1 час назад, Litesm сказал:

    Понял. Подскажите куда.
    АЦ - Кастомизация - Внешний вид - Темы - Редактировать html/css, а там куда дальше ?

    Нужно обучающие видео курсы делать по IPS 4 )))

    Вышло вот так 

    Снимок экрана 2020-03-30 в 14.41.45.png

    Снимок экрана 2020-03-30 в 14.41.56.png

    В custom просто код от css ставь а div class в блок и все дальше редактируй ксс на свой расклад размеры и т.д

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161389
    Share on other sites
    • Author
    comment_161390
    18 минут назад, Dusty сказал:

    В custom просто код от css ставь а div class в блок и все дальше редактируй ксс на свой расклад размеры и т.д

    у меня всё склеилось, не пойму как пробелы поставить

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161390
    Share on other sites
    comment_161405
    В 30.03.2020 в 18:53, Litesm сказал:

    у меня всё склеилось, не пойму как пробелы поставить

    Ссылку нужно давать на свой форум.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161405
    Share on other sites
    comment_161410

    Готово, немного подправил css

    Screenshot_1.png

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161410
    Share on other sites
    comment_161424
    В 31.03.2020 в 20:24, Dusty сказал:

    Ссылку нужно давать на свой форум.

    как у вас в профиле?😆

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161424
    Share on other sites
    comment_161496
    В 02.04.2020 в 00:43, andros0789 сказал:

    как у вас в профиле?😆

    Ага вот только я не ищу помощи пока что )

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/22041-blok-novosti-kak-takoe-sdelat/?&do=findComment&comment=161496
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Ответить в этой теме...
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.