XF 2.0 HTML Widget

[JoyFreak]

Say I wanted to add a fontawesome icon in the header of a html widget, how do I do this? What is the code to read a widget key/definition?

 

[Old Nick]

This is the code to call a widget in extra.less template for example

[data-widget-id="X"]

Change X for your widget ID

 

[SyTry]

Hello,

For the Font Awesome (4.7) I use this code before the {$title} :

<i class="fa fa-bar-chart fa-fixed-width" style="padding-right:3px;"></i>

What is the code to read a widget key/definition?

What do you mean ? This <xf:widget key="widget_key" /> ?

Regards, SyTry

 

[JoyFreak]

I tried this in my extra.less and it did not work:
[data-widget-id="about_us"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="user-multiple" />}

 

[SyTry]

I tried this in my extra.less and it did not work:
[data-widget-id="about_us"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="user-multiple" />}

Why not use my code since it's an HTML widget ? It's easier than the method you're trying. ^^

 

[Old Nick]

[data-widget-id="about_us"] ID is a number

In your ACP got to Appearance > Widgets and check the ID for the widget you want to use (select the widget ans see in the address bar the ID)

 

[Old Nick]

Why not use my code since it's an HTML widget ? It's easier than the method you're trying. ^^

Is HTML code is valid in the title field of a HTML widget ? Where can we put your code exactly ?

 

[JoyFreak]

Why not use my code since it's an HTML widget ? It's easier than the method you're trying. ^^

The HTML widget template doesn't hold the {$title}.

[data-widget-id="about_us"] ID is a number

In your ACP got to Appearance > Widgets and check the ID for the widget you want to use (select the widget ans see in the address bar the ID)

.block[data-widget-id="77"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="search-plus" />}

Doesn't work.

 

[SyTry]

Is HTML code is valid in the title field of a HTML widget ? Where can we put your code exactly ?

This is my HTML widget :

<div class="block"{{ widget_data($widget) }}>
    <div class="block-container">
        <h3 class="block-minorHeader"><i class="fa fa-users fa-large fa-fixed-width" style="padding-right:3px;"></i>Groupes d'utilisateurs</h3>
            <div class="block-body block-row">
                <dl class="pairs pairs--justified">
                    <div class="username" style="text-align:center;">
            <span class="username--style3">Fondateur</span>
            <br><span class="username--style5">Administrateur</span>
            <br><span class="username--style4">Modérateur</span>
            <br><span class="username--style6">Assistant</span>
            <br><span class="username--style9">Ancien Staff</span>
            <br><span class="username--style12">Partenaire</span>
            <br><span class="username--style11">Elite'X</span>
            <br><span class="username--style7">Premium</span>
            <br><span class="username--style8">Donateur</span>
            <br><span class="username--style2">Membre</span>
                    </div>
                </dl>

I put my code after <h3 class="block-minorHeader"> and before Groupes d'utilisateurs (my {$title}) ^^

 

[Old Nick]

I was thinking about something like that, but i'm a beginner so...

[data-widget-id="77"]
{
    .block-minorHeader:before
    {
        font-family: "FontAwesome";
        content: "\f004";
        margin-right: 5px;
    }
}

 

[JoyFreak]

I was thinking about something like that, but i'm a beginner so...

[data-widget-id="77"]
{
    .block-minorHeader:before
    {
        font-family: "FontAwesome";
        content: "\f004";
        margin-right: 5px;
    }
}

[data-template="forum_list"]
{
    .p-title-value {display: none;}
    .p-title {float: right;}
}

Doesn't work. My code should work. Works with all the other widgets. It's just I have always used a widget definition. I have never used a html widget as it doesn't have a definition like the others.

 

[Old Nick]

sorry for the second block code it was a test...

The first code works for me, so maybe with UIX theme is a little bit different, i don't know.

 

[Old Nick]

with this

[data-widget-id="7"]
{
    .block-minorHeader a:before
    {
        font-family: "FontAwesome";
        content: "\f004";
        margin-right: 5px;
    }
}

I got this

 

[JoyFreak]

with this

[data-widget-id="7"]
{
    .block-minorHeader a:before
    {
        font-family: "FontAwesome";
        content: "\f004";
        margin-right: 5px;
    }
}

I got this
View attachment 185926

That doesn't look like a html widget?

 

[SyTry]

Doesn't work. My code should work. Works with all the other widgets. It's just I have always used a widget definition. I have never used a html widget as it doesn't have a definition like the others.

Works with all the other widget, which code ?

 

[Old Nick]

You're right, my mistake.
As the title of a HTML Widget is not a link my code doesn't work...

 

[JoyFreak]

Works with all the other widget, which code ?

Tested on new_threads widget and works well. I am using the HTML widget....

 

[SyTry]

Tested on new_threads widget and works well. I am using the HTML widget....

Okay, but the code to add the icons. Which one do you use with new_threads ?

 

[JoyFreak]

.block[data-widget-id="77"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="search-plus" />}
Change ID to whatever the ID you want to use to try it with UI.x template.

 

[JoyFreak]

Okay, i worked it out.

I had to click on advanced mode and create the template manually to add the block etc. Thanks for your help anyway guys!