php js css php js css

Changes

Changes to Design: Design #1

219516
Today 1:53am
Guevarra, Kim
Modified design
219558
Today 2:02am
Wilkie, Natasha
Modified design
Html:
Id:
19
19
Deleted Datetime:

															

														
Type:
web
web
Title:
Design #1
Design #1
Css:
/* Base Anchor Styles */
a:hover,
a:focus {
color: #d2042d;
text-decoration: none;
}

/* Form Styles */
.formRow {
background: none !important;
padding: 0px 10px 10px 0px;
}

label {
font-weight: 400;
}

form#searchform .formRowColWide {
position: relative;
}

form#searchform input {
border: 2px solid #d2042d;
border-radius: 0px !important;
}

#search_popup_form .formRow {
padding: 20px 0;
}

#search_popup_form button[type="submit"] {
position: absolute;
right: 0;
top: 50%;
transform: perspective(1px) translateY(-50%);
background: #d2042d;
border-radius: 0;
color: #ffffff;
padding: 8px;
margin: 0;
font-size: small;
}

button[type="submit"] {
font-size: 1rem !important;
text-transform: uppercase;
color: #ffffff;
text-align: center;
background-color: #d90f31;
border: 1px solid #d90f31;
border-radius: 0px;
padding: 10px;
letter-spacing: 0;
}

button[type="submit"]:focus
{
padding: 10px;
}

.s8-templates-button-classic .s8-templates-button-container {
font-size: 1rem !important;
text-transform: uppercase;
}

/* Header Styles */
.s8-templatesHeader-logo-image {
margin-left: 1rem;
}

.s8-templatesHeader-slim .s8-templatesHeader-featuredContainer {
order: 4;
}

.s8-templatesHeader-slim .s8-templatesHeader-navigation-container {
order: 2;
}

.s8-templatesHeader-container {
box-shadow: 1px 2px 20px rgba(51, 51, 51, 0.05);
}

/* Navigation Styles */
.s8-navigationPrimary > li > a {
font-size: small;
text-transform: uppercase;
font-weight: 500;
}

.s8-navigationPrimary > li:hover {
background: transparent !important;
}

.s8-navigationPrimary > li.s8-navigationPrimaryItem--active > a {
color: #d2042d;
}

.s8-navigationPrimary ul {
background: #ffffff;
border-top: 0 solid #333;
}

.s8-navigationPrimary ul li a {
color: #333333 !important;
text-transform: uppercase;
font-size: small;
position: relative;
transition: 0.2s ease;
}

.s8-navigationPrimary li ul li a:hover {
color: #d2042d !important;
}

.s8-navigationPrimary li ul li a::after {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #d2042d;
left: -5px;
top: 48%;
opacity: 0;
transition: 0.2s;
}

.s8-navigationPrimary li ul li a:hover::after,
.s8-navigationPrimary ul li.s8-navigationPrimaryItem--active a::after {
opacity: 1;
}

.s8-navigationPrimary li ul li.s8-navigationPrimary-hasChildren > a::after,
.s8-navigationPrimary-vertical li.s8-navigationPrimary-hasChildren > a::after,
.s8-navigationPrimary-mobileOpen li.s8-navigationPrimary-hasChildren > a::after {
content: "";
}

.s8-navigationPrimary li.s8-navigationPrimary-hasChildren > a::after {
border: solid #d2042d;
border-width: 0 1.5px 1.5px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
content: "";
margin-top: -7px;
margin-left: 10px;
transition: all 0.5s;
}

.s8-navigationPrimary > li.s8-navigationPrimary-hasChildren:hover > a::after {
border-color: #d2042d;
margin-top: 0px;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}

.s8-navigationPrimary ul li:hover a,
.s8-navigationPrimary ul li.s8-navigationPrimaryItem--active a {
transform: translateX(10px);
}

/* Data Table */
.oncord-dataTable {
overflow-x: auto;
}

/* FAQ Styles */
.s8-faq__heading {
font-size: 1.2rem;
line-height: 1.8rem;
width: 98%;
margin-top: 0;
}

.s8-faq__labelContainer {
background-color: transparent !important;
border-radius: 0;
border-bottom: 1px solid rgb(51 51 51 / 14%);
padding-bottom: 20px;
}

.s8-faq__text {
margin-bottom: 0px;
}

/* Footer Styles */
footer a {
color: #333;
}

footer ul {
list-style: none;
padding: 0;
margin: 0;
}

footer ul li {
line-height: 2.8rem;
}

footer .footer_contact_section a {
color: #fff !important;
}

footer .footer_copyright a {
color: #333 !important;
}

footer .s8-templates-socialLinks a {
color: #d2042d !important;
}

dialogbox#login_popup
{
padding: 0 !important;
}

