レイアウトに関する推奨事項は?変更をプレビューする方法は?

I really love https://discuss.codecademy.com/

Our site is at https://community.tillerhq.com/

We build product and experience loosely using Jobs to Be Done (as progress) model.

I think Code Academy gets at this. What is the member trying to do when they reach the site to ultimately improve their current situation? We’re also trying to achieve this and simplify.

I’d love to experiment with a format more like what’s on the Code Academy site, but don’t want to be disruptive to our members by experimenting on the live site. Is there a way to “preview” changes that affect layout?

I’ve also noticed that some minor formatting/aesthetic changes cause some issues with the TOC plugin we’re using I believe mostly due to latency (it takes a minute to catch up and reload properly after changes?) so we haven’t done much fine tuning as we rely on that feature heavily for our docs.

Also, if anyone has feedback on our site’s layout/organization that’d also be awesome. It’s helpful to get fresh eyes!

Thanks for a great product @sam @codinghorror :slight_smile: :santa: :christmas_tree:

「いいね!」 5

Hey Heather :smiley: :wave:

Yup there is! You can use the customize section in your community admin settings to make and preview changes. See this beautiful guide that explains how it all works:

Seeing as you are interested in Codecademy’s theme, I figured I should also share this:

:hugs:

「いいね!」 13

いくつかの変更を加えた後、この件を再開します。

まず、カテゴリのレイアウトを別のものでプレビューすることは、私の知る限り不可能です。カテゴリの表示方法を「ボックスで注目のトピック」から「カテゴリで注目のトピック」に変更したかったのですが、この設定を更新するとライブサイトが即座に変更されました。他の人の参考になればと思い共有しました。

もし可能であれば、次の質問です。これらのリンクとテキストの色を編集する方法はありますか?何がリンクで何がそうではないのかが視覚的にわかりにくく、リンクが多すぎるためです。ユーザーが実際に必要とするものや、さらに詳しく探索したいものをクリックできるよう、特定のリンクの色をカスタマイズしたいと考えています。

「いいね!」 1

はい。管理ダッシュボードの「カスタマイズ」タブに移動し、現在のテーマの CSS を編集するか、変更を加えたテーマコンポーネントを追加することで、あらゆるものの色や外観を変更できます。

適切な CSS クラスを特定するには、Chrome のインスペクターを使用してください。

「いいね!」 3

ありがとうございます!サブカテゴリから「未読」や「新規」の数を非表示にする方法はありませんか?色は調整済みですが、見た目がごちゃごちゃするので隠したいと考えています。設定で見つけられませんでした。現在は Light テーマのみを使用しています。

「いいね!」 1

上記で Hawk が共有したのと同じ提案です。ブラウザのインスペクタを使用して、対象とする CSS クラスを見つけ、テーマコンポーネントを使用して変更を加えてください。

「いいね!」 4

余計な話かもしれませんが、もしカスタムホームページバナーを使って discuss.codeacademy.com に似た見た目を実現する方法に興味がある方がいたら、共有しておきます。最終的には、@awesomerobot さんのこのガイドを使って、ホームページのみに表示されるバナーを実装しました。あちらほど凝ったものではありませんが、目的は達成できました!

その後、カテゴリバナー機能も利用しました。

CSS の調整は、未読数の色 scheme などにも役立ちました。

ありがとうございました!

「いいね!」 6