Trying to add a custom CSS stylesheet to Empire theme — and failing miserably

Solved
ForgedFlare
Tourist
4 1 0

Hello, my website is www.forgedflare.com.

It uses the Empire theme.

Basically, all I want to do is create a custom stylesheet that is recognized by the theme and I have tried various methods to achieve this — with varying degrees of success. Some of the targeted elements are styled correctly while some of my styles get ignored completely. 

Here is what I've done so far:

  1. Created a stylesheet called theme-custom.css.liquid
  2. Referenced that stylesheet in theme.liquid as "theme-custom.css". 

Here are the screenshots showing the implementation:

theme.liquidtheme.liquidCSS StylesheetCSS Stylesheet

The site is sporadic in what it recognizes and when. For instance, it recognized all of these changes at first and then about 30 minutes later, the only thing it recognizes is the h4 font change for the yellow signup box.

Yesterday evening, it recognized the font change for the footer email signup, but today it stopped working.

I'm not new to front end development (but am new to PHP), but this one has me scratching my head as to what in the world I've done wrong. I'd be super grateful for some advice!

 

0 Likes

Hi,

As I can see your custom css file is included properly but may be your changes not reflected on frontend

oscprofessional_0-1612766451115.png

Can you explain your changes so that I can solve your issue

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
ForgedFlare
Tourist
4 1 0

Hi @oscprofessional !

Here is my main issue.

I tried to target the div called "shopify-section-161263732047386f0c" around the "Welcome to our creative space." section.

I tried to change the background of this area to #e3e0db and add the custom padding to it, but it's just not recognizing it. Well, it DID recognize it, but then it randomly stopped recognizing it about 30 minutes later. 

This is the code I have for that section in my CSS:

#shopify-section-161263732047386f0c {
  background:#e3e0db !important;
  padding-top:20px !important;
  padding-bottom:40px !important;
}
0 Likes
suyash1
Shopify Partner
1994 204 304

@ForgedFlare - one reason might be that shopify url is not able to find your custom css file, can you try by setting complete URL?

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
ForgedFlare
Tourist
4 1 0

@suyash1 Thanks for the suggestion — just tried and it didn't work.  

I wouldn't think it's that though because some of the styles are being read just fine — and yesterday it was reading the background color just fine, but then suddenly stopped working about 30 minutes later — which I've never experienced before. It's really weird.

0 Likes
ForgedFlare
Tourist
4 1 0

This is an accepted solution.

I was able to figure out a solution. It appears maybe it's a bug of some sort.

I had to add a completely blank id in my stylesheet right before the id that has all the updated information. If I remove that first one, it breaks for whatever reason. 

 

#shopify-section-161263732047386f0c {
 
}
 
#shopify-section-161263732047386f0c {
background-color:#f1f0ed;
padding-top:20px;
padding-bottom:40px;
margin-top: 100px;  
}
0 Likes