Need CSS for table background & border

VerbCreative · ‎11-13-2024

Hi there

I have added a table into my page, but it automatically adds a background color to one side and a border around that cell, as well as at the bottom - is there code to get rid of it? I just need a transparent background and no border.

The page is here: https://mathimaginefoundation.ca/pages/our-impact

Thanks!

namphan · ‎11-13-2024

Hi @VerbCreative,

Please change all code:

{% if page.handle == 'our-impact' %}
    <style>
      .page-content .rte table tr td {
        border: none !important;
        background: transparent !important;
      }
    </style>
{% endif %}

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

namphan · ‎11-13-2024

Hi @VerbCreative,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

#shopify-section-page-heading-image-1 {
    display: none !important;
}

#shopify-section-page-heading-image-1 + div .page-content .rte table tr td {
    border: none !important;
}

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

VerbCreative · ‎11-13-2024

Thanks! Just to clarify - will that change all tables throughout the site, since I am amending the theme? I only need to change the table on this page...

namphan · ‎11-13-2024

Hi @VerbCreative,

Please go to Actions > Edit code > layout > theme.liquid file and add the code before the </head> tag:

{% if page.handle == 'our-impact' %}
    <style>
      #shopify-section-page-heading-image-1 {
        display: none !important;
      }
      #shopify-section-page-heading-image-1 + div .page-content .rte table tr td {
        border: none !important;
      }
    </style>
{% endif %}

The code will only work for this page and everything displays fine.

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

VerbCreative · ‎11-13-2024

That worked for removing the border on the table, but it didn't remove the purple background in the table; it removed the background on the page itself instead....

namphan · ‎11-13-2024

Hi @VerbCreative,

Please change all code:

{% if page.handle == 'our-impact' %}
    <style>
      .page-content .rte table tr td {
        border: none !important;
        background: transparent !important;
      }
    </style>
{% endif %}

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

VerbCreative · ‎11-13-2024

That worked perfectly! Thank you very much 🙂

namphan · ‎11-13-2024

Hi @VerbCreative,

You're welcome and happy to help you 😊

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

akshay_bhatt · ‎11-13-2024

Hi @VerbCreative ,

To remove the background and borders from your table:

Edit your theme's CSS:
- Go to Online Store > Themes > Edit code and open themes.css.liquid or styles.css.liquid.
Add this CSS:

/* Remove background and borders from the table */
.page-content table {
    background-color: transparent !important;
    border: none !important;
}

/* Remove cell borders and background for each cell */
.page-content table td, .page-content table th {
    background-color: transparent !important;
    border: none !important;
}

save and refresh.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

- Need a Shopify Specialist?
- Custom Design | Advanced Coding | Store Modifications
Email us

VerbCreative · ‎11-13-2024

Would this only affect this one page, or all pages? I need it to just affect this page 🙂

Mehran_Ali · ‎11-13-2024

Hi @VerbCreative
Just follow these steps
1) Go to the Online Store
2) Edit Code
3) Find theme.css / base.css
Past the CSS code their

.page-content .rte table tr td { background: transparent !important; border: 0;}

-If this solution helps you, kindly LIKE THIS REPLY and MARK AS A SOLUTION OR

Buying Me A Coffee.

-If you need an expert Shopify developer for customization and development, feel free to contact me.

Email: Mehran.ali5300@gmail.com

WhatsApp: +92 343 0211536

VerbCreative · ‎11-13-2024

Thanks! Just to clarify - will that change all tables throughout the site, since I am amending the theme?

Mehran_Ali · ‎11-13-2024

OK, then you should add a code to your theme.liquid file first
Step 1: Edit Theme Files

In Shopify Admin, go to Online Store > Themes.
Find your theme and click Actions > Edit Code.
Open the file where the <body> tag is defined. This is often in theme.liquid (in the Layout folder).

Step 2: Add Condition to the <body> Tag

In theme.liquid, locate the <body> tag. Then, add a conditional check before the body tag closes bracket " > "

{% if template == "page" and page.handle == "our-impact" %} page_title="our-impact-class"{% endif %}

This code will add an attribute in your specific page as ' page_title="our-impact" '

Step 3: Add Css

Search for theme.css / base.css file
Past this CSS their

body[page_title="our-impact"] .page-content .rte table tr td { background: transparent !important; border: 0;}

I hope this will work It will use this CSS to remove borders from the specific page only

If this works fine otherwise just share your collaboration code with me I will do that for you

If This Solution Word Kindly Like this And Mark it as a Solution or Buy Me a Coffee

-If this solution helps you, kindly LIKE THIS REPLY and MARK AS A SOLUTION OR

Buying Me A Coffee.

-If you need an expert Shopify developer for customization and development, feel free to contact me.

Email: Mehran.ali5300@gmail.com

WhatsApp: +92 343 0211536

DaisyVo · ‎11-13-2024

Hi @VerbCreative

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

.scrollable-wrapper * {
    border: none !important;
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

Need CSS for table background & border