AFC Themes


#1

G’day all, here you can post your themes that you have made. Please post the full .json file contents using the Preformatted text Option, see below for an example.

The following people have made themes.

Example

{
  "name": "AFC Header",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Blue Colour Scheme": {
      "primary": "f4f4f4",
      "secondary": "222222",
      "tertiary": "ffd84d",
      "quaternary": "e45735",
      "header_background": "63a3cd",
      "header_primary": "333333",
      "highlight": "00ceff",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    },
    "PFG": {
      "primary": "f4f4f4",
      "secondary": "222222",
      "tertiary": "0088cc",
      "quaternary": "e45735",
      "header_background": "fa9822",
      "header_primary": "f4f4f4",
      "highlight": "63a3cd",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    },
    "Black and White Colour Scheme ": {
      "primary": "f4f4f4",
      "secondary": "222222",
      "tertiary": "0088cc",
      "quaternary": "e45735",
      "header_background": "ffffff",
      "header_primary": "333333",
      "highlight": "63a3cd",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    },
    "Yellow and White Colour Scheme": {
      "primary": "222222",
      "secondary": "ffffff",
      "tertiary": "0088cc",
      "quaternary": "ff9a7f",
      "header_background": "FFFFCB",
      "header_primary": "333333",
      "highlight": "63a3cd",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    },
    "Black and White 2 Color Scheme": {
      "primary": "222222",
      "secondary": "f4f4f4",
      "tertiary": "0088cc",
      "quaternary": "e45735",
      "header_background": "222222",
      "header_primary": "f4f4f4",
      "highlight": "ffff4d",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

#3

Those aren’t just the themes, those are just the color schemes. A full theme takes up 5 times as much space as one of the color schemes.


#4

I say OK. As I can make a new theme with colour pallet


#5

Well you know what I mean. Hopefully.


#6

I will start developing themes after my band audition, hopefully i can start tomorrow.


#9
{
“name”: “Winter”,
“component”: “false”,
“license_url”: “null”,
“about_url”: “null”,
“authors”: “Clay”,
“theme_version”: “null”,
“minimum_discourse_version”: “null”,
“maximum_discourse_version”: “null”,
“assets”: {
“variable-name”: “assets/my-asset.jpg”
},
“color_schemes”: {
“AFC Winter Theme”: {
“primary”: “222222”,
“secondary”: “bdd9ff”,
“tertiary”: “0079ff”,
“quaternary”: “002aff”,
“header_background”: “bdd9ff”,
“header_primary”: “333333”,
“highlight”: “08c947”,
“danger”: “e45735”,
“success”: “009900”,
“love”: “00e7ff”,
}
}
}

#10

Can I try making a theme?


#11

Go for it mate.


#12

If you want but it’s finishing in 2 days and it’s not a competition.


#13

@Qantas094 Can you put down my 1 theme so far?


#14

I don’t exactly want a overload.


#15

I’m only making 1 or two more themes


#16

Might be easy if you all just make colour schemes.


#17

I can put a one down for you @baseball_inferno.


#18

Here’s my favorite one that I have been working on for hours.

CSS/HTML

CSS

@import "common/foundation/variables";

.d-header {
  &.hide-menus {
    .headerLink:not(.keep) {
      display: none;
    }
  }
}

.custom-header-links {
  display: inline-flex;
  align-items: center;
  margin: 0;
  .headerLink {
    list-style: none;
    a {
      padding: 6px 10px;
      color: $header_primary;
      font-size: $font-up-1;
    }
  }
}

.desktop-view .vmo,
.mobile-view .vdo {
  display: none !important;
}

Header

<script type="text/discourse-plugin" version="0.8.20">
  const customHeaderLinks = settings.Custom_header_links;

  if (!customHeaderLinks.length) return;

  const h = require("virtual-dom").h;
  const headerLinks = [];

  customHeaderLinks.split("|").map(i => {
    const seg = $.map(i.split(","), $.trim);
    const linkText = seg[0];
    const linkTitle = seg[1];
    const linkHref = seg[2];
    const deviceClass = `.${seg[3]}`;
    const linkTarget = seg[4] === "self" ? "" : "_blank";
    const keepOnScrollClass = seg[5] === "keep" ? ".keep" : "";
    const linkClass = `.${linkText.trim().toLowerCase().replace(/\s/gi, '-')}`;

    if (!linkTarget) {
      headerLinks.push(
        h(
          `li.headerLink${deviceClass}${keepOnScrollClass}${linkClass}`,
          h(
            "a",
            {
              title: linkTitle,
              href: linkHref
            },
            linkText
          )
        )
      );
    } else {
      headerLinks.push(
        h(
          `li.headerLink${deviceClass}${keepOnScrollClass}${linkClass}`,
          h(
            "a",
            {
              title: linkTitle,
              href: linkHref,
              target: linkTarget
            },
            linkText
          )
        )
      );
    }
  });

  api.decorateWidget("header-buttons:before", helper => {
    return helper.h(
      "ul.custom-header-links", headerLinks
    );
  });

  api.decorateWidget("home-logo:after", helper => {
    let titleVisible = helper.attrs.minimized;
    if (titleVisible) {
      $(".d-header").addClass("hide-menus");
    } else {
      $(".d-header").removeClass("hide-menus");
    }
  });
</script>

Settings

Custom_header_links:
  type: list
  default: "IFC, this link will open the IFC, https://community.infiniteflight.com/, vdm, blank, remove|Most Liked, Posts with the most amount of likes, /latest/?order=op_likes, vdo, self, keep|Support, this link will take you to support, https://forum-aviationforumcommunity-6985.nodechef.com/c/meta/support, vdm, blank, remove|FAQ, Our Frequently Asked Questions, /fqa, vdm, self, keep"
  description:
    en: 'Comma delimited in this order: link text, link title, URL, view, target, hide on scroll<br><b>Link text:</b> The text for the link<br><b>Link title:</b> the text that shows when the link is hovered<br><b>URL:</b> The path for the link (can be relative)<br><b>View:</b> vdm = desktop and mobile, vdo = desktop only, vmo = mobile only<br><b>Target:</b> blank = opens in a new tab, self = opens in the same tab<br><b>Hide on scroll:</b> remove = hides the link when the title is expanded on topic pages keep = keeps the link visible even when the title is visible on topic pages'

Colour Schemes

{
  "name": "AFC Header",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Yellow and White Colour Scheme": {
      "primary": "222222",
      "secondary": "ffffff",
      "tertiary": "0088cc",
      "quaternary": "ff9a7f",
      "header_background": "FFFFCB",
      "header_primary": "333333",
      "highlight": "63a3cd",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    },
    "PFG": {
      "primary": "f4f4f4",
      "secondary": "222222",
      "tertiary": "0088cc",
      "quaternary": "e45735",
      "header_background": "fa9822",
      "header_primary": "f4f4f4",
      "highlight": "63a3cd",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    },
    "Black and White Colour Scheme ": {
      "primary": "f4f4f4",
      "secondary": "222222",
      "tertiary": "0088cc",
      "quaternary": "e45735",
      "header_background": "ffffff",
      "header_primary": "333333",
      "highlight": "63a3cd",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    },
    "Blue Colour Scheme": {
      "primary": "f4f4f4",
      "secondary": "222222",
      "tertiary": "ffd84d",
      "quaternary": "e45735",
      "header_background": "63a3cd",
      "header_primary": "333333",
      "highlight": "00ceff",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    },
    "Black and White 2 Color Scheme": {
      "primary": "222222",
      "secondary": "f4f4f4",
      "tertiary": "0088cc",
      "quaternary": "e45735",
      "header_background": "222222",
      "header_primary": "f4f4f4",
      "highlight": "ffff4d",
      "danger": "e45735",
      "success": "009900",
      "love": "fa6c8d"
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

Preview


#19

@Qantas094 have you done it for desktop and mobile?


#20

@Qantas094 that looks quite good, tho I would change the yellow to something else.


#21

Can anyone show me how to make a theme. @qantas094 show me


#22

I love that yellow though


#23

The ffffc2?