Responsive Classic Redesign Support thread

chadlly2003:

try this it wont impact any other pages
just add this to the very top of styleheet_zcustom.css

#loginBody #contentMainWrapper {
grid-template-columns:auto !important;
}

> 
> With OPC checkout what do you want it to look like?  Or what is the issue?

Nick,

I'm currently working on a CSS template for OPC that will look and function well right out of the box. I expect to have it finished by Sunday—possibly sooner.

Once it's complete, I'll upload it to GitHub and update the template accordingly.

After I’ve tested it on both mobile and desktop, I’ll send you the final CSS file. All you’ll need to do is paste it in, and that should resolve the issues you’ve been experiencing.

Awesome. Looking forward to it and thank you

Nick just a followup.

I finish the OPC checkout for the responsive classic redesign template. I just need to test on mobile and desktop. I will post your section which is a little different sometime on Sunday.

Than i will put it into the template so everyone can use. This will be as easy as plug and play.

chadlly2003:

Nick just a followup.

I finish the OPC checkout for the responsive classic redesign template. I just need to test on mobile and desktop. I will post your section which is a little different sometime on Sunday.

Than i will put it into the template so everyone can use. This will be as easy as plug and play.

How did the testing go?

Nick all is good. If you want to see a demo version of the OPC on the new redesign template you can just go to this linkhttp://www.zencartdemo.com/. Now that being said. Lets try adding the new css style sheet to your template and see what it does. It is supposed to look exactly like the demo. But you made a lot of changes so we may have to make some minor adjustments

File Name needs to be stylesheet_zcustom_opc.css
save this file to includes/templates/responsive_classic/css/stylesheet_zcustom_opc.css

i also uploaded the files to the github version as well. Let me know how it goes

/** loginBody **/

#loginOpcDefault h2 {
    font-size: 1.3rem;
    line-height: 25px;
    margin: 0;
    padding-bottom: 1rem;
}

#loginBody .opc-label {
    margin-bottom: 0.5rem;
    padding-top: 0px;
}

#loginOpcDefault .button_create_account:focus {
    border: solid 1px #AC171D !important
}

#loginOpcDefault .button_checkout {
    background: #8b008b;
    color: #fff;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;

}

#loginOpcDefault .button_checkout:hover {
    background: transparent;
    color: #8b008b;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;


}

#loginOpcDefault .opc-block .buttonRow {
    padding-left: 0;
    padding-right: 0;
}

#opc-pwf {
    margin-top: -.5rem;
}

#checkoutOneGuestInfo legend {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#checkoutoneBody .messageStackError {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#loginOpcDefault .buttonRow {
    padding-top: 0rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {

    div.centerColumn#loginOpcDefault {
        display: flex !important;
        margin-bottom: 4rem;
    }

    #loginOpcDefault .opc-block .buttonRow {
        display: flex;
        justify-content: end;
    }

    #loginOpcDefault span.normal_button {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #loginOpcDefault #loginDefaultHeading {
        position: absolute;
    }

    #loginOpcDefault .messageStackError {
        position: absolute;
        margin-top: -2rem;
        width: 100%;
        max-width: 1280px;
    }

    #loginOpcDefault .opc-block-3 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1;
    }

    #loginOpcDefault .opc-block-3:nth-last-of-type(3n) {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    #loginOpcDefault .opc-block-2 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(2n) {
        margin-left: 1rem;
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(3n) {
        margin-right: 1rem;
    }

    #loginOpcDefault input.submit_button {
        width: auto !important;
    }

    #loginOpcDefault .button_checkout:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_login {
        width: auto;
    }

    #loginOpcDefault .button_login:hover {
        width: auto !important;
    }
}

/** checkoutoneBody **/

#checkoutoneBody #checkoutOneGuestInfo p {
    color: #8b0000;
    font-weight: bold;
    margin-top: 0rem;
    margin-bottom: 1rem;
}

#checkoutoneBody label {
    padding: 0px;
}

#checkoutoneBody #shipping_billing {
    margin-left: 0;
}

#checkoutoneBody .opc-buttons>div:first-child {
    float: none;
    margin-bottom: 2rem;
    display: flex;
}

#checkoutoneBody #cartContentsDisplay tr:nth-child(even):not(:last-child) {
    background: #F8F8FF;
}

#checkoutoneBody .cartTableHeading {
    background-color: transparent !important;
}

#checkoutoneBody #cartContentsDisplay th,
td {
    padding: 0.5rem !important;
}

#checkoutoneBody #checkoutPaymentMethod .important {
    color: #8b0000 !important;
}

#checkoutoneBody #cartOrderTotals {
    border: none;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: -66px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
    margin-bottom: 5rem !important;
}

#checkoutoneBody #cartContentsDisplay .productPrice {
    display: block !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#checkoutoneBody .alert {
    padding-left: 0;
}

#checkoutoneBody #opc-bill-edit {
    margin-top: 1rem;
}

#checkoutoneBody #opc-ship-edit {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #checkoutPayment legend {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    padding-top: 0;
}

#checkoutOneGuestInfo .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutPaymentMethod .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutOneGuestInfo .opc-right:nth-of-type(1) {
    display: none !important;
}

#checkoutoneBody span.normal_button {
    border: solid 1px #ffd700;
    margin: 0;
}

#checkoutoneBody span.normal_button:hover {
    background: transparent;
    border: solid 1px #FFD700;
    margin: 0 !important;
}

#checkoutoneBody .button.small_edit:hover {
    margin: 1rem;
}

#checkoutoneBody #ccTotalHeading {
    text-align: center !important;
}

#checkoutoneBody .button_confirm_order:hover {
    background: transparent !important;
    color: #006400 !important;
}

#checkoutoneBody .cartAttribsList {
    float: none;
    margin-top: 0.5rem !important;
}

#checkoutoneBody .floatingBox {
    width: 100%;
}

#checkoutoneBody .opc-view {
    position: relative;
    z-index: 2;
    box-shadow: 3px 3px 5px 6px #ccc;
    padding: 1rem;
    background: #fff;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

#opc-bill-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#opc-ship-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#checkoutOneSubmit {
    float: none !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #cartOrderTotals br {
    display: block !important;
}

#checkoutoneBody #messages-bill {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #messages-ship {
    margin-top: 1rem;
    margin-bottom: 1rem;
}


#checkoutoneBody .productTax {
    display: none !important;
}

#checkoutoneBody select,
fieldset select {
    margin-bottom: 0;
}



#checkoutoneBody #choices-bill,
#choices-ship {
    display: flex !important;
    margin-bottom: 1rem !important;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
    width: 100% !important;
}


#checkoutoneBody #checkoutOneSubmit {
    float: none !important;
}

#checkoutoneBody #checkoutOneEmail {
    float: none !important;
    text-align: center;
}

