Remove table borders and center align td's in Supply theme on homepage and product pages

Solved
VicVanSkyhawk
Tourist
3 0 2

Hi,

 

I'm sure this has to be covered here somewhere since it's such a basic thing but I can't find anything that works so, any instruction would be much appreciated:

I made a hard coded html table on my homepage (will add it to product pages also) with a custom html section.

  1. I can not get the border to disappear.
  2. I can't get the contents of the <td>s to center align

Before I spend 3 hours trying to find out what to change in the backend, can someone help me out with an easy way to override the template css?

I'm using supply if that matters.

Cheers,

Victoria

(halloweenglowmasks.myshopify.com)

 

Accepted Solution (1)

Accepted Solutions
Natztech
Shopify Partner
2230 564 1363

This is an accepted solution.

hello @VicVanSkyhawk 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

  #shopify-section-1632781800b1cef4b3 tr  td, #shopify-section-1632781800b1cef4b3 th{
 border: transparent;
 text-align: center !important;
}

 

View solution in original post

Replies 5 (5)
PaulNewton
Shopify Partner
3357 215 642

I'm sure this has to be covered here somewhere since it's such a basic thing but I can't find anything that works so,


Basic doesn't mean others have done the exact specific thing.

You didn't reference anything specific, are you talking about 'secure checkout' , 'customer support' images?

 

Try the following,

Always backup themes before changing code

Add an ID to your table so this does not effect EVERY other table on the site

 

<tbody>

 

becomes

 

<tbody id="trust_signal_badges">

 

 

Add the following CSS style tag to your tables custom code area, or extract the css to the bottom of your theme.scss.liquid without the <style></style> tags

 

<style>
table#trust_signal_badges td {
    border: none;
    text-aling: center;
}
table#trust_signal_badges td img {
    display: inline;
}
</style>

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
dmwwebartisan
Shopify Partner
9731 2224 3052

@VicVanSkyhawk 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

#shopify-section-1632781800b1cef4b3 td, #shopify-section-1632781800b1cef4b3 th{
border: 0px !important;
text-align: center !important;
}

Hope this works.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Natztech
Shopify Partner
2230 564 1363

This is an accepted solution.

hello @VicVanSkyhawk 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

  #shopify-section-1632781800b1cef4b3 tr  td, #shopify-section-1632781800b1cef4b3 th{
 border: transparent;
 text-align: center !important;
}

 

View solution in original post

VicVanSkyhawk
Tourist
3 0 2

@paul I really appreciate your help!

I put the code you supplied in the tbody and the css file. That didn't work. Then I just went ahead and put the style directly in the custom html field in the homepage (btw yes you were right, it is the table with the trust badges) but it's not working. I wonder should I be using different syntax. I changed the ID for the tag (picked up the align/aling typo in the original code you supplied so it wasn't that)

It's been a decade since I messed with css/html but I'm wondering is it the syntax. Should I be using .inserttagname instead of #instertagname. I guess I'm going to have to get more fluent again. Is there a pagebuilder you can recommend?