Open Cart CSS

Avatar
simonbk
  • Answered
Good morning wizards of Open Cart.

Two questions for you:

FIRST QUESTION

1. In the link to get to an Open Cart Css file is the link "my theme". I have used everything I can think of for the "my theme" part. I have used:

1. The theme name
2. My URL
3. My Domain
4. The Open Cart version number.

Nothing works. What should be in there?

SECOND QUESTION

My site is:

heartlandpetbeds.com/test

If you look you will notice that the home page has no lines or breaks or borders between banner/sections. How do I put something in there? Yes, I know it is the CSS. What is the code I would use and would it go at the bottom or replace a line item?

Thanks,

Simon

UPDATE:

If a tilt my screen I can see that there are some lines between sections but they very very light. You can't see them. Why is that?
Replies 1
Avatar
0
JacobIMH
Hello simonbk, and thanks a lot for your question. For your first question unfortunately I'm not quite following along with where you are seeing a "my theme" link at. Is this in the OpenCart admin dashboard itself that you're seeing this option? If you haven't yet found a theme to use, you can follow our guide on finding a theme for your OpenCart site for some steps of where to find OpenCart themes at. Once you've found a theme to use, you'll want to install it on the server and make it active by following our guide on installating an OpenCart theme. If you've already installed a theme, which taking a look at your site it does look like you've used the simple theme instead of just the default one. You should notice where you installed OpenCart there is a new directory for that theme's files in the following location: /catalog/view/theme/simple/stylesheet In that directory would be your .css cascading style sheet files that control the look and feel of the OpenCart site. So those would be the files you'd want to be modifying to make display changes on the site. In regards to your second question and update, I think this is going to be an issue of what kind of device you're looking at the site on. For instance when I view your site I can clearly see the 1 pixel borders you have between each section. If you wanted to make these more prominent you could increase the pixel value for each section. This could get a bit tricky, because it does need to be modifed in multiple places inside your stylesheet.css file. You'll more than likely want to make a backup copy of the theme's original stylesheet.css file so that if you need to revert any changes you can do so. Then you can modify the file on your local computer and upload the new one with your favorite FTP client, or you can use cPanel's File Manager, right-click on the file, and choose Code Edit. Taking a look at your test page you provided, these are the sections that would need to be modified in your CSS file to make the borders larger: Change line 53 from:

#header{padding-bottom:7px;border-bottom:1px solid #EEEDE8;margin-bottom:7px;}

To:

#header{padding-bottom:7px;border-bottom:5px solid #EEEDE8;margin-bottom:7px;}

Change line 119 from:

.slideshow{position:relative;border-bottom:1px solid #EEEDE8;padding-bottom:7px;}

To:

.slideshow{position:relative;border-bottom:5px solid #EEEDE8;padding-bottom:7px;}

Change line 354 from:

#footer{padding:10px 0 0;margin:0; border:1px solid #ececec;border-width:1px 0 0;}

To:

#footer{padding:10px 0 0;margin:0; border:1px solid #ececec;border-width:5px 0 0;}

I hope that this information was helpful to you. Please don't hesitate to provide us further details on exactly what you're trying to accomplish, so we can try to steer you in the right direction and get all of your questions answered. - Jacob