カスタムDiscourseテーマ実装のフリーランサー募集（既存モックアップベース）

マーケットプレイス
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.

Discourseコミュニティの皆様、

CockpitLabフォーラム用のカスタムDiscourseテーマの実装にご協力いただける、経験豊富なフリーランスの開発者/インテグレーターを探しています。Lovable（AIエディター）を使用して機能的なモックアップを作成済みで、これをDiscourseインスタンスに適切に統合したいと考えています。

Lovableで作成したモックアップ：https://preview–forum-discourse.lovable.app/
現在のDiscourseフォーラム：https://forum.cockpitlab.io/

プロジェクトについて：

  • 必要なCSSを含む、テーマの詳細なモックアップが既にあります。
  • テーマには、カスタムナビゲーション、スタイル設定されたボタン、特定のフッター、および標準のDiscourseコンポーネントのさまざまな変更が含まれます。
  • 現在のカラーパレット（主にプライマリカラーとして#edb067）を維持したいと考えています。
  • LovableとGitHubを接続し、GitHubと新しいDiscourseテーマを接続したため、GitHubで直接変更を加えることができます。

解決すべき技術的な問題と課題：

  1. カスタムナビゲーション：モックアップには、現在のDiscourseインスタンスで正しく表示されないドロップダウンメニュー（Useful Links、Toolsなど）を備えたトップナビゲーションバーが含まれています。
  2. フッター統合：複数のセクションを持つカスタムフッターが、インスタンスにまったく表示されません。
  3. 視覚的な一貫性：一部のCSSスタイルが無視されるか、Discourseのデフォルトスタイルによって上書きされます。
  4. レスポンシブデザイン：デスクトップではデザインはうまく機能しますが、モバイルではバグが発生します（ドロップダウンメニューが正しく表示されない、要素の配置がずれるなど）。

特定のバグの例：

  • .cockpitlab-topnav および .cockpitlab-footer クラスはCSSにありますが、対応する要素に適用されていません。
  • :root で定義されたCSS変数が、インターフェイスの特定の部分で認識されません。
  • .btn-primary クラスのボタンは、カスタムスタイルではなく、Discourseのデフォルトスタイルを保持しています。
  • カラー階層が尊重されていません（例：リンクやボタンは引き続きDiscourseのデフォルトカラーを使用しています）。

必要なスキル：

  • Discourseテーマとそのコンポーネントシステムに関する高度な経験
  • SCSS/CSSおよびテーマ統合技術に関する習熟
  • インタラクティブな機能の実装のためのJavaScriptの知識
  • カスタムテーマとDiscourseのアップデート間の互換性の問題の理解

提供できるもの：

  • Lovable上のモックアップへのアクセス
  • テーマコードを含むGitHubリポジトリへのアクセス
  • 既に開発されたCSS/SCSSファイル
  • 希望する結果の詳細なスクリーンショット
  • テスト用のDiscourseインスタンスへのアクセス

予算とタイムラインは、プロフィールに基づいて話し合われます。興味がある場合や質問がある場合は、プライベートメッセージまたはコメントでお気軽にご連絡ください。

ご協力に感謝いたします！
「プロジェクトについて」セクションにGitHub統合に関する箇条書きを追加し、提供できるものリストに「テーマコードを含むGitHubリポジトリへのアクセス」を含めました。

「いいね！」 3
2

こんにちは、Theme component カテゴリをご覧になりましたか？ お探しのものに似たテーマコンポーネント（TC）があるかもしれません。

3

こんにちは、@NateDhaliwal様

フォーラムで調査を行わなかったことを認めなければなりません。なぜなら、私の問題は個人的なものだからです。私は自分で開発者ではなく、モックアップを迅速に完成させるための助けを求めています。

Lovableは、Discourseに固有のすべてのコンポーネントとCSSクラスを考慮に入れていないように思えますが、どのように進めればよいかわかりません…

「いいね！」 1
4

提供された説明によると、関連性がありそうなTCがいくつかあります。

  1. ⬇️ Dropdown Header
  2. Header Submenus
  3. Custom Header Links (icons)
  4. Custom Header Links
  5. Topic Footer Buttons
  6. Easy Responsive Footer
「いいね！」 1
5

ありがとうございます。
すべてのTCを確認します。

「いいね！」 1
6

これに興味があります。PMを送ります。

「いいね！」 2
7

お手数ですが、モックアップを拝見したところ、TCとテーマで対応できそうな部分があります。

  1. タグセクション： Discourse Tag Cloud が非常に似ていると思います。
  2. トピックカードとデザインを備えたメインテーマは、FKB Pro - Social theme のようです。
  3. Category Icons と Tag Icons は、カテゴリとタグのアイコン部分を実現できます。
  4. ヘッダー検索は、おそらく Advanced Header Search で作成できるでしょう。

ですので、ご希望のデザイン、または少なくとも非常に似たバージョンを実現することは definitely 可能だと思います。

「いいね！」 2
8

実装のお手伝いをしていただけますか？

9

こんにちは。このトピックをきれいに保つために、プライベートメッセージでやり取りしましょう。
ありがとうございます！

10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.