XF 2.2 New button class

N

Nicolas FR

Well-known member
Hello,

I created a new class for button, this is the code
Less: 
.ask {
    margin-left: auto;
    border: 1px solid #bfbfbf!important;
    border-bottom: 2px solid #bfbfbf!important;
    background: rgb(242, 242, 242)!important;
    padding: 7px 15px!important;
    color: #212121!important;
    font-weight: 400!important;
        &:hover {
            text-decoration: none!important;
            background: rgb(235, 235, 235)!important;
        }
}
HTML: 
<xf:button href="/forums/forum-javascript.25/post-thread" class="ask">Poser une question</xf:button>
As you can see i have to put !important for each properties otherwise CSS is not applied, is it ok or i have to make my custom button in another way ?
Thanks ! :)
 
Last edited:
Solution
Paul B
Untested but this should work.

Less: 
.button.ask,
a.button.ask {
    margin-left: auto;
    border: 1px solid #bfbfbf;
    border-bottom: 2px solid #bfbfbf;
    background: rgb(242, 242, 242);
    padding: 7px 15px;
    color: #212121;
    font-weight: 400;
        &:hover {
            text-decoration: none;
            background: rgb(235, 235, 235);
        }
}
Sort by date Sort by votes
Untested but this should work.

Less: 
.button.ask,
a.button.ask {
    margin-left: auto;
    border: 1px solid #bfbfbf;
    border-bottom: 2px solid #bfbfbf;
    background: rgb(242, 242, 242);
    padding: 7px 15px;
    color: #212121;
    font-weight: 400;
        &:hover {
            text-decoration: none;
            background: rgb(235, 235, 235);
        }
}
 
Upvote 1 Downvote
Solution
Leave the HTML as it was - <xf:button href="/forums/forum-javascript.25/post-thread" class="ask">Poser une question</xf:button>.

Just use the CSS I provided in the extra.less template.
 
Upvote 1 Downvote
Brogan said:
Where are you editing/adding that HTML?
Click to expand...
widget_new_posts
HTML: 
<xf:if is="$threads is not empty OR ($threads is empty AND $filter != 'latest')">
    <div class="block"{{ widget_data($widget) }}>
        <div class="block-container">
            <xf:if is="$style == 'full'">
                    <div class="block-header">
                        <xf:if is="$title == 'Front-end'">
                            <div class="title-bar">
                                <xf:button href="/forums/forum-html-et-css.23/?prefix_id=1" class="cat"><span class="lang"><i class="fad fa-sort-down"></i></span>&nbsp; HTML</xf:button>
                                <xf:button href="/forums/forum-html-et-css.23/?prefix_id=2" class="cat"><span class="lang"><i class="fad fa-sort-down"></i></span>&nbsp; CSS</xf:button>
                                <xf:button href="/forums/forum-html-et-css.23/post-thread" class="ask">Poser une question</xf:button>
                            </div>
                        <xf:elseif is="$title == 'Javascript'" />
                    <!-- etc.. -->
 
Upvote 1 Downvote
Brogan said:
Presumably that's a custom HTML widget?
Click to expand...
It's the original widget widget_new_posts with some custom code to get custom title.

