Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)

Marketplace
1

Hello Discourse community,

I am looking for an experienced freelance developer/integrator to help implement a custom Discourse theme for our CockpitLab forum. We have already created a functional mockup with Lovable (an AI editor), and we now wish to properly integrate it into our Discourse instance.

Mockup made with Lovable : https://preview–forum-discourse.lovable.app/
Current discourse forum : https://forum.cockpitlab.io/

About the project:

  • We already have a detailed mockup of the theme with all the necessary CSS
  • The theme includes custom navigation, styled buttons, a specific footer, and various modifications to standard Discourse components
  • We want to maintain our current color palette (mainly #edb067 as the primary color)
  • We have connected Lovable with GitHub and GitHub with a new Discourse theme, so modifications can be made directly on GitHub

Technical issues and challenges to solve:

  1. Custom navigation: Our mockup includes a top navigation bar with dropdown menus (Useful Links, Tools, etc.) that do not display correctly in the current Discourse instance.
  2. Footer integration: The custom footer with multiple sections doesn’t appear at all in our instance.
  3. Visual consistency: Some of our CSS styles are ignored or overridden by Discourse’s default styles.
  4. Responsive design: Our design works well on desktop but has bugs on mobile (dropdown menus that don’t display correctly, misaligned elements).

Examples of specific bugs:

  • The .cockpitlab-topnav and .cockpitlab-footer classes are in our CSS but are not applied to the corresponding elements
  • CSS variables defined in :root are not recognized in certain parts of the interface
  • Buttons with the .btn-primary class retain Discourse’s default style instead of our custom style
  • The color hierarchy is not respected (for example, links and buttons still use Discourse’s default color)

Required skills:

  • Advanced experience with Discourse themes and their component system
  • Proficiency in SCSS/CSS and theme integration techniques
  • Knowledge of JavaScript for implementing interactive features
  • Understanding of compatibility issues between custom themes and Discourse updates

I can provide:

  • Access to our mockup on Lovable
  • Access to our GitHub repository with the theme code
  • Already developed CSS/SCSS files
  • Detailed screenshots of the desired result
  • Access to our Discourse instance for testing

Budget and timeline to be discussed based on profile. If you are interested or have questions, feel free to contact me via private message or in the comments.

Thank you in advance for your help!
I’ve added a bullet point in the “About the project” section mentioning your GitHub integration, and also included “Access to our GitHub repository with the theme code” in the list of things you can provide.

2 Likes
2

Hi there, have you looked through the Theme component category? Perhaps some TCs are similar to what you’re asking for.

3

Hello @NateDhaliwal
I have to admit that I didn’t do any research on the forum because my problem is personalised. I’m not a developer myself and I’m looking for help to get a quick result for my mockup.

I have the impression that Lovable hasn’t taken into account all the components and CSS classes specific to discourse but I don’t know how to move forward…

1 Like
4

There are some TCs that look like they are relevant, from the description you provided:

  1. ⬇️ Dropdown Header
  2. Header Submenus
  3. Custom Header Links (icons)
  4. Custom Header Links
  5. Topic Footer Buttons
  6. Easy Responsive Footer
1 Like
5

Thank you.
I will check all TCs.

1 Like
6

I am interested in taking this up, sending you a PM

2 Likes
7

Sorry to bother you, but looking at the mockup, it looks like a portion of it can be helped by TCs and themes:

  1. Tag section: by the looks of it, I think Discourse Tag Cloud is quite similar.
  2. The main theme with the topic cards and design looks like FKB Pro - Social theme.
  3. Category Icons and Tag Icons can accomplish the icons part of categories and tags.
  4. Header search can probably be made with Advanced Header Search.

So I think it’s definitely possible to accomplish your design, or at least a very similar version.

1 Like