BeerTalk.io – A New Community for Beer Lovers 🍻

treyb

Hey everyone,

I’m excited to introduce BeerTalk.io, a brand-new forum dedicated to all things beer—craft brews, homebrewing, beer reviews, food pairings, and more! 🍺

I’ll be honest… I think I may have a slight Flarum forum-creating addiction (this isn’t my first, and probably won’t be my last 😂), but this one’s a passion project. As a beer enthusiast, I wanted to build a space where beer lovers, homebrewers, and casual drinkers alike can come together to talk hops, malts, and everything in between.

What BeerTalk.io Offers:
✅ Beer Reviews – Share and discover the best (or worst) beers out there.
✅ Homebrewing Discussions – From beginner setups to advanced techniques.
✅ Brewery Spotlights – Talk about your favorite taprooms, breweries, and hidden gems.
✅ Food & Beer Pairings – Because nothing beats the perfect combo.
✅ Beer Competitions & Awards – Discuss the best brews in the world.
✅ Community & Fun – Introduce yourself, share memes, and talk all things beer.

I’ve set this up on Flarum because, let’s be real, it’s the best forum software out there—lightweight, modern, and easy to customize. If you’re a fellow Flarum fan and a beer lover, I’d love for you to check it out and join the community!

🚀 Live now at: BeerTalk.io

Would love any feedback, suggestions, or just some fellow Flarum addicts to chat with. Cheers! 🍻

— treyb

junaid

Kudos on launching the forum.

I love the UI! The color scheme, font - they all go together really well.

Can you mind sharing your custom css?

treyb

junaid

Sure, here is what I use.

// Logo Increase
@media (min-width: 768px) and (min-width: 768px) {
    .App-header {
        height: 75px !important;
    }
}

.Header-logo {
    max-height: 75px !important;
    vertical-align: middle;
}



//Logo
.Header-logo {
    content: url('https://beertalk.io/assets/logo-6jqfybvt.png');
}
body when (@config-dark-mode =true) {
.Header-logo {
    content: url('https://beertalk.io/BTDark.png');
}
}


// Tags Move Left

@media (min-width: 768px) {
  .IndexPage .DiscussionListItem-info > .item-tags, .UserPage .DiscussionListItem-info > .item-tags {
    position: initial !important;
    -webkit-mask-image: unset !important;
  }
}

@media (max-width: 767px){
    .Hero-close{margin-right:-10px}
}
@media (min-width: 768px){
    .Hero h2{font-size:32px}
    .Hero .container{padding-top:40px;padding-bottom:40px}
    .Hero-subtitle{font-size:18px}
}
@media (min-width: 992px){
    .IndexPage-nav .item-newDiscussion{margin-bottom:20px}
}



li a.TagLinkButton.child:before {
    content: '\21AA';
    padding-right: 5px;
    /* display: list-item; */
}




// This one removes secondary tags by their /t/slug on the tags PAGE
// and any tag by their t/slug on the tags SIDEBAR
.TagCloud, .IndexPage-nav .item-nav {
	// first tag
	[href="/t/solved"],
	// second tag
	[href="/t/push-to-socials"] {
	    display: none !important;
	}
}

.TagCloud, .IndexPage-nav .item-nav {
	// first tag
	[href="/t/solved"],
	// second tag
	[href="/t/push-to-socials"] {
	    display: none !important;
	}
}




//reply like always visible
.Post .Post-actions {
    opacity: 1;
}


//Topic Starter

article.CommentPost.Post.Post--by-start-user .Post-header h3:after {
    content: "OP";
    background: none;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--button-primary-bg);
    margin-left: 14px;
}

//Topic Starter Hover

article.CommentPost.Post.Post--by-start-user .Post-header:hover h3:after {
    content: "Original Poster";
    background: none;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--button-primary-bg);
    margin-left: 14px;
}

.Hero-close {
        display: block !important;
        color: #3661ff !important;
        text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}



//Scroll Bar
hr {
    margin-top: 15px;
    margin-bottom: 15px;
    border: 0;
    border-top: 3px solid #e7b625;
}


::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 0px;
    border-radius: 0px;
}


//Changes front page layout of tags in discusions

@media (min-width: 767px){.IndexPage .DiscussionListItem-info>.item-tags, .UserPage .DiscussionListItem-info>.item-tags {
position: initial !important;
margin-bottom: 5px !important;
display:block;
-webkit-mask-image: initial !important;
white-space: nowrap !important;
max-width: 500px !important;
}}

// changes view on Tag Page

.TagTile {
    position: relative;
    overflow: hidden;
}

.TagTile .TagTile-info .icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 100px;
    color: rgba(211, 211, 211, 0.3);
    z-index: 0;
}

.TagTile .TagTile-info {
    position: relative;
    z-index: 1;
}

junaid

treyb thanks for sharing 😃