HTML: 
<xf:if is="$threads is not empty OR ($threads is empty AND $filter != 'latest')">
    <div class="block"{{ widget_data($widget) }}>
        <div class="block-container">
            <xf:if is="$style == 'full'">
                    <div class="block-header">
                        <xf:if is="$title == 'Front-end'">
                            <div class="title-bar">
                                <xf:button href="/forums/forum-html-et-css.23/?prefix_id=1" class="cat"><span class="lang"><i class="fad fa-sort-down"></i></span>&nbsp; HTML</xf:button>
                                <xf:button href="/forums/forum-html-et-css.23/?prefix_id=2" class="cat"><span class="lang"><i class="fad fa-sort-down"></i></span>&nbsp; CSS</xf:button>
                                <xf:button href="/forums/forum-html-et-css.23/post-thread" class="ask">Poser une question</xf:button>
                            </div>
                        <xf:elseif is="$title == 'Javascript'" />
                            <div class="title-bar">
                                <xf:button href="/forums/questions-javascript-et-typescript.25/?prefix_id=3" class="cat"><span class="lang"><i class="fad fa-sort-down"></i></span>&nbsp; JavaScript</xf:button>
                                <xf:button href="/forums/questions-javascript-et-typescript.25/?prefix_id=51" class="cat"><span class="lang"><i class="fad fa-sort-down"></i></span>&nbsp; TypeScript</xf:button>
                                <xf:button href="/forums/forum-javascript.25/post-thread" class="ask">Poser une question</xf:button>
                            </div>
                        <xf:elseif is="$title == 'Back-end'" />
                            <div class="title-bar">
                                <xf:button href="/forums/forum-php-sql-et-programmation.6/?prefix_id=13" class="cat"><span class="lang"><i class="fad fa-sort-down"></i></span>&nbsp; PHP</xf:button>
                                <xf:button href="/forums/forum-php-sql-et-programmation.6/?prefix_id=14" class="cat"><span class="lang"><i class="fad fa-sort-down"></i></span>&nbsp; SQL</xf:button>
                                <xf:button href="/forums/forum-php-sql-et-programmation.6/?prefix_id=38" class="cat"><span class="lang"><i class="fad fa-sort-down"></i></span>&nbsp; Python</xf:button>
                                <xf:button href="/forums/forum-php-sql-et-programmation.6/post-thread" class="ask">Poser une question</xf:button>
                            </div>
                        <xf:elseif is="$title == 'Frameworks et bibliothèques'" />
                            <div class="title-bar">
                                <xf:button href="/forums/frameworks-et-bibliotheques.101/" class="cat"><span class="lang"><i class="fad fa-comments-alt"></i></span>&nbsp;&nbsp;Frameworks et Bibliothèques</xf:button>
                                <xf:button href="/forums/frameworks-et-bibliotheques.101/post-thread" class="ask">Poser une question</xf:button>
                            </div>
                        <xf:elseif is="$title == 'Forum général'" />
                            <div class="title-bar">
                                <xf:button href="/forums/forum-general.90/" class="cat"><span class="lang"><i class="fad fa-comments-alt"></i></span>&nbsp;&nbsp;Discussions générales</xf:button>
                                <xf:button href="/forums/forum-general.90/post-thread" class="ask">Créer un nouveau sujet</xf:button>
                            </div>
                        <xf:elseif is="$title == 'Ressources'" />
                            <div class="title-bar">
                                <xf:button href="/tutoriels/" class="cat"><span class="lang"><i class="fad fa-cog"></i></span>&nbsp;&nbsp;Module Ressources</xf:button>
                                <xf:button href="/forums/discussions-ressources.107/" class="cat"><span class="lang"><i class="fad fa-comments-alt"></i></span>&nbsp;&nbsp;Forum</xf:button>
                                <xf:button href="/tutoriels/add" class="ask" overlay="true">Publier une ressource</xf:button>
                            </div>
                            <div class="sort-tags">
                                <span class="tri-res">filtrer:</span>&nbsp;
                                <a href="/tutoriels/?prefix_id=1"><span class="label label--accent">Vidéo</span></a>&nbsp;
                                <a href="/tutoriels/?prefix_id=3"><span class="label label--yellow">Documentation</span></a>&nbsp;
                                <a href="/tutoriels/?prefix_id=2"><span class="label label--lightGreen">Tutoriel</span></a>
                            </div>
                        <xf:elseif is="$title == 'Chit-Chat'" />
                            <div class="title-bar">
                                <xf:button href="/forums/chit-chat.44/" class="cat"><span class="lang"><i class="fad fa-comments-alt"></i></span>&nbsp;&nbsp;Forum Chit-Chat</xf:button>
                                <xf:button href="/forums/chit-chat.44/post-thread" class="ask">Créer un nouveau sujet</xf:button>
                            </div>
                        <xf:elseif is="$title == 'Suggestions'" />
                            <div class="title-bar">
                                <xf:button href="/forums/suggestions.106/" class="cat"><span class="lang"><i class="fad fa-lightbulb-on"></i></span>&nbsp;&nbsp;Forum Suggestions</xf:button>
                                <xf:button href="/forums/suggestions.106/post-thread" class="ask">Créer un nouveau sujet</xf:button>
                            </div>
                        <xf:elseif is="$title == 'Annonces'" />
                            <div class="title-bar">
                                <xf:button href="/forums/annonces.57/" class="cat"><span class="lang"><i class="fad fa-bullhorn"></i></span>&nbsp;&nbsp;Annonces officielles Cocori Web</xf:button>
                            </div>
                        <xf:else/>
                            <a href="{$link}" rel="nofollow">{$title}</a>
                        </xf:if>
                    </div>
                <div class="block-body">
                    <div class="structItemContainer">
                        <xf:if is="$threads is not empty">
                            <xf:foreach loop="$threads" value="$thread">
                                <xf:macro template="new_post_global" name="global"
                                    arg-allowInlineMod="{{ false }}"
                                    arg-thread="{$thread}" />
                            </xf:foreach>
                        <xf:elseif is="$filter == 'unread'" />
                            <div class="block-row">
                                {{ phrase('no_unread_posts_view_latest', {'link': link('whats-new/posts', null, {'skip': 1})}) }}
                            </div>
                        <xf:else />
                            <div class="block-row">
                                {{ phrase('no_results_found') }}
                            </div>
                        </xf:if>
                    </div>
                </div>
            <xf:else />
                <h3 class="block-minorHeader">
                    <a href="{$link}" rel="nofollow">{$title}</a>
                </h3>
                <ul class="block-body">
                    <xf:if is="$threads is not empty">
                        <xf:foreach loop="$threads" value="$thread">
                            <li class="block-row">
                                <xf:macro template="thread_list_macros" name="item_new_posts"
                                    arg-thread="{$thread}" />
                            </li>
                        </xf:foreach>
                    <xf:elseif is="$filter == 'unread'" />
                        <li class="block-row block-row--minor">
                            {{ phrase('no_unread_posts_view_latest', {'link': link('whats-new/posts', null, {'skip': 1})}) }}
                        </li>
                    <xf:else />
                        <li class="block-row block-row--minor">
                            {{ phrase('no_results_found') }}
                        </li>
                    </xf:if>
                </ul>
            </xf:if>
        </div>
    </div>