@media (min-width: 768px) {


    #checkoutoneBody #checkoutOneSubmit {
        float: none !important;
        display: flex;
        justify-content: end;
    }

    #checkoutoneBody #checkoutOneEmail {
        float: none !important;
        text-align: right;
    }

    #checkoutoneBody #choices-bill select,
    #choices-ship select {
        width: auto !important;
    }

    #opc-ship-cancel {
        margin-bottom: 0 !important;
        display: block;
    }

    #opc-bill-cancel {
        margin-bottom: 0 !important;
    }

    #checkoutoneBody #checkoutOneShoppingCart legend {
        margin-bottom: 1rem !important;
    }

    #checkoutoneBody #cartContentsDisplay .edit-button {
        position: inherit !important;
        margin-top: 0;
    }

    #checkoutoneBody .opc-right {
        display: flex;
        justify-content: space-between;
    }

    #checkoutoneBody #opc-bill-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutoneBody #opc-ship-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutOneSubmit {
        float: right !important;
        margin-top: 0;
        margin-bottom: 1rem;
    }
}


@media (min-width: 992px) {

    #checkoutShippingMethod legend {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #checkoutoneBody #checkoutOneCartGroup {
        width: 49%;
        margin: auto;
    }

    #checkoutoneBody #instructions {
        clear: both;
    }

    #checkoutoneBody .clearBoth {
        display: none;
    }

    #checkoutOneCartGroup {
        margin-right: 0px !important;
    }

    #checkoutoneBody .floatingBox {
        width: 49% !important;
    }
}

/** checkout_success **/

#checkoutsuccessBody label {
    padding: 0;
    margin-bottom: 0.5rem;
}

#checkoutSuccessGuestPassword .custom-control-label {
    margin: 0;
}

#checkoutSuccessGuestPassword .button_create_account {
    margin-bottom: 1rem;
    margin-top: 1rem
}

#checkoutSuccessGuestPassword .custom-control {
    display: flex;
}

#checkoutoneconfirmationBody .footer {
    display: none;
}

#checkoutoneconfirmationBody #checkoutOneConfirmationLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    #checkoutSuccessGuestPassword .button_create_account {
        width: auto !important;
    }
}

#orderstatusBody #accountTaxDisplay {
    display: none;
}

#orderstatusBody hr:first-of-type {
    display: none;
}

#orderstatusBody #myAccountShipInfo h3 {
    margin-top: 2rem;
}

#orderstatusBody #myAccountPaymentInfo h4 {
    margin-top: 2rem;
}

#checkoutOneBillto {
    margin-bottom: 1rem;
}

#opc-billing-title {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/** input and radio for moble and tablet alignment **/

.custom-control.custom-checkbox {
    display: flex;
    align-items: center;
    /* Vertically align checkbox + label */
    gap: 8px;
    /* Space between checkbox and label */
}

.custom-control.custom-checkbox input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    position: relative;
    top: 0px;
}

.custom-control.custom-checkbox label {
    margin: 0;
    line-height: 1.2;
    display: inline-block;
    cursor: pointer;
    padding-left: 0px;
}

#checkoutPayment .radioButtonLabel {
    align-content: center;
    display: block;
}

.custom-control.custom-radio {
    display: flex;
    align-items: center;
    /* Vertically center items */
    gap: 8px;
    /* Space between radio and label */
    margin-bottom: 10px;
}


.custom-control.custom-radio input[type="radio"] {
    margin: 0;
    appearance: auto;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}


.custom-control.custom-radio label {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}


#checkoutOneShippingFlag {
    display: flex;
    align-items: center;
    /* Vertically center checkbox and label */
    gap: 8px;
    /* Optional: space between checkbox and label */
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-top: 0rem;
}

#checkoutOneShippingFlag input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}

#checkoutOneShippingFlag label {
    margin: 0;
    line-height: 1.2;
    color: blueviolet;

}

#flat_flat-value {
    height: 31px;
    align-content: center;
}

#checkoutPayment .radioButtonLabel {
    margin: 0px;
}


#csNotifications br {
    display: none;
}


#csNotifications input[type="checkbox"]+label.checkboxLabel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1em;
    line-height: 1.2;
}

#csNotifications input[type="checkbox"] {
    margin-top: 1px;
}

/** other **/

#checkoutOneHeading {
    z-index: 2;
    position: relative;
    margin-top: 0;
}

.checkoutOneCoupon {
    background: aliceblue;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    margin-bottom: 1rem;

}

.checkoutOneCoupon legend {
    background: transparent;
    padding-top: 0;
}

.checkoutOneCoupon fieldset {
    background-color: aliceblue;
}

div#checkoutShippingContentChoose {
    margin-bottom: 0px;
}

#checkoutShippingChoices legend {
    margin: 0px !important;
    border: none;
}

#comments legend {
    margin-bottom: 0px !important;
}

.checkoutOneCoupon legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneShipto legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneBillto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShipto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutComments {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutShippingMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutoneBody #checkoutPaymentMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShoppingCart {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#instructions {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneGuestInfo {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.opc-block-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.opc-block-3:first-of-type {
    padding-top: 0;
    margin-top:1rem;
}

.opc-block-2:first-of-type {
      padding-top: 0;
    margin-top:1rem;
}

@media (min-width: 768px) {
    .opc-block-3 {
        padding-top: 0rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    #checkoutShippingMethod {
        margin-top: 0rem;
        padding-top: 0rem;
    }


    #checkoutOneGuestInfo {
        margin-top: 0rem;
        padding-top: 0rem;
    }
}

chadlly2003:

Nick all is good. If you want to see a demo version of the OPC on the new redesign template you can just go to this linkhttp://www.zencartdemo.com/. Now that being said. Lets try adding the new css style sheet to your template and see what it does. It is supposed to look exactly like the demo. But you made a lot of changes so we may have to make some minor adjustments

File Name needs to be stylesheet_zcustom_opc.css
save this file to includes/templates/responsive_classic/css/stylesheet_zcustom_opc.css

i also uploaded the files to the github version as well. Let me know how it goes

/** loginBody **/

#loginOpcDefault h2 {
font-size: 1.3rem;
line-height: 25px;
margin: 0;
padding-bottom: 1rem;
}

#loginBody .opc-label {
margin-bottom: 0.5rem;
padding-top: 0px;
}

#loginOpcDefault .button_create_account:focus {
border: solid 1px #AC171D !important
}

#loginOpcDefault .button_checkout {
background: #8b008b;
color: #fff;
min-height: 47.6px;
border: solid 1px #8b008b !important;

}

#loginOpcDefault .button_checkout:hover {
background: transparent;
color: #8b008b;
min-height: 47.6px;
border: solid 1px #8b008b !important;

}

#loginOpcDefault .opc-block .buttonRow {
padding-left: 0;
padding-right: 0;
}

#opc-pwf {
margin-top: -.5rem;
}

#checkoutOneGuestInfo legend {
margin-top: 0 !important;
padding-top: 0 !important;
}

#checkoutoneBody .messageStackError {
margin-top: 1rem;
margin-bottom: 1rem;
}

#loginOpcDefault .buttonRow {
padding-top: 0rem;
padding-bottom: 1rem;
}

@media (min-width: 768px) {

div.centerColumn#loginOpcDefault {
    display: flex !important;
    margin-bottom: 4rem;
}

#loginOpcDefault .opc-block .buttonRow {
    display: flex;
    justify-content: end;
}

#loginOpcDefault span.normal_button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#loginOpcDefault #loginDefaultHeading {
    position: absolute;
}

#loginOpcDefault .messageStackError {
    position: absolute;
    margin-top: -2rem;
    width: 100%;
    max-width: 1280px;
}

#loginOpcDefault .opc-block-3 {
    width: auto !important;
    margin-top: 4.5rem;
    flex: 1;
}

