Visually is the same Default Theme, but I modified:
- cleared all inline css and move for stylesheet.css
- modified listings of products and categories box containers:now are divs
- modified some PNG images to prevent blue backgrounds in rounded corners in IE6,
also the icons transparency.
If you are CSS fan, enjoy customizing this theme!!
(I authorize and agree if OC team want to integrate this change to the official distribution ;P )
Visualmente es el mismo tema por Defecto, pero he modificado:
- limpie todos los estilos en línea y los moví a la hoja css
- modifique las cajas contenedoras de productos y categorias, ahora son divs.
- modifique algunas imagenes PNG para evitar el fondo azul que aparece en los bordes curvos en IE6,
también la transparencia de los iconos.
Si eres fanático del CSS, disfruta personalizando esta plantilla!!
Demo:
http://www.creativa.com.uy/opencart/ind ... nInlineCss
Download:
http://www.opencart.com/index.php?route ... ion_id=260
compatible IE6 - IE7
Last edited by creativa on Tue Nov 30, 2010 12:13 am, edited 1 time in total.
Opencart Template Store
Commercial themes: Sweet Rose, Sweet Yellow, Electronic Blue, Electronic Pink and more...
Free theme: Non Inline Css
nice theme. The only thing I noticed is that the product tabs are kind of funky they are twice as high as they should be.
OpenCart commercial mods and development http://spotonsolutions.net
Layered Navigation
Shipment Tracking
Vehicle Year/Make/Model Filter
I appreciate your feedback : Already changed 
Opencart Template Store
Commercial themes: Sweet Rose, Sweet Yellow, Electronic Blue, Electronic Pink and more...
Free theme: Non Inline Css
this is a great effort. much appreciated
ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com
Muy bueno el Electronic Blue, al menos a mi me gustó más ése...
Los otros... cómo si los hubiese hecho un hincha de Peñarol
ni caso !!! 
Saludos.
Los otros... cómo si los hubiese hecho un hincha de Peñarol
ni caso !!! Saludos.
Se aceptan las gracias, cervezas y aceitunas.
Bueee, si ya me tratás de hincha de Peñarol vamos a tener problemas que cosita chee, los otros son temas infantiles, es logico que sean coloridos 
que cosita chee, los otros son temas infantiles, es logico que sean coloridos Opencart Template Store
Commercial themes: Sweet Rose, Sweet Yellow, Electronic Blue, Electronic Pink and more...
Free theme: Non Inline Css
Hi Mike,Mike5 wrote:Hi, just installed this theme as per the instruction in the download zip file and the paypal link at the bottom of the screen shows a red cross. How do I solve this please.
Regards, Mike
find the file
catalog/view/theme/non-inline/template/common/footer.tpl
and fix the url of image in 2nd line:
<div id="footer">
<div class="div1"><img src="catalog/view/theme/non-inline/image/payment.png" alt="" /></div>
or wait a few hours and I uploaded the fixed file in extensions.
Regards, Creativa.
Opencart Template Store
Commercial themes: Sweet Rose, Sweet Yellow, Electronic Blue, Electronic Pink and more...
Free theme: Non Inline Css
Hi Creativa. Thanks for all your efforts on this. I'm a newbie at opencart and although I've been teaching myself css and I think I'm doing OK I've got a bit stuck with how to edit page layouts.
I would like to create a really simple page layout which doesn't have the search bar, or the language/currency bar and I would like to amend the Home, Login, Account etc... tabs so they are smaller links either in the footer or in a box in the left or right column.
Finally, I would like to create a larger store logo and centre it (although really I just want it blank and white text) and below that I would like to centre horizontal links to the various categories.
Which file/s do I need to go to to edit the layouts?
I am trying to create a more elegant and functional version of this: http://www.suebydoo.plus.com/ruthjoseph/ (where it says paintings, wall art, sculpture & photography I would like my opencart to link to the various categories).
I am using opencart 1.4.9.3
This is where I've got to so far ( I realise I've probably done some really dodgy stuff here but I thought if I can try and edit the layout as I like I could clean up my errors afterwards): http://ccgi.suebydoo.plus.com/store/
Can you please point me in the right direction?
I would like to create a really simple page layout which doesn't have the search bar, or the language/currency bar and I would like to amend the Home, Login, Account etc... tabs so they are smaller links either in the footer or in a box in the left or right column.
Finally, I would like to create a larger store logo and centre it (although really I just want it blank and white text) and below that I would like to centre horizontal links to the various categories.
Which file/s do I need to go to to edit the layouts?
I am trying to create a more elegant and functional version of this: http://www.suebydoo.plus.com/ruthjoseph/ (where it says paintings, wall art, sculpture & photography I would like my opencart to link to the various categories).
I am using opencart 1.4.9.3
This is where I've got to so far ( I realise I've probably done some really dodgy stuff here but I thought if I can try and edit the layout as I like I could clean up my errors afterwards): http://ccgi.suebydoo.plus.com/store/
Can you please point me in the right direction?
HI all
I've managed to get a bit further changing the layouts and trying to learn enough php to understand what I'm deleting. But I've now come up against another problem with the layout. I'm sure it's to do with the stylesheet and is probably an easy fix but I just can't seem to get my div settings right.
You can see the link to my store front in the post above.
I just want to centre the "Ruth Joseph Contemporary Abstract Artist" image and I want to display the categories as a horizontal navbar below the title image (preferably in a slightly bigger font). I've tried text aligh and clearing the clear and float tags and changing the settings on the clear and float tags but the image keeps flipping from side to side and the navbar keeps disappearing beneath the title image.
Can anyone help me with the stylesheet because I'm sure it is just my css which is a bit dodgy.
Thanks
I've managed to get a bit further changing the layouts and trying to learn enough php to understand what I'm deleting. But I've now come up against another problem with the layout. I'm sure it's to do with the stylesheet and is probably an easy fix but I just can't seem to get my div settings right.
You can see the link to my store front in the post above.
I just want to centre the "Ruth Joseph Contemporary Abstract Artist" image and I want to display the categories as a horizontal navbar below the title image (preferably in a slightly bigger font). I've tried text aligh and clearing the clear and float tags and changing the settings on the clear and float tags but the image keeps flipping from side to side and the navbar keeps disappearing beneath the title image.
Can anyone help me with the stylesheet because I'm sure it is just my css which is a bit dodgy.
Thanks
id suggest creating a new div and placing it where you want it in the header file, then define the size and position in the stylesheet, move everything else to match what you want, thats the easist way.
but to be honest, without seing how you already modified your header.tpl file, i doubt anyone can help you.
but to be honest, without seing how you already modified your header.tpl file, i doubt anyone can help you.
Hi suebydoo, simple solution really. In your stylesheet.css file give both .div4 and .div5 the following styles:
You may also want to delete almost all the other style information for those divs.
That should work.
Code: Select all
width: 100%;
text-align: center;That should work.
http://scarletandjones.com/
http://sharpdressedman.co.uk/
http://coffincompany.co.uk/
http://horsesculptures.co.uk/
If I've helped you out, why not buy me a beer? http://craigmurray.me.uk
Many thanks for getting back to me. I've had a couple of days away from it because my brain was starting to ache and I seem to have got a little bit further.
However, Chones I've used the amended script that you created to make the navbar out of categories but the links don't seem to be working (I'm sure I must have done something wrong with it again.
Also the categories navbar is still a little bit off centre. I've tried the suggestions above a while ago but they didn't work either. The navbar remained left justified.
Anyway, here is my header file:
And here is the stylesheet:
Apologies if I've listed too much. Any assistance would be greatly appreciated.
Regards
However, Chones I've used the amended script that you created to make the navbar out of categories but the links don't seem to be working (I'm sure I must have done something wrong with it again.
Also the categories navbar is still a little bit off centre. I've tried the suggestions above a while ago but they didn't work either. The navbar remained left justified.
Anyway, here is my header file:
Code: Select all
<?php if (isset($_SERVER['HTTP_USER_AGENT']) && !strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6')) echo '<?xml version="1.0" encoding="UTF-8"?>'. "\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" xml:lang="<?php echo $lang; ?>">
<head>
<title><?php echo $title; ?></title>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php } ?>
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<base href="<?php echo $base; ?>" />
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo str_replace('&', '&', $link['href']); ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/non-inline/stylesheet/stylesheet.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/non-inline/stylesheet/ie6.css" />
<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('img, #header .div3 a, #content .left, #content .right, .box .top');
</script>
<![endif]-->
<?php foreach ($styles as $style) { ?>
<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/thickbox/thickbox-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/thickbox/thickbox.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>
<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?>
<script type="text/javascript"><!--
function bookmark(url, title) {
if (window.sidebar) { // firefox
window.sidebar.addPanel(title, url, "");
} else if(window.opera && window.print) { // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
} else if(document.all) {// ie
window.external.AddFavorite(url, title);
}
}
//--></script>
</head>
<body>
<div id="container">
<div id="header">
<div class="div1">
<div class="div2">
<a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
<?php if (!$logged) { ?>
<a href="<?php echo str_replace('&', '&', $login); ?>" id="tab_login"><?php echo $text_login; ?></a>
<?php } else { ?>
<a href="<?php echo str_replace('&', '&', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a>
<?php } ?>
<a href="<?php echo str_replace('&', '&', $account); ?>" id="tab_account"><?php echo $text_account; ?></a>
<a href="<?php echo str_replace('&', '&', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a>
<a href="<?php echo str_replace('&', '&', $checkout); ?>" id="tab_checkout"><?php echo $text_checkout; ?></a>
</div>
<div class="div3">
<?php if ($currencies) { ?>
<form action="<?php echo str_replace('&', '&', $action); ?>" method="post" enctype="multipart/form-data" id="currency_form">
<div class="switcher">
<?php foreach ($currencies as $currency) { ?>
<?php if ($currency['code'] == $currency_code) { ?>
<div class="selected">
<a><?php echo $currency['title']; ?></a>
</div>
<?php } ?>
<?php } ?>
<div class="option">
<?php foreach ($currencies as $currency) { ?>
<a onclick="$('input[name=\'currency_code\']').attr('value', '<?php echo $currency['code']; ?>'); $('#currency_form').submit();"><?php echo $currency['title']; ?></a>
<?php } ?>
</div>
</div>
<div style="display: inline;">
<input type="hidden" name="currency_code" value="" />
<input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />
</div>
</form>
<!-- <?php } ?>
<?php if ($languages) { ?>
<form action="<?php echo str_replace('&', '&', $action); ?>" method="post" enctype="multipart/form-data" id="language_form">
<div class="switcher">
<?php foreach ($languages as $language) { ?>
<?php if ($language['code'] == $language_code) { ?>
<div class="selected">
<a><img src="image/flags/<?php echo $language['image']; ?>" alt="<?php echo $language['name']; ?>" /> <?php echo $language['name']; ?></a>
</div>
<?php } ?>
<?php } ?>
<div class="option">
<?php foreach ($languages as $language) { ?>
<a onclick="$('input[name=\'language_code\']').attr('value', '<?php echo $language['code']; ?>'); $('#language_form').submit();"><img src="image/flags/<?php echo $language['image']; ?>" alt="<?php echo $language['name']; ?>" /> <?php echo $language['name']; ?></a>
<?php } ?>
</div>
</div>
<div>
<input type="hidden" name="language_code" value="" />
<input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />
</div>
</form>
<?php } ?>
</div> -->
</div>
<div class="div4"></div>
<div class="div5">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<?php if ($logo) { ?>
<a href="<?php echo str_replace('&', '&', $home); ?>"><img src="<?php echo $logo; ?>" title="<?php echo $store; ?>" alt="<?php echo $store; ?>" /></a>
<?php } ?>
</div>
</div>
</div>
<div class="div6">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<?php
$top_cat_id = '';
if (isset($this->request->get['path'])) {
$path = $this->request->get['path'];
$cat_array = explode ("_", $path);
$top_cat_id = $cat_array[0];
}
$this->load->model('tool/seo_url');
$results = $this->model_catalog_category->getCategories();
if ($results) {$output = '<ul>';}
foreach ($results as $result) {
$new_path = $result['category_id'];
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;
$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);
if ($new_path == $top_cat_id) {
$output .= '<li id="current-cat"><a href="'.str_replace('&', '&', $rewritten).'">'.$result['name'].'</a>';
} else {
$output .= '<li><a href="'.str_replace('&', '&', $rewritten).'">'.$result['name'].'</a>';
}
$output .= '</li>';
}
if ($results) {$output .= '</ul>';}
echo $output;
?>
</div>
<div class="div7">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<?php if (isset($common_error)) { ?>
<div class="warning"><?php echo $common_error; ?></div>
<?php } ?>
<div id="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo str_replace('&', '&', $breadcrumb['href']); ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>
</div>
</div>
</div>
<script type="text/javascript"><!--
function getURLVar(urlVarName) {
var urlHalves = String(document.location).toLowerCase().split('?');
var urlVarValue = '';
if (urlHalves[1]) {
var urlVars = urlHalves[1].split('&');
for (var i = 0; i <= (urlVars.length); i++) {
if (urlVars[i]) {
var urlVarPair = urlVars[i].split('=');
if (urlVarPair[0] && urlVarPair[0] == urlVarName.toLowerCase()) {
urlVarValue = urlVarPair[1];
}
}
}
}
return urlVarValue;
}
$(document).ready(function() {
route = getURLVar('route');
if (!route) {
$('#tab_home').addClass('selected');
} else {
part = route.split('/');
if (route == 'common/home') {
$('#tab_home').addClass('selected');
} else if (route == 'account/login') {
$('#tab_login').addClass('selected');
} else if (part[0] == 'account') {
$('#tab_account').addClass('selected');
} else if (route == 'checkout/cart') {
$('#tab_cart').addClass('selected');
} else if (part[0] == 'checkout') {
$('#tab_checkout').addClass('selected');
} else {
$('#tab_home').addClass('selected');
}
}
});
//--></script>
<script type="text/javascript"><!--
$('#search input').keydown(function(e) {
if (e.keyCode == 13) {
moduleSearch();
}
});
function moduleSearch() {
url = 'index.php?route=product/search';
var filter_keyword = $('#filter_keyword').attr('value')
if (filter_keyword) {
url += '&keyword=' + encodeURIComponent(filter_keyword);
}
var filter_category_id = $('#filter_category_id').attr('value');
if (filter_category_id) {
url += '&category_id=' + filter_category_id;
}
location = url;
}
//--></script>
<script type="text/javascript"><!--
$('.switcher').bind('click', function() {
$(this).find('.option').slideToggle('fast');
});
$('.switcher').bind('mouseleave', function() {
$(this).find('.option').slideUp('fast');
});
//--></script>Code: Select all
html {
overflow: -moz-scrollbars-vertical;
background: #000000;
color: #FFFFFF;
margin: 0;
padding: 0;
}
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0px;
padding: 0px;
text-align: center;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
form {
padding: 0;
margin: 0;
display: inline;
}
input, textarea, select {
margin: 3px 0px;
}
a, a:visited {
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: none;
color: #E41B17
}
a img {
border: none;
}
p {
margin-top: 0px;
}
/* layout */
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#header .div2 {
float: right;
padding-top: 7px;
height: 20px;
font-weight: bold;
}
#header .div3 {
float: right;
padding-top: 7px;
height: 25px;
clear: both;
}
#header .div3 a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
}
#header .div4 {
width: 100%;
text-align: center;
clear: right;
float: right;
padding-right: 14px;
}
#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a.selected {
padding-bottom: 10px;
z-index: 3;
}
#header .div5 {
width: 100%;
text-align: center;
clear: both;
}
#header .div5 .left {
width: 5px;
height: 40px;
float: left;
}
#header .div5 .right {
width: 5px;
height: 40px;
float: right;
}
#header .div5 .center {
height: 120px;
margin-left: 5px;
margin-right: 5px;
}
#header .div6 {
width: 100%;
text-align: center;
clear: both;
}
#header .div6 .left {
width: 5px;
height: 40px;
float: left;
}
#header .div6 .right {
width: 5px;
height: 40px;
float: right;
}
#header .div6 .center {
height: 40px;
margin: 0 auto;
}
#header .div6 .center ul
{
list-style-type: none;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
#header .div6 .center li
{
display: inline;
}
#header .div6 .center a
{
width:100px;
font-size: 1.5em;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
padding:15px;
}
#header .div7 {
clear: both;
margin-bottom: 10px;
}
#header .div7 .left {
width: 5px;
height: 32px;
float: left;
}
#header .div7 .right {
width: 5px;
height: 32px;
float: right;
}
#header .div7 .center {
height: 32px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
}
#header .div8 {
float: left; margin-top: 6px;
}
#header .div9 {
float: left;
}
#header .div10 {
float: left;
margin-top: 2px;
}Regards
Sorry my fault on the links - change this line
to
That should work. Also, try deleting this from the stylesheet
Also, you need to remove the .center from these styles as you no longer have a div with the class center anymore
Also try changing #header .div6 .center ul to just
Code: Select all
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;Code: Select all
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;Code: Select all
#header .div6 .left {
width: 5px;
height: 40px;
float: left;
}
#header .div6 .right {
width: 5px;
height: 40px;
float: right;
}
#header .div6 .center {
height: 40px;
margin: 0 auto;
}Code: Select all
#header .div6 .center ul
{
list-style-type: none;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
#header .div6 .center li
{
display: inline;
}
#header .div6 .center a
{
width:100px;
font-size: 1.5em;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
padding:15px;
}Code: Select all
#header .div6 .center ul {
list-style-type: none;
}http://scarletandjones.com/
http://sharpdressedman.co.uk/
http://coffincompany.co.uk/
http://horsesculptures.co.uk/
If I've helped you out, why not buy me a beer? http://craigmurray.me.uk
Who is online
Users browsing this forum: No registered users and 32 guests
