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


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.


New member


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">
<meta charset="UTF-8" />
<title>Ernie's Default OC Test Shop</title>
<base href="" />
<meta name="description" content="Ernie's Default OC Test Shop" />
<link href="" 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>
<!--  -->

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

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.


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...


I am no longer active at this Forum.
Please don't send Personal Messages, contact:
Github OC Downloads:
2'000+ FREE OC Extensions from the World's largest Github OC Archive.

User avatar
Legendary Member


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.



Capture.JPG (96.83 KiB) Viewed 443 times

New member


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

Users browsing this forum: Bing [Bot] and 16 guests