Jump to content

Adding new boxes


Guest LNT

Recommended Posts

Hello all,

I am wondering if it would be possible to add new boxes to the cube cart site.

By this I mean that currently we have categories, popular products, shopping cart, featured item and so forth.

What I am wanting to do is to simply create a new box (with a name of my choice) and then add a couple of html tags into it so it will fetch images from over the net.

I have had a look in /skins/{myskin}/global/index.tpl

I have created an image which I have placed successfully on the site, however this is not an easy way as a new image would have to be created everytime.

Has anyone got any ideas on a quick easy way round this ?

Regards,

Tom.

Link to comment
Share on other sites

look at template styleTemplates/global/index.tpl under your prefered skin folder, open it and modify....

<div class="boxTitleLeft">Your head-line</div>

<div class="boxContentLeft">

add your code here

<border="0" >

</div>

<div class="boxFootLeft">&nbsp;</div>

Link to comment
Share on other sites

Easy as apple pie. Just add the following code to your index.tpl where you want the box to appear. BTW, the site search function would have given you the answer as well.

<div class="boxTitleRight">Your Title</div>

<div class="boxContentLeft">

code you wish to add

<border="0" >

</div>

<div class="boxFootRight">&nbsp;</div>

Link to comment
Share on other sites

Lol,

Cheers Guys.

I was thinking about what you said there before I made the post. But with everything looking like {shopping_cart} etc within the index.tpl i didnt know if it were multiple file editing in order for the css to take effect or not.

That certainly is superb and I will go an use this right away :unsure:

Cheers again.

Tom.

Link to comment
Share on other sites

  • 4 weeks later...
Guest Bitz'n'Batz

Hi, is it possable to have my categories listed in a box like that instead of on the top row???

But i would like to keep the top row with no categories in it

If it is possable can some1 tell me how please??

Link to comment
Share on other sites

  • 2 weeks later...
Guest Mysiteonline

I've added several boxes to my site can i make the text use the CSS files that the other boxes use the same colour / font?

Or do i have to amend the colour / font style myself?

Link to comment
Share on other sites

No problem. The links in boxes are generally controlled by the CSS class .txtDefault, so if you put a link in boxes, use this language:

<a href="URL_HERE" class="txtDefault">LINK_TEXT</a>




If you have text that is not a link, and doesn't look right, try this:




<span class="txtCopy">YOUR_TEXT_HERE</span>

There is a little more info on manipulating boxes in the Downloads > CC3 Hacks and Mods > Tutorials and Documentation section of this forum :lol:

Link to comment
Share on other sites

Guest Mysiteonline

Hi Mark

Thanks for the info & I've been reading your document in the downloads section.

Still having a slight problem which i can't work out!

The text still is'nt appearing right. If you look at my site, the new box on the left appears to have the right font but not the correct colour and the new box on the right has the right font and colour but appears with large text!

