Background Image, Layout changes?

[AllSkrewedUp]

Is there any somewhat comprehensive guide to customizing the cube cart layout/design? I've searched around, haven't found much for novices like myself. I can navigate around the backend (file manager, etc) and whatnot, but I'm hoping to find step-by-step instructions to accomplish things I want to do ....?

 

I'm using CC version 5 (updated as far as I know). The skin I'm using the out-of-box Kurouto (Grey). I would like to replace the background (gradient) with my own background image. I would also like to move the search box from the top (to the right of logo) down to the right side, and make my logo centered and bigger.

 

For whatever reason I came to use CC and like it, but I don't find much support as I have with other shopping carts. If someone could point me in the right direction, or would be willing to walk me thru these changes, I'd greatly appreciate it.

 

 

[bsmither]

Welcome AllSkrewdUp! Glad to see you made it to the forums.

 

Unfortunately, there is no SDK, comprehensive or otherwise, for CubeCart. The skins use the Smarty templating engine, so you have their documentation.

 

Otherwise, the skin is just regular HTML (main.php is the whole complete document superstructure, the boxes are specific areas, and the contents are used one each for the specific page) with a bunch of {DATA} placeholders and display {logic}.

 

An attempt to document CC5 has been started at www.cubecartforums.org/docs/.

 

I have found that using Firefox with the Firebug plugin is indispensable at skin 'tweaking'.

 

I am willing to help you learn how to make changes.

[AllSkrewedUp]

Something simple like changing the background color would be a great start, and encouraging.

[bsmither]

With Firefox and the Firebug add-on enabled, click the Firebug "inspector" icon (looks like a square with an arrow cursor in it). Then move your mouse cursor to an area of the page where you want to see the details. When there is a blue ghost line surrounding the area, click the mouse. (The whole page won't have a ghost surround.)

 

You will find the the CSS for the background image is located in the skin file /kurouto/styles/grey/layout.css, line 2:

body {
    background-image: url("../../images/grey/background_gradient.png");
}

To verify you have found the correct CSS rule, move your mouse cursor just to the left of the property word "background". There will be a red circle that, when clicked on, will switch off that property and the background image will disappear.

[AllSkrewedUp]

Thanks, got that part figured out! Only thing is, I don't know to insert the 'repeat' code properly so the background image end half way down the page. Here's the first few lines ....

 

/* !GREY */
body {
    background-image: url(../../images/grey/patriotic-flag.jpg);
}
#account {
    background: #4F4F4F url(../../images/grey/account_background_gradient.png);
}

[bsmither]

Do you want it to repeat?

body {
    background-image: url(../../images/grey/patriotic-flag.jpg);

    background-repeat: repeat-y;

}

 

Do you NOT want it to repeat?

body {
    background-image: url(../../images/grey/patriotic-flag.jpg);

    background-repeat: none;

}

[Dirty Butter]

Be sure you follow this thread, so your changes won't be lost when you upgrade CubeCart.

 

[AllSkrewedUp]

