How to OVERRIDE an app's css?

Highlighted
New Member
2 0 0

Hi I am using Ali Review app on my site and I just dong like the looks of it.  The customer avatar is huge and the reviewed pics are small.  It should really be the other way around.  Needless to say, the css is imported by the app.  I have already added the following css to the bottom of my theme's style.css but the orignal css still persists.

Following is the imported css code

#shopify-ali-review .alireview-thumbnail img.alireview-avatar {
    width: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
}

 

which I would like to change it to

 

#shopify-ali-review .alireview-thumbnail img.alireview-avatar {
    width: 40px;
    border-radius: 50%;
    margin-bottom: 10px;
}

 

Thanks in advice

KB

0 Likes
Highlighted
Shopify Expert
10007 116 1816

You'll want to post a link to your store so the forum members can see the site in action. It's hard to give CSS advice without literally seeing the existing CSS you've got in place.

Post the link and lets go from there.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
3 0 0

Hi Ricky!

Dave here, was passing through and saw your question:

I have already added the following css to the bottom of my theme's style.css but the orignal css still persists.
 

Without being able to see what's happening, looking at your CSS it's not really overriding the default.  Try adding the !Important tag like this:

 

#shopify-ali-review .alireview-thumbnail img.alireview-avatar {
    width: 40px !important;
    border-radius: 50%;
    margin-bottom: 10px;
}

Let us know if that helped!

dave

0 Likes
Highlighted
Tourist
5 0 0

@DrJBurrito, it doesn't help unfortunately.  I'm also trying to override styles from a plugin's external css and including both !important and added parent selectors to increase specificity and it didn't work. Shopify is so annoying sometimes in that workflow within it is so different from standard dev. 

0 Likes