[The site

The code for the boxes if it helps is:

<div class="boxTitleRight">Quality Guarantee</div>

<div class="boxContentLeft">

<div align="center"><img src="images/quality.jpg" width="88" height="86"> </div><div align="center"><a href="http://www.inktech.co.uk/cube/index.php?act=viewDoc&docId=6" class="txtDefault">100% quality guarantee</a>

 </div> 

<border="0" >

</div>

<div class="boxFootRight">&nbsp;</div>





<div class="boxTitleLeft">Cartridge Finder</div>

<div class="boxContentLeft">

<span class="txtCopy">Search using your printer name or cartridge

code</span>

{SEARCH_FORM}

<border="0" >

</div>

Link to comment
Share on other sites

The first problem you mention regarding color of text - This is due to the fact that all the text in other boxes is a link, and therefore appears blue (except for the numbers in popular prods, which is also black.)

in the stylesheet, a blue color will be specified for a.txtDefault:link, but not for .txtDefault, you can change this in stylesheet so both links and standard text are same color if you wish.

The quickfix for your second problem is to add an inline style for the size:

<div class="boxTitleRight">Quality Guarantee</div>

<div class="boxContentLeft">

<div align="center"><img src="images/quality.jpg" width="88" height="86"> </div><div align="center"><a href="http://www.inktech.co.uk/cube/index.php?act=viewDoc&docId=6" class="txtDefault" style="font-size: 70%;">100% quality guarantee</a>

</div>

<border="0" >

</div>

<div class="boxFootRight">&nbsp;</div>

Of course, you can adjust the 70% to any size setting that suits you. This does not answer why the text is appearing so large in both IE and Mozilla, but it will be a quick fix for your problem to make it display right :lol:

Link to comment
Share on other sites

  • 1 month later...
  • 7 months later...
Guest SwishEmporium

I have added a box to place my paypal logo, but it is showing up differently between firefox and ie7.

Firefox shows the background color correctly yet ie7 has it cutoff. Is there a way that it shows correctly between the two browsers?

My site

Link to comment
Share on other sites

IE7 is a beta test release right now, so I wouldn't worry too much about coding for it just yet - the way it displays your box may change in final release.

Since IE is not very good at w3c official html and css standards compliance, designers usually have to "cheat" a little to make the display look right in IE. Evidently, IE7beta is no exception.

Link to comment
Share on other sites

  • 2 months later...

Hi, is it possable to have my categories listed in a box like that instead of on the top row???

But i would like to keep the top row with no categories in it

If it is possable can some1 tell me how please??

I wonder this too, using Killer.

Link to comment
Share on other sites

I added "my own" little script to add a categories-box in Killer.

It adds a "floating" navigation which expands when clicking the [+] and reduces when clicking the [-].

Open skins\Killer\styleTemplates\global\index.tpl

Find

		{CATEGORIES}

		<table border="0" cellspacing="0" width="100%" cellpadding="0">

		  <tr valign="top">

			<td width="175">


After add


<div class="boxTitleRight">Categories</div>

<div class="boxContentLeft">



<script type="text/javascript">



  function expand(ID)

  {

	document.getElementById('item'+ID).style.display = 'block';

	document.getElementById('expander'+ID).innerHTML =

'<span class="txtCopy"><a href="java script:collapse('+ID+')" title="Collapse" class="txtDefault">[-]</a>  </span>';

  }

  function collapse(ID)

  {

	document.getElementById('item'+ID).style.display = 'none';

	document.getElementById('expander'+ID).innerHTML =

'<span class="txtCopy"><a href="java script:expand('+ID+')" title="Expand" class="txtDefault">[+]</a> </span>';

  }

</script>



<div id="expander1" class="expander" style="display:inline"><span class="txtCopy"><a href="java script:expand(1)" title="Expand" class="txtDefault">[+]</a> </span></div>

<div style="display:inline"><span class="txtCopy"><a href="index.php?act=viewCat&catId=1" class="txtDefault">Main Category 1</a></span></div>

<div id="item1" style="display:none">

<span class="txtCopy">     <b>»</b> <a href="index.php?act=viewCat&catId=2" class="txtDefault">Sub Category 1</a></span><br>

<span class="txtCopy">     <b>»</b> <a href="index.php?act=viewCat&catId=3" class="txtDefault">Sub Category 2</a></span><br>

</div>

<br>



<div id="expander2" class="expander" style="display:inline"><span class="txtCopy"><a href="java script:expand(2)" title="Expand" class="txtDefault">[+]</a> </span></div>

<div style="display:inline"><span class="txtCopy"><a href="index.php?act=viewCat&catId=16" class="txtDefault">Main Category 2</a></span></div>

<div id="item2" style="display:none">

<span class="txtCopy">     <b>»</b> <a href="index.php?act=viewCat&catId=18" class="txtDefault">Sub Category 3</a></span><br>

<span class="txtCopy">     <b>»</b> <a href="index.php?act=viewCat&catId=18" class="txtDefault">Sub Category 4</a></span><br>

</div>

<br>



<div id="expander3" class="expander" style="display:inline"><span class="txtCopy"><a href="java script:expand(3)" title="Expand" class="txtDefault">[+]</a> </span></div>

<div style="display:inline"><span class="txtCopy"><a href="index.php?act=viewCat&catId=17" class="txtDefault">Main Category 3</a></span></div>

<div id="item3" style="display:none">

<span class="txtCopy">     <b>»</b> <a href="index.php?act=viewCat&catId=17" class="txtDefault">Sub Category 5</a></span><br>

<span class="txtCopy">     <b>»</b> <a href="index.php?act=viewCat&catId=17" class="txtDefault">Sub Category 6</a></span><br>

</div>

<br>

<border="0" >

</div>

<div class="boxFootRight">&nbsp;</div>

EDIT: sorry, all the nonbreakingspaces and HTML-codes for the raquo disappeard when using the CODE-tag in the post.

Link to comment
Share on other sites

  • 4 months later...
Guest bonnmac

I've finally gotten the box added and where I want it, but my yahoo ads aren't showing.

Any ideas would be greatly appreciated.

<!-- BEGIN: body -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset={VAL_ISO}" />

<title>{META_TITLE}</title>

<meta name="description" content="{META_DESC}" />

<meta name="keywords" content="{META_KEYWORDS}" />



<link href="skins/{VAL_SKIN}/styleSheets/layout.css" rel="stylesheet" type="text/css" />

<link href="skins/{VAL_SKIN}/styleSheets/style.css" rel="stylesheet" type="text/css" />

<script language="javascript" src="js/jslibrary.js" type="text/javascript"></script>

</head>



<body>

<div id="pageSurround">



	

		<div id="topHeader">

			<div id="sessionBox">

				<div style="padding: 15px 8px 15px 15px; margin: 0px;">

				{SEARCH_FORM}

				{SESSION}

				</div>

			</div>

		</div>

				

		<div id="subSurround">

		

		{CATEGORIES}

		<table border="0" cellspacing="0" width="100%" cellpadding="0">

		  <tr valign="top">

			<td width="175">

<div class="boxTitleRight">Ads by Yahoo</div>

<div class="boxContentLeft">

<script language="JavaScript" type="text/javascript">

<!--

ctxt_ad_partner = "3703241460";

ctxt_ad_section = "";

ctxt_ad_bg = "";

ctxt_ad_width = 120;

ctxt_ad_height = 600;

ctxt_ad_bc = "DF4CA2";

ctxt_ad_cc = "FDECFD";

ctxt_ad_lc = "1E3D99";

ctxt_ad_tc = "8F0043";

ctxt_ad_uc = "DF4CA2";

// -->

</script>

<script language="JavaScript" src="http://ypn-js.overture.com/partner/js/ypn.js">

</script>

<border="0" >

</div>

<div class="boxFootRight"> </div>

				{SHOPPING_CART}		

				{INFORMATION}	

				{CURRENCY}

				{LANGUAGE}</td>

			<td style="padding: 0px 5px 0px 5px;">{PAGE_CONTENT}</td>

			<td width="175">

					{RANDOM_PROD}

					{POPULAR_PRODUCTS}

					{SALE_ITEMS}

					{MAIL_LIST}

			</td>

		  </tr>

		</table>

	

	

	</div>

	{SITE_DOCS}

	

	

</div>



</body>

</html>

<!-- END: body -->

Link to comment
Share on other sites

  • 8 months later...
Guest dbishop103

Easy as apple pie. Just add the following code to your index.tpl where you want the box to appear.

Okay... I did this and it worked great (Thank you!)... question now - for a newbie to all this stuff... how do I make the text look like my other text? It's a different font and size and I'd like it uniform. My link is http://bishopscornerweb.com/store/ and the box I added was More Shops on the right. Thanks for your help. :)

Link to comment
Share on other sites

  • 4 weeks later...
Guest zeus_r6

I have a question...

I've gotten the links to work and the font to look the same as my other links in the box I added, but how would I go about adding the small bullet squares in front of each link I add?

Link to comment
Share on other sites

Guest dbishop103

I have a question...

I've gotten the links to work and the font to look the same as my other links in the box I added, but how would I go about adding the small bullet squares in front of each link I add?

Try using Alt-0149 to produce a bullet. Works great. :wacko:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...