Post by clittlehales » Mon Sep 08, 2014 5:21 pm

Hi

Everytime I look online for help (for example) about decreasing HTTP requests, it will say something like 'enter this code at the end of your .css file' etc. But what .css file? is there one main css file or something? Because what i can see, i have tons of css files.

Thanks

New member

Posts

Joined
Thu May 29, 2014 6:03 pm

Post by IP_CAM » Tue Sep 09, 2014 12:48 am

Depends on where you want to change/add some CSS-Content. So, where you need to change something, just look at the Source (backside) of this Webpage. In the Header-Section (example below), you will find .css file-link-lines, like:
---
stylesheet.css ( usually the Template MAIN CSS File, every Theme uses (usually) it's own!)
jquery-ui-1.8.16.custom.css (needs to be modified rather seldom)
----

Code: Select all

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8" />
<title>Ernie's Default OC Test Shop</title>
<base href="http://ip-cam.li/shop/" />
<meta name="description" content="Ernie's Default OC Test Shop" />
<link href="http://ip-cam.li/shop/image/data/cart.png" rel="icon" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<!--  -->
</head>
---

If then, by example, you want, in your Header-Section, modify/add to/reduce/change/whatever some values within:
---

Code: Select all

<div id="search">
<div class="button-search">
---
you open the .CSS Files related, as explained above, with Notepad ++ or another suitable Text-Editor, then, search for words like:

Code: Select all

search
and/or:
button-search
and you probably find something like below in (usually) the stylesheet.css file.

Code: Select all

#header #search {
	position: absolute;
	top: 103px;
	right: 7px;
	width: 298px;
	z-index: 15;
}
#header .button-search {
	position: absolute;
	left: 0px;
	background: url('../image/button-search.png') center center no-repeat;
	width: 28px;
	height: 24px;
	border-right: 1px solid #CCCCCC;
	cursor: pointer;
}
#header #search input {
	background: #FFF;
	padding: 1px 1px 1px 33px;
	width: 262px;
	height: 21px;
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-khtml-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	-webkit-box-shadow: 0px 2px 0px #F0F0F0;
	-moz-box-shadow: 0px 2px 0px #F0F0F0;
	box-shadow: 0px 2px 0px #F0F0F0;	
}
MEANING, that your Changes/Modifications would have to be made in those Sections.

understud?

Modifying CSS-Content on a Site-Theme can be a PROLONGED Task, despite of looking similar, every Theme-Creator has/uses his/her own way to do it. Therefore, you cannot always just copy/paste similar CSS Routines from one theme to another, I have and still will waist hours to 'ALIGN' my 30+ Themes on one of my Test Sites, to get 'em done my way...

It all depends on how 'CLEAN' and 'PRO' you want your site to look like, sometimes, a few 'pixels' more or less can make a huge (visual) difference...

Ernie
openshop.li

I'm no longer quite active at the Forum, to reach me, better contact: jti@jacob.ch
My free Opencart LIGHT 1.5.6.5 Code is available on GitHub soon,
a Demoversion of it can be seen in Action here: http://www.bigmax.ch
930+ FREE OC Extension-Repositories - from OC v.1.5.x up, on the
world's largest OC-related Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by clittlehales » Tue Sep 16, 2014 7:25 pm

Thanks for the detailed reply, I appreciate it.

I don't really have any knowledge on code or web designing, so I do not fully understand your answer.

The screen shot attached shows what i am trying to fix.

Thanks again.

Attachments

Capture.JPG

Capture.JPG (96.83 KiB) Viewed 396 times


New member

Posts

Joined
Thu May 29, 2014 6:03 pm
Who is online

Users browsing this forum: No registered users and 9 guests