Jump to content

a different image for each box

Guest pixibab

By Guest pixibab
in Customising Look & Feel

 Share

Recommended Posts

Guest pixibab

Guest pixibab

Posted
Posted

hello

i am in the process of building this shop (before i buy it and go live) and i have been messing with it with some success (thanks to this forum!) for the last couple days, but there is one thing i MUST do that i just cannot find in here or figure out, myself:

i need to swap the box headers/titles for images - i know how to use css to change the background of all to the SAME IMAGE - but what i need to do is replace the whole thing (background AND text of each) with a UNIQUE IMAGE FOR EACH BOX.

please bear in mind that i had not even touched PHP code before 3 days ago (but i am very very comfortable with html/xhtml and css) so simple and detailed answers (including paths to files) are greatly appreciated!

tech note: i started with the LEGEND template and changed it beyond recognition - but the folder & file structure remain true to that skin.

here is the testing area (in all it's messy glory) http://pixelbabygear.com/shop/index.php - keeping in mind that i have just begun to customize it, please let me know if you happen to stop by and see any glaring errors!

anyway, thanks for reading this - i have been very impressed with this board so i am waiting anxiously for your help and will be extremely grateful for any received!

thanks you guys,

k

ps

in addition, i want to replace all of the links contained within the boxes (ie. categories, site docs, etc..) with images - but i'm sure that is addressed elsewhere on this board. however, if you are feeling particularly generous towards newbies today, i would love a quick tutorial!

Link to comment
Share on other sites

Guest Meow Meow

Guest Meow Meow

Posted
Posted

hello

i am in the process of building this shop (before i buy it and go live) and i have been messing with it with some success (thanks to this forum!) for the last couple days, but there is one thing i MUST do that i just cannot find in here or figure out, myself:

i need to swap the box headers/titles for images - i know how to use css to change the background of all to the SAME IMAGE - but what i need to do is replace the whole thing (background AND text of each) with a UNIQUE IMAGE FOR EACH BOX.

please bear in mind that i had not even touched PHP code before 3 days ago (but i am very very comfortable with html/xhtml and css) so simple and detailed answers (including paths to files) are greatly appreciated!

tech note: i started with the LEGEND template and changed it beyond recognition - but the folder & file structure remain true to that skin.

anyway, thanks for reading this - i have been very impressed with this board so i am waiting anxiously for your help and will be extremely grateful for any received!

thanks you guys,

k

ps

in addition, i want to replace all of the links contained within the boxes (ie. categories, site docs, etc..) with images - but i'm sure that is addressed elsewhere on this board. however, if you are feeling particularly generous towards newbies today, i would love a quick tutorial!

lastly,

if you happen to know which file i need to find in order to change the SESSION text, that would be wonderful too! otherwise, i will figure it out as that's my next step..

+++

This has been addressed before, I would suggest that you search the forum. However, style.css is a good place to begin. ;)

Link to comment
Share on other sites
Guest pixibab

Guest pixibab

Posted
Posted

thank you

i searched pretty extensively and could not find the specific answer - woud you happen to know where it can be found?

i know how to use css to do it, if i can assign each box header a different style (or div), but i can't seem to find the file where i can add the styles or divs to each header. (the current style sheet assigns only one style to ALL box headers...

thanks again!

k

hello

i am in the process of building this shop (before i buy it and go live) and i have been messing with it with some success (thanks to this forum!) for the last couple days, but there is one thing i MUST do that i just cannot find in here or figure out, myself:

i need to swap the box headers/titles for images - i know how to use css to change the background of all to the SAME IMAGE - but what i need to do is replace the whole thing (background AND text of each) with a UNIQUE IMAGE FOR EACH BOX.

please bear in mind that i had not even touched PHP code before 3 days ago (but i am very very comfortable with html/xhtml and css) so simple and detailed answers (including paths to files) are greatly appreciated!

tech note: i started with the LEGEND template and changed it beyond recognition - but the folder & file structure remain true to that skin.

anyway, thanks for reading this - i have been very impressed with this board so i am waiting anxiously for your help and will be extremely grateful for any received!

thanks you guys,

k

ps

in addition, i want to replace all of the links contained within the boxes (ie. categories, site docs, etc..) with images - but i'm sure that is addressed elsewhere on this board. however, if you are feeling particularly generous towards newbies today, i would love a quick tutorial!

lastly,

if you happen to know which file i need to find in order to change the SESSION text, that would be wonderful too! otherwise, i will figure it out as that's my next step..

+++

This has been addressed before, I would suggest that you search the forum. However, style.css is a good place to begin. ;)

Link to comment
Share on other sites
Guest paulabakerparkin

Guest paulabakerparkin

Posted
Posted

You need to go into the template for each box which can be found within skin/yourskin/styletemplates/boxes and assign the newly created div's to each box.To change the session language go to language/en/lang.php...

Link to comment
Share on other sites
Guest pixibab

Guest pixibab

Posted
Posted

You need to go into the template for each box which can be found within skin/yourskin/styletemplates/boxes and assign the newly created div's to each box.To change the session language go to language/en/lang.php...

