RocketTheme - TOPIC: get particle & its scss files from Isotope to work in Helium theme

Welcome Guest! Login

0 items Join Now

- Roy Warner
- Sr. Rocketeer
- Posts: 126
- Thanks: 2
- got Answers?
get particle & its scss files from Isotope to work in Helium theme

Posted 7 years 8 months ago
- I'm working with Helium theme and trying to get a particle from the "Isotope" theme (_blockcontent) to function with its stylesheets (_blockcontent.scss & _buttons.scss) within the Helium theme.
  
  It's not taking.
  
  What am i missing?
  
  I've listed everything I have done below.
  
  I have copied the twig and yaml files of the particle to: wp-content/themes/g5_helium/particles
  
  I have also copied the scss files (_blockcontent.scss & _buttons.scss) to: wp-content/themes/g5_helium/custom/scss/
  
  I have added the scss files as assets in layout manager like so: Base Outline/Page Settings/Assets/CSS - path is set to: gantry-assets://scss/
  
  I duplicated all the settings for the _blockcontent particle in layout manager (as per the Isotope documentation for replicating the contact page
- Last Edit: 7 years 8 months ago by Roy Warner.
- -Roy-
#1305632
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: get particle & its scss files from Isotope to work in Helium theme

Posted 7 years 8 months ago
- Hi Roy,
  
  Did you add the import to your custom.scss file?
  
  @import "blockcontent";
  
  If this resolves your problem then please edit your first post in this thread by adding [SOLVED] at the start of the title and click on the icon and select the 'tick' icon. This lets the moderators know that it can be moved to the solved section.
  
  Thanks for your cooperation
- 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
#1305714

Roy Warner
Sr. Rocketeer
Posts: 126
Thanks: 2
got Answers?

Re: get particle & its scss files from Isotope to work in Helium theme

Posted 7 years 8 months ago

Thanks for the suggestion. At least I got some type of effect once i added

@import "blockcontent";

in custom.scss.

Unfortunately, it resulted in an error (see attached) after i recompiled the style sheets.

The error stems from line 16 in _blockcontent.scss.
The code:

.g-blockcontent {
  h1 {
    font-weight: 300;
    font-size: $core-font-size + 2;
    letter-spacing: -2px;
    opacity: 0.5;
    line-height: 3.75rem;
  }
  .g-blockcontent-headline {
    margin-bottom: 0.5rem;
  }
  .g-blockcontent-description {
    font-size: $core-font-size + 0.2;
  }
  .g-blockcontent-subcontent-title {
    font-family: get-font-family($font-family-promo);
    font-weight: $font-weight-bold;
    margin-bottom: 0;
    text-transform: uppercase;
  }
  .g-blockcontent-icons {
    display: block;
  }
  .g-blockcontent-subcontent-subtitle {
    font-family: get-font-family($font-family-default);
    font-weight: $font-weight-regular; 
    font-size: $core-font-size - 0.1;
    line-height: $core-line-height - 0.5;
  }  
  .g-blockcontent-subcontent-desc {
    font-size: $core-font-size - 0.1;
    position: relative;
    margin-bottom: 1rem;
  }
}

The code in custom.scss file:

@import "_dependencies.scss";
@import "_blockcontent.scss";

Any suggestions?

-Roy-

#1305858

- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: get particle & its scss files from Isotope to work in Helium theme

Posted 7 years 8 months ago
- Hi Roy,
  
  You don't need to add the underscores. The following code is what would be expected...
  
  @import "dependencies"; @import "blockcontent";
  
  Hope this helps
- 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
#1306014

Roy Warner
Sr. Rocketeer
Posts: 126
Thanks: 2
got Answers?

Re: get particle & its scss files from Isotope to work in Helium theme

Posted 7 years 8 months ago

Thanks, David.

Yea, i did realize that. So i corrected it, then was left with one compile error from the $font-family-promo Var, and I fixed that with the !default flag, e.g. ($font-family-default).

Actually, I'm just trying to add background colors to the info particle's (aka blockcontent) grid backgrounds - just like in the Isotope theme/contact page.

The blockcontent particle's CSS override setting in Isotope uses classes like box-blue or box-orange for each info list div, however, i am either not isolating the correct style file or those classes are generated by the long '.button' function within 'buttons.scss'.
When I @import buttons.scss into custom.scss and compile styles, it produces the error (see below) and crashes the contact page from the Helium theme.

Rather than figure this out, can I just create a new style class and use the OVERRIDE CSS SETTING of each instance of the blockcontent particle?

Compile Error

500 Internal Server Error
expecting color line: 90

buttons.scss

%g-button {
	display: inline-block;
	font-family: get-font-family($font-family-default);
	font-weight: $font-weight-bold;
	background: $accent-color-1;
	color: $white !important;
	font-size: $core-font-size;
	text-transform: uppercase;
	border: 2px solid transparent;
	margin: 0 0 0.5rem 0;
	padding: 0.5rem 1.5rem;
	vertical-align: middle;
	text-shadow: none;
	@include transition(all 0.2s);
	&:hover, &:active, &:focus {
		background: darken($accent-color-1, 15%);
		color: $white !important;
	}
}
.button {
	@extend %g-button;
	.fa {
		font-size: $core-font-size + 0.5;
	}
	&.button-square {
		border-radius: 0;
		&[class*="button"] {
			border-radius: 0;
		}
	}
	&.button-block {
		display: block;
	}
	&.button-xlarge {
		font-size: $core-font-size + 0.4;
	}
	&.button-large {
		font-size: $core-font-size + 0.2;
	}
	&.button-medium {
		font-size: $core-font-size;
	}
	&.button-small {
		font-size: $core-font-size - 0.2;		
	}
	&.button-xsmall {
		font-size: $core-font-size - 0.4;
	}
	&.button-2 {
		border-radius: 2rem;
	}
	&.button-3,
	&.button-4,
	&.button-grey,
	&.button-pink,
	&.button-red,
	&.button-purple,
	&.button-orange,
	&.button-blue {
		&.button-3, &.button-4 {
			background: transparent;
			&:hover, &:active, &:focus {
				background: transparent;
			}
		}
	}
	&.button-3 {
		border-radius: 2rem;
		color: $accent-color-1 !important;
		border: 2px solid $accent-color-1;
		&:hover, &:active, &:focus {
			border: 2px solid darken($accent-color-1, 15%);
			color: darken($accent-color-1, 15%) !important;
		}
	}	
	&.button-4 {
		color: $accent-color-1 !important;
		border: 2px solid $accent-color-1;
		&:hover, &:active, &:focus {
			border: 2px solid darken($accent-color-1, 15%);
			color: darken($accent-color-1, 15%) !important;
		}
	}
	&.button-grey {
		background: $box-grey-background;
		&.button-3, &.button-4 {
			color: $box-grey-background !important;
			border: 2px solid $box-grey-background;
			&:hover, &:active, &:focus {
				border: 2px solid darken($box-grey-background, 15%);
				color: darken($box-grey-background, 15%) !important;
			}
		}
		&:hover, &:active, &:focus {
			background: darken($box-grey-background, 15%);
		}
	}
	&.button-pink {
		background: $box-pink-background;
		&.button-3, &.button-4 {
			color: $box-pink-background !important;
			border: 2px solid $box-pink-background;
			&:hover, &:active, &:focus {
				border: 2px solid darken($box-pink-background, 15%);
				color: darken($box-pink-background, 15%) !important;
			}
		}
		&:hover, &:active, &:focus {
			background: darken($box-pink-background, 15%);
		}
	}
	&.button-red {
		background: $box-red-background;
		&.button-3, &.button-4 {
			color: $box-red-background !important;
			border: 2px solid $box-red-background;
			&:hover, &:active, &:focus {
				border: 2px solid darken($box-red-background, 15%);
				color: darken($box-red-background, 15%) !important;
			}
		}
		&:hover, &:active, &:focus {
			background: darken($box-red-background, 15%);
		}
	}
	&.button-purple {
		background: $box-purple-background;
		&.button-3, &.button-4 {
			color: $box-purple-background !important;
			border: 2px solid $box-purple-background;
			&:hover, &:active, &:focus {
				border: 2px solid darken($box-purple-background, 15%);
				color: darken($box-purple-background, 15%) !important;
			}
		}
		&:hover, &:active, &:focus {
			background: darken($box-purple-background, 15%);
		}
	}
	&.button-orange {
		background: $box-orange-background;
		&.button-3, &.button-4 {
			color: $box-orange-background !important;
			border: 2px solid $box-orange-background;
			&:hover, &:active, &:focus {
				border: 2px solid darken($box-orange-background, 15%);
				color: darken($box-orange-background, 15%) !important;
			}
		}
		&:hover, &:active, &:focus {
			background: darken($box-orange-background, 15%);
		}
	}
	&.button-blue {
		background: $box-blue-background;
		&.button-3, &.button-4 {
			color: $box-blue-background !important;
			border: 2px solid $box-blue-background;
			&:hover, &:active, &:focus {
				border: 2px solid darken($box-blue-background, 15%);
				color: darken($box-blue-background, 15%) !important;
			}
		}
		&:hover, &:active, &:focus {
			background: darken($box-blue-background, 15%);
		}
	}
	&.button-arrow {
		background: transparent;
	    font-size: 3rem;
	    line-height: 1;
	    padding: 0 2rem;
		&:hover, &:active, &:focus {
			color: darken($accent-color-1, 25%) !important;
		}	    
	}
}
.g-button-arrow {
	display: block;
    font-family: "helvetica";
    font-size: 4rem;
    line-height: 2rem;    
}

Last Edit: 7 years 8 months ago by Roy Warner.
-Roy-

#1306140

- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: get particle & its scss files from Isotope to work in Helium theme

Posted 7 years 8 months ago
- Hi Roy,
  
  The template is now looking for some of the variables from the template.
  
  You can either add them to your template custom.scss or create your own new versions as css in the custom.scss file.
  
  In Isotope the colours are found in scss/configuration/_colors
  
  Hope this helps
- 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
#1306255

Time to create page: 0.056 seconds