Tips & Guides

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 application that can leverage Apple’s new API to sign users in. You should be able to translate this code to your language of choice relatively easily once you see the requests being made. The hardest part of this whole process is registering an...

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 { float: left; margin: 2px 0 2px 2%; width: 31%; } If desired, if message statistics are not needed when outputting in three columns, you can hide it for the desired section by adding extra.less to .node--id4 .node-stats { display: none; } Where is...

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 { padding: 15px 12px; border-right: 1px solid @xf-borderColor; &:before { .m-faBase(); font-size: 37px; color: @xf-textColorFeature; float: left...

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 .message-background (Pepelniy; url(https://i.imgur.com/W1yqxKS.jpg); cover; left); FAQ First, write your nickname, in my example it is "Pepelniy". Then we indicate the link to the desired background. After, indicate the size of our background Well, at...

Add to extra.less

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"] { .m-faBefore("\f0f3"); } &[href$="/reactions"] { .m-faBefore("\f164"); } &[href$="/bookmarks"] { .m-faBefore("\f02e"); }...

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; .tooltip-content & { background-color: inherit; } } &--tag { background-color: #fce3e3; } .tooltip-content &:hover { opacity: 1; } a&:hover { .m-transition(all, 0.3s, ease-in-out...

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, while packages requiring the original package continue to work with your fork because it replaces the original package. This is also useful for packages that contain sub-packages, for example the main symfony/symfony package contains all the Symfony...

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 { .menu-linkRow { &:before { .m-faBase(); margin: 0 3px 0 -6px; } &[href$="/@{buttonId}"] { .m-faBefore("\@{fa-uid}")...

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'); } & when (isnumber(@fa-size)) { font-size: @fa-size; } & when (iscolor(@color)) { color: @color; } content: "\@{fa-uid}"; } }...

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 not (isurl(@fa-uid)) { content: "\@{fa-uid}"; } } } } } } .editor-button-id(clearFormatting; f040; red); .editor-button-id(strikeThrough; url('url link icon')); Now...

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) { .subNodeLink--unread& { content: "\@{unreadIcons}"; } } } .subNodeLink--page& { content: "\@{unreadIcons}"; }...

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%); } } .node--forum&, .node--category& { & when (isurl(@unreadImage)) { background: @unreadImage no-repeat; } & when (ispixel(@height))...

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 specific user. Everything is quite simple, we do not need to duplicate this whole large section of code, just one line is enough. .username-user-id (@userId; @color; @ sh-color: false); is a variable that takes three parameters, separated by...

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: false; // true @_m-separatedSymbol: OR; @_m-separatedSymbolFa: \f07e; .p-navgroup-link { &:before { .m-faBase(); color: @_m-colorIcons; padding-right: 5px; } &.p-navgroup-link--logIn { padding-right...

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 { .m-faBefore("\f164"); } &:nth-child(3) dt { .m-faBefore("\f091"); } } } }

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") } } &[data-widget-definition="forum_statistics"] { h3 { .m-faBefore("\f080") } } &[data-widget-definition="share_page"] { h3 { .m-faBefore("\f14d") } } &[data-widget-definition="find_member"] {...

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; } &[href*="/whats-new/news-feed"] { .m-faBefore("\f143"); } &[href*="/search/member?user_id"] { .m-faBefore("\f075"); } &[href$="/account/reactions"] {...

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"); } } }

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: (@xf-responsiveMedium)) { display: none; } &.userBanner-after { border-top-right-radius: 3px; right: 0; } &.userBanner-before {...

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; padding: 1px @xf-paddingMedium; border: 1px solid transparent; border-radius: @xf-borderRadiusSmall; text-align: center; strong { font-weight: inherit; } // Custom custom banners for groups &.userBanner--admin{...