Hi everyone,
I am using the Debut theme, and I am trying to change the <shop now> button color.
There are a couple posts about this subject on the forum, and they require a snippet of code be added within <theme.scss.liquid> or <theme.css.liquid> under assets. Sadly, I do not have either of these in my assets folder. Can someone assist me here?
URL: https://lavendel-rose.ch/
Thanks,
Nico
Hi @rehder
Please add theme.css file code.
Hi @Vikas_Chovatiya , how would you like this? Simply copy - paste the entire theme.css file code as a reply?
Hey @Alett_Lewis, yup, this is clear to me. But as you can see, these files are not found in my assets folder.
I have a <theme.css>, but no <theme.scss.liquid> or <theme.css.liquid>. Unless with or without <liquid> represents the same file?
Thanks again!
It should be the same file. Here's how the file starts (for you to verify if it's the same)
/*============================================================================
Debut | Built with Shopify Slate
Some things to know about this file:
- Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use native CSS/Sass @imports in this file without a build script
==============================================================================*/
/*================ SASS HELPERS ================*/
/*============================================================================
Convert pixels to ems
eg. for a relational value of 12px write em(12) when the parent is 16px
if the parent is another value say 24px write em(12, 24)
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss
==============================================================================*/
@function em($pxval, $base: $font-size-base) {
@IF not unitless($pxval) {
$pxval: strip-units($pxval);
}
@IF not unitless($base) {
$base: strip-units($base);
}
@Return ($pxval / $base) * 1em;
}
/*============================================================================
Strips the unit from a number.
@param {Number (With Unit)} $value
@example scss - Usage
$dimension: strip-units(10em);
@example css - CSS Output
$dimension: 10;
@Return {Number (Unitless)}
based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_strip-units.scss
====================================================
Hey @Alett_Lewis
Here is a snippet of my <Theme.css> until line 88. Is does not quite coincide with your output.
Any other ideas?
__________________________________________________________________________
@charset "UTF-8";
/*============================================================================
Debut | Built with Shopify Slate
Some things to know about this file:
- Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use native CSS/Sass @imports in this file without a build script
==============================================================================*/
/*================ SASS HELPERS ================*/
/*================ #Mixins ================*/
/*============================================================================
Prefix mixin for generating vendor prefixes.
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
Usage:
// Input:
.element {
@include prefix(transform, scale(1), ms webkit spec);
}
// Output:
.element {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
==============================================================================*/
/*================ Media Query Mixin ================*/
/*================ Responsive Show/Hide Helper ================*/
/*================ Responsive Text Alignment Helper ================*/
/*============================================================================
Convert pixels (unitless) to ems
eg. for a relational value of 12px write calc-font-size(12) when the parent is 16px
if the parent is another value say 24px write calc-font-size(12, 24)
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss
==============================================================================*/
/*============================================================================
Flexbox prefix mixins from Bourbon
https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss
==============================================================================*/
/*================ VARIABLES ================*/
/*============================================================================
Grid Breakpoints and Class Names
- Do not change the variable names
- Breakpoint pixel values are used in the window.theme.breakpoints object
==============================================================================*/
/*============================================================================
Generate breakpoint-specific column widths and push classes
- Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up);
- Default is no push classes
==============================================================================*/
/*================ Color Variables ================*/
/*================ Sizing Variables ================*/
/*================ Footer Variables ================*/
/*================ Z-Index ================*/
/*================ SVG ================*/
/*================ Drawers ================*/
/*================ Hero Slider ================*/
/*================ Typography ================*/
/*================ Gift Cards ================*/
/*================ Z-index ================*/
/*================ Product video ================*/
/*================ Image placeholder ================*/
/*================ VENDOR ================*/
/*============================================================================
Slick Slider 1.6.0
- If upgrading Slick's styles, use the following variables/functions
instead of the slick defaults (from slick-theme.scss)
- This file includes default slick.scss styles (at Slick Slider SCSS)
and slick-theme.scss (at Slick Slider Theme). Upgrade each area individually.
- Remove `outline: none` from `.slick-dots li button`
==============================================================================*/
/*================ Slick Slider SCSS ================*/
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }
Fair enough, but what I wanted to know or at least understand is why I do not have<theme.css.liquid> in my Assets folder. Clearly, other people using the latest version of the Debut theme can find this file. Am I experiencing a bug? I am sure others, who don't have any experience in CSS might have the same issue and would benefit from having a clear explanation. Anyway, thanks again @Alett_Lewis.
User | Count |
---|---|
731 | |
141 | |
101 | |
64 | |
36 |