</xf:if>

those widget are inside a global widget displayed in home_page (forum list : above forums)
this is the custom widget code
HTML: 
<div class="bi-box">
    <div class="bi-box-left">
        <xf:widget key="infos_home" />
        <xf:widget key="notice_visitor" />
          <div class="bi-desc">
            <div class="block-description">
                <span class="title-box" id="developpement"><a href="/categories/developpement-et-conception-web.43/">Développement et conception Web</a></span>
                <br />
                Consultez les questions et leurs réponses ou exposez votre problème en posant votre question.<br />
                Améliorez vos compétences en matière de développement Web avec l'aide de la communauté.<br />
                Partagez votre expertise en répondant aux questions non résolues.  
              </div>
            <div class="block-logo">
                <img src="/data/assets/logo/web.webp" id="web" />
            </div>
        </div>
        <xf:widget key="new_post_general" />
        <xf:widget key="new_post_front" />
        <xf:widget key="new_post_js" />
        <xf:widget key="new_post_back" />
        <div class="googads">
            &nbsp;
        </div>
        <xf:widget key="new_post_frame" />  
        <div class="bi-desc">
            <div class="block-description">
                <span class="title-box" id="ressources"><a href="/tutoriels/">Ressources de développement</a></span>
                <br />
                Parcourez les ressources pour vous former et découvrir les différents langages de développement.<br />
                Découvrez les tutoriels vidéos issus des meilleures <b>chaînes YouTube</b> de développeurs.<br />
                Partagez vos propres ressources, guides, astuces de développement avec la communauté.  
              </div>
            <div class="block-logo">
                <img src="data/assets/logo/tuto.webp" id="tuto" />
            </div>
        </div>
        <xf:widget key="new_post_tutos" />
        <div class="bi-desc">
            <div class="block-description">
                <span class="title-box" id="communaute"><a href="/categories/la-communaute.87/">Communauté, sujets libres</a></span>
                <br />
                Discutez dans le forum Chit-Chat de tout sujet, refaire le monde n'est pas interdit !<br />
                Proposez vos idées pour améliorer l'expérience utilisateur au sein de la communauté.<br />
                Informez-vous avec les annonces officelles de l'équipe Cocori Web.
            </div>
            <div class="block-logo">
                <img src="data/assets/logo/chat.webp" id="chat" />
            </div>
        </div>
        <xf:widget key="new_post_chat" />
        <xf:widget key="new_post_suggest" />
        <xf:widget key="new_post_annonces" />
    </div>
    <div class="bi-box-right">
          <div class="box-forum-global">
            <xf:widget key="online_home" />
            <xf:widget key="forum_stats" />
            <div>
                <xf:if is="$xf.visitor.user_id">
                <span class="link-side"><a href="/whats-new/posts/" rel="nofollow">Nouveaux messages</a></span><br />
                <span class="link-side"><a href="/watched/threads" rel="nofollow">Discussions suivies</a></span><br />
                <span class="link-side"><a href="/find-threads/started" rel="nofollow">Vos discussions</a></span><br /><br />
                <span class="link-side"><a href="/forums/-/mark-read" data-xf-click="overlay" rel="nofollow">Marquer les forums comme lus</a></span>
                </xf:if>
            </div>
          </div>
    </div>
</div>
 
Last edited:
Upvote 1 Downvote
You must log in or register to reply here.

Similar threads

Ferdinand
  • Question Question
XF 2.2 Button CSS/LESS emojis disappear in xf:button with gradient on hover tag
Replies
3
Views
362
stellaethra
stellaethra
oO5 Dynasty
  • Question Question
XF 2.2 Hey, I need help keeping contents of CSS Flexbox Responsive Layout inside the Notices box boundaries on mobile
Replies
0
Views
539
oO5 Dynasty
oO5 Dynasty
MegaPixel
  • Question Question
XF 2.1 Custom BB Code Background
Replies
2
Views
733
🔥Iggy🔥
🔥
N
  • Solved
XF 2.2 CSS: text-decoration: none; how to ??
Replies
4
Views
690
Nicolas FR
N
V
  • Question Question
XF 2.2 sf-dump artefacts when mp3s embedded in forum posts
Replies
14
Views
1K
voom
V
Top Bottom