THANK YOU SO MUCH!! for the tip on how to edit EACH BOX HEADER - made the following change, for those who also want to know:

OPENED: "...skin/Legend/styleTemplates/boxes/categories.tpl"

CHANGED:

<div class="boxTitleLeft>{LANG_CATAGORIES_TITLE}</div>

TO:

<div class="boxTitleLeft"><img src="http://www.pixelbabygear.com/shop/skins/Legend/styleImages/backgrounds/browse_gear.gif" border="0" alt="browse pixelbaby gear"></div>

also changed the session text by editing the following files:

..skin/Legend/styleTemplates/boxes/session.tpl

..languages/en/lang.tpl

................................................................................

.................................

HOWEVER!!!!

i still cannot figure out how to define a CUSTOM image for EACH catagory link..

for example: say there are 3 catagories (hats / tshirts / rompers) and i make one graphic link for each..

if i make the same type of change (that i did to get the BOX HEADER to the image i want), it just displays the one image for every catagory..

i.e. i get "hats (image) / hats (image) /hats (image)".. because they are not defined separately in the "boxes/categories.tpl" file

anyone know how to fix that??

Link to comment
Share on other sites
Guest paulabakerparkin

Guest paulabakerparkin

Posted
Posted

You need to go into the template for each box which can be found within skin/yourskin/styletemplates/boxes and assign the newly created div's to each box.To change the session language go to language/en/lang.php...

THANK YOU! i really am grateful to you - that's exactly what i needed!

Anytime!

Link to comment
Share on other sites
markscarts Newbie

markscarts

Posted
Posted

This has been discussed before a few times, I always give the same answer, change it in only one file. You can add all your box top images in your language file, and keep a backup of the original in case you ever wish to change skins.

Example ~ language/en/lang.inc.php has this section:

(note - I have omitted terms not related to boxtops to save space)

$lang['front']['boxes'] = array(



'lang_links' => "Useful Links",



'shop_by_cat' => "Shop by Category",



'currency' => "Currency",



'information' => "Information",



'language' => "Language",



'popular_products' => "Popular Products",



'featured_prod' => "Featured Product",



'sale_items' => "Sale Items",



'shopping_cart' => "Shopping Basket",



);




You may add html instead of words between double quotes, for instance:





$lang['front']['boxes'] = array(



'lang_links' => "<img src='skins/Graffitti/styleImages/titles/usefulLinks.jpg' border='0' alt='' />",



'shop_by_cat' => "<img src='skins/Graffitti/styleImages/titles/category.jpg' border='0' alt='' />",



'currency' => "<img src='skins/Graffitti/styleImages/titles/currency.jpg' border='0' alt='' />",



'information' => "<img src='skins/Graffitti/styleImages/titles/info.jpg' border='0' alt='' />",



'language' => "<img src='skins/Graffitti/styleImages/titles/language.jpg' border='0' alt='' />",



'popular_products' => "<img src='skins/Graffitti/styleImages/titles/popProd.jpg' border='0' alt='' />",



'featured_prod' => "<img src='skins/Graffitti/styleImages/titles/randProd.jpg' border='0' alt='' />",



'sale_items' => "<img src='skins/Graffitti/styleImages/titles/saleItems.jpg' border='0' alt='' />",



'shopping_cart' => "<img src='skins/Graffitti/styleImages/titles/category.jpg' border='0' alt='' />",



);

What you need to know about adding html there is do not use double quotes in the html, so as in my example above, rather than src="..." use src='...'.

The statement, whether words or html image calls, begins with " and ends with ", so don't confuse the code by adding a stray " in the middle. You could "escape" the quotes but we don't need to get into that.

Link to comment
Share on other sites
markscarts Newbie

markscarts

Posted
Posted

As to the second part of your question, here is how you accomplish what you're after (this is only one way, and it is just a template hack).

1. Name each image after the category id, except for the homepage link; name that one home.gif or some such.

example: A title for the category "seashells" would be named "9.gif" because the catId of "Seashells is "9"

2. Put all of these in the same folder somewhere; best bet would be top-level images folder in root of store. That way, the skin name does not have to be hard-coded into the template.

3. OPEN skins/xx/styleTemplates/boxes/categories.tpl

FIND the following:

	<ul>

		<li class="bullet"><a href="index.php" class="txtDefault">{LANG_HOME}</a></li>

		<!-- BEGIN: li -->

		<li class="bullet"><a href="index.php?act=viewCat&amp;catId={DATA.cat_id}" class="txtDefault">{DATA.cat_name}</a></li>

		<!-- END: li -->

	</ul>




CHANGE to:





	<div>

		<a href="index.php"><img src="images/general/home.gif" border="0" alt="" /></a><br />

		<!-- BEGIN: li -->

		<a href="index.php?act=viewCat&amp;catId={DATA.cat_id}">

				</a><img src="images/general/{DATA.cat_id}.gif" border="0" alt="{DATA.cat_name}" /><br />

		<!-- END: li -->

	</div>

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.

×
 Share
Go to topic listing
×
×
  • Create New...