Thanks for all the help! Unfortunately I don't have a lot of time during the week to experiment, but I'm started! (I paid for the software so I want to get my money's worth!!)

 

The next thing I want to do is remove the search box from the logo/header area, maybe place it down in the right column under 'popular products', and hopefully increase the size of my logo across the top box?  Is this possible?

[bsmither]

Yes. I will PM you a site that has made such adjustments.

[Mike MacKechnie]

Mr Smither I have the exact same requirement as ASU, in that I need to move the search box from the logo/header area into an area to the right of the Navigation bar. If you can remember back to July last year, I'd be grateful to see how it's done. I'm running Cubecart v6 and you can see the work in progress here.

 

I thought it would be a simple case of moving the Smarty placeholder {$SEARCH_FORM} to between the end div tags of nav and navcontainer in  box.navigation.php, but it doesn't seem to work.

 

Any help much appreciated.

 

code snippet:

 

<div id="nav">

<div class="navContainer">

<ul class="dropdown">

<li><a href="{$STORE_URL}/index.php" title="{$LANG.navigation.homepage}">{$LANG.navigation.homepage}</a></li>

{$NAVIGATION_TREE} {if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}

<li class="li-nav"><a href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>

{/if} {if $CTRL_SALE}

<li class="li-nav"><a href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>

{/if}

</ul>

</div>

{$SEARCH_FORM}                                 <=== here's what I want to do,  but it does not render

</div>

 

I'm using the Crosshatch skin with a few minor css modifications.  

Mr Smither I have the exact same requirement as ASU, in that I need to move the search box from the logo/header area into an area to the right of the Navigation bar. If you can remember back to July last year, I'd be grateful to see how it's done. I'm running Cubecart v6 and you can see the work in progress here.

 

I thought it would be a simple case of moving the Smarty placeholder {$SEARCH_FORM} to between the end div tags of nav and navcontainer in  box.navigation.php, but it doesn't seem to work.

 

Any help much appreciated.

 

code snippet:

 

<div id="nav">

<div class="navContainer">

<ul class="dropdown">

<li><a href="{$STORE_URL}/index.php" title="{$LANG.navigation.homepage}">{$LANG.navigation.homepage}</a></li>

{$NAVIGATION_TREE} {if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}

<li class="li-nav"><a href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>

{/if} {if $CTRL_SALE}

<li class="li-nav"><a href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>

{/if}

</ul>

</div>

{$SEARCH_FORM}                                 <=== here's what I want to do,  but it does not render

</div>

 

I'm using the Crosshatch skin with a few minor css modifications.  

Mr Smither I have the exact same requirement as ASU, in that I need to move the search box from the logo/header area into an area to the right of the Navigation bar. If you can remember back to July last year, I'd be grateful to see how it's done. I'm running Cubecart v6 and you can see the work in progress here.

 

I thought it would be a simple case of moving the Smarty placeholder {$SEARCH_FORM} to between the end div tags of nav and navcontainer in  box.navigation.php, but it doesn't seem to work.

 

Any help much appreciated.

 

code snippet:

 

<div id="nav">

<div class="navContainer">

<ul class="dropdown">

<li><a href="{$STORE_URL}/index.php" title="{$LANG.navigation.homepage}">{$LANG.navigation.homepage}</a></li>

{$NAVIGATION_TREE} {if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}

<li class="li-nav"><a href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>

{/if} {if $CTRL_SALE}

<li class="li-nav"><a href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>

{/if}

</ul>

</div>

{$SEARCH_FORM}                                 <=== here's what I want to do,  but it does not render

</div>

 

I'm using the Crosshatch skin with a few minor css modifications.  

Mr Smither I have the exact same requirement as ASU, in that I need to move the search box from the logo/header area into an area to the right of the Navigation bar. If you can remember back to July last year, I'd be grateful to see how it's done. I'm running Cubecart v6 and you can see the work in progress here.

 

I thought it would be a simple case of moving the Smarty placeholder {$SEARCH_FORM} to between the end div tags of nav and navcontainer in  box.navigation.php, but it doesn't seem to work.

 

Any help much appreciated.

 

code snippet:

 

<div id="nav">

<div class="navContainer">

<ul class="dropdown">

<li><a href="{$STORE_URL}/index.php" title="{$LANG.navigation.homepage}">{$LANG.navigation.homepage}</a></li>

{$NAVIGATION_TREE} {if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}

<li class="li-nav"><a href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>

{/if} {if $CTRL_SALE}

<li class="li-nav"><a href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>

{/if}

</ul>

</div>

{$SEARCH_FORM}                                 <=== here's what I want to do,  but it does not render

</div>

 

I'm using the Crosshatch skin with a few minor css modifications. 

Mr Smither I have the exact same requirement as ASU, in that I need to move the search box from the logo/header area into an area to the right of the Navigation bar. If you can remember back to July last year, I'd be grateful to see how it's done. I'm running Cubecart v6 and you can see the work in progress here.

 

I thought it would be a simple case of moving the Smarty placeholder {$SEARCH_FORM} to between the end div tags of nav and navcontainer in  box.navigation.php, but it doesn't seem to work.

 

Any help much appreciated.

 

code snippet:

 

<div id="nav">

<div class="navContainer">

<ul class="dropdown">

<li><a href="{$STORE_URL}/index.php" title="{$LANG.navigation.homepage}">{$LANG.navigation.homepage}</a></li>

{$NAVIGATION_TREE} {if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}

<li class="li-nav"><a href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>

{/if} {if $CTRL_SALE}

<li class="li-nav"><a href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>

{/if}

</ul>

</div>

{$SEARCH_FORM}                                 <=== here's what I want to do,  but it does not render

</div>

 

I'm using the Crosshatch skin with a few minor css modifications. 

[Mike MacKechnie]

Mr Smither I have the exact same requirement as ASU, in that I need to move the search box from the logo/header area into an area to the right of the Navigation bar. If you can remember back to July last year, I'd be grateful to see how it's done. I'm running Cubecart v6 and you can see the work in progress here.

 

I thought it would be a simple case of moving the Smarty placeholder {$SEARCH_FORM} to between the end div tags of nav and navcontainer in  box.navigation.php, but it doesn't seem to work.

 

Any help much appreciated.

 

code snippet:

 

<div id="nav">

<div class="navContainer">

<ul class="dropdown">

<li><a href="{$STORE_URL}/index.php" title="{$LANG.navigation.homepage}">{$LANG.navigation.homepage}</a></li>

{$NAVIGATION_TREE} {if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}

<li class="li-nav"><a href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>

{/if} {if $CTRL_SALE}

<li class="li-nav"><a href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>

{/if}

</ul>

</div>

{$SEARCH_FORM}                                 <=== here's what I want to do,  but it does not render

</div>

 

I'm using the Crosshatch skin with a few minor css modifications. 

[Mike MacKechnie]

This was resolved by the good Mr. Smither, via PM:

 

In /classes/gui.class.php:

Find:
public function displayCommon()
 
Then find:
            $this->_displayNavigation();
            $this->_displaySearchBox();

 

Switch the order of these two statements.