#loginOpcDefault .opc-block-3:nth-last-of-type(3n) {
    margin-left: 1rem;
    margin-right: 1rem;
}

#loginOpcDefault .opc-block-2 {
    width: auto !important;
    margin-top: 4.5rem;
    flex: 1
}

#loginOpcDefault .opc-block-2:nth-last-of-type(2n) {
    margin-left: 1rem;
}

#loginOpcDefault .opc-block-2:nth-last-of-type(3n) {
    margin-right: 1rem;
}

#loginOpcDefault input.submit_button {
    width: auto !important;
}

#loginOpcDefault .button_checkout:hover {
    width: auto !important;
}

#loginOpcDefault .button_create_account {
    width: auto !important;
}

#loginOpcDefault .button_create_account:hover {
    width: auto !important;
}

#loginOpcDefault .button_login {
    width: auto;
}

#loginOpcDefault .button_login:hover {
    width: auto !important;
}

}

/** checkoutoneBody **/

#checkoutoneBody #checkoutOneGuestInfo p {
color: #8b0000;
font-weight: bold;
margin-top: 0rem;
margin-bottom: 1rem;
}

#checkoutoneBody label {
padding: 0px;
}

#checkoutoneBody #shipping_billing {
margin-left: 0;
}

#checkoutoneBody .opc-buttons>div:first-child {
float: none;
margin-bottom: 2rem;
display: flex;
}

#checkoutoneBody #cartContentsDisplay tr:nth-child(even):not(:last-child) {
background: #F8F8FF;
}

#checkoutoneBody .cartTableHeading {
background-color: transparent !important;
}

#checkoutoneBody #cartContentsDisplay th,
td {
padding: 0.5rem !important;
}

#checkoutoneBody #checkoutPaymentMethod .important {
color: #8b0000 !important;
}

#checkoutoneBody #cartOrderTotals {
border: none;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
position: absolute;
width: 100%;
left: 0;
margin-top: -66px;
padding-left: 0 !important;
padding-right: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
margin-bottom: 5rem !important;
}

#checkoutoneBody #cartContentsDisplay .productPrice {
display: block !important;
padding-left: 0;
padding-right: 0;
text-align: center;
}

#checkoutoneBody .alert {
padding-left: 0;
}

#checkoutoneBody #opc-bill-edit {
margin-top: 1rem;
}

#checkoutoneBody #opc-ship-edit {
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody #checkoutPayment legend {
margin-bottom: 1rem;
padding-bottom: 1rem;
padding-top: 0;
}

#checkoutOneGuestInfo .clearBoth {
display: none;
}

#checkoutoneBody #checkoutPaymentMethod .clearBoth {
display: none;
}

#checkoutoneBody #checkoutOneGuestInfo .opc-right:nth-of-type(1) {
display: none !important;
}

#checkoutoneBody span.normal_button {
border: solid 1px #ffd700;
margin: 0;
}

#checkoutoneBody span.normal_button:hover {
background: transparent;
border: solid 1px #FFD700;
margin: 0 !important;
}

#checkoutoneBody .button.small_edit:hover {
margin: 1rem;
}

#checkoutoneBody #ccTotalHeading {
text-align: center !important;
}

#checkoutoneBody .button_confirm_order:hover {
background: transparent !important;
color: #006400 !important;
}

#checkoutoneBody .cartAttribsList {
float: none;
margin-top: 0.5rem !important;
}

#checkoutoneBody .floatingBox {
width: 100%;
}

#checkoutoneBody .opc-view {
position: relative;
z-index: 2;
box-shadow: 3px 3px 5px 6px #ccc;
padding: 1rem;
background: #fff;
margin-bottom: 1.5rem;
border-radius: 5px;
}

#opc-bill-cancel {
margin-bottom: 1rem !important;
display: block;
}

#opc-ship-cancel {
margin-bottom: 1rem !important;
display: block;
}

#checkoutOneSubmit {
float: none !important;
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody #cartOrderTotals br {
display: block !important;
}

#checkoutoneBody #messages-bill {
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody #messages-ship {
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody .productTax {
display: none !important;
}

#checkoutoneBody select,
fieldset select {
margin-bottom: 0;
}

#checkoutoneBody #choices-bill,
#choices-ship {
display: flex !important;
margin-bottom: 1rem !important;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
width: 100% !important;
}

#checkoutoneBody #checkoutOneSubmit {
float: none !important;
}

#checkoutoneBody #checkoutOneEmail {
float: none !important;
text-align: center;
}

@media (min-width: 768px) {

#checkoutoneBody #checkoutOneSubmit {
    float: none !important;
    display: flex;
    justify-content: end;
}

#checkoutoneBody #checkoutOneEmail {
    float: none !important;
    text-align: right;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
    width: auto !important;
}

#opc-ship-cancel {
    margin-bottom: 0 !important;
    display: block;
}

#opc-bill-cancel {
    margin-bottom: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
    margin-bottom: 1rem !important;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
    position: inherit !important;
    margin-top: 0;
}

#checkoutoneBody .opc-right {
    display: flex;
    justify-content: space-between;
}

#checkoutoneBody #opc-bill-edit {
    display: flex;
    justify-content: end !important;
    margin-top: 0;
}

#checkoutoneBody #opc-ship-edit {
    display: flex;
    justify-content: end !important;
    margin-top: 0;
}

#checkoutOneSubmit {
    float: right !important;
    margin-top: 0;
    margin-bottom: 1rem;
}

}

@media (min-width: 992px) {

#checkoutShippingMethod legend {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#checkoutoneBody #checkoutOneCartGroup {
    width: 49%;
    margin: auto;
}

#checkoutoneBody #instructions {
    clear: both;
}

#checkoutoneBody .clearBoth {
    display: none;
}

#checkoutOneCartGroup {
    margin-right: 0px !important;
}

#checkoutoneBody .floatingBox {
    width: 49% !important;
}

}

/** checkout_success **/

#checkoutsuccessBody label {
padding: 0;
margin-bottom: 0.5rem;
}

#checkoutSuccessGuestPassword .custom-control-label {
margin: 0;
}

#checkoutSuccessGuestPassword .button_create_account {
margin-bottom: 1rem;
margin-top: 1rem
}

#checkoutSuccessGuestPassword .custom-control {
display: flex;
}

#checkoutoneconfirmationBody .footer {
display: none;
}

#checkoutoneconfirmationBody #checkoutOneConfirmationLoading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
#checkoutSuccessGuestPassword .button_create_account {
width: auto !important;
}
}

#orderstatusBody #accountTaxDisplay {
display: none;
}

#orderstatusBody hr:first-of-type {
display: none;
}

#orderstatusBody #myAccountShipInfo h3 {
margin-top: 2rem;
}

#orderstatusBody #myAccountPaymentInfo h4 {
margin-top: 2rem;
}

#checkoutOneBillto {
margin-bottom: 1rem;
}

#opc-billing-title {
margin-top: 0px !important;
padding-top: 0px !important;
}

/** input and radio for moble and tablet alignment **/

.custom-control.custom-checkbox {
display: flex;
align-items: center;
/* Vertically align checkbox + label /
gap: 8px;
/ Space between checkbox and label */
}

