Tips & Guides

 

Sign in with Apple (OAuth and OIDC)

You need a apple dev account. the client_id is the Apple Sign in Service ID. Thankfully, Apple adopted the existing open standards OAuth 2.0 and OpenID Connect to use as the foundation for their new API. While they don’t explicitly call out OAuth or OIDC in their documentation, they use all the same terminology and API calls. This means if you’re familiar with these technologies, you should have no trouble using Sign in with Apple right away! Let’s walk through building a short sample...

• Sticky

View full article >

 

Subforums in two / three columns

To make a conclusion in two or three columns, first of all, we need to enable the change the output of the subsections in the style settings. Appearance -> Style properties -> Node/forum list And select the item there. Listed below node Then, for output in two columns, add to the template - extra.less. .node .node-subNodeFlatList li { float: left; margin: 2px 0 2px 2%; width: 45%; } For output in three columns, add to the template - extra.less. .node .node-subNodeFlatList li {...

View full article >

 

Tiled view of forum statistics

First, switch the position of the statistics widget to below / above the list of nodes, since the code is suitable only for such positions. Add to extra.less .block[data-widget-key="forum_overview_forum_statistics"] { .block-minorHeader { display: none; } .block-body.block-row { display: grid; grid-template-columns: 25% 25% 25% 25%; &:before { display: none; } .pairs.pairs--justified {...

View full article >

 

User Message Background

Add to extra.less .message-background (@mbUserName; @mbBackgroundUrl; @mbBackground-size; @mbBackground-position: false) { .message[data-author="@{mbUserName}"] .message-inner { background-image: linear-gradient(to top, @xf-contentBg, fade(@xf-contentBg, 60%)), @mbBackgroundUrl; background-position: @mbBackground-position; background-size: @mbBackground-size; } .message[data-author="@{mbUserName}"] .message-cell.message-cell--user { background: transparent; } } // Example...

View full article >

 

Tiled postbit with icons

Add to extra.less

View full article >

 

Adding Font Awesome Icons to the Account Sidenav

Add extra.less to the template. [data-template^="account_"], [data-template^="mrs_account_"] { .p-body-sideNav { [class^="block"]:before { display: inline-block; .m-faBase(); margin-right: 5px; } h3[class^="block"] { .m-faBefore("\f0da"); } [class^="block"] { &[href^="/members/"] { .m-faBefore("\f007"); } &[href$="/alerts"] {...

View full article >

 

Change the appearance of the "Reply", "Like" buttons

In extra.less add. .actionBar-action { .actionBar-set--external & { padding: 3px 5px; color: #176093; border-radius: 2px; border: 1px solid white; box-shadow: 1px 1px 3px rgba(0,0,0, 0.3); } &--reaction { background-color: #eaf4fc; } &--mq { background-color: #d3f9bb; .tooltip-content & { background-color: inherit; } } &--reply { background-color: #fff4e5...

View full article >

All dependencies that are used in XenForo

When using the composer package manager. There are such cases when you need to load some kind of library and there is such an unpleasant fact that some of the libraries that you pull with your package are used in the engine. The batch manager composer allows you to exclude these libraries. The replace directive will come to the replace. replace Lists packages that are replaced by this package. This allows you to fork a package, publish it under a different name with its own version numbers...

View full article >

 

Less for Custom Action Bar

To add or change Font Awesome icons for message control buttons, just add such code to extra.less. .message-button-id (@buttonId; @fa-uid; @color: false) { .actionBar-action { &--@{buttonId}:before { margin-right: 3px; & when (iscolor(@color)) { color: @color; } .actionBar-set & { content: "\@{fa-uid}"; } } } [data-menu-builder="actionBar"] { .menu-content {...

View full article >

 

Less For public navigations

To add Font Awesome icons to navigation, just add such code to extra.less. .navigation-icons (@nav-id; @fa-uid; @fa-type: false; @fa-size: false; @color: false) { .p-navEl-link, .menu-linkRow { &[data-nav-id="@{nav-id}"]:before { padding-right: 4px; & when (@fa-type = false) { .m-faBase(); } & when (@fa-type = 'Brands') { .m-faBase('Brands'); }...

View full article >

 

Less to replace Font Awesome icons on editor buttons

To change the Font Awesome icons of the editor buttons, just add such code to extra.less. .editor-button-id(@buttonId; @fa-uid; @color: false) { .fr-toolbar { .fr-command { &[data-cmd="@{buttonId}"] { i:before { & when (iscolor(@color)) { color: @color; } & when (isurl(@fa-uid)) { content: @fa-uid; } & when...

View full article >

Less for custom subforum icons (categories, pages, links)

To change Font Awesome icons in subsections, just add such code to extra.less. .m-subNodeLink-icons(@subNode-id; @readIcons; @unreadIcons: false; @faType: false) { .subNodeLink[href$=".@{subNode-id}/"] { &:before { & when (@faType = Brands) { .m-faBase('Brands'); } .subNodeLink--forum&, .subNodeLink--category& { content: "\@{readIcons}"; & when not (@unreadIcons = false) {...

View full article >

 

Less for images as custom forum icons (categories), pages, links

To change the Font Awesome icons for sections on images, just add such extra code to extra.less. .m-nodeImgIcons(@node-id; @unreadImage; @readImage: false; @height: 40px; @width: 40px) { .node--id@{node-id} { .node-icon i { &:before { content: none; } .node--read& { & when (@readImage = false) { -webkit-filter: grayscale(100%); filter: grayscale(100%); }...

View full article >

 

Less for name color to specific user

It is enough to add such code to extra.less. .username-user-id (@userId; @color; @sh-color: false) { [class^="username"] { .username[data-user-id="@{userId}"] & { color: @color; & when (iscolor(@sh-color)) { text-shadow: @sh-color 2px 2px 10px; } } } } // Users who change nickname color .username-user-id (1, #093, #093); Now let's look at an example of a ready-made code, how can we change the nickname color for a...

View full article >

 

Log in OR Register AND Icons

Add a separator and icons for the login and registration buttons. In extra.less we add such code. Part of the code is placed in variables so that changes can be conveniently managed. @_m-logInIcon: \f090; @_m-registerIcon: \f084; @_m-colorIcons: #e6bb5c; @_m-separatedSpace: 16px; @_m-separatedBg: #2577b1; // On/Off background & border on sticky navigation @_m-changeSticky: true; // false @_m-separatedBgSticky: red; @_m-separatedBorderSticky: white; // On/Off Fa or Text @_m-changeSymbol...

View full article >

 

Adding Font Awesome Icons to the Widget - Visitor Panel

Add extra.less to the template. .p-body-sidebar { [data-widget-definition="visitor_panel"] { .contentRow-minor .pairs { margin-right: -8px; dt { margin-right: 3px; &:before { .m-faBase(); padding-right: 2px; } } &:nth-child(1) dt { .m-faBefore("\f075"); } &:nth-child(2) dt {...

View full article >

 

Adding Font Awesome Icons to Sidebar Widgets and More

Add extra.less to the template. .block { h3:before { display: inline-block; .m-faBase(); padding-right: 3px; } &[data-widget-section="staffMembers"] { h3 { .m-faBefore("\f0e3"); } } &[data-widget-section="onlineNow"] { h3 { .m-faBefore("\f007") } } &[data-widget-definition="new_profile_posts"] { h3 { .m-faBefore("\f086") } }...

View full article >

 

Adding Font Awesome Icons to the Visitor Account

Add the extra.less template. .menu--account { .tabs-tab { &:before { .m-faBase(); padding-right:3px; margin-left: -5px; } &[href$="/bookmarks"] { .m-faBefore("\f02e"); } &[href$="account/"] { .m-faBefore("\f007"); } } .menu-linkRow { padding: 6px 8px; &:before { .m-faBase(); padding-right: 3px; font-size: 12px...

View full article >

Adding Font Awesome Icons to Post Bit Messages

Add extra.less to the template. .message-userExtras { .pairs { dt { margin-right: 3px; &:before { .m-faBase(); padding-right: 2px; } } &:nth-child(1) dt { .m-faBefore("\f075"); } &:nth-child(2) dt { .m-faBefore("\f164"); } &:nth-child(3) dt { .m-faBefore("\f091"); } } }

View full article >

 

Ribbon Banner

Just add to extra.less. .userBanner { &.message-userBanner { border-top-left-radius: 0; border-top-right-radius: 0; position: relative; &.userBanner--staff { span { background-color: rgb(63, 81, 106); } } span { position: absolute; top: -3px; background-color: inherit; width: 5px; height: 3px; @media (max-width...

View full article >

 

Less for custom group banners

To add custom group banners as default in XF 2, it is enough to specify a custom class in the group settings. Where is userBanner userBanner--admin, this is our custom class. .m-userBannerVariation(@color; @bg; @border: false) { color: @color; background: @bg; border-color: xf-intensify(@bg, 10%); & when (iscolor(@border)) { border-color: @border; } } .userBanner { font-size: 75%; font-weight: @xf-fontWeightNormal; font-style: normal...

View full article >