Need help please with timber.scss.liquid code tweak

New Member
6 0 0

Hi, I am new to forum and new to Shopify.
I am trying to tweak some stuff in Minimal basic theme via timber.scss.liquid. I do not know how to truly code and only learned simple html/css coding to tweak past webshops on other platforms by mostly using Inspect Element, testing codes, W3schools etc. This is my first time looking at .liquid code, and I attempted to look up some stuff that seemed like simple tweaks to me. At current, I am just trying to clean up some margin/padding spacing issues visually within Minimal theme. Like having a little too much padding around site header logo wrapper (top/bottom) etc. I am going to attach pics I took of what I am trying to find in timber.scss in Assests file. I scrolled and scrolled and it seems to be a hidden element or code (again, I am not skilled in code). If someone could help me locate the code so that I could change the 30px in the code please. After that I will have to see if I can do anything about the space below it.

I am also attaching a pic I took to show an png image file I added to the theme via custom html. What I would really like to do if possible, is have the image of the Eyescream text, show up below my logo image and above the nav. menu links. I only want it to show up on this home page and all other pages would just have my logo header image. If someone could point me in the right direction of how to add html of that Eyescream text image to show up just below my logo, that would be great. (I would just upload my logo that includes the eyeball imagery and the Eyescream text, except i do not desire that on all pages as that image would be kind of big for what I desire, and hopefully once you got there you wouldn't need to be reminded every page of my name since also in custom url). Thank you in advance.

p.s. please note, if I get an answer here, I may be deleting the images off of Shopify, as I didn't realize I couldn't upload an image directly here and won't need them in my shop after. Also of note, the photo image on my webpage is purely for testing design phase, as I know it looks redundant to have eye logo with text And photo of eye logo with text haha. Thanks again.

First image, is the code I am trying to find within the Timber file.

The image below, shows that I could not find the code from above image and assumed it was somehow hidden somewhere. This was the only main section I could find with .site-header code

I think this is me already having moved the header logo padding on the above portion with the Inspect element/style editor and not on the live site. Also shows the large space below logo between menu where I would prefer the Eyescream text image to be placed instead (I will most likely be making my text image a bit smaller in height if that occurs).


~Ruby~

0 Likes
New Member
6 0 0

Another couple views of the code (just in case).

 

0 Likes
New Member
6 0 0

While I am here, anyone know how to move my menu above my header logo image and make it Fixed upon scroll in Minimal theme? Thanks again in advance.

0 Likes
Shopify Partner
2536 31 562

Hi Ruby,

you're on the right track and looking at the right code. Your problem is that the file in the theme is not a CSS, but SCSS code (where it is possible to define and then reuse variables, like $gutter /which is defined as 30px/, create macros, etc), but in your browser you see a compiled version of it (SCSS->CSS). 

But the beauty of CSS is that rules are applied in order of appearance and if there are two rules applying to the same element the one furter down in the file will win (i am a bit oversimplifying here). So, if  there is the rule 

.site-header {
  padding: 30px 0;
}

you can add a similar rule at the bottom of the file

/* reduce the vertical padding on the header */
.site-header {
  padding: 20px 0;
}

and it will override the first one.

I prefer this way of making changes-- overriding instead of editing existing rules -- this allows keeping them in one place and makes it easier to track your changes. And do not skip on comments.

Another important point -- there is no version tracking on Assets, so do not forget to make copies of the theme before editing.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
6 0 0

Wow, thank you for your response it was very helpful (insightful) Tim. I will look into trying to tweak stuff that way (by overriding instead editing existing rules), as what you outlined makes sense, and always good to have visuals to drive the idea home. Thanks again.

 

0 Likes
New Member
6 0 0

P.s. I wanted to quickly ask, is there an easy way to download the theme code files in Shopify as a backup? Or do I just resort to what I am doing now (copy/paste into another program to save the info)? Just want to make sure I am not missing a download link per code file, per theme. Thanks in advance.

0 Likes
Shopify Partner
2536 31 562

If you press Actions button, there are two important options: "Duplicate" -- to create a theme copy in your store and "Download theme file" to download a Zip file containing all theme files.

Also, except for the Assets, there is an option to revert your liquid file to the previous versions (by clicking "Older versions" link next to the name of the open file). Limited to last 30 days, if I am not mistaken...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Highlighted
New Member
1 0 0

I'm getting this error and I'm not sure who to fix it.

 

It looks like there is an error in your theme.

Try assets/timber.scss.liquid in the template editor to fix the error below:

Invalid CSS after "...ecoration: none": expected "{", was ";" at 2179

0 Likes