.custom-control.custom-checkbox input[type="checkbox"] {
margin: 0;
vertical-align: middle;
width: 16px;
height: 16px;
position: relative;
top: 0px;
}

.custom-control.custom-checkbox label {
margin: 0;
line-height: 1.2;
display: inline-block;
cursor: pointer;
padding-left: 0px;
}

#checkoutPayment .radioButtonLabel {
align-content: center;
display: block;
}

.custom-control.custom-radio {
display: flex;
align-items: center;
/* Vertically center items /
gap: 8px;
/ Space between radio and label */
margin-bottom: 10px;
}

.custom-control.custom-radio input[type="radio"] {
margin: 0;
appearance: auto;
vertical-align: middle;
width: 16px;
height: 16px;
}

.custom-control.custom-radio label {
margin: 0;
padding: 0;
line-height: 1.2;
}

#checkoutOneShippingFlag {
display: flex;
align-items: center;
/* Vertically center checkbox and label /
gap: 8px;
/ Optional: space between checkbox and label */
margin-bottom: 1rem;
margin-top: 1rem;
padding-top: 0rem;
}

#checkoutOneShippingFlag input[type="checkbox"] {
margin: 0;
vertical-align: middle;
}

#checkoutOneShippingFlag label {
margin: 0;
line-height: 1.2;
color: blueviolet;

}

#flat_flat-value {
height: 31px;
align-content: center;
}

#checkoutPayment .radioButtonLabel {
margin: 0px;
}

#csNotifications br {
display: none;
}

#csNotifications input[type="checkbox"]+label.checkboxLabel {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 1em;
line-height: 1.2;
}

#csNotifications input[type="checkbox"] {
margin-top: 1px;
}

/** other **/

#checkoutOneHeading {
z-index: 2;
position: relative;
margin-top: 0;
}

.checkoutOneCoupon {
background: aliceblue;
padding: 1rem;
border-radius: 5px;
margin-top: 1rem;
margin-bottom: 1rem;

}

.checkoutOneCoupon legend {
background: transparent;
padding-top: 0;
}

.checkoutOneCoupon fieldset {
background-color: aliceblue;
}

div#checkoutShippingContentChoose {
margin-bottom: 0px;
}

#checkoutShippingChoices legend {
margin: 0px !important;
border: none;
}

#comments legend {
margin-bottom: 0px !important;
}

.checkoutOneCoupon legend {
margin-top: 0px !important;
padding-top: 0px !important
}

#checkoutOneShipto legend {
margin-top: 0px !important;
padding-top: 0px !important
}

#checkoutOneBillto {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutOneShipto {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutComments {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutShippingMethod {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutoneBody #checkoutPaymentMethod {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutOneShoppingCart {
padding-top: 1rem;
padding-bottom: 1rem;
}

#instructions {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutOneGuestInfo {
padding-top: 1rem;
padding-bottom: 1rem;
}

.opc-block-3 {
padding-top: 1rem;
padding-bottom: 1rem;
}

.opc-block-3:first-of-type {
padding-top: 0;
margin-top:1rem;
}

.opc-block-2:first-of-type {
padding-top: 0;
margin-top:1rem;
}

@media (min-width: 768px) {
.opc-block-3 {
padding-top: 0rem;
padding-bottom: 1rem;
}
}

@media (min-width: 992px) {
#checkoutShippingMethod {
margin-top: 0rem;
padding-top: 0rem;
}

#checkoutOneGuestInfo {
    margin-top: 0rem;
    padding-top: 0rem;
}

}

Everything's looking great on that demo site!

chadlly2003:

Nick all is good. If you want to see a demo version of the OPC on the new redesign template you can just go to this linkhttp://www.zencartdemo.com/. Now that being said. Lets try adding the new css style sheet to your template and see what it does. It is supposed to look exactly like the demo. But you made a lot of changes so we may have to make some minor adjustments

File Name needs to be stylesheet_zcustom_opc.css
save this file to includes/templates/responsive_classic/css/stylesheet_zcustom_opc.css

i also uploaded the files to the github version as well. Let me know how it goes

/** loginBody **/

#loginOpcDefault h2 {
font-size: 1.3rem;
line-height: 25px;
margin: 0;
padding-bottom: 1rem;
}

#loginBody .opc-label {
margin-bottom: 0.5rem;
padding-top: 0px;
}

#loginOpcDefault .button_create_account:focus {
border: solid 1px #AC171D !important
}

#loginOpcDefault .button_checkout {
background: #8b008b;
color: #fff;
min-height: 47.6px;
border: solid 1px #8b008b !important;

}

#loginOpcDefault .button_checkout:hover {
background: transparent;
color: #8b008b;
min-height: 47.6px;
border: solid 1px #8b008b !important;

}

#loginOpcDefault .opc-block .buttonRow {
padding-left: 0;
padding-right: 0;
}

#opc-pwf {
margin-top: -.5rem;
}

#checkoutOneGuestInfo legend {
margin-top: 0 !important;
padding-top: 0 !important;
}

#checkoutoneBody .messageStackError {
margin-top: 1rem;
margin-bottom: 1rem;
}

#loginOpcDefault .buttonRow {
padding-top: 0rem;
padding-bottom: 1rem;
}

@media (min-width: 768px) {

div.centerColumn#loginOpcDefault {
    display: flex !important;
    margin-bottom: 4rem;
}

#loginOpcDefault .opc-block .buttonRow {
    display: flex;
    justify-content: end;
}

#loginOpcDefault span.normal_button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#loginOpcDefault #loginDefaultHeading {
    position: absolute;
}

#loginOpcDefault .messageStackError {
    position: absolute;
    margin-top: -2rem;
    width: 100%;
    max-width: 1280px;
}

#loginOpcDefault .opc-block-3 {
    width: auto !important;
    margin-top: 4.5rem;
    flex: 1;
}

#loginOpcDefault .opc-block-3:nth-last-of-type(3n) {
    margin-left: 1rem;
    margin-right: 1rem;
}

#loginOpcDefault .opc-block-2 {
    width: auto !important;
    margin-top: 4.5rem;
    flex: 1
}

#loginOpcDefault .opc-block-2:nth-last-of-type(2n) {
    margin-left: 1rem;
}

#loginOpcDefault .opc-block-2:nth-last-of-type(3n) {
    margin-right: 1rem;
}

#loginOpcDefault input.submit_button {
    width: auto !important;
}

#loginOpcDefault .button_checkout:hover {
    width: auto !important;
}

#loginOpcDefault .button_create_account {
    width: auto !important;
}

#loginOpcDefault .button_create_account:hover {
    width: auto !important;
}

#loginOpcDefault .button_login {
    width: auto;
}

#loginOpcDefault .button_login:hover {
    width: auto !important;
}

}

/** checkoutoneBody **/

#checkoutoneBody #checkoutOneGuestInfo p {
color: #8b0000;
font-weight: bold;
margin-top: 0rem;
margin-bottom: 1rem;
}

#checkoutoneBody label {
padding: 0px;
}

#checkoutoneBody #shipping_billing {
margin-left: 0;
}

#checkoutoneBody .opc-buttons>div:first-child {
float: none;
margin-bottom: 2rem;
display: flex;
}

#checkoutoneBody #cartContentsDisplay tr:nth-child(even):not(:last-child) {
background: #F8F8FF;
}

