Sort links in sidebar

Tutrix

Is there a way to sort the links in the sidebar?
I would like to have the blog at the end.

Tutrix

I have now been able to resolve it using CSS. 😉

@media (min-width:995px) {
.sideNav ul.Dropdown-menu.dropdown-menu  { display: flex; flex-direction: column; }
.sideNav ul.Dropdown-menu.dropdown-menu li.item-allDiscussions{ order: -7; }
.sideNav ul.Dropdown-menu.dropdown-menu li.item-fof-user-directory { order: -6; }
.sideNav ul.Dropdown-menu.dropdown-menu li.item-badges { order: -5; }
.sideNav ul.Dropdown-menu.dropdown-menu li.item-huseyinfiliz-leaderboard { order: -4; }
.sideNav ul.Dropdown-menu.dropdown-menu li.item-following{ order: -3; }
.sideNav ul.Dropdown-menu.dropdown-menu li.item-tags { order: -2; }
.sideNav ul.Dropdown-menu.dropdown-menu li.item-blog { order: -1; }
}

However, it would be preferable to have the option of sorting in the admin area via drag and drop.

Wlork

Tutrix

Sorry for off topic, but it's possible to know how you managed to put tags under the username via CSS in the discussion list ?

Until now, I've been using an extension, but if we can do it via CSS, that would be ideal 🙂

Thank you in advance

Tutrix

Wlork
I also use “Tags Under Discussion,” but I've changed a few things about CSS. 🙂
To display the icons
and the tag color as the background instead of as text.

.IndexPage .DiscussionListItem-info>.item-tags .TagLabel .icon,
.UserPage .DiscussionListItem-info>.item-tags .TagLabel .icon,
.DiscussionPage-list .DiscussionListItem-info>.item-tags .TagLabel .icon,
.DiscussionListItem .DiscussionListItem-content .TagsUnderDiscussion .TagLabel .icon {
  display:inline !important
}
.IndexPage .DiscussionListItem-info>.item-tags .TagLabel-text,
.UserPage .DiscussionListItem-info>.item-tags .TagLabel-text,
.DiscussionPage-list .DiscussionListItem-info>.item-tags .TagLabel-text,
.DiscussionListItem .DiscussionListItem-content .TagsUnderDiscussion .TagLabel .TagLabel-text {
  text-transform:unset !important;
  background:var(--tag-bg) !important;
  padding:2px 8px;
  border-radius:3px;
  color:var(--body-bg) !important
}
.IndexPage .DiscussionListItem-info>.item-tags,
.UserPage .DiscussionListItem-info>.item-tags,
.DiscussionPage-list .DiscussionListItem-info>.item-tags,
.DiscussionListItem .DiscussionListItem-content .TagsUnderDiscussion {
  margin-top:3px !important;
  margin-left:-1px;
  font-size:12px !important
}
.TagLabel {
  font-weight:normal !important;
  padding:.1em .2em !important
}

meihuak

beautiful theme, which is your site man?

Tutrix

meihuak
Everything customized with CSS 😉
Smart Button Community

meihuak

Tutrix so great site, how can i get your theme

Capybara

Smart Button Community is one of my favorite forums built on Flarum — everything is done very neatly and with great taste

Tutrix

@meihuak
This is not a theme, just CSS code adapted to extensions and the thematic content of my forum.

@Capybara
Your "Beautiful Rules Page" and "MagicBB" are part of it. 😉

Subarist

Tutrix
Super cool! I just didn’t know CSS could sort like this.

Subarist

When pinned, the behavior is a bit abnormal. Please click the GIF to see the animation.

Tutrix

Subarist
Thanks for pointing me to that, I've now corrected it. 🙂

Subarist

Tutrix
I’m really interested in the way your site links the --color variables together. I’ve been studying it for the past few days. It really makes the whole site feel much more lively.

Tutrix

Subarist
I use Colored, but I had to make a lot of corrections via CSS because the settings are currently missing in the admin panel.

Subarist

Tutrix
Yes, I know that extension, but I’m sure you’ve made quite a lot of custom adjustments . The tag color choices also work really well with both the dark and light themes.

Tutrix

Subarist
Yes, I have made a lot of adjustments. My custom CSS code is reaching its limit. 😀
For light and dark mode, I am working with

body when (@config-dark-mode = false) {
 ......
}
body when (@config-dark-mode = true) {
 ......
}