XF 2.0 Font awesome в блок

Domenikz · 7 Июн 2018

Здравствуйте не могу понять как обращаться к виджету через extra.less, чтобы отобразить font awesome иконку к блоку...

Код:

.block {
    h3:before {
        display: inline-block;
        font-family: FontAwesome;
        padding-right: 3px;
    }
    
    &[data-widget-section="staffMembers"] {
        h3:before {
             content: "\f0e3";
        }
    }

    &[data-widget-section="onlineNow"] {
        h3:before {
             content: "\f007";
        }
    }

Skaiman · 7 Июн 2018

Domenikz написал(а):
Здравствуйте не могу понять как обращаться к виджету

Уважаемый виджет! Очень прошу Вас отобразить иконку Font Awesome перед Вашим заголовком.

artscripts · 7 Июн 2018

Domenikz,
[data-widget-id=""] попробуйте, хотя хз, у себя не пробывал)

Skaiman · 7 Июн 2018

А так то лучше используй ключ виджета, присвоенный при его создании

Код:

[data-widget-key="ключ_виджета"]

Код:

.block {
    h3:before {
        display: inline-block;
        font-family: FontAwesome;
        padding-right: 3px;
    }
    
    &[data-widget-section="staffMembers"] {
        h3:before {
             content: "\f0e3";
        }
    }

    &[data-widget-section="onlineNow"] {
        h3:before {
             content: "\f007";
        }
    }
    
    &[data-widget-key="ключ_виджета"] {
        h3:before {
             content: "\bbbb";
        }
    }   
}

Domenikz · 7 Июн 2018

artscripts написал(а):
Domenikz,
[data-widget-id=""] попробуйте, хотя хз, у себя не пробывал)

Skaiman написал(а):
А так то лучше используй ключ виджета, присвоенный при его создании

Код:

[data-widget-key="ключ_виджета"]

Код:

.block { h3:before { display: inline-block; font-family: FontAwesome; padding-right: 3px; } &[data-widget-section="staffMembers"] { h3:before { content: "\f0e3"; } } &[data-widget-section="onlineNow"] { h3:before { content: "\f007"; } } &[data-widget-key="ключ_виджета"] { h3:before { content: "\bbbb"; } } }

Не пошло(
делал и key и id
хммм интерееесно...

Skaiman · 7 Июн 2018

100 пудов что то не так делаешь, а сказал то что я выше писал перед написанием кода?

Domenikz · 7 Июн 2018

Skaiman написал(а):
100 пудов что то не так делаешь, а сказал то что я выше писал перед написанием кода?

Ну так я использую ключ виджета, к нему же не нужно никаких префиксов типо widget_pogoda или widget_kursy_valyuty
я использую просто pogoda и kursy_valyuty

Полный код для less...

Код:

.block {
    h3:before {
        display: inline-block;
        font-family: FontAwesome;
        padding-right: 3px;
    }
    
    &[data-widget-section="staffMembers"] {
        h3:before {
             content: "\f0e3";
        }
    }

    &[data-widget-section="onlineNow"] {
        h3:before {
             content: "\f007";
        }
    }

    
    &[data-widget-definition="new_profile_posts"] {
        h3:before {
             content: "\f086";
        }
    }

    &[data-widget-definition="forum_statistics"] {
        h3:before {
             content: "\f080";
        }
    }

      &[data-widget-section="opros_forum"] {
        h3:before {
             content: "\f080";
        }
    }
    
    &[data-widget-definition="share_page"] {
        h3:before {
             content: "\f14d";
        }
    }

    &[data-widget-definition="find_member"] {
        h3:before {
             content: "\f002";
        }
    }

    &[data-widget-definition="newest_members"] {
        h3:before {
             content: "\f234";
        }
    }

    &[data-widget-definition="birthdays"] {
        h3:before {
             content: "\f1fd";
        }
    }

    &[data-widget-definition="xfrm_new_resources"] {
        h3:before {
             content: "\f187";
        }
    }

    &[data-widget-definition="xfrm_top_resources"] {
        h3:before {
             content: "\f091";
        }
    }

    &[data-widget-definition="xfrm_latest_reviews"] {
        h3:before {
             content: "\f005";
        }
    }
    
    &[data-widget-key="xfrm_overview_top_authors"] {
        h3.block-minorHeader:before {
             content: "\f201";
        }
    }
  
    &[data-widget-definition="xfi_social_block_widget"] {
        h3:before {
             content: "\f1e1";
        }
    }

    &[data-widget-definition="jum_whv"] {
        h3:before {
             content: "\f0c0";
        }
    }
}

Skaiman · 7 Июн 2018

[data-widget-key="opros_forum"]

Mirovinger · 7 Июн 2018

Сколько помню, у виджета голосования по другим критериям идёт привязка.

Domenikz · 7 Июн 2018

Mirovinger написал(а):
Сколько помню, у виджета голосования по другим критериям идёт привязка.

Вот я и пытаюсь, на каждый блок сделать font awesome, только не пойму как привязать эти блоки,
потому что какие-то отображаются, какие-то нет

Skaiman · 7 Июн 2018

Mirovinger написал(а):
Сколько помню, у виджета голосования по другим критериям идёт привязка.

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

Mirovinger · 7 Июн 2018

Я понимаю, но просто на скрин глянул и написал, это даже не к тебе больше относилось.

Skaiman · 7 Июн 2018

Или раньше не было такого, или я не обращал внимания. Созданный виджет HTML, имеет только один класс <div class="block">, ни ключей ни чего больше там нет, поэтому и не применяется :)