/* Responsive Styles */
@media (min-width: 768px) {
.s8-templates-row-container:not(.s8-templates-row-container .s8-templates-row-container) {
gap: 3rem;
}
}

@media (max-width: 767px) {
form#searchform button[type="submit"] {
position: unset;
margin: 10px 0;
width: 100%;
}
}

.s8-templates-card__cardsize-3
{
width: 416px;
}

.s8-templates-card.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-image
{
padding: 0;
margin: 0;
height: 200px;
}

.s8-templates-card.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-accent-hr
{
margin: 3rem 2rem;
}

.s8-templates-card.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-content
{
padding: 0;
margin: 2rem;
margin-top: 0;
}

.s8-templates-card.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-accent-hr
{
background-color: #d2042d;
}

.s8-templates-card[style*="box-shadow: 0px 3px 15px rgba(0,0,0,0.2)"] {
box-shadow: 0px 3px 20px rgb(0 0 0 / 10%) !important;
}

.event-list-boxy
{
border-radius: 0px;
}

.fieldset
{
border: 1px solid hwb(356.13deg 19.61% 19.61% / 10%);
margin-bottom: 2rem;
padding-top: 3rem;
position: relative;
padding: 3rem 2rem 1rem;
}

.fieldset.accent-bg
{
background-color: rgb(250, 237, 237);
}

.fieldset h4
{
background: #d90f31;
display: inline-block;
color: #fff;
padding: 10px 3rem;
position: absolute;
top: -20px;
left: -10px;
font-weight: 500;
}

.fieldset h4:after
{
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 5px 0;
border-color: transparent #d90f31 transparent transparent;
bottom: -5px;
left: 1px;
}

@media(min-width: 700px)
{
.custom-address oncord-address
{
display: flex;
flex-wrap: wrap;
}

.custom-address .formRow
{
flex: 1 1 auto;
}

.custom-address .formRow:first-child
{
flex: 1 1 100%;
}
}

fieldset h4 {
background: #720c1c;
color: #fff;
display: inline-block;
font-weight: 500;
left: -10px;
padding: 10px 3rem;
position: absolute;
top: -20px;
}

fieldset h4:after {
border-color: transparent #720c1c transparent transparent;
border-style: solid;
border-width: 0 9px 5px 0;
bottom: -5px;
content: "";
height: 0;
left: 1px;
position: absolute;
width: 0;
}

/* --- General Elements --- */
span.template-selectedProduct {}

select {
width: 100% !important;
}

.product-price {
font-size: 1.432rem;
}

/* --- Grid Container --- */
.template-productFlexContainer {
display: grid !important;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1.5rem;
padding: 0;
margin: 0;
}

/* --- Radio Button Group --- */
.s8-radiobuttongroup {
display: block !important;
}

/* --- Product Flex Card --- */
.template-productFlex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #333333;
color: #fff;
text-align: center;
min-height: 230px;
padding: 25px;
position: relative;
}

.template-productFlex .s8-radiobutton-container {
opacity: 1 !important;
min-height: unset !important;
min-width: unset !important;
}

.template-productFlex .s8-radiobutton-container,
.template-productFlex input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
opacity: 0;
}

/* --- Radio Button Appearance --- */
.template-productFlex label.s8-radiobutton-container input ~ .s8-radiobutton {
border: none;
}

.template-productFlex label.s8-radiobutton-container input:checked ~ .s8-radiobutton:before {
opacity: 0;
}

.template-productFlex.selected {
background: #d90e30;
}

/* --- Quantity Counter --- */
.counter {
position: absolute;
right: 0;
bottom: -67px;
}

.counter .formRowCol1 {
display: none;
min-width: 100px;
width: auto;
}

.counter .formRowLabel {
color: #989898;
font-size: 2rem;
letter-spacing: 2px;
padding-top: 0.8rem;
text-transform: uppercase;
}

.counter .spinBox > input {
display: none !important;
}

.counter .spinBoxUp,
.counter .spinBoxDown {
background: #720c1c;
color: #fff;
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
position: static;
top: 0;
bottom: 0;
right: 0;
opacity: 1;
}

.counter .spinBoxUp:before,
.counter .spinBoxDown:before {
content: '+';
font-size: 1.2rem;
position: static;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: none;
transform: none;
}

.counter .spinBoxDown:before {
content: '-' !important;
}

select
{
width: 100% !important;
background-color: transparent;
border: 0;
border-bottom: 2px solid currentColor;
border-radius: 0;
height: 3.1em;
}

blockquote
{
background-color: #efefef;
border-left: 5px solid #dc1836;
padding: 1rem 1.5rem;
margin: 0;
}
/* Base Anchor Styles */
a:hover,
a:focus {
color: #d2042d;
text-decoration: none;
}

/* Form Styles */
.formRow {
background: none !important;
padding: 0px 10px 10px 0px;
}

label {
font-weight: 400;
}