#checkoutoneBody .cartTableHeading {
background-color: transparent !important;
}

#checkoutoneBody #cartContentsDisplay th,
td {
padding: 0.5rem !important;
}

#checkoutoneBody #checkoutPaymentMethod .important {
color: #8b0000 !important;
}

#checkoutoneBody #cartOrderTotals {
border: none;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
position: absolute;
width: 100%;
left: 0;
margin-top: -66px;
padding-left: 0 !important;
padding-right: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
margin-bottom: 5rem !important;
}

#checkoutoneBody #cartContentsDisplay .productPrice {
display: block !important;
padding-left: 0;
padding-right: 0;
text-align: center;
}

#checkoutoneBody .alert {
padding-left: 0;
}

#checkoutoneBody #opc-bill-edit {
margin-top: 1rem;
}

#checkoutoneBody #opc-ship-edit {
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody #checkoutPayment legend {
margin-bottom: 1rem;
padding-bottom: 1rem;
padding-top: 0;
}

#checkoutOneGuestInfo .clearBoth {
display: none;
}

#checkoutoneBody #checkoutPaymentMethod .clearBoth {
display: none;
}

#checkoutoneBody #checkoutOneGuestInfo .opc-right:nth-of-type(1) {
display: none !important;
}

#checkoutoneBody span.normal_button {
border: solid 1px #ffd700;
margin: 0;
}

#checkoutoneBody span.normal_button:hover {
background: transparent;
border: solid 1px #FFD700;
margin: 0 !important;
}

#checkoutoneBody .button.small_edit:hover {
margin: 1rem;
}

#checkoutoneBody #ccTotalHeading {
text-align: center !important;
}

#checkoutoneBody .button_confirm_order:hover {
background: transparent !important;
color: #006400 !important;
}

#checkoutoneBody .cartAttribsList {
float: none;
margin-top: 0.5rem !important;
}

#checkoutoneBody .floatingBox {
width: 100%;
}

#checkoutoneBody .opc-view {
position: relative;
z-index: 2;
box-shadow: 3px 3px 5px 6px #ccc;
padding: 1rem;
background: #fff;
margin-bottom: 1.5rem;
border-radius: 5px;
}

#opc-bill-cancel {
margin-bottom: 1rem !important;
display: block;
}

#opc-ship-cancel {
margin-bottom: 1rem !important;
display: block;
}

#checkoutOneSubmit {
float: none !important;
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody #cartOrderTotals br {
display: block !important;
}

#checkoutoneBody #messages-bill {
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody #messages-ship {
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody .productTax {
display: none !important;
}

#checkoutoneBody select,
fieldset select {
margin-bottom: 0;
}

#checkoutoneBody #choices-bill,
#choices-ship {
display: flex !important;
margin-bottom: 1rem !important;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
width: 100% !important;
}

#checkoutoneBody #checkoutOneSubmit {
float: none !important;
}

#checkoutoneBody #checkoutOneEmail {
float: none !important;
text-align: center;
}

@media (min-width: 768px) {

#checkoutoneBody #checkoutOneSubmit {
    float: none !important;
    display: flex;
    justify-content: end;
}

#checkoutoneBody #checkoutOneEmail {
    float: none !important;
    text-align: right;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
    width: auto !important;
}

#opc-ship-cancel {
    margin-bottom: 0 !important;
    display: block;
}

#opc-bill-cancel {
    margin-bottom: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
    margin-bottom: 1rem !important;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
    position: inherit !important;
    margin-top: 0;
}

#checkoutoneBody .opc-right {
    display: flex;
    justify-content: space-between;
}

#checkoutoneBody #opc-bill-edit {
    display: flex;
    justify-content: end !important;
    margin-top: 0;
}

#checkoutoneBody #opc-ship-edit {
    display: flex;
    justify-content: end !important;
    margin-top: 0;
}

#checkoutOneSubmit {
    float: right !important;
    margin-top: 0;
    margin-bottom: 1rem;
}

}

@media (min-width: 992px) {

#checkoutShippingMethod legend {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#checkoutoneBody #checkoutOneCartGroup {
    width: 49%;
    margin: auto;
}

#checkoutoneBody #instructions {
    clear: both;
}

#checkoutoneBody .clearBoth {
    display: none;
}

#checkoutOneCartGroup {
    margin-right: 0px !important;
}

#checkoutoneBody .floatingBox {
    width: 49% !important;
}

}

/** checkout_success **/

#checkoutsuccessBody label {
padding: 0;
margin-bottom: 0.5rem;
}

#checkoutSuccessGuestPassword .custom-control-label {
margin: 0;
}

#checkoutSuccessGuestPassword .button_create_account {
margin-bottom: 1rem;
margin-top: 1rem
}

#checkoutSuccessGuestPassword .custom-control {
display: flex;
}

#checkoutoneconfirmationBody .footer {
display: none;
}

#checkoutoneconfirmationBody #checkoutOneConfirmationLoading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
#checkoutSuccessGuestPassword .button_create_account {
width: auto !important;
}
}

#orderstatusBody #accountTaxDisplay {
display: none;
}

#orderstatusBody hr:first-of-type {
display: none;
}

#orderstatusBody #myAccountShipInfo h3 {
margin-top: 2rem;
}

#orderstatusBody #myAccountPaymentInfo h4 {
margin-top: 2rem;
}

#checkoutOneBillto {
margin-bottom: 1rem;
}

#opc-billing-title {
margin-top: 0px !important;
padding-top: 0px !important;
}

/** input and radio for moble and tablet alignment **/

.custom-control.custom-checkbox {
display: flex;
align-items: center;
/* Vertically align checkbox + label /
gap: 8px;
/ Space between checkbox and label */
}

.custom-control.custom-checkbox input[type="checkbox"] {
margin: 0;
vertical-align: middle;
width: 16px;
height: 16px;
position: relative;
top: 0px;
}

.custom-control.custom-checkbox label {
margin: 0;
line-height: 1.2;
display: inline-block;
cursor: pointer;
padding-left: 0px;
}

#checkoutPayment .radioButtonLabel {
align-content: center;
display: block;
}

.custom-control.custom-radio {
display: flex;
align-items: center;
/* Vertically center items /
gap: 8px;
/ Space between radio and label */
margin-bottom: 10px;
}

.custom-control.custom-radio input[type="radio"] {
margin: 0;
appearance: auto;
vertical-align: middle;
width: 16px;
height: 16px;
}

.custom-control.custom-radio label {
margin: 0;
padding: 0;
line-height: 1.2;
}

#checkoutOneShippingFlag {
display: flex;
align-items: center;
/* Vertically center checkbox and label /
gap: 8px;
/ Optional: space between checkbox and label */
margin-bottom: 1rem;
margin-top: 1rem;
padding-top: 0rem;
}

#checkoutOneShippingFlag input[type="checkbox"] {
margin: 0;
vertical-align: middle;
}

#checkoutOneShippingFlag label {
margin: 0;
line-height: 1.2;
color: blueviolet;

}

#flat_flat-value {
height: 31px;
align-content: center;
}

#checkoutPayment .radioButtonLabel {
margin: 0px;
}

#csNotifications br {
display: none;
}

#csNotifications input[type="checkbox"]+label.checkboxLabel {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 1em;
line-height: 1.2;
}

