Making HTML code in product discription shop wide?

Solved
PB79
Explorer
48 1 10

Hi guys,

sorry for my bad english. i have a hard time explaining my problem.

I got the following html code in every product description:

<style type="text/css"><!--
.tg {border-collapse:collapse;border-color:#ccc;border-spacing:0;}
.tg td{background-color:#fff;border-color:#ccc;border-style:solid;border-width:0px;color:#333;
font-family:Open Sans;font-size:14px;overflow:hidden;padding:
3px;word-break:normal;}
.tg th{background-color:#f0f0f0;border-color:#ccc;border-style:solid;border-width:0px;color:#333;
font-family:Open Sans;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-lboi{border-color:inherit;text-align:left;vertical-align:middle}
.tg .tg-d459{background-color:#f4f4f4;border-color:inherit;text-align:left;vertical-align:middle}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}
--></style>

i want to make that setting "global on my theme" so if i need to make changes i dont have to go through like 4k products.

i used that tool to clean up the code: https://html-css-js.com/css/editor/

<style type="text/css"><!--.tg {
border-collapse:collapse;
border-color:#ccc;
border-spacing:0;
}
.tg td{
background-color:#fff;
border-color:#ccc;
border-style:solid;
border-width:0px;
color:#333;
font-family:Open Sans;
font-size:14px;
overflow:hidden;
padding:3px;
word-break:normal;
}
.tg th{
background-color:#f0f0f0;
border-color:#ccc;
border-style:solid;
border-width:0px;
color:#333;
font-family:Open Sans;
font-size:14px;
font-weight:normal;
overflow:hidden;
padding:10px 5px;
word-break:normal;
}
.tg .tg-lboi{
border-color:inherit;
text-align:left;
vertical-align:middle
}
.tg .tg-d459{
background-color:#f4f4f4;
border-color:inherit;
text-align:left;
vertical-align:middle
}
@media screen and (max-width: 767px) {
.tg {
width: auto !important;
}
.tg col {
width: auto !important;
}
.tg-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: auto 0px;
}
--></style>

But now where to put it in the theme files so its going to affect every product?

I would be very glad if someone could help me with this.

 

Have a nice day and take care

Phil

Can someone give me a hand with this?

0 Likes
taruunn
Excursionist
19 5 6

This is an accepted solution.

open your theme code & find style.css.scss or theme.css.scss or any .scss file & paste this 

 

.tg {
  border-collapse:collapse;
  border-color:#ccc;
  border-spacing:0;
}
.tg td{
  background-color:#fff;
  border-color:#ccc;
  border-style:solid;
  border-width:0px;
  color:#333;
  font-family:Open Sans;
  font-size:14px;
  overflow:hidden;
  padding:3px;
  word-break:normal;
}
.tg th{
  background-color:#f0f0f0;
  border-color:#ccc;
  border-style:solid;
  border-width:0px;
  color:#333;
  font-family:Open Sans;
  font-size:14px;
  font-weight:normal;
  overflow:hidden;
  padding:10px 5px;
  word-break:normal;
}
.tg .tg-lboi{
  border-color:inherit;
  text-align:left;
  vertical-align:middle
}
.tg .tg-d459{
  background-color:#f4f4f4;
  border-color:inherit;
  text-align:left;
  vertical-align:middle
}
@media screen and (max-width767px) {
  .tg {
    widthauto !important;
  }
  .tg col {
    widthauto !important;
  }
  .tg-wrap {
    overflow-xauto;
    -webkit-overflow-scrollingtouch;
    marginauto 0px;
  }
}
PB79
Explorer
48 1 10

@taruunn 

i just put the code in my style.css.scss and it seems to work flawlessly

Thank you !

0 Likes
taruunn
Excursionist
19 5 6

Thank you, in the future, if you need any help in Shopify work, any custom, work, or anything you can email me: Tarun.rajpurohit@coozmoo.com