form#searchform .formRowColWide {
position: relative;
}

form#searchform input {
border: 2px solid #d2042d;
border-radius: 0px !important;
}

#search_popup_form .formRow {
padding: 20px 0;
}

#search_popup_form button[type="submit"] {
position: absolute;
right: 0;
top: 50%;
transform: perspective(1px) translateY(-50%);
background: #d2042d;
border-radius: 0;
color: #ffffff;
padding: 8px;
margin: 0;
font-size: small;
}

button[type="submit"] {
font-size: 1rem !important;
text-transform: uppercase;
color: #ffffff;
text-align: center;
background-color: #d90f31;
border: 1px solid #d90f31;
border-radius: 0px;
padding: 10px;
letter-spacing: 0;
}

button[type="submit"]:focus
{
padding: 10px;
}

.s8-templates-button-classic .s8-templates-button-container {
font-size: 1rem !important;
text-transform: uppercase;
}

/* Header Styles */
.s8-templatesHeader-logo-image {
margin-left: 1rem;
}

.s8-templatesHeader-slim .s8-templatesHeader-featuredContainer {
order: 4;
}

.s8-templatesHeader-slim .s8-templatesHeader-navigation-container {
order: 2;
}

.s8-templatesHeader-container {
box-shadow: 1px 2px 20px rgba(51, 51, 51, 0.05);
}

/* Navigation Styles */
.s8-navigationPrimary > li > a {
font-size: small;
text-transform: uppercase;
font-weight: 500;
}

.s8-navigationPrimary > li:hover {
background: transparent !important;
}

.s8-navigationPrimary > li.s8-navigationPrimaryItem--active > a {
color: #d2042d;
}

.s8-navigationPrimary ul {
background: #ffffff;
border-top: 0 solid #333;
}

.s8-navigationPrimary ul li a {
color: #333333 !important;
text-transform: uppercase;
font-size: small;
position: relative;
transition: 0.2s ease;
}

.s8-navigationPrimary li ul li a:hover {
color: #d2042d !important;
}

.s8-navigationPrimary li ul li a::after {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #d2042d;
left: -5px;
top: 48%;
opacity: 0;
transition: 0.2s;
}

.s8-navigationPrimary li ul li a:hover::after,
.s8-navigationPrimary ul li.s8-navigationPrimaryItem--active a::after {
opacity: 1;
}

.s8-navigationPrimary li ul li.s8-navigationPrimary-hasChildren > a::after,
.s8-navigationPrimary-vertical li.s8-navigationPrimary-hasChildren > a::after,
.s8-navigationPrimary-mobileOpen li.s8-navigationPrimary-hasChildren > a::after {
content: "";
}

.s8-navigationPrimary li.s8-navigationPrimary-hasChildren > a::after {
border: solid #d2042d;
border-width: 0 1.5px 1.5px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
content: "";
margin-top: -7px;
margin-left: 10px;
transition: all 0.5s;
}

.s8-navigationPrimary > li.s8-navigationPrimary-hasChildren:hover > a::after {
border-color: #d2042d;
margin-top: 0px;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}

.s8-navigationPrimary ul li:hover a,
.s8-navigationPrimary ul li.s8-navigationPrimaryItem--active a {
transform: translateX(10px);
}

/* Data Table */
.oncord-dataTable {
overflow-x: auto;
}

/* FAQ Styles */
.s8-faq__heading {
font-size: 1.2rem;
line-height: 1.8rem;
width: 98%;
margin-top: 0;
}

.s8-faq__labelContainer {
background-color: transparent !important;
border-radius: 0;
border-bottom: 1px solid rgb(51 51 51 / 14%);
padding-bottom: 20px;
}

.s8-faq__text {
margin-bottom: 0px;
}

/* Footer Styles */
footer a {
color: #333;
}

footer ul {
list-style: none;
padding: 0;
margin: 0;
}

footer ul li {
line-height: 2.8rem;
}

footer .footer_contact_section a {
color: #fff !important;
}

footer .footer_copyright a {
color: #333 !important;
}

footer .s8-templates-socialLinks a {
color: #d2042d !important;
}

dialogbox#login_popup
{
padding: 0 !important;
}

/* Responsive Styles */
@media (min-width: 768px) {
.s8-templates-row-container:not(.s8-templates-row-container .s8-templates-row-container) {
gap: 3rem;
}
}

@media (max-width: 767px) {
form#searchform button[type="submit"] {
position: unset;
margin: 10px 0;
width: 100%;
}
}

.s8-templates-card__cardsize-3
{
width: 416px;
}

.s8-templates-card.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-image
{
padding: 0;
margin: 0;
height: 200px;
}

.s8-templates-card.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-accent-hr
{
margin: 3rem 2rem;
}

.s8-templates-card.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-content
{
padding: 0;
margin: 2rem;
margin-top: 0;
}

