SOLVED WP - Custom section settings not being used
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
I set the background and text colors for the 'Last' and 'Mainbottom'.
https://snipboard.io/85GV29.jpg
.
However, neither is recognized and it reverts to using the Base Styles settings. I 'manually' edited the custom.scss for one section and that fixed it for that section but I don't think I should have to do this. https://snipboard.io/bgUWSF.jpg .
Both of these sections are customized for the Hydrogen template.
As directed, I had created custom YAML files in the /wp-content/themes/g5_hydrogen/custom/blueprints/styles folder. https://snipboard.io/gP1lQo.jpg .
Here is the last.yaml settings: https://snipboard.io/QAaxc2.jpg .
All of the sections do appear in the Styles tab on the Base Outline.
So is there 'another' step I must take in order for the settings in the 'custom' sections to be recognized?
FYI, the admin account I have for RokSprocket is included. - Last Edit: 2 years 10 months ago by Luke Douglas.
- Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Is this the topic you said you "solved" in your other topic about post deletion?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
Mark,
No. This is a separate issue which is confounding to me. As I didn't develope Gantry, I am not aware of all the underlying logic. I had assumed that once I had added the section YAML files, that it would be recognized by all template copies. So if I set the colors & backbackground colors in the base styles, then I would expect it would be inherited and used by a copy of the base such as 'Home'. It's not.
Luke - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
No, it won't because you then have to actually use those settings for color in the sections SCSS files.
Basically the process is:
1. Add the fields in the blueprint
2. Add the initialisation of the fields in the core SCSS files.
2. Add the setting of the fields in the preset files.
3. Use the fields in your section SCSS files.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
As a test for one section, Last, I created a _last.scss file in the /wp-content/themes/g5_hydrogen/custom/scss/hydrogen/ folder and modified it as follows:
#g-last { padding: $section-padding 0; background: $last-background; color: $last-text-color; border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); } @media print { #g-last { background: #f1f1f1 !important; color: #142d53 !important; } }
I went to the base outline styles and changed the text-color from the original $142d53 to #666666. I went to the home template and the change was reflected.
However, the content in the 'last' section on the 'home' page is NOT inheriting the new color as the background is the core default #ffffff and the color is #666666, it should actually be background #f1f1f1 and color #666666.
So here is what I have done for the one section Last.- copied presets.yaml to the /custom/gantry/ folder
- edited the presets.yaml to add the new sections including last: with background & color
- created custom last.yaml files in the /custom/scss/hydrogen/ folder
- created custom _last.scss files in the /custom/blueprints/styles/ folder
What have I missed? - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
The _last.scss file needs to be in the /wp-content/themes/g5_hydrogen/custom/scss directory and your custom.scss file (in /wp-content/themes/g5_hydrogen/custom/scss) need to have an import statement for that scss file immediately after the import of "dependencies";
@import "dependencies"; @import "last";
As to your points:
1. that won't work you have to change the original presets file as it's not overrideable
2. ok
3. no, wrong location. Please see gantry 5 docs for correct location
4. no, wrong location (see above).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
I added this to the top of the /custom/scss/custom.scss file:
@import "dependencies"; // Last @import "hydrogen/last";
- I moved the sections YAML files to the /custom/blueprints/styles folder.
- I moved the "_last.scss" file to the /custom/scss/hydrogen
I'm confused on the presets comment "that won't work you have to change the original presets file as it's not overrideable".
The documentation on Gantry.org states this:
"Creating a new Style Preset is pretty simple. The first thing you will need to do is create a new presets.yaml file. This file should be placed in the /custom/gantry/ directory. This will prevent your custom presets from being overwritten when the theme is updated."
Are you saying the documentation is wrong?
So I edited the 'presets.yaml' file in both the /g5_hydrogen/gantry/ and the /g5_hydrogen/custom/gantry/ folders.
I cleared the cache, went into the 'Base Outline' and change the background color for the 'Last colors' to #999999. I checked the 'Home' template STYLES page and the change was reflected there.
I checked the /custom/config/default/styles.yaml and it changed the background color.
last: background: '#999999' image: '' text-color: '#ffffff'
I cleared the cache, went into the 'Base Outline' and change the background color for the 'Last colors' to #076be6. I checked the 'Home' template STYLES page and the change was reflected there.
I checked the /custom/config/default/styles.yaml and it changed the background color.
last: background: '#076be6' image: '' text-color: '#ffffff'
So far, so good!
However, the 'last' section content on the home page is still displaying the inherited background & color from the body. It is not using the settings from the STYLES section of the template. https://ochsbands.info/
So what am I missing? - Last Edit: 2 years 10 months ago by Luke Douglas. Reason: clear up confusing statement
- Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Ugh. Just give me ftp access details and I'll sort it all out and get it working for you. There is no need to be using a "Hydrogen" directory in the custom/scss folder. This is going to take me some time though to understand all that you have done and I will have to fit that around answering other members - so please be patient and don't change anything whilst I am doing all this.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
Mark,
I've attached the FTP access. - Last Edit: 2 years 10 months ago by Luke Douglas.
- Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
The setting of the colors for the section is working perfectly (see screenshot) - I changed the colors on the "home" outline "styles" tab for that section and they are correctly set in the custom CSS file.
They're not being used by the content because your content styling is overridding those values. Specifically "h3" tag color is set to be #076be6 is your own custom.scss file on line 1700. Also, the text color of paragraphs is being set to #666 on line 2136 of your own custom.scss file. In other words, whilst the section colors are being set correctly you're then completely overriding that with your own custom.scss which brings me to my next point...
... What the heck?! you've got 2431 lines of custom.scss!!! if your need this much custom.scss then something is seriously wrong - I've never seen any site require this much custom SCSS???
Also, most of the code therein is flawed in that it is way too generic and changing the fundamental structural elements of Gantry 5. It also makes way too many assumptions about what content resides in each section. It also imports "dependencies" over and over again. (you only need it once at the top of your custom.scss). In my opinion you're never going to be able to maintain this coding. As soon as there is an update to the hydrogen template or you change your content on the pages the whole thing is going to collapse like a deck of cards and be a nightmare to find the cause of the issues. You seem to be copying lots of core Gantry 5 SCSS into your own custom scss?
Sorry, but I think you need to have a serious rethink about this because, trust me, you're never going to remember why or where you made all these zillions of changes to this theme.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.044 seconds