{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/tutorial/first-edit/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"First customization","slug":"first-edit","updated":"2023-04-01T00:00:00.000Z","category":"tutorial-branding","ingress":"Begin customizing your marketplace by custom styling and introducing your own branding.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"marketplace-styles","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#marketplace-styles","ariaLabel":"marketplace styles permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Marketplace styles"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Custom styling is a good starting point to introduce your own branding\nand remove design choices made for example marketplace, Saunatime."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW templates have most of the styling tied to component directories,\nbut there are 2 files that define custom media queries, default CSS (CSS\nProperties, element styles, and global css classes):"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── styles\n        ├── customMediaQueries.css\n        └── marketplaceDefaults.css"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"I have a propertySets.css file. What is that?"},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── styles\n        └── propertySets.css"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In previous versions of FTW, there has been a third CSS file:\npropertySets.css. This file contains\n"},{"type":"element","tagName":"a","properties":{"href":"https://chromestatus.com/feature/5753701012602880","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"CSS Property Sets"}]},{"type":"text","value":"\nthat can be applied to component styles using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@apply"}]},{"type":"text","value":"syntax.\nHowever, W3C decided not to include that feature in future CSS syntax,\nand the\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/pascalduez/postcss-apply","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"postcss-apply plugin"}]},{"type":"text","value":" got\ndeprecated in the process."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you have an older FTW template (earlier than FTW-daily v9, FTW-hourly\nv11 or FTW-product v10), you might have this file in your codebase. If\nyou start using sharetribe-scripts v6.0.0, you need to consider\nmigrating away from that since it contains code that is deprecated in\nv6.0.0 of sharetribe-scripts."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Read more from\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/pull/1531","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"this pull request"}]},{"type":"text","value":"\nin FTW-Daily."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"changing-css-variables","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#changing-css-variables","ariaLabel":"changing css variables permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Changing CSS variables"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The most important file is "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"marketplaceDefaults.css"}]},{"type":"text","value":", where you can\nfind CSS variable "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"--marketplaceColor"}]},{"type":"text","value":" and its two variants."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* ================ Colors ================ */"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--marketplaceColor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #38a70a"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--marketplaceColorLight"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #ff4c38"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--marketplaceColorDark"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #8c291e"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Our marketplace for summer cottages could use green color as its\nbranding, so we'll change these color codes a bit:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--marketplaceColor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #2f880a"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--marketplaceColorLight"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #39a10c"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--marketplaceColorDark"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #287209"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The darker and lighter color variants are mainly used for effects like\ncolor change when the cursor is hovering on top of a button."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After you save the file, the development server will compile the modules\nand serve the updated app on your local development environment\n("},{"type":"element","tagName":"a","properties":{"href":"http://localhost:3000","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"http://localhost:3000"}]},{"type":"text","value":") Assuming, that you have development server\nrunning (i.e. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"yarn run dev"}]}]},{"type":"text","value":")."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You should notice that some text and background-colors were changed to\ngreen."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/fef373fabd73725b401a8a470358de69/1adeb/marketplace-color-changed.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 71.69811320754718%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAADbElEQVQ4y3WO+0/bdRSGPxrERE3MYjRZIohhG5loMiLqlAG6sIsMIsqQhQDOQDVbcLpiuQwKBcqlQFdgtXSU0ouCpaVcNgMkXuL0B+Y/wWWOErkOVvrtt5A8pnUk08yTPHlz3pP35BXby3/hu/sna75FdmUZv+Rne3ubQEBClkNIQRkpGIyoHAr9gxwiFAqxFdjAL20SDEpIge2IiunpaSanphibuMmwd5zJqWl+mJzE5R3D4fLwndvLkGcU79gEo+M3GHSP4PKMYh8cptVooab9Gk0GM41Xe6nQGhB9did9Ngcmq51rfVbMVhsWm4PrAzZMFiu9Fit9YS+8X7fQ9U0vV5o7UDW0UarSkJKnICEjnyNZRRw7W4rQWRwYnS5s4TaeEQY9XgY9I7i9o4yOTzA47KHf7sRqd2C12bH0D9DYbuDzygYqm9rJUSg5XnCBostqPr5Yhfiiy0qz00uTzY3JcwP31I9M/3oL59hNDE4X1u/dmAbsGMwWdEYznUYzHT0m1G1XUWk7KKtv45JGx5lSJa9lFiE+qumkWNvDuTo9RQ1dlDRfo6Knn0KNnkylhryqFvKrm1FodJRp9RTXtlKiaed8bSt5X9bwep6C2PdyiX7lXURMMiJTqSNbqSfnaz1ZSi0nytSc/qqeHFUTZyu05KqayC5v5P0HXn51C1ll1SScOse+5FNEJ6Yj4o/y2EvJPP5iEiLlUjEZdR9ysq6A9AsqUhVVpH2mIk2hIq2knNTzlzmuqODExWreLiwj8Uwhsakf8NwbJ3nq1XSeOPQOUQeOEhWXTFRMEuKF7BTiPk0kpuAI+zNyiTtdxMGsYg5lfULCA/an5RB9+Bgi/i1E/JuI2CTE84cR+w4inj2AeOZlxNNxiCdjELXd36LuGqKuZ4h6o4N6ox2d1YXe4cHgHKFjwEWNwUyNoQ91t4UrnSYqW3uobOmmvKETZX07yro2lOo2lLWtCB4x99bXWF9ZZn11hbWVZQL++2xurLOxusr9zXtsrK3i39p8VBQRlGX2kGWZgCTh8y3hW1pidnaOmZnbzNz+g1u//c5PP/8S8e4uLrJw5w6SJBEMyv9C7O7ussfOzg5bW1v4/f6I+nw+FhYWmJ+fZ25ujtnZ2YgXvu3xcD6M+K/x8PNAIEAwGIw0D7fZ0/Dt/3J/A6l7J0j/JkErAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/fef373fabd73725b401a8a470358de69/82e29/marketplace-color-changed.webp 159w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/ef33f/marketplace-color-changed.webp 318w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/f1837/marketplace-color-changed.webp 635w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/29549/marketplace-color-changed.webp 953w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/c5420/marketplace-color-changed.webp 1270w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/2a3e9/marketplace-color-changed.webp 1758w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/fef373fabd73725b401a8a470358de69/8b9b5/marketplace-color-changed.png 159w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/fa108/marketplace-color-changed.png 318w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/53fb6/marketplace-color-changed.png 635w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/5a426/marketplace-color-changed.png 953w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/91155/marketplace-color-changed.png 1270w","/docs/legacy/static/fef373fabd73725b401a8a470358de69/1adeb/marketplace-color-changed.png 1758w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/fef373fabd73725b401a8a470358de69/53fb6/marketplace-color-changed.png","alt":"Hero section after changing the marketplace color","title":"Hero section after changing the marketplace color","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Congratulations!"}]},{"type":"text","value":" You have made your first customization."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It's time to change the Saunatime image on the landing page."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial/change-images/"},"children":[{"type":"text","value":"› Go to the next article"}]}]}],"data":{"quirksMode":false}},"headings":[{"value":"Marketplace styles","depth":2},{"value":"Changing CSS variables","depth":2}]}},"pageContext":{"slug":"first-edit","category":"tutorial-branding"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}