{"id":1088,"date":"2020-02-14T10:00:21","date_gmt":"2020-02-14T09:00:21","guid":{"rendered":"https:\/\/craftcoders.app\/?p=1088"},"modified":"2024-08-14T14:27:52","modified_gmt":"2024-08-14T12:27:52","slug":"regolith-quickstart-creating-a-custom-theme","status":"publish","type":"post","link":"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/","title":{"rendered":"Regolith Quickstart: Creating a Custom-Theme"},"content":{"rendered":"\r\n<p>This post is intended for beginners of <a href=\"https:\/\/i3wm.org\/\">i3<\/a> or more specifically <a href=\"https:\/\/regolith-linux.org\/\">Regolith<\/a>. Since i3 is just a window-manager and not a fully fletched desktop environment you might have encountered some issues using a pure version of i3.<\/p>\r\n<blockquote>\r\n<p>Regolith is a modern desktop environment that saves you time by reducing the clutter and ceremony that stand between you and your work. Built on top of Ubuntu and GNOME, Regolith stands on a well-supported and consistent foundation. (from <a href=\"https:\/\/regolith-linux.org\/\">Regolith website<\/a>)<\/p>\r\n<\/blockquote>\r\n<p>Regolith on the other hand integrates i3 into Ubuntu and Gnome. Even though I didn&#8217;t expected it, Regolith really works like a charme. The only thing that can be tricky on first sight is customization and that&#8217;s what we&#8217;re going to tackle right now!<\/p>\r\n\r\n\r\n\r\n<h2>Preview<\/h2>\r\n<p>Here are two sample images of the system we&#8217;re trying to create.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-gallery aligncenter columns-2 wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\r\n<ul class=\"blocks-gallery-grid\">\r\n<li class=\"blocks-gallery-item\">\r\n<figure><a href=\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/rego4.png\"><img decoding=\"async\" class=\"wp-image-1119\" src=\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/rego4-1024x576.png\" alt=\"\" data-id=\"1119\" data-full-url=\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/rego4.png\" data-link=\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/rego4\/\" \/><\/a><\/figure>\r\n<\/li>\r\n<li class=\"blocks-gallery-item\">\r\n<figure><a href=\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/rego5.png\"><img decoding=\"async\" class=\"wp-image-1120\" src=\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/rego5-1024x576.png\" alt=\"\" data-id=\"1120\" data-full-url=\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/rego5.png\" data-link=\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/rego5\/\" \/><\/a><\/figure>\r\n<\/li>\r\n<\/ul>\r\n<\/figure>\r\n\r\n\r\n\r\n<h2>Components<\/h2>\r\n<p>Regolith consists of a couple components to make configuration easier. In the screenshot below you can see where each component comes into play. (and how your system should look like at the end of this tutorial)<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/Regolith-Explanation.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1090\" src=\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/Regolith-Explanation-1024x512.png\" alt=\"regolith-screenshot\" width=\"1024\" height=\"512\" \/><\/a><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>The screenshot can give a first impression, but it doesn&#8217;t contain all the components that are involved. Rofi for example can be seen in the second preview picture. Let&#8217;s dig a little bit deeper to get a better understanding of configuration:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table\">\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td><strong>Component<\/strong><\/td>\r\n<td><strong>Description<\/strong><\/td>\r\n<td><strong>Influencing style of<\/strong><\/td>\r\n<\/tr>\r\n<tr>\r\n<td>i3gaps<\/td>\r\n<td>i3gaps is a fork of i3 with additional functionality. <em>i3<\/em> is a dynamic <em>tiling<\/em> window manager, but you probably know it already if you chose to read this post.<\/td>\r\n<td>i3xrocks<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Xresources<\/td>\r\n<td><em>Xresources <\/em>is a user-level configuration <em>dotfile<\/em>, typically located at <code>~\/.Xresources<\/code> . This is more or less our &#8220;root-config&#8221; that loads all other component-configs<\/td>\r\n<td>everything<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Rofi<\/td>\r\n<td><em>Rofi<\/em>, will provide the user with a textual list of options where one or more can be selected. Mostly for running an application, or selecting a window<\/td>\r\n<td>&#8211;<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>i3xrocks<\/td>\r\n<td><em>i3xrocks <\/em>is a Regolith-fork of i3blocks that uses <em>Xresources<\/em>. <em>i3blocks<\/em> generates a status bar with user-defined blocks like a clock<\/td>\r\n<td>&#8211;<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>compton<\/td>\r\n<td><em>Compton <\/em>is a compositor for X based on Dana Jansens&#8217; version of xcompmgr. Kurzgesagt, it renders your display-output.<\/td>\r\n<td>i3gaps, i3xrocks, Rofi<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/figure>\r\n\r\n\r\n\r\n<h2>Creating a Custom-Theme<\/h2>\r\n<p>So now we&#8217;re getting to the fun part. All the proposed components have their own system-global configuration files. At the end of the <a href=\"https:\/\/github.com\/regolith-linux\/regolith-desktop\/wiki\/Customize\">Regolith Customize wiki page<\/a>, you can see each configurations&#8217; location.<\/p>\r\n<h3>Setting a background image<\/h3>\r\n<p>Let&#8217;s start out easy. Since Regolith handles the integration between your Ubuntu settings and the i3-wm you can use the Ubuntu settings to replace your background image. Hit <strong>SUPER+C <\/strong>and navigate yourself to the background tab. If you want you can download my wallpaper <a href=\"https:\/\/www.uhdpaper.com\/2019\/07\/astronaut-jellyfish-space-digital-art.html\">here<\/a>.<\/p>\r\n<h3>Staging configuration files<\/h3>\r\n<p>First, we need to <em>stage<\/em> the Xresources file, which means to copy it to a user-accessible location. Furthermore, we need to create a folder to stage our other configuration files:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-bash\" lang=\"bash\">$ cp \/etc\/regolith\/styles\/root ~\/.Xresources-regolith\r\n$ mkdir ~\/.config\/regolith\/<\/code><\/pre>\r\n\r\n\r\n\r\n<p>If you take a look at the Xresources config, you can see that all it does is referencing these configurations:<\/p>\r\n<ol>\r\n<li>Color theme<\/li>\r\n<li>System font<\/li>\r\n<li>GTK Theme<\/li>\r\n<li>st-term (Regolith default terminal)<\/li>\r\n<li>i3-wm<\/li>\r\n<li>i3xrocks<\/li>\r\n<li>Rofi<\/li>\r\n<li>Gnome<\/li>\r\n<\/ol>\r\n<p>We&#8217;re heading for the files in the &#8220;<em>styles<\/em>&#8221;\u00a0folder<em>.<\/em> They are only for theming, so don&#8217;t confuse them with the config files that change the applications&#8217; behavior like <em>&#8220;~\/.config\/i3\/config&#8221;<\/em>. Let&#8217;s stage some of these style-configs and apply our new styles<strong>:<\/strong><\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-bash\" lang=\"bash\">$ mkdir ~\/.config\/regolith\/styles\/\r\n$ cp \/etc\/regolith\/styles\/color-nord ~\/.config\/regolith\/styles\/custom-coloring\r\n$ cp \/etc\/regolith\/styles\/theme-regolith ~\/.config\/regolith\/styles\/theme-sweet\r\n$ cp \/etc\/regolith\/styles\/i3-wm ~\/.config\/regolith\/styles\/i3-wm<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">A custom coloring scheme<\/h3>\r\n\r\n\r\n\r\n<p>These are the colors that will be used in your desktop environment. Just copy the content into your own file. If you want to define your own colors <a href=\"https:\/\/coolors.co\/browser\/best\/1\">coolors.co<\/a> is a good starting point to get inspiration \ud83d\ude42<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-c\" lang=\"c\">--- File: custom-coloring ---\r\n\r\n! Custom colors\r\n#define color_base03   #26262d\r\n#define color_base02   #474956\r\n#define color_base01   #4c4d5b\r\n#define color_base00   #c0c3db\r\n#define color_base0    #edf2ff\r\n#define color_base1    #E5E9F0\r\n#define color_base2    #ECEFF4\r\n#define color_base3    #f2f5f9\r\n#define color_yellow   #edcd8e\r\n#define color_orange   #e59572\r\n#define color_red      #e57472\r\n#define color_magenta  #908dc4\r\n#define color_violet   #9d8dc4\r\n#define color_blue     #81A1C1\r\n#define color_cyan     #88C0D0\r\n#define color_green    #A3BE8C<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">GTK and icon theme<\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-c\" lang=\"c\">--- File: theme-sweet ---\r\n\r\n#define gtk_theme       Sweet-Dark\r\n#define icon_theme      Sweet-Purple<\/code><\/pre>\r\n\r\n\r\n\r\n<p>For this to work, you need to copy the Sweet icon-theme and Sweet GTK theme onto your machine. Of course, you are free to choose whatever theme you like.<strong>\u00a0<\/strong>Their names (<em>Sweet-Dark<\/em> for the theme and <em>Sweet-Purple<\/em> for the icons) are defined in their config files both named &#8220;<em>index.theme&#8221;<\/em>. My setup is available here:<\/p>\r\n<ul>\r\n<li>Sweet-Theme: <a href=\"https:\/\/www.gnome-look.org\/p\/1253385\/\">https:\/\/www.gnome-look.org\/p\/1253385\/<\/a><\/li>\r\n<li>Candy Icons: <a href=\"https:\/\/www.pling.com\/p\/1284047\/\">https:\/\/www.pling.com\/p\/1284047\/<\/a><\/li>\r\n<\/ul>\r\n<p>You need to copy them to one of the two possible paths:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-bash\" lang=\"bash\">Theme: ~\/.themes\/ or \/usr\/share\/themes\/\r\nIcons: ~\/.icons\/ or \/usr\/share\/icons\/ <\/code><\/pre>\r\n\r\n\r\n\r\n<h3>i3-wm config<\/h3>\r\n<p>The i3-wm config (for i3gaps) defines which color from our <em>custom-coloring <\/em>file is used for what. Furthermore, it defines how workspaces are displayed in i3bar and how i3xrocks looks in general. So now is the time to define which workspace should be used for which use-case. In my case I have separate workspaces for<\/p>\r\n<ul>\r\n<li>Browser<\/li>\r\n<li>Terminals<\/li>\r\n<li>Text Editing (VS-Code)<\/li>\r\n<li>Coding (IDE&#8217;s like IntelliJ)<\/li>\r\n<li>Chatting<\/li>\r\n<li>Music<\/li>\r\n<\/ul>\r\n<p>All the other workspaces are used randomly, thus called &#8220;Other&#8221;.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-c\" lang=\"c\">--- File: i3-wm ---\r\n\r\n#define Q(x) #x\r\n#define QUOTE(x) Q(x)\r\n\r\n#define glyph typeface_bar_glyph_workspace\r\n\r\ni3-wm.bar.font: typeface_bar\r\n\r\ni3-wm.bar.background.color: color_base03\r\ni3-wm.bar.statusline.color: color_base00\r\ni3-wm.bar.separator.color: color_yellow\r\ni3-wm.bar.workspace.focused.border.color: color_base02\r\ni3-wm.bar.workspace.focused.background.color: color_base02\r\ni3-wm.bar.workspace.focused.text.color: color_base2\r\ni3-wm.bar.workspace.active.border.color: color_base02\r\ni3-wm.bar.workspace.active.background.color: color_base02\r\ni3-wm.bar.workspace.active.text.color: color_base00\r\ni3-wm.bar.workspace.inactive.border.color: color_base03\r\ni3-wm.bar.workspace.inactive.background.color: color_base03\r\ni3-wm.bar.workspace.inactive.text.color: color_base00\r\ni3-wm.bar.workspace.urgent.border.color: color_red\r\ni3-wm.bar.workspace.urgent.background.color: color_red\r\ni3-wm.bar.workspace.urgent.text.color: color_base3\r\n\r\ni3-wm.client.focused.color.border: color_base03\r\ni3-wm.client.focused.color.background: color_base01\r\ni3-wm.client.focused.color.text: color_base3\r\ni3-wm.client.focused.color.indicator: color_blue\r\ni3-wm.client.focused.color.child_border:\r\n\r\ni3-wm.client.focused_inactive.color.border: color_base03\r\ni3-wm.client.focused_inactive.color.background: color_base02\r\ni3-wm.client.focused_inactive.color.text: color_base0\r\ni3-wm.client.focused_inactive.color.indicator: color_base02\r\ni3-wm.client.focused_inactive.color.child_border:\r\n\r\ni3-wm.client.unfocused.color.border: color_base03\r\ni3-wm.client.unfocused.color.background: color_base02\r\ni3-wm.client.unfocused.color.text: color_base0\r\ni3-wm.client.unfocused.color.indicator: color_base02\r\ni3-wm.client.unfocused.color.child_border:\r\n\r\ni3-wm.client.urgent.color.border: color_base03\r\ni3-wm.client.urgent.color.background: color_red\r\ni3-wm.client.urgent.color.text: color_base3\r\ni3-wm.client.urgent.color.indicator: color_red\r\ni3-wm.client.urgent.color.child_border:\r\n\r\n#define glyph_font QUOTE(typeface_bar_glyph)\r\n#define WORKSPACE_NAME(INDEX, NAME, FONT) INDEX&lt;span font_desc=FONT&gt; INDEX: NAME &lt;\/span&gt;\r\n\r\ni3-wm.workspace.01.name: WORKSPACE_NAME(1, BR0WSER, glyph_font)\r\ni3-wm.workspace.02.name: WORKSPACE_NAME(2, T3RM, glyph_font)\r\ni3-wm.workspace.03.name: WORKSPACE_NAME(3, ED1T1NG, glyph_font)\r\ni3-wm.workspace.04.name: WORKSPACE_NAME(4, C0D1NG, glyph_font)\r\ni3-wm.workspace.05.name: WORKSPACE_NAME(5, C0D1NG, glyph_font)\r\ni3-wm.workspace.06.name: WORKSPACE_NAME(6, 0TH3R, glyph_font)\r\ni3-wm.workspace.07.name: WORKSPACE_NAME(7, 0TH3R, glyph_font)\r\ni3-wm.workspace.08.name: WORKSPACE_NAME(8, 0TH3R, glyph_font)\r\ni3-wm.workspace.09.name: WORKSPACE_NAME(9, CH4T, glyph_font)\r\ni3-wm.workspace.10.name: WORKSPACE_NAME(10, MUS1C, glyph_font)\r\ni3-wm.workspace.11.name: WORKSPACE_NAME(11, 0TH3R, glyph_font)\r\ni3-wm.workspace.12.name: WORKSPACE_NAME(12, 0TH3R, glyph_font)\r\ni3-wm.workspace.13.name: WORKSPACE_NAME(13, 0TH3R, glyph_font)\r\ni3-wm.workspace.14.name: WORKSPACE_NAME(14, 0TH3R, glyph_font)\r\ni3-wm.workspace.15.name: WORKSPACE_NAME(15, 0TH3R, glyph_font)\r\ni3-wm.workspace.16.name: WORKSPACE_NAME(16, 0TH3R, glyph_font)\r\ni3-wm.workspace.17.name: WORKSPACE_NAME(17, 0TH3R, glyph_font)\r\ni3-wm.workspace.18.name: WORKSPACE_NAME(18, 0TH3R, glyph_font)\r\ni3-wm.workspace.19.name: WORKSPACE_NAME(19, 0TH3R, glyph_font)<\/code><\/pre>\r\n\r\n\r\n\r\n<h3>Using our new configurations<\/h3>\r\n<p>Now we can finally make use of our new config files. Therefore we need to replace the reference in our <em>.Xresources-regolith<\/em> file. In the end it should look something like this: (make sure to replace USER with your username)<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-c\" lang=\"c\">--- File: .Xresources-regolith ---\r\n\r\n! This is the Regolith root-level Xresources file.\r\n!\r\n! -- Styles - Colors\r\n!\r\n! Uncomment one and only one of the following color definitions: \r\n#include \"\/home\/USER\/.config\/regolith\/styles\/custom-coloring\"\r\n\r\n! -- Styles - Fonts\r\n! NOTE: Font packages may need to be installed when enabling typefaces.\r\n! Uncomment one and only one of the following font definitions:\r\n#include \"\/etc\/regolith\/styles\/typeface-sourcecodepro\"\r\n!#include \"\/etc\/regolith\/styles\/typeface-ubuntu\"\r\n\r\n! -- Styles - Theme\r\n! NOTE: GTK theme and icon packages may need to be installed when enabling themes.\r\n! Uncomment one and only one of the following theme definitions:\r\n!\r\n#include \"\/home\/USER\/.config\/regolith\/styles\/theme-sweet\"\r\n\r\n! -- Applications\r\n! These files map values defined above into specific app settings.\r\n#include \"\/etc\/regolith\/styles\/st-term\"\r\n#include \"\/home\/USER\/.config\/regolith\/styles\/i3-wm\"\r\n#include \"\/etc\/regolith\/styles\/i3xrocks\"\r\n#include \"\/etc\/regolith\/styles\/rofi\"\r\n#include \"\/etc\/regolith\/styles\/gnome\"<\/code><\/pre>\r\n\r\n\r\n\r\n<p>As you can see, we also replaced the system font from <em>typeface-ubuntu<\/em> to <em>typeface-sourcecodepro<\/em>. Now save, logout and back in, so that your changes can be applied.<\/p>\r\n<h2>Conclusion<\/h2>\r\n<p>That&#8217;s it! Now your system should be really similar to the screenshots above \ud83d\ude42 As you can see customization is pretty straightforward as soon as you got a basic understanding of the used components and their configurations. If you want take a look at staging your own i3- and i3xrocks config files, to use your new desktop environment to the fullest. Alternatively, you can take a look at <a href=\"https:\/\/github.com\/djuelg\/dotfiles\/tree\/master\/regolith\">my dotfiles<\/a> to get a glimpse of my system. Whatever you do, have fun tweaking your UI!<\/p>\r\n<p>Greetings, Domi<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Component Description Influencing style of i3gaps i3gaps is a fork of i3 with additional functionality. i3 is a dynamic tiling window manager, but you probably know it already if you chose to read this post. i3xrocks Xresources Xresources is a user-level configuration dotfile, typically located at ~\/.Xresources . This is more or less our &#8220;root-config&#8221; that loads all other component-configs &#8230; <a href=\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/\" class=\"more-link\">Read More<\/a><\/p>\n","protected":false},"author":3,"featured_media":2314,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[109,192],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Regolith Quickstart: Creating a Custom-Theme - CraftCoders.app<\/title>\n<meta name=\"description\" content=\"In this Regolith Quickstart you will learn how Regolith and its components work. We will also create a nice, custom theme.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Regolith Quickstart: Creating a Custom-Theme - CraftCoders.app\" \/>\n<meta property=\"og:description\" content=\"In this Regolith Quickstart you will learn how Regolith and its components work. We will also create a nice, custom theme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"CraftCoders.app\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-14T09:00:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-14T12:27:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/regolith-feature-img-850x701-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"701\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dominik J\u00fclg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dominik J\u00fclg\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/\",\"url\":\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/\",\"name\":\"Regolith Quickstart: Creating a Custom-Theme - CraftCoders.app\",\"isPartOf\":{\"@id\":\"https:\/\/craftcoders.app\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/regolith-feature-img-850x701-1.png\",\"datePublished\":\"2020-02-14T09:00:21+00:00\",\"dateModified\":\"2024-08-14T12:27:52+00:00\",\"author\":{\"@id\":\"https:\/\/craftcoders.app\/#\/schema\/person\/950725b140a7ce1147b1308a746a8cce\"},\"description\":\"In this Regolith Quickstart you will learn how Regolith and its components work. We will also create a nice, custom theme.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/#primaryimage\",\"url\":\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/regolith-feature-img-850x701-1.png\",\"contentUrl\":\"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/regolith-feature-img-850x701-1.png\",\"width\":850,\"height\":701},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/craftcoders.app\/#website\",\"url\":\"https:\/\/craftcoders.app\/\",\"name\":\"CraftCoders.app\",\"description\":\"Jira and Confluence apps\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/craftcoders.app\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/craftcoders.app\/#\/schema\/person\/950725b140a7ce1147b1308a746a8cce\",\"name\":\"Dominik J\u00fclg\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/craftcoders.app\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bd18a95cdfc659ad254c8a3bd7f70cc5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bd18a95cdfc659ad254c8a3bd7f70cc5?s=96&d=mm&r=g\",\"caption\":\"Dominik J\u00fclg\"},\"url\":\"https:\/\/craftcoders.app\/author\/domi\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Regolith Quickstart: Creating a Custom-Theme - CraftCoders.app","description":"In this Regolith Quickstart you will learn how Regolith and its components work. We will also create a nice, custom theme.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/","og_locale":"en_US","og_type":"article","og_title":"Regolith Quickstart: Creating a Custom-Theme - CraftCoders.app","og_description":"In this Regolith Quickstart you will learn how Regolith and its components work. We will also create a nice, custom theme.","og_url":"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/","og_site_name":"CraftCoders.app","article_published_time":"2020-02-14T09:00:21+00:00","article_modified_time":"2024-08-14T12:27:52+00:00","og_image":[{"width":850,"height":701,"url":"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/regolith-feature-img-850x701-1.png","type":"image\/png"}],"author":"Dominik J\u00fclg","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dominik J\u00fclg","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/","url":"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/","name":"Regolith Quickstart: Creating a Custom-Theme - CraftCoders.app","isPartOf":{"@id":"https:\/\/craftcoders.app\/#website"},"primaryImageOfPage":{"@id":"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/#primaryimage"},"image":{"@id":"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/regolith-feature-img-850x701-1.png","datePublished":"2020-02-14T09:00:21+00:00","dateModified":"2024-08-14T12:27:52+00:00","author":{"@id":"https:\/\/craftcoders.app\/#\/schema\/person\/950725b140a7ce1147b1308a746a8cce"},"description":"In this Regolith Quickstart you will learn how Regolith and its components work. We will also create a nice, custom theme.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/craftcoders.app\/regolith-quickstart-creating-a-custom-theme\/#primaryimage","url":"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/regolith-feature-img-850x701-1.png","contentUrl":"https:\/\/craftcoders.app\/wp-content\/uploads\/2020\/02\/regolith-feature-img-850x701-1.png","width":850,"height":701},{"@type":"WebSite","@id":"https:\/\/craftcoders.app\/#website","url":"https:\/\/craftcoders.app\/","name":"CraftCoders.app","description":"Jira and Confluence apps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/craftcoders.app\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/craftcoders.app\/#\/schema\/person\/950725b140a7ce1147b1308a746a8cce","name":"Dominik J\u00fclg","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/craftcoders.app\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bd18a95cdfc659ad254c8a3bd7f70cc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bd18a95cdfc659ad254c8a3bd7f70cc5?s=96&d=mm&r=g","caption":"Dominik J\u00fclg"},"url":"https:\/\/craftcoders.app\/author\/domi\/"}]}},"_links":{"self":[{"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/posts\/1088"}],"collection":[{"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/comments?post=1088"}],"version-history":[{"count":1,"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/posts\/1088\/revisions"}],"predecessor-version":[{"id":2315,"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/posts\/1088\/revisions\/2315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/media\/2314"}],"wp:attachment":[{"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/media?parent=1088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/categories?post=1088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/craftcoders.app\/wp-json\/wp\/v2\/tags?post=1088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}