#csNotifications input[type="checkbox"] {
margin-top: 1px;
}

/** other **/

#checkoutOneHeading {
z-index: 2;
position: relative;
margin-top: 0;
}

.checkoutOneCoupon {
background: aliceblue;
padding: 1rem;
border-radius: 5px;
margin-top: 1rem;
margin-bottom: 1rem;

}

.checkoutOneCoupon legend {
background: transparent;
padding-top: 0;
}

.checkoutOneCoupon fieldset {
background-color: aliceblue;
}

div#checkoutShippingContentChoose {
margin-bottom: 0px;
}

#checkoutShippingChoices legend {
margin: 0px !important;
border: none;
}

#comments legend {
margin-bottom: 0px !important;
}

.checkoutOneCoupon legend {
margin-top: 0px !important;
padding-top: 0px !important
}

#checkoutOneShipto legend {
margin-top: 0px !important;
padding-top: 0px !important
}

#checkoutOneBillto {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutOneShipto {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutComments {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutShippingMethod {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutoneBody #checkoutPaymentMethod {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutOneShoppingCart {
padding-top: 1rem;
padding-bottom: 1rem;
}

#instructions {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutOneGuestInfo {
padding-top: 1rem;
padding-bottom: 1rem;
}

.opc-block-3 {
padding-top: 1rem;
padding-bottom: 1rem;
}

.opc-block-3:first-of-type {
padding-top: 0;
margin-top:1rem;
}

.opc-block-2:first-of-type {
padding-top: 0;
margin-top:1rem;
}

@media (min-width: 768px) {
.opc-block-3 {
padding-top: 0rem;
padding-bottom: 1rem;
}
}

@media (min-width: 992px) {
#checkoutShippingMethod {
margin-top: 0rem;
padding-top: 0rem;
}

#checkoutOneGuestInfo {
    margin-top: 0rem;
    padding-top: 0rem;
}

}

I haven't try my site yet but the  demo  looks  amazing.

