From b1f668dc35ab0762f5dade1d1a6fcca1d265aa27 Mon Sep 17 00:00:00 2001 From: uglyeoin Date: Sat, 28 Sep 2019 17:19:34 +0100 Subject: [PATCH] A lot of people ask about section styles in the forum I've seen quite a few questions about section styles in the forum. Although usually the best advice is to use CSS (and I have included this advice) I still wanted to know the full way of doing things and I think some others would like to know this. To save myself searching the forums and to save you guys answering the same questions (and support is excellent) I decided to improve this help document. I personally feel that this would be better on it's own page as it is not a preset but I don't have the ability to do that. I hope that if you decide to take the route I have at least saved you some time. --- .../05.creating-style-presets/docs.md | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/pages/01.gantry5/05.advanced/05.creating-style-presets/docs.md b/pages/01.gantry5/05.advanced/05.creating-style-presets/docs.md index 30057bf..223cc4d 100644 --- a/pages/01.gantry5/05.advanced/05.creating-style-presets/docs.md +++ b/pages/01.gantry5/05.advanced/05.creating-style-presets/docs.md @@ -223,3 +223,28 @@ Here is a quick breakdown of the main settings and what they do: | `font` | This section enables you to set a preset font(s). | | Sections | Each section of a Gantry theme has the ability to have its own style settings. Commonly, these include `background` and `text-color` but may also include images and overlay settings. | | `breakpoints` | Set the default breakpoints for the preset. | + + +## Adding Backend Section Styles +Pleas note it is often quicker and easier to style section backgrounds by using CSS. To do that you simply include a rule similar to the following rule: + +``` +#g-showcase { + background-image: url("upirbackgroundimageurlgoeshere"); + background: #000000; + color: #ffffff; +} +``` + +There are two parts to adding new section styles to your template. The first is to create the .yaml file to show the background and colour picker in the administraion part of your site. The second is to ensure those colours are used in the front end of your website. + +The location of the backend files and front end files are as so: + +| Location | Front or Back | Description | +| :----- | :----- | +| /TEMPLATE_DIR/blueprint/styles/SECTION-NAME.yaml | Back | You can copy this to /TEMPLATE_DIR/custom/blueprint/styles to override it. Or you can create a new one in that directory to avoid being overwritten in future updates. | +| +| /TEMPLATE_DIR/scss/TEMPLATE_NAME/\_SECTION-NAME.yaml | front | You can copy this to /TEMPLATE_DIR/custom/scss to override it. Or you can create a new one in that directory to avoid being overwritten in future updates. | +| + +Once you have created these files they will simply override. If you create new ones you MUST you can import them into your file. This can be done in cusom.css by using `@import "section-name";`. You should note that you do NOT need to include the underscore part of the file name.