♥JcMagpie Posted August 26, 2018 Share Posted August 26, 2018 This question is asked many times. Its not easy for someone who is not into the code to find the bits they need. So to try and help I'll post the changes I have used. These are purly extracted from a stock install of CE. Only make changes in you user.css. I have put the full css in a readable format into seperate files that are attached. Most people will only need the short user.css listed below. This should cover most thing. To change color of index background use element.style { background-color: #ad1313; } To change color of panel background use .panel-default { border-color: rgb(221, 221, 221); } .panel { margin-bottom: 20px; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px; border-width: 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 4px; To change color of panel on index use .thumbnail { display: block; margin-bottom: 20px; line-height: 1.42857; background-color: rgb(255, 255, 255); padding: 4px; border-width: 1px; border-style: solid; border-color: rgb(221, 221, 221); border-image: initial; border-radius: 4px; transition: border 0.2s ease-in-out 0s; } To change color of navbar use .navbar-no-corners { border-left: none; border-right: none; border-radius: 0px !important; } .navbar-inverse { background-color: rgb(34, 34, 34); border-color: rgb(8, 8, 8); } .navbar { border-radius: 4px; } .navbar { position: relative; min-height: 50px; margin-bottom: 20px; border-width: 1px; border-style: solid; border-color: transparent; border-image: initial; } To change color of breadcrumb use .breadcrumb { margin-bottom: 20px; background-color: rgb(245, 245, 245); padding: 8px 15px; list-style: none; border-radius: 4px; } To change color of panels use. .panel-default { border-color: rgb(221, 221, 221); } .panel { margin-bottom: 20px; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px; border-width: 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 4px; To change color of customer-greeting use. .alert-info { color: rgb(49, 112, 143); background-color: rgb(217, 237, 247); border-color: rgb(188, 232, 241); } To change color of footer and its text use. .footer{background:red;border-top:2px solid #000;} .footer .footerbox{padding:10px 10px 0px 10px;} .footer h2{padding:0;margin:0;font-size:1em;letter-spacing:0.1em;color:rgb(222,222,0);text-shadow:1px 1px 1px rgba(255,255,255,0.6);border-bottom:1px solid #000;padding-bottom:10px;margin-bottom:10px;text-transform:uppercase;} To chnage color of footer nav-pills and its text use. .nav{padding-left:0;margin-bottom:0;list-style:none;} .nav>li{position:relative;display:block;} .nav>li>a{position:relative;display:block;padding:10px 15px;} .nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#A63737;} .nav-pills>li{float:left;} .nav-pills>li>a{border-radius:4px;} .nav-pills>li+li{margin-left:2px;} .nav-stacked>li{float:none;} .nav-stacked>li+li{margin-top:2px;margin-left:0;} .container-fluid:after,.container-fluid:before,.nav:after,.nav:before,.row:after,.row:before{display:table;content:" ";} .container-fluid:after,.nav:after,.row:after{clear:both;} To change color of footer extra and its text use. .footer-extra{background:#A63737;color:#A63737;line-height:3;} .footer-extra A{color:#A63737;} Navbar.css bodyWrapper.css body-sans-header.css columnLeft.css Footer.css Footer Extra.css user.css full user.css Link to comment Share on other sites More sharing options...
Hotclutch Posted August 26, 2018 Share Posted August 26, 2018 It's not necessary to put down so much markup. eg if you want to change the breadcrumb background color, only put this down in your user.css .breadcrumb { background-color: black } or .breadcrumb { background-color: black; color: white } above changes the background color and font color. Also try to keep the Bootstrap classes, and define new classes for custom requirements. eg. If you want to change an alert-info, don't change the styling of alert-info, rather define a new class like this: <div class="alert alert-custom" role="alert">This is a test alert</div> then add to your CSS .alert-custom { color: #004085; background-color: #cce5ff; border-color: #b8daff } and better still, if you want to optimize, inline the style on the page(s) required, like this in the header: <style> .alert-custom { color: #004085; background-color: #cce5ff; border-color: #b8daff } </style> Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 27, 2018 Author Share Posted August 27, 2018 Yes your right I just did a quick cut and paste so people had the css used in the stock to see what could be changed. As to new classes 😂 been down that road and it did not go down well 😁 but never mind. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 27, 2018 Author Share Posted August 27, 2018 Some people are still finding it hard to find what part needs to be changed.I was answering in PM but it's better discussed on the forum as it may help others. Questioner was struggling to find how to change the hover colour on elements. The hover is just another layer that need to be changed. So if you have a button say, success (your buy button) that is green #2B642B , it will have another color a bit diferent when you hover over it say light green #63ba63. so lets say we have that button, this sets or changes its main color. (The color: #fff; is for the text on the button.) .btn-success { color: #fff; background-color: #2B642B; border-color: #00b3db; } Now this sets or changes the hover color. .btn-success:hover { color: #fff; background-color:#63BA63; border-color: #285e8e; Thats it, it's the same for any elament that changes when you hover over it with your mouse. Link to comment Share on other sites More sharing options...
♥raiwa Posted August 28, 2018 Share Posted August 28, 2018 If you do not wish to change color (text color), there is no need to include it in the stylesheet. In your example the core bootstrap.css already has it defined in white color. Only the definitions which you wish to change need to be included in the stylesheet in user.css to overwrite the bootstrap core definitions. Following this rule in a consequent way will keep your user.css smaller and save page load time. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 28, 2018 Author Share Posted August 28, 2018 When it comes to making changes you can be as bold as you like! Try this. .navbar-inverse { background: linear-gradient(#8F0808 0%, #F70505 100%); } and you get, so no need to stick to boring flat colors you can go wild if you like. This shows how to use the gradiant https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient with a few lines in user.css you can make your page look very individual. To chnage the very bottom footer extra use this, .footer-extra { background: linear-gradient(#8F0808 0%, #F70505 100%); } To chnage the box tops to match use this, .panel-default > .panel-heading { background: linear-gradient(#F70505 0%, #8F0808 100%); } Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 28, 2018 Author Share Posted August 28, 2018 The text in the navbar, footer extra, and box's in columns can be chaged using this ( all set to white ), /* change text in navbar footer extra and box's on index page all set to white */ .navbar-inverse .navbar-nav > li > a { color:#ffffff; } .navbar-brand { color: #ffffff; } .navbar-brand { color: #ffffff; } .fa-shopping-cart { color: #ffffff; } .navbar-text { color: #ffffff; } .navbar-inverse .navbar-text { color: #ffffff; } .navbar-inverse .navbar-brand{ color:#ffffff; } .footer-extra { color: #ffffff; } .footer-extra A { color: #ffffff; } .panel-default > .panel-heading { color: #ffffff; } .panel-heading > a { color: #ffffff; } Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 29, 2018 Author Share Posted August 29, 2018 These are the last few color changes, I personaly don't like changing the background from the stock white. It has too many issues as so many other items use the stock white. Also changing nav and nav-pills will cause problems as they are used in several different containers and you will need to isolate them to stop affecting other areas. /* welcome guest colors */ .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } /* breadcrumb */ .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #b2dbe7; border-radius: 4px; } body { background-color: #f5f7f7; } .panel-body { background-color: #f9f9f9; } .thumbnail { background-color: #f9f9f9; } .footer { background: #f9f9f9; } Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 29, 2018 Author Share Posted August 29, 2018 A word of caution when choosing colours for your website. Google looks for accessibility issues on websites and it may affect you ranking if you are found to be using colours that make it difficult for people to see your content. Things to consider is colour combinations , contrast and text colour and size. Remember just because you can see it fine does not mean other will. Google has some good guide lines you can follow. https://developers.google.com/web/fundamentals/accessibility/ Link to comment Share on other sites More sharing options...
ce7 Posted October 23, 2018 Share Posted October 23, 2018 @JcMagpie @Hotclutch @raiwa Hi all there, Thanks for this post, it is really helpful.... although it is about the colour change with css, not sure if it is ok to ask also about the position. In my case example, i have the video on header section with text set up as center, with advise I use firefox inspect element and found that breadcrum and the header all under .view and set as center. I like the text on header video stay in the center, but if with the current css setting, the breadcrum bar with text "HOME icon / catalog" will also stay as center, which I need it to be left align... Not sure yet how to save the change from the the inspect element tool and save it to user.css yet cause need to figure out how it works for div within div and custom class first... How can I assign a new custom .view for seperated breadcrum and header video part? ========================================================================= <div 1 center> <div 2 left> <div 3 right> <div 4 left> </div> <div> <div> <div> if i have the code in <div 4> set as left, will it stay as left or it will be center as <div 1 center>? If it will be in center, how can i make change so it stay as left for only breadcrum area? Many many thanks! Lyn Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 24, 2018 Author Share Posted October 24, 2018 You should be able to do all this with css, If the header css is causing the breadcrum to center then thats a problem with the header video code! find the <center> hard coded in the video code and remove it and make sure the video is using a new classs or has it's own id, then set the center using that new class or id in user.css It would be much easer if you just post link then the code can be checked. To save changes from the inspect element simply copy the updated css into your user.css. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 24, 2018 Author Share Posted October 24, 2018 Try simply adding the (text-align: left; ) to your user.css this should work without having to touch any other code. .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #b2dbe7; border-radius: 4px; text-align: left; Link to comment Share on other sites More sharing options...
MrPhil Posted October 24, 2018 Share Posted October 24, 2018 On 8/28/2018 at 2:42 PM, raiwa said: If you do not wish to change color (text color), there is no need to include it in the stylesheet. In your example the core bootstrap.css already has it defined in white color. Only the definitions which you wish to change need to be included in the stylesheet in user.css to overwrite the bootstrap core definitions. Following this rule in a consequent way will keep your user.css smaller and save page load time. Colors are a special case. It is generally recommended that you explicitly set both the foreground and background colors together, so you don't get surprised by black-on-black or other unreadable combinations. That is, if you set one, set the other, too, just to be sure. Regarding getting dinged for accessibility issues, you should watch out for color combinations that could cause problems for people with color blindness (e.g., green text on a light gray background). Also watch out for contrast problems (as we get older, we tend to need higher contrast). Also never, never, never mix red and blue -- your eye can't focus on both at once, and this causes eyestrain. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 26, 2018 Author Share Posted October 26, 2018 To help better understand some of the css in CE you need to see the css in a readable format. Only make changes in your user.css. This is custom.css /* DO NOT CHANGE THIS FILE -------------------------------------------------- */ /* TO OVER-RIDE ANY ASPECT OF THIS CSS, AMEND THE user.css FILE ------------- */ li.newItemInCart, li.newItemInCart A { color: #a94442; } .form-control { margin-bottom: 5px; display: inline; } .page-header h1 del { font-size: 0.5em; } .productHolder { border: 1px solid #eee; padding: 10px; border-radius: 4px; -webkit-transition: border .5s ease-in-out; -o-transition: border .5s ease-in-out; transition: border .5s ease-in-out; } .productHolder:hover { border: 1px solid #428bca; } .productHolder h2 { font-size: 1.3em; } .item.list-group-item { float: none; width: 100%; background-color: #fff; border: none; } .item.list-group-item img { float: left !important; margin-right: 10px !important; } .grid-group-item { margin-bottom: 20px; } .grid-group-item .list-group-item-text { display: none; } p.lead del { font-size: 0.5em; } #bodyContent .img-responsive, #columnLeft .img-responsive, #columnRight .img-responsive { margin-left: auto; margin-right: auto; } .stepwizard { margin-top: 20px; } .stepwizard-step p { margin-top: 10px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width: 100%; position: relative; } .stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-index: 0; } .stepwizard-step { display: table-cell; text-align: center; position: relative; width: 33%; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .pagenav { position: relative; top: -25px; left: 3px; height: 40px !important; } .pagenumber { margin-bottom: 7px; } .reviews blockquote p { font-size: 0.8em; } .text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg { text-align: left; } .text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg { text-align: center; } .text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg { text-align: right; } .text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg { text-align: justify; } @media (max-width: 767px) { .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs { text-align: inherit; } .text-left-xs { text-align: left; } .text-center-xs { text-align: center; } .text-right-xs { text-align: right; } .text-justify-xs { text-align: justify; } } @media (min-width: 768px) and (max-width: 991px) { .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm { text-align: inherit; } .text-left-sm { text-align: left; } .text-center-sm { text-align: center; } .text-right-sm { text-align: right; } .text-justify-sm { text-align: justify; } } @media (min-width: 992px) and (max-width: 1199px) { .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md { text-align: inherit; } .text-left-md { text-align: left; } .text-center-md { text-align: center; } .text-right-md { text-align: right; } .text-justify-md { text-align: justify; } } @media (min-width: 1200px) { .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg { text-align: inherit; } .text-left-lg { text-align: left; } .text-center-lg { text-align: center; } .text-right-lg { text-align: right; } .text-justify-lg { text-align: justify; } } .footer { background: #eee; border-top: 2px solid #ddd; } .footer .footerbox { padding: 10px 10px 0px 10px; } .footer-extra { background: #111; color: silver; line-height: 3; } .footer-extra A { color: silver; } .footer h2 { padding: 0; margin: 0; font-size: 1em; letter-spacing: 0.1em; color: rgb(142, 11, 0); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6); border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px; text-transform: uppercase; } .contact { border-left: 1px solid #ddd; } .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; right: 25px; margin-left: -1.5px; } .timeline > li { margin-bottom: 20px; position: relative; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li > .timeline-panel { width: calc( 100% - 75px); float: left; border: 1px solid #d4d4d4; border-radius: 2px; padding: 20px; position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .timeline > li > .timeline-badge { color: #fff; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; right: 0px; margin-left: -25px; background-color: #999999; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-badge.primary { background-color: #2e6da4 !important; } .timeline-badge.success { background-color: #3f903f !important; } .timeline-badge.warning { background-color: #f0ad4e !important; } .timeline-badge.danger { background-color: #d9534f !important; } .timeline-badge.info { background-color: #5bc0de !important; } .timeline-title { margin-top: 0; color: inherit; } .timeline-body > p .timeline-body > ul { margin-bottom: 0; } .timeline-body > p + p { margin-top: 5px; } .timeline-body blockquote { font-size: 1em; } .navbar-no-corners { border-radius: 0 !important; -moz-border-radius: 0 !important; border-left: none; border-right: none; } .navbar-no-margin { margin-bottom: 0 !important; } .searchbox-margin { margin-top: 10px; margin-bottom: 10px; } .form-control-feedback { padding-right: 2%; } @media (max-width: 767px) { .navbar-text { padding-left: 15px!important; } } .row.list-group { display: flex; flex-flow: row wrap; } .row.list-group.container:after, .row.list-group.container:before, .row.list-group.row:after, .row.list-group.row:before { content: normal } .row.list-group { display: -webkit-flex; -webkit-flex-wrap: wrap; -webkit-flex-flow: row wrap; } @media only screen and (max-width: 768px) { .row.list-group { -webkit-flex-direction: column; flex-direction: column; } } .filter-list { height: 20px; margin-top: 10px; } @media (min-width: 767px) { .filter-list { width: 300px; float: left; margin-left: 10px; margin-right: 10px; } } Link to comment Share on other sites More sharing options...
ce7 Posted October 28, 2018 Share Posted October 28, 2018 Hi all, It is me coming back again. Before I uninstalled my current video header module and install JcMagpie's few great addons, i play with css and try to get more understanding how it works. I used the inspect tool and adjust 3 modules (Hotline module/ Shop by price module/ Search module) on header section, here is the adjusted result: /* BOF this is Shop by price Grey text font-area */ .input-group-addon { padding: 14px 14px; font-size: 18px; font-weight: 500; line-height: 1; color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* EOF this is Shop by price Grey text font-area */ /* BOF this is Shop by price Drop Down area */ .form-control { display: block; width: 100%; height: 34px; padding: 14px 10px; font-size: 18px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } /* EOF this is Shop by price Drop Down area */ /* BOF this is Search bar area */ .form-control { display: block; width: 100%; height: 53px; padding: 14px 10px; font-size: 18px; line-height: 1.8; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } /* EOF this is Search bar area */ I can change the button, font size, and search drop down size, but i just can not change their vertical position, I want to make them align with breadcrum bottom container, but can't find the way to do it..... If ignored the position question, just with the style modification, I thought I copy this and past it on user.css file, it should update the website but it doesn't seem doing any change. Did I do anything wrong? There are 3 css file that been read for the website within inspect tool: =========================================== bootstrap.min.css user.css:33 (not sure what the number mean in inspect tool...) style.css (this is the one for header video style) =========================================== I read other post said that should not touch any bootstrap css files, instead update to user.css, it doesn't change anything in my case, not sure why? And if any other extra css like style.css here, do i go to update style.css or i also update with user.css? Many thanks! Lyn Link to comment Share on other sites More sharing options...
♥JcMagpie Posted October 28, 2018 Author Share Posted October 28, 2018 You need to find the right class controling these, Also you will need to give them a new class or ID or you will change all buttons, css is cascading so make sure you only call the same class once in your user.css or you will simpy over write each time and hence see no change. Also once you make a change you ned to clear your browser cache or you may not see the changes. Positioning of the buttons and other stuff is down to playing with the order and width in admin. You can only fit so much on one line( one line is only 12 wide do you can have 2 at 6 wide or 3 at 4 wide and so on. /* BOF this is Shop by price Grey text font-area */ .input-group-addon { padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #1f60ed; text-align: center; background-color: #95f092; border: 1px solid #ccc; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* first button you need to give this a new id or all will change*/ button.btn.btn-info.hidden-xs { background-color: red; } /* Skype button you need to give this a new id or all will change*/ .btn-info { color: #fff; background-color: #5bde65; border-color: #46b8da; } Link to comment Share on other sites More sharing options...
SRobertson Posted November 10, 2018 Share Posted November 10, 2018 And this is why I hire a web designer... This looks like a foreign language to me. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted November 10, 2018 Author Share Posted November 10, 2018 1 hour ago, SRobertson said: This looks like a foreign language to me. 😊 But of course it will, after all it’s in the queens English! Link to comment Share on other sites More sharing options...
♥14steve14 Posted November 11, 2018 Share Posted November 11, 2018 14 hours ago, SRobertson said: And this is why I hire a web designer... This looks like a foreign language to me. I wish I had your money to pay someone to make basic colour changes to my site. I may not be able to code, but I can do the basics. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
stratula Posted November 20, 2018 Share Posted November 20, 2018 Is it possible to change the background color only for the header where the osc-logo is? Link to comment Share on other sites More sharing options...
ArtcoInc Posted November 20, 2018 Share Posted November 20, 2018 @stratula And your version of osC? M Link to comment Share on other sites More sharing options...
stratula Posted November 20, 2018 Share Posted November 20, 2018 2.3.4.1 CE responsive Link to comment Share on other sites More sharing options...
♥raiwa Posted November 20, 2018 Share Posted November 20, 2018 Each module has its own unique css class which you can use to change the background color or any other style. Have a look into the template file, the header logo even has 2: cm-header-logo storeLogo use them to define a customized class in user.css About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
stratula Posted November 20, 2018 Share Posted November 20, 2018 Thank you Rainer! Link to comment Share on other sites More sharing options...
stratula Posted November 20, 2018 Share Posted November 20, 2018 @raiwa ..but how can i change the background here? <div id="storeLogo" class="col-sm-<?php echo $content_width; ?> cm-header-logo storeLogo"> <?php echo '<a href="' . tep_href_link('index.php') . '">' . tep_image('images/' . STORE_LOGO, htmlspecialchars(STORE_NAME)) . '</a>'; ?> </div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.