Hi I am wondering if anyone has experienced this issue with onepage checkout using Morganite. I seem to be missing style information. I have made mods to the CSS when building my site but I can’t see why it would effect onepage checkout. I have tried to make changes to it via the theme.css but nothing changes. I cannot find any other files to modify. I understand there are issues customizing the onepage layout because of the 2-column-right class or something. In addition the CSS changed between 1.3 and 1.4. onepage-checkout vs. opc… Does this have something to do with it?
Several thing can be observed when viewing the site.
The ‘edit’ link is displayed but has no functionality. The CSS is set to display:none but it does not disappear.
And when compared to the original Morganite theme the Step Titles lack the bars in the background. Essentially it lacks styling.
You can view the site at http://www.sympathyforthekettle.com
Thanks
Peter
2 answers
Hi Peter Matra.
I checked the one checkout page on your site, it may be missing some css.
I suggest that you can re-upload the original jm_morganite theme with a new name jm_morganite_new, then override it with the theme you built.
Another way, you try looking in skin\frontend\default\jm_morganite\csstheme.css and find
Code:
/*One-Page checkout---*/
.opc {
margin: 0;
}
.opc li.section {
position: relative;
}
.opc .group-select,
.opc .fieldset {
border: 1px solid #E0E0E0;
margin: 0;
padding: 10px;
}
.opc .group-select li,
.opc .fieldset li {
padding-left: 0;
}
.opc .step {
background: #f2f2f2;
border: 1px solid #E0E0E0;
padding: 15px;
margin: 0;
}
.opc .step .button {
}
.opc .step-title {
background: #cccccc;
border-bottom: 1px solid #E0E0E0;
border-top: 1px solid #E0E0E0;
padding: 5px 0;
}
.opc .tool-tip {
right: 8px;
}
.opc .step-title a {
display: none; /* Hide Edit button in step header */
}
.opc h3 {
color: #353535;
font-size: 1.05em;
}
.opc h4 {
clear: both;
border-bottom: 1px solid #E0E0E0;
padding-bottom: 8px;
text-transform: uppercase;
font-size: 115%;
}
.opc h4.title {
border-bottom: 0;
text-transform: none;
}
.opc .step-count {
background: #353535;
padding: 0 4px;
color: #FFFFFF;
}
.opc .content {
padding: 10px 20px;
}
.opc label.label {
color: #353535;
font-size: 115%;
}
/*Allow box*/
.opc .allow .head {
background: url(../images/icon_accept.gif) no-repeat 98% center #F2F2F2;
cursor: pointer;
}
.opc .allow h3 {
}
.opc .allow .step-count {
background: #bd0606;
border: 1px solid #bd0606;
color: #FFFFFF;
}
/*Active box*/
.opc .active {
}
.opc .active .step-title {
background: #bd0606;
cursor: default;
border-color: #bd0606;
}
.opc .active .step-title h3 {
color: #FFFFFF;
}
.opc .active .product-name {
color: #bd0606;
}
.opc .active .step-count {
background: #FFFFFF;
border: 1px solid #bd0606;
color: #bd0606;
}
.opc .active .box {
background: none;
display: block;
}
.opc .active .group-select {
}
.opc .alloq .head a {
display: block; /* Display Edit button in active selection */
}
.opc dd .form-list {
margin: 0;
}
.opc dd ul.form-list {
margin: 5px 0 15px 25px;
}
.opc .checkmo-mailing-address {
padding-left: 20px;
}
Copy all .opc class from this file to your new theme.css file.
Do you know Firebug? If you can use this tool, you will find easily the missing css
Thank you very much. I have been going through tons off CSS code. I actually bit the bullet and took the original Morganite theme.css and recreated it. It was rather time consuming but worth it. I do not know how it happened but I assume I was missing a bunch of code. Go figure.
Sincerely,
Peter
This question is now closed