I decided to play with this template. I find that there is a lot of stuff in the stylesheet_colors that is not color related. Like I was trying to figure out why the cat tabs was not showing and finally figured out that ```
#navCatTabs {
display:none;
}

I find that to be weird.
Additionally, the only page on the site that uses the right column is the home page, all other pages the right column disappears.

barco57,

Make sure you grab the latest version from GitHub. I will update the zencart plugin this week.

This new version is built off the original styles from the classic design, so the main stylesheet might look a bit familiar—or even a little confusing at first. The key thing to keep in mind is that any CSS changes should be made in the zcustom_stylesheet. That file is set up to override existing styles, so you can simply add or adjust your styles there without needing to modify the original CSS files.

Also, you’ll notice that some elements are hidden using display: none. This is intentional and primarily used to help create the desired layout and responsive behavior for the template. It's a useful trick for maintaining a consistent look and feel across different screen sizes.

chadlly2003:

Nick all is good. If you want to see a demo version of the OPC on the new redesign template you can just go to this linkhttp://www.zencartdemo.com/. Now that being said. Lets try adding the new css style sheet to your template and see what it does. It is supposed to look exactly like the demo. But you made a lot of changes so we may have to make some minor adjustments

File Name needs to be stylesheet_zcustom_opc.css
save this file to includes/templates/responsive_classic/css/stylesheet_zcustom_opc.css

i also uploaded the files to the github version as well. Let me know how it goes

/** loginBody **/

#loginOpcDefault h2 {
font-size: 1.3rem;
line-height: 25px;
margin: 0;
padding-bottom: 1rem;
}

#loginBody .opc-label {
margin-bottom: 0.5rem;
padding-top: 0px;
}

#loginOpcDefault .button_create_account:focus {
border: solid 1px #AC171D !important
}

#loginOpcDefault .button_checkout {
background: #8b008b;
color: #fff;
min-height: 47.6px;
border: solid 1px #8b008b !important;

}

#loginOpcDefault .button_checkout:hover {
background: transparent;
color: #8b008b;
min-height: 47.6px;
border: solid 1px #8b008b !important;

}

#loginOpcDefault .opc-block .buttonRow {
padding-left: 0;
padding-right: 0;
}

#opc-pwf {
margin-top: -.5rem;
}

#checkoutOneGuestInfo legend {
margin-top: 0 !important;
padding-top: 0 !important;
}

#checkoutoneBody .messageStackError {
margin-top: 1rem;
margin-bottom: 1rem;
}

#loginOpcDefault .buttonRow {
padding-top: 0rem;
padding-bottom: 1rem;
}

@media (min-width: 768px) {

div.centerColumn#loginOpcDefault {
    display: flex !important;
    margin-bottom: 4rem;
}

#loginOpcDefault .opc-block .buttonRow {
    display: flex;
    justify-content: end;
}

#loginOpcDefault span.normal_button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#loginOpcDefault #loginDefaultHeading {
    position: absolute;
}

#loginOpcDefault .messageStackError {
    position: absolute;
    margin-top: -2rem;
    width: 100%;
    max-width: 1280px;
}

#loginOpcDefault .opc-block-3 {
    width: auto !important;
    margin-top: 4.5rem;
    flex: 1;
}

#loginOpcDefault .opc-block-3:nth-last-of-type(3n) {
    margin-left: 1rem;
    margin-right: 1rem;
}

#loginOpcDefault .opc-block-2 {
    width: auto !important;
    margin-top: 4.5rem;
    flex: 1
}

#loginOpcDefault .opc-block-2:nth-last-of-type(2n) {
    margin-left: 1rem;
}

#loginOpcDefault .opc-block-2:nth-last-of-type(3n) {
    margin-right: 1rem;
}

#loginOpcDefault input.submit_button {
    width: auto !important;
}

#loginOpcDefault .button_checkout:hover {
    width: auto !important;
}

#loginOpcDefault .button_create_account {
    width: auto !important;
}

#loginOpcDefault .button_create_account:hover {
    width: auto !important;
}

#loginOpcDefault .button_login {
    width: auto;
}

#loginOpcDefault .button_login:hover {
    width: auto !important;
}

}

/** checkoutoneBody **/

#checkoutoneBody #checkoutOneGuestInfo p {
color: #8b0000;
font-weight: bold;
margin-top: 0rem;
margin-bottom: 1rem;
}

#checkoutoneBody label {
padding: 0px;
}

#checkoutoneBody #shipping_billing {
margin-left: 0;
}

#checkoutoneBody .opc-buttons>div:first-child {
float: none;
margin-bottom: 2rem;
display: flex;
}

#checkoutoneBody #cartContentsDisplay tr:nth-child(even):not(:last-child) {
background: #F8F8FF;
}

#checkoutoneBody .cartTableHeading {
background-color: transparent !important;
}

#checkoutoneBody #cartContentsDisplay th,
td {
padding: 0.5rem !important;
}

#checkoutoneBody #checkoutPaymentMethod .important {
color: #8b0000 !important;
}

#checkoutoneBody #cartOrderTotals {
border: none;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
position: absolute;
width: 100%;
left: 0;
margin-top: -66px;
padding-left: 0 !important;
padding-right: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
margin-bottom: 5rem !important;
}

#checkoutoneBody #cartContentsDisplay .productPrice {
display: block !important;
padding-left: 0;
padding-right: 0;
text-align: center;
}

#checkoutoneBody .alert {
padding-left: 0;
}

#checkoutoneBody #opc-bill-edit {
margin-top: 1rem;
}

#checkoutoneBody #opc-ship-edit {
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody #checkoutPayment legend {
margin-bottom: 1rem;
padding-bottom: 1rem;
padding-top: 0;
}

#checkoutOneGuestInfo .clearBoth {
display: none;
}

#checkoutoneBody #checkoutPaymentMethod .clearBoth {
display: none;
}

#checkoutoneBody #checkoutOneGuestInfo .opc-right:nth-of-type(1) {
display: none !important;
}

#checkoutoneBody span.normal_button {
border: solid 1px #ffd700;
margin: 0;
}

#checkoutoneBody span.normal_button:hover {
background: transparent;
border: solid 1px #FFD700;
margin: 0 !important;
}

#checkoutoneBody .button.small_edit:hover {
margin: 1rem;
}

#checkoutoneBody #ccTotalHeading {
text-align: center !important;
}

#checkoutoneBody .button_confirm_order:hover {
background: transparent !important;
color: #006400 !important;
}

#checkoutoneBody .cartAttribsList {
float: none;
margin-top: 0.5rem !important;
}

#checkoutoneBody .floatingBox {
width: 100%;
}

#checkoutoneBody .opc-view {
position: relative;
z-index: 2;
box-shadow: 3px 3px 5px 6px #ccc;
padding: 1rem;
background: #fff;
margin-bottom: 1.5rem;
border-radius: 5px;
}

#opc-bill-cancel {
margin-bottom: 1rem !important;
display: block;
}

#opc-ship-cancel {
margin-bottom: 1rem !important;
display: block;
}

#checkoutOneSubmit {
float: none !important;
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody #cartOrderTotals br {
display: block !important;
}

#checkoutoneBody #messages-bill {
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody #messages-ship {
margin-top: 1rem;
margin-bottom: 1rem;
}

#checkoutoneBody .productTax {
display: none !important;
}

#checkoutoneBody select,
fieldset select {
margin-bottom: 0;
}

#checkoutoneBody #choices-bill,
#choices-ship {
display: flex !important;
margin-bottom: 1rem !important;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
width: 100% !important;
}

#checkoutoneBody #checkoutOneSubmit {
float: none !important;
}

#checkoutoneBody #checkoutOneEmail {
float: none !important;
text-align: center;
}

@media (min-width: 768px) {

#checkoutoneBody #checkoutOneSubmit {
    float: none !important;
    display: flex;
    justify-content: end;
}

#checkoutoneBody #checkoutOneEmail {
    float: none !important;
    text-align: right;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
    width: auto !important;
}

#opc-ship-cancel {
    margin-bottom: 0 !important;
    display: block;
}

#opc-bill-cancel {
    margin-bottom: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
    margin-bottom: 1rem !important;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
    position: inherit !important;
    margin-top: 0;
}

#checkoutoneBody .opc-right {
    display: flex;
    justify-content: space-between;
}

#checkoutoneBody #opc-bill-edit {
    display: flex;
    justify-content: end !important;
    margin-top: 0;
}

#checkoutoneBody #opc-ship-edit {
    display: flex;
    justify-content: end !important;
    margin-top: 0;
}

#checkoutOneSubmit {
    float: right !important;
    margin-top: 0;
    margin-bottom: 1rem;
}

}

@media (min-width: 992px) {

#checkoutShippingMethod legend {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#checkoutoneBody #checkoutOneCartGroup {
    width: 49%;
    margin: auto;
}

#checkoutoneBody #instructions {
    clear: both;
}

#checkoutoneBody .clearBoth {
    display: none;
}

#checkoutOneCartGroup {
    margin-right: 0px !important;
}

#checkoutoneBody .floatingBox {
    width: 49% !important;
}

}

/** checkout_success **/

#checkoutsuccessBody label {
padding: 0;
margin-bottom: 0.5rem;
}

#checkoutSuccessGuestPassword .custom-control-label {
margin: 0;
}

#checkoutSuccessGuestPassword .button_create_account {
margin-bottom: 1rem;
margin-top: 1rem
}

#checkoutSuccessGuestPassword .custom-control {
display: flex;
}

#checkoutoneconfirmationBody .footer {
display: none;
}

#checkoutoneconfirmationBody #checkoutOneConfirmationLoading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
#checkoutSuccessGuestPassword .button_create_account {
width: auto !important;
}
}

#orderstatusBody #accountTaxDisplay {
display: none;
}

#orderstatusBody hr:first-of-type {
display: none;
}

#orderstatusBody #myAccountShipInfo h3 {
margin-top: 2rem;
}

#orderstatusBody #myAccountPaymentInfo h4 {
margin-top: 2rem;
}

#checkoutOneBillto {
margin-bottom: 1rem;
}

#opc-billing-title {
margin-top: 0px !important;
padding-top: 0px !important;
}

/** input and radio for moble and tablet alignment **/

.custom-control.custom-checkbox {
display: flex;
align-items: center;
/* Vertically align checkbox + label /
gap: 8px;
/ Space between checkbox and label */
}

.custom-control.custom-checkbox input[type="checkbox"] {
margin: 0;
vertical-align: middle;
width: 16px;
height: 16px;
position: relative;
top: 0px;
}

.custom-control.custom-checkbox label {
margin: 0;
line-height: 1.2;
display: inline-block;
cursor: pointer;
padding-left: 0px;
}

#checkoutPayment .radioButtonLabel {
align-content: center;
display: block;
}

.custom-control.custom-radio {
display: flex;
align-items: center;
/* Vertically center items /
gap: 8px;
/ Space between radio and label */
margin-bottom: 10px;
}

.custom-control.custom-radio input[type="radio"] {
margin: 0;
appearance: auto;
vertical-align: middle;
width: 16px;
height: 16px;
}

.custom-control.custom-radio label {
margin: 0;
padding: 0;
line-height: 1.2;
}

#checkoutOneShippingFlag {
display: flex;
align-items: center;
/* Vertically center checkbox and label /
gap: 8px;
/ Optional: space between checkbox and label */
margin-bottom: 1rem;
margin-top: 1rem;
padding-top: 0rem;
}

#checkoutOneShippingFlag input[type="checkbox"] {
margin: 0;
vertical-align: middle;
}

#checkoutOneShippingFlag label {
margin: 0;
line-height: 1.2;
color: blueviolet;

}

#flat_flat-value {
height: 31px;
align-content: center;
}

#checkoutPayment .radioButtonLabel {
margin: 0px;
}

#csNotifications br {
display: none;
}

#csNotifications input[type="checkbox"]+label.checkboxLabel {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 1em;
line-height: 1.2;
}

#csNotifications input[type="checkbox"] {
margin-top: 1px;
}

/** other **/

#checkoutOneHeading {
z-index: 2;
position: relative;
margin-top: 0;
}

.checkoutOneCoupon {
background: aliceblue;
padding: 1rem;
border-radius: 5px;
margin-top: 1rem;
margin-bottom: 1rem;

}

.checkoutOneCoupon legend {
background: transparent;
padding-top: 0;
}

.checkoutOneCoupon fieldset {
background-color: aliceblue;
}

div#checkoutShippingContentChoose {
margin-bottom: 0px;
}

#checkoutShippingChoices legend {
margin: 0px !important;
border: none;
}

#comments legend {
margin-bottom: 0px !important;
}

.checkoutOneCoupon legend {
margin-top: 0px !important;
padding-top: 0px !important
}

#checkoutOneShipto legend {
margin-top: 0px !important;
padding-top: 0px !important
}

#checkoutOneBillto {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutOneShipto {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutComments {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutShippingMethod {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutoneBody #checkoutPaymentMethod {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutOneShoppingCart {
padding-top: 1rem;
padding-bottom: 1rem;
}

#instructions {
padding-top: 1rem;
padding-bottom: 1rem;
}

#checkoutOneGuestInfo {
padding-top: 1rem;
padding-bottom: 1rem;
}

.opc-block-3 {
padding-top: 1rem;
padding-bottom: 1rem;
}

.opc-block-3:first-of-type {
padding-top: 0;
margin-top:1rem;
}

.opc-block-2:first-of-type {
padding-top: 0;
margin-top:1rem;
}

@media (min-width: 768px) {
.opc-block-3 {
padding-top: 0rem;
padding-bottom: 1rem;
}
}

@media (min-width: 992px) {
#checkoutShippingMethod {
margin-top: 0rem;
padding-top: 0rem;
}

#checkoutOneGuestInfo {
    margin-top: 0rem;
    padding-top: 0rem;
}

}

Finally managed to get the opc css file on my site.

It looks great and it is almost there layout wise. 

I just a couple of issues:

- cart only fills up half of the column 

- when the hamburger menu is clicked, the overlay of OPC ( gray shadow) covers the menu and makes it unclickable

- input fields are too big

Thank you in advance for the help

Removing the css code that was previously added in stylesheet_zcustom.css and switching display from grid to flex ( see code below) seems to have fix my first issue.

@media (min-width: 992px) {
  #contentMainWrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;}
}

to

@media (min-width: 992px) {
  #contentMainWrapper {
    display: flex;}
}

I am not sure how to fix the opc overlay problem when the hamburger menu is out. The demo site has not issue though.

nicksab:

Finally managed to get the opc css file on my site.

It looks great and it is almost there layout wise.

I just a couple of issues:

• cart only fills up half of the column

• when the hamburger menu is clicked, the overlay of OPC ( gray shadow) covers the menu and makes it unclickable

• input fields are too big

Thank you in advance for the help

Nick, just go to

stylesheet_custom_navigation.css

go to line 54
.sidebar

change
z-index:1

to
z-index:3;

nicksab:

Removing the css code that was previously added in stylesheet_zcustom.css and switching display from grid to flex ( see code below) seems to have fix my first issue.

@media (min-width: 992px) {
#contentMainWrapper {
display: grid;
grid-template-columns: auto 1fr auto;}
}

> 
> to 
> 
> 
> ```
@media (min-width: 992px) {
  #contentMainWrapper {
    display: flex;}
}