Domenikz · 7 Июн 2018

Skaiman написал(а):
Или раньше не было такого, или я не обращал внимания. Созданный виджет HTML, имеет только один класс <div class="block">, ни ключей ни чего больше там нет, поэтому и не применяется :)

Эти же как-то работаю)))))

Skaiman · 7 Июн 2018

Domenikz написал(а):
Эти же как-то работаю)))))

Кастомные виджеты, которые ты создавал, у дефолтных все есть

Domenikz · 7 Июн 2018

Skaiman написал(а):
Кастомные виджеты, которые ты создавал, у дефолтных все есть

как быть теперь то)

Skaiman · 7 Июн 2018

Можно таким образом

Код:

.p-body-sidebar .block:nth-child(5) {
    h3:before {
         content: "\f086";
    }
}

но это должно быть определенное количество блоков и их порядок :)

Domenikz написал(а):
как быть теперь то)

Да ни как :) Это ты еще не пересытился этими иконками, немного погодя они тебе не нужны будут, где надо и не надо.

Domenikz · 7 Июн 2018

Виджеты, позиция которых не определена не будут нигде отображены, но Вы можете вызвать настраиваемый виджет непосредственно в шаблонах, используя синтаксис: <xf:widget key="widget_key" />.

Skaiman · 7 Июн 2018

Вот еще что подумал. К примеру виджет погоды, создается новый HTML, в поле Шаблон вставляем iframe, на выходе у нас получается:

Код:

<div class="block">
    <div class="block-container">
        <h3 class="block-minorHeader">Прогноз погоды</h3>
        <div class="block-body block-row">
            <iframe width="200" height="240" frameborder="0" scrolling="no" src="https://pogodnik.com/informer/daily"> Посмотреть прогноз погоды на <a href="https://pogodnik.com/"> <img src="https://pogodnik.com/images/prognoz-pogody-200x240.png"> </a> </iframe>
        </div>
    </div>
</div>

Так можно добавить к этому блоку класс:

Код:

<div class="block pogoda">
    <div class="block-container">
        <h3 class="block-minorHeader">Прогноз погоды</h3>
        <div class="block-body block-row">
            <iframe width="200" height="240" frameborder="0" scrolling="no" src="https://pogodnik.com/informer/daily"> Посмотреть прогноз погоды на <a href="https://pogodnik.com/"> <img src="https://pogodnik.com/images/prognoz-pogody-200x240.png"> </a> </iframe>
        </div>
    </div>
</div>

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

Код:

.block {
    h3:before {
        display: inline-block;
        font-family: FontAwesome;
        padding-right: 3px;
    }
    &.pogoda {
        h3:before {
             content: "\f0e3";
        }
    }
}

Domenikz · 7 Июн 2018

Skaiman написал(а):
Вот еще что подумал. К примеру виджет погоды, создается новый HTML, в поле Шаблон вставляем iframe, на выходе у нас получается:

Код:

<div class="block"> <div class="block-container"> <h3 class="block-minorHeader">Прогноз погоды</h3> <div class="block-body block-row"> <iframe width="200" height="240" frameborder="0" scrolling="no" src="https://pogodnik.com/informer/daily"> Посмотреть прогноз погоды на <a href="https://pogodnik.com/"> <img src="https://pogodnik.com/images/prognoz-pogody-200x240.png"> </a> </iframe> </div> </div> </div>

Так можно добавить к этому блоку класс:

Код:

<div class="block pogoda"> <div class="block-container"> <h3 class="block-minorHeader">Прогноз погоды</h3> <div class="block-body block-row"> <iframe width="200" height="240" frameborder="0" scrolling="no" src="https://pogodnik.com/informer/daily"> Посмотреть прогноз погоды на <a href="https://pogodnik.com/"> <img src="https://pogodnik.com/images/prognoz-pogody-200x240.png"> </a> </iframe> </div> </div> </div>

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

Код:

.block { h3:before { display: inline-block; font-family: FontAwesome; padding-right: 3px; } &.pogoda { h3:before { content: "\f0e3"; } } }

это в PAGE_CONTAINER нужно класс к блоку добавлять?

XF 2.0 Font awesome в блок

Domenikz

Вложения

Skaiman

artscripts

Реклама, support, вопросы по проекту

Skaiman

Domenikz

Skaiman

Domenikz

Skaiman

Mirovinger

Domenikz

Skaiman

Mirovinger

Skaiman

Domenikz

Skaiman

Domenikz

Skaiman

Domenikz

Skaiman

Domenikz

Похожие темы

Мы ценим вашу конфиденциальность