0
Welcome Guest! Login
0 items Join Now

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

    • Roy Warner's Avatar
    • Roy Warner
    • Sr. Rocketeer
    • Posts: 126
    • Thanks: 2
    • got Answers?

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

    Posted 3 years 2 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.
      1. I have copied the twig and yaml files of the particle to: wp-content/themes/g5_helium/particles
      2. I have also copied the scss files (_blockcontent.scss & _buttons.scss) to: wp-content/themes/g5_helium/custom/scss/
      3. 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/
      4. I duplicated all the settings for the _blockcontent particle in layout manager (as per the Isotope documentation for replicating the contact page
    • Last Edit: 3 years 2 months ago by Roy Warner.
    • -Roy-
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17043
    • Thanks: 883
    • Web Designer and Host

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

    Posted 3 years 2 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 :)
    • David

      Forum Guide
      Please search forums before posting. Please include the Joomla version you are using and a link to the problem.
    • Roy Warner's Avatar
    • Roy Warner
    • Sr. Rocketeer
    • Posts: 126
    • Thanks: 2
    • got Answers?

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

    Posted 3 years 2 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-
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17043
    • Thanks: 883
    • Web Designer and Host

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

    Posted 3 years 2 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 8)
    • David

      Forum Guide
      Please search forums before posting. Please include the Joomla version you are using and a link to the problem.
    • Roy Warner's Avatar
    • Roy Warner
    • Sr. Rocketeer
    • Posts: 126
    • Thanks: 2
    • got Answers?

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

    Posted 3 years 2 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: 3 years 2 months ago by Roy Warner.
    • -Roy-
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17043
    • Thanks: 883
    • Web Designer and Host

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

    Posted 3 years 2 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 8)
    • David

      Forum Guide
      Please search forums before posting. Please include the Joomla version you are using and a link to the problem.

Time to create page: 0.109 seconds