I am not sure how to fix the opc overlay problem when the hamburger menu is out. The demo site has not issue though.

Nick real quick i noticed you still have old code in your stylesheet_z_custom.css

remove this

.opc-view {
  position: relative;
  z-index: 2;
  box-shadow: 3px 3px 5px 6px #ccc;
  margin-bottom: 2rem;
  border: solid 1px #ccc;
  background: #fff;
  padding:1rem;
  padding-bottom: 2rem;
}

#checkoutOneShipto {margin:1rem;}
#checkout_payment .clearBoth {display:none !important;}

 


@media (min-width: 992px) {
#checkoutoneBody .floatingBox {width:49%;}
#checkoutOneShoppingCart {float:left;width:49%; margin-left:1rem;}

}

nicksab:

Removing the css code that was previously added in stylesheet_zcustom.css and switching display from grid to flex ( see code below) seems to have fix my first issue.

@media (min-width: 992px) {
#contentMainWrapper {
display: grid;
grid-template-columns: auto 1fr auto;}
}

> 
> to 
> 
> 
> ```
@media (min-width: 992px) {
  #contentMainWrapper {
    display: flex;}
}

I am not sure how to fix the opc overlay problem when the hamburger menu is out. The demo site has not issue though.

I think this might be a better option the resizing your inputs for opc.
stylesheet_zcustom
Line 267
** need to change background to transparent;"

#checkoutoneBody .opc-view {
    position: relative;
    z-index: 2;
    box-shadow: 3px 3px 5px 6px #ccc;
    padding: 1rem;
    background: #fff;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

Site looking good. Just one thing i noticed on your product page the drop down for the date is not aligning correctly.
path: stylesheet_dp_theme.css
add to the very bottom of stylesheet

#ui-datepicker-div {
	width:auto
}

chadlly2003:

Nick, just go to

stylesheet_custom_navigation.css

go to line 54
.sidebar

change
z-index:1

to
z-index:3;

thanks for that. it worked

chadlly2003:

Nick real quick i noticed you still have old code in your stylesheet_z_custom.css

remove this

.opc-view {
position: relative;
z-index: 2;
box-shadow: 3px 3px 5px 6px #ccc;
margin-bottom: 2rem;
border: solid 1px #ccc;
background: #fff;
padding:1rem;
padding-bottom: 2rem;
}

#checkoutOneShipto {margin:1rem;}
#checkout_payment .clearBoth {display:none !important;}

@media (min-width: 992px) {
#checkoutoneBody .floatingBox {width:49%;}
#checkoutOneShoppingCart {float:left;width:49%; margin-left:1rem;}

}

i removed all the old code that was previously added ( i think) 

Unfortunately, I am back to having OPC display on the left side in a small columns instead of full screen.

nicksab:

i removed all the old code that was previously added ( i think)

Unfortunately, I am back to having OPC display on the left side in a small columns instead of full screen.

hmm for some reason the #contentMainWrapper is display as grid.

this will solve your issue

stylesheet_zcustom.css
line 3891

find

  
   #contentMainWrapper {
         display: grid;
         grid-template-columns: auto 1fr auto;
     }

change to

  #contentMainWrapper {
         display: flex;
         
     }

chadlly2003:

hmm for some reason the #contentMainWrapper is display as grid.

this will solve your issue

stylesheet_zcustom.css
line 3891

find

#contentMainWrapper {
display: grid;
grid-template-columns: auto 1fr auto;
}

> 
> change to
> 
> ```
  #contentMainWrapper {
         display: flex;
         
     }

instead lets do this so it does not impact anything else on your template
add to the bottom of stylesheet_zcustom.css

#checkoutoneBody #contentMainWrapper {
         display: flex !important;
         
     }

chadlly2003:

instead lets do this so it does not impact anything else on your template
add to the bottom of stylesheet_zcustom.css

#checkoutoneBody #contentMainWrapper {
display: flex !important;

 }

I think this is it! Thanks for all  the  helps . My updated site  version is finally live at belvedere-florist.com

Still need a few tweaks here  and there but the template looks awesome

Spoke too soon and I have another suggestions:

When on mobile and the hamburger menu is pulled out, it can only be closed by tapping outside of the menu.

It is a little tricky to do on small screen.

Would it be possible to add an "X" in the corner or similar that would close the menu?

Hope that makes sense