Custom codes no longer working in Shopify 2.0?

Technical Q&A
1

Hello I hope someone can help me figure out what to do. So I had codes on theme.css.liquid but they do not work on page specially the table properties it does not show the shaded table. Is it supposed to be added any place else or am I doing things wrong? Can you please provide me tips as I am really new at this.

/* Start Youtube Thin Script on product descriptions */

.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}

.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}

.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}

.youtube-player img:hover {
-webkit-filter: brightness(75%);
}

.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url(“//i.imgur.com/TxzC70f.png”) no-repeat;
cursor: pointer;
}

/* Stop Youtube Thin Script on prodcut descriptions */

/* Start Center tag */
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

/* Stop Center tag */

/* Start Hide Zero Reviews /
.spr-badge[data-rating=“0.0”] {
display: none;
visibility:hidden;
}
/ End Hide Zero Reviews */

/* Start Promo For Flash Sale */
.promo {
margin-top: 12px;
margin-bottom: 12px;
padding: 6px;
/background-color: #1a84c4;/
background-color: #004EA1;
/background-color: #0065A5;/
max-width: 100%;
}

.promo_1 {
color: #FFF;
padding: 8px 2px;
border: 1px dashed #FFF;
}
/* End Promo For Flash Sale */

/* Start Staded Table */

table{

margin-bottom:20px !important

}

table.shaded-table tr td{

border: solid #00ad00 !important;

}

table.shaded-table{

border-top: solid #00ad00 !important;

}

table.shaded-table tr td,table.shaded-table tr th{

padding:1px !important;

text-align:left !important;

}

table.shaded-table tr:nth-child(odd){

background-color:#b7d9f9 !important;
}
/* End Staded Table */

2

Check the classes in the html that those CSS rules apply to.

For example “.youtube-player” references html like this:

If your html changed, you’ll either have to rename the CSS rules or the html classes.

If you don’t know how to inspect code, this article will help: https://speedboostr.com/how-to-safely-edit-your-shopify-theme (look for the section “How to know what CSS code to change?”)

If you ever need a developer to handle code edits / features, etc feel free to reach out to my team at speedboostr.com/contact.