Post by creativa » Sat Sep 11, 2010 3:39 am

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


New member

Posts

Joined
Thu Jul 23, 2009 2:01 pm
Location - Uruguay

Post by Xsecrets » Sat Sep 11, 2010 4:08 am

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


Guru Member

Posts

Joined
Sun Oct 25, 2009 3:51 am
Location - FL US

Post by creativa » Sat Sep 11, 2010 5:44 am

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


New member

Posts

Joined
Thu Jul 23, 2009 2:01 pm
Location - Uruguay

Post by Maansy » Sat Sep 11, 2010 12:27 pm

this is a great effort. much appreciated :)

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am


Post by ComerciosDe » Thu Oct 07, 2010 11:50 am

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 :laugh: :laugh: :laugh: ni caso !!! ;)

Saludos.

Se aceptan las gracias, cervezas y aceitunas.


User avatar
New member

Posts

Joined
Fri Oct 01, 2010 5:25 am
Location - Málaga, España

Post by creativa » Thu Oct 07, 2010 8:00 pm

Bueee, si ya me tratás de hincha de Peñarol vamos a tener problemas :laugh: :laugh: que cosita chee, los otros son temas infantiles, es logico que sean coloridos :joker:

Opencart Template Store
Commercial themes: Sweet Rose, Sweet Yellow, Electronic Blue, Electronic Pink and more...
Free theme: Non Inline Css


New member

Posts

Joined
Thu Jul 23, 2009 2:01 pm
Location - Uruguay

Post by Mike5 » Fri Oct 08, 2010 7:43 pm

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

Newbie

Posts

Joined
Fri Oct 08, 2010 7:09 pm

Post by creativa » Fri Oct 08, 2010 8:51 pm

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


New member

Posts

Joined
Thu Jul 23, 2009 2:01 pm
Location - Uruguay

Post by Mike5 » Fri Oct 08, 2010 11:50 pm

Hi Creativa, worked a treat, thank you
Regards, Mike

Newbie

Posts

Joined
Fri Oct 08, 2010 7:09 pm

Post by sketchi » Wed Oct 13, 2010 9:29 pm

Loving it!

User avatar
New member

Posts

Joined
Wed Sep 22, 2010 5:04 pm

Post by sketchi » Wed Oct 20, 2010 6:01 pm

Hi creativa, I noticed that when adding something to the cart, the nice Cart/Chackout buttons vanish and turn into plain links. It seems the Ajax call alters the html so the class=button is removed. Any idea how to fix?

User avatar
New member

Posts

Joined
Wed Sep 22, 2010 5:04 pm

Post by suebydoo » Tue Mar 01, 2011 11:12 pm

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?

Newbie

Posts

Joined
Mon Feb 28, 2011 7:22 pm

Post by suebydoo » Thu Mar 03, 2011 5:08 am

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

Newbie

Posts

Joined
Mon Feb 28, 2011 7:22 pm

Post by SXGuy » Thu Mar 03, 2011 5:40 am

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.

Active Member

Posts

Joined
Sun Nov 08, 2009 2:07 am

Post by Chones » Thu Mar 03, 2011 6:51 am

Hi suebydoo, simple solution really. In your stylesheet.css file give both .div4 and .div5 the following styles:

Code: Select all

width: 100%;
text-align: center;
You may also want to delete almost all the other style information for those divs.

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


User avatar
Active Member

Posts

Joined
Wed Mar 24, 2010 9:07 pm
Location - London

Post by suebydoo » Wed Mar 09, 2011 12:43 am

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:

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']; ?>" />&nbsp;&nbsp;<?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']; ?>" />&nbsp;&nbsp;<?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>
And here is the stylesheet:

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;	
}
Apologies if I've listed too much. Any assistance would be greatly appreciated.

Regards

Newbie

Posts

Joined
Mon Feb 28, 2011 7:22 pm

Post by Chones » Wed Mar 09, 2011 2:59 am

Sorry my fault on the links - change this line

Code: Select all

$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;
to

Code: Select all

$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;
That should work. Also, try deleting this from the stylesheet

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;
}
Also, you need to remove the .center from these styles as you no longer have a div with the class center anymore

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;
}
Also try changing #header .div6 .center ul to just

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


User avatar
Active Member

Posts

Joined
Wed Mar 24, 2010 9:07 pm
Location - London
Who is online

Users browsing this forum: No registered users and 2 guests