0
Welcome Guest! Login
0 items Join Now

SOLVED WP - Custom section settings not being used

Last Post
Search Topic
    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 322
    • Thanks: 15
    • Another Old Hack!

    Re: SOLVED WP - Custom section settings not being used

    Posted 3 years 10 months ago
    • Mark,

      Let's set aside my 'long' CSS for now as I have used it for about 10+ years now on every website. There is a reason to my madness. :)

      I removed the duplicate 'dependencies' import as I didn't realize I had it in the custom.scss file twice.

      I agree that the text colors are overwritten 'as designed'. However, my issue is the 'background-color'.

      In your change, you set the background color in the Home STYLE tab to #ff0000 which is red. However, it is still displaying a white background inherited from the BODY style. The background-color for the #g-last section shows as rgba(0,0,0,0) which is transparent.

      The _last.scss has this code:
      #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;
	}
}

      Now I would have expected that the _last.yaml file imported from the custom/scss/hydrogen folder would have been changed for the 'default:' settings. But the file was unchanged.
      text/x-generic last.yaml ( ASCII text )
name: Last Colors
description: Last colors for the Hydrogen theme
type: section

form:
  fields:

    background:
      type: input.colorpicker
      label: Background
      default: "#ffffff"
    image:
      type: input.imagepicker
      label: Image
      default: ""
    text-color:
      type: input.colorpicker
      label: Text
      default: "#666666"

      What is the flow of data when a change is made to the template STYLES tab for a section?

      STYLES edit > _last.yaml > custom.scss > compiled custom_home.css? Basically, where are the changes made in the STYLES tab stored?
    • Just another old hacker!
    #1439456
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED WP - Custom section settings not being used

    Posted 3 years 10 months ago
    • Ok, after three hours of looking at this again I can tell your what is happening but not why.

      If you look at the compiled CSS you will see that it has mutliple color statements which are invalid and these statement make the first item that follows them (your last CSS) invalid and therefore ignored. (see screenshot).

      These statements are coming from the import of dependencies (which in turn import lots of other things which import even more things too). Somewhere in all of that is an error and after much searching I cannot find it.

      Sorry but I can't spend any longer on this as it's really no fault with any RT product but rather your own custom development. Hopefully I've given you enough to go on to continue the quest.

      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.
    #1439465
    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 322
    • Thanks: 15
    • Another Old Hack!

    Re: SOLVED WP - Custom section settings not being used

    Posted 3 years 10 months ago
    • Mark,

      I appreciate your taking the time to try and diagnose this issue.

      I decided to rename the custom.scss file to bypass.custom.scss.bypass and created a new custom.css with just the import of the dependencies & the 'hydrogen/last' file. I cleared the cache and reloaded the home page. Viola! It used the settings for the 'Last' section.

      So I then, section by section, added back my original custom.scss file and found the issue. It was the 'format' of the variables which I had prefaced with '--' and it should have been '$'. Once I replaced these, it used the settings for the 'Last' section.

      Here is the edited variables.
      $color-header2: #47b09a;
$color-nav-link: #2d404e;
$color-nav-link-active: #47b09a;
$color-nav-link-hover: #47b09a;
$color-link: #2d404e;
$color-link-hover: #47b09a;
$color-accent1: #47b09a;
$color-accent2: #2d404e;
$color-border-dark: #000000;
$color-border-color: #47b09a;
$color-radius-dark: #000000;
$color-radius-color: #47b09a;
/* table colors */
$table-background-color: #ffffff;
$table-border-color: #babcbf;
$table-text-color: #333333;
$table-header-background-color: #4682b4;
$table-header-border-color: #babcbf;
$table-header-text-color: #ffffff;
$table-header-font-weight: 700;
$table-header-text-align: center;
$table-row-odd-background-color: #f5deb3;
$table-row-odd-text-color: #333333;
$table-row-even-background-color: #EEE8AA;
$table-row-even-text-color: #333333;
$table-cell-border-color: transparent;
/* content image opacity setting */
/* 
	NOTE:
	If you want to use an opacity setting for all content image classes, set it below
	as I have set it to '0.90' and '90' which is 90%.
	If you do not want to use an opacity setting, change the values to '1.0' and '100'.
	DON'T USE THIS - IT BREAKS TEMPLATES
*/
$content-image-opacity-setting: 0.90;
$content-image-opacity-setting-ie: 90;

      I did do a search for these variables using the format of '--' instead of '$', such as '--table-background-color', but could not find any usage of the variables. That's a bit confusing. It is the first time I have encountered this issue and it is on the first WordPress site that I used the Gantry framework so I'm not sure why it happened.

      But I did find the issue and it's working. :)

      FYI, the 'large' custom.scss file has predefinted classes that is like a 'language' to me as I maintain content on most of my clients websites. So if I wanted to center something in a dark red color, I would assign 'text-center color-DarkRed' to the text and it works. I know almost every class by heart. For the few clients that maintain their content, they do like the drop-down of the Styles in the editor bar so they can decide how they want it to display. This keeps everything in classes instead of HTML code.
    • Last Edit: 3 years 10 months ago by Luke Douglas.
    • Just another old hacker!
    #1439487

Time to create page: 0.050 seconds