.s8-templates-card.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-accent-hr
{
background-color: #d2042d;
}

.s8-templates-card[style*="box-shadow: 0px 3px 15px rgba(0,0,0,0.2)"] {
box-shadow: 0px 3px 20px rgb(0 0 0 / 10%) !important;
}

.event-list-boxy
{
border-radius: 0px;
}

.fieldset
{
border: 1px solid hwb(356.13deg 19.61% 19.61% / 10%);
margin-bottom: 2rem;
padding-top: 3rem;
position: relative;
padding: 3rem 2rem 1rem;
}

.fieldset.accent-bg
{
background-color: rgb(250, 237, 237);
}

.fieldset h4
{
background: #d90f31;
display: inline-block;
color: #fff;
padding: 10px 3rem;
position: absolute;
top: -20px;
left: -10px;
font-weight: 500;
}

.fieldset h4:after
{
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 5px 0;
border-color: transparent #d90f31 transparent transparent;
bottom: -5px;
left: 1px;
}

@media(min-width: 700px)
{
.custom-address oncord-address
{
display: flex;
flex-wrap: wrap;
}

.custom-address .formRow
{
flex: 1 1 auto;
}

.custom-address .formRow:first-child
{
flex: 1 1 100%;
}
}

fieldset h4 {
background: #720c1c;
color: #fff;
display: inline-block;
font-weight: 500;
left: -10px;
padding: 10px 3rem;
position: absolute;
top: -20px;
}

fieldset h4:after {
border-color: transparent #720c1c transparent transparent;
border-style: solid;
border-width: 0 9px 5px 0;
bottom: -5px;
content: "";
height: 0;
left: 1px;
position: absolute;
width: 0;
}

/* --- General Elements --- */
span.template-selectedProduct {}

select {
width: 100% !important;
}

.product-price {
font-size: 1.432rem;
}

/* --- Grid Container --- */
.template-productFlexContainer {
display: grid !important;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1.5rem;
padding: 0;
margin: 0;
}

/* --- Radio Button Group --- */
.s8-radiobuttongroup {
display: block !important;
}

/* --- Product Flex Card --- */
.template-productFlex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #333333;
color: #fff;
text-align: center;
min-height: 230px;
padding: 25px;
position: relative;
}

.template-productFlex .s8-radiobutton-container {
opacity: 1 !important;
min-height: unset !important;
min-width: unset !important;
}

.template-productFlex .s8-radiobutton-container,
.template-productFlex input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
opacity: 0;
}

/* --- Radio Button Appearance --- */
.template-productFlex label.s8-radiobutton-container input ~ .s8-radiobutton {
border: none;
}

.template-productFlex label.s8-radiobutton-container input:checked ~ .s8-radiobutton:before {
opacity: 0;
}

.template-productFlex.selected {
background: #d90e30;
}

/* --- Quantity Counter --- */
.counter {
position: absolute;
right: 0;
bottom: -67px;
}

.counter .formRowCol1 {
display: none;
min-width: 100px;
width: auto;
}

.counter .formRowLabel {
color: #989898;
font-size: 2rem;
letter-spacing: 2px;
padding-top: 0.8rem;
text-transform: uppercase;
}

.counter .spinBox > input {
display: none !important;
}

.counter .spinBoxUp,
.counter .spinBoxDown {
background: #720c1c;
color: #fff;
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
position: static;
top: 0;
bottom: 0;
right: 0;
opacity: 1;
}

.counter .spinBoxUp:before,
.counter .spinBoxDown:before {
content: '+';
font-size: 1.2rem;
position: static;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: none;
transform: none;
}

.counter .spinBoxDown:before {
content: '-' !important;
}

select
{
width: 100% !important;
background-color: transparent;
border: 0;
border-bottom: 2px solid currentColor;
border-radius: 0;
height: 3.1em;
}

blockquote
{
background-color: #efefef;
border-left: 5px solid #dc1836;
padding: 1rem 1.5rem;
margin: 0;
}
Js:
let observer = new MutationObserver(function () {
if ( document.querySelector('.sign-up')) {
const urlPath = document.querySelector('.sign-up a').getAttribute('href');
document.querySelector('.sign-up a').setAttribute('href', urlPath.replace('?login_popup_opened=1', ''))
}
});

// Start waiting for the element.
observer.observe(document, {
childList: true,
subtree: true
});
let observer = new MutationObserver(function () {
if ( document.querySelector('.sign-up')) {
const urlPath = document.querySelector('.sign-up a').getAttribute('href');
document.querySelector('.sign-up a').setAttribute('href', urlPath.replace('?login_popup_opened=1', ''))
}
});

// Start waiting for the element.
observer.observe(document, {
childList: true,
subtree: true
});
Php Source:

															

														
Mobile Function:
none
none
Mobile Value: