Logo change & adjust, products page picture size change, remove color menu etc.

Hi dear Magento master,

I very like your Magento themes but I need to do some adjustment to suit our products. Please help me followed questions:

1. How to change the logo & text, I also want to adjust the area height because I think the logo&text area is too heigh.

2. How to set the products page image height & width and related picture size etc.

3. I have choosed pink color for the website and I want to remove the color from menu so please help me.

4. About the JM products & JM Category list, I want all link on the picture also (now only link on title).

5.I want to set products description, aditional information, upsell products, products tags etc display on one page just like JM Lead.

Thanks for your great job and please instruct me.

Hera Wigs Store

15 answers

Profile photo of thangnn1510 0.00 $tone May 6, 2011
Public

Hi Hera!

1. How to change the logo & texture, I also want to adjust the height because I think the logo area is too heigh.

>> Please replace logo.png with your file (logo.png) in skin/frontend/default/jm_tyrolite/images.

You could change its height change height parameter in this code:

Code:

h1#logo, h1#logo a {
  display: block;
  height: 127px;
  width: 450px;
}

(line 268 of skin/frontend/default/jm_tyrolite/css/theme.css)

2. How to set the products page image height & width and related picture size etc.

>>
*) to change products image size in products list page (category, search…) please do the following:
-- open list.phtml in app\design\frontend\default\jm_tyrolitetemplate\c atalog\product
-- Change this code:

Code:

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(200,150); ?>" width="200" height="150" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>

(change 200, 150 to your image size).
*) Product detail page please do the following:
-- Open media.phtml in app\design\frontend\default\jm_tyrolitetemplate\c atalog\product\view and then edit these code:

Code:

$_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(250,188).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';

Code:

$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(210).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" />';

and

Code:

 <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="ja-colorbox" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>">
				<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56, 42); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>

*) JM category list please go to blog_item.phtml in app\design\frontend\default\jm_tyrolitetemplate\j oomlart\jmcategorylist and change this code

Code:

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(225, 169)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>

*) JM PRODUCTS LIST (change in admin system->configuration->JM product list)

*) JM Product slider (change in admin system->configuration->JM product slider)

*) JM Product Spotlight (change in admin system->configuration->JM product Spotlight)

3. I have choosed pink color for the website and I want to remove the color from menu so please help me.

>> please follow this: http://www.joomlart.com/forums/showt…592#post235592

4. I have added some tips on top search box but I need to width the search box to let all tip show and the tip is italic, I need the tip regular.

>> please edit this code:

Code:

input#search {
  background: url("../images/icon-search.png") no-repeat scroll 5px center #454545;
  border: 1px solid #2B2B2B;
  color: #C1C1C1;
  font-size: 92%;
  font-style: italic;
  padding: 5px 5px 5px 30px;
  width: 160px;
}

in skin/frontend/default/jm_tyrolite/css/theme.css

5. About the JM products & JM Category list, I want all link on the picture also (now only link on title).

>>
*) JM Products:

Please edit this code:

Code:

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize($thumbnailw, $thumbnailh)->setWatermarkSize('30x10'); ?>" class="lst_img" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>

to

Code:

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize($thumbnailw, $thumbnailh)->setWatermarkSize('30x10'); ?>" class="lst_img" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/></a>

in app\design\frontend\default\jm_tyrolitetemplate\j oomlart\jmproducts\list.phtml

*) JM Category list

Please edit this code:

Code:

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(225, 169)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>

to

Code:

<a title="<?php echo $_product->getName()?>" href="<?php echo $_product->getProductUrl()?>">
	<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(225, 169)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>
</a>

in app\design\frontend\default\jm_tyrolitetemplate\j oomlart\jmcategorylist\block_item.phtml

6.I want to set products description, aditional information, upsell products, products tags etc display on one page just like JM Lead.

>> They are all setted in product detail page.

Hope this help and good luck!

#1
Profile photo of Michael Cao 0.00 $tone May 8, 2011
Public

Thank you very much, thangnn1510!

You not only have very good Magento themes, but also have wonderful after service. Your website is the best what I have met until now.

Your answer is very useful and I have done on our website but we still have little problems and hope you can solve that for us:

1. How to change the height between menu and JM Slidershow? I want to reduce the height and it’s better to let’s know each details then we can reduce the height and keep it good scale.

2. Generally speaking, I have adjusted the pictures size correct but I don’t know the followed code for what: "$_img = ‘<img src="’.$this->helper(‘catalog/image’)->init($_product, ‘image’)->resize(210).’" alt="’.$this->htmlEscape($_product->getImageLabel()).’" />’;", especial "210" for what, which in media.phtml of app\design\frontend\default\jm_tyrolitetemplate\c atalog\product\view.

And for products page, I have changed the picture size as what I want but it has a little problem for thumbnail pictures show and I think it may should control by css, please let’s know how to set. The followed is the link for sample: http://herawigs.nextmp.net/human-hai…/privo-25.html

3.I have diabled the color choose. But in fact, I want to use Pink color for website and meanwhile disabled the color choose. But it’s default color now so could you let’s know how to set is pink color for website, please?

4. About the JM Slideshow, logo & text, I only want it show on homepage and I want to disable that on category page and product page etc, please let’s know how to do that.

5.I want to set products description, aditional information, upsell products, products tags etc display on one page just like JM Lead. I mean I want them to show one by one vertically, not controled by tab.

6. I also want to know how to change the upsell products & related products pictures size in products details page.

Many thanks for your great job and help in advance. I love you & your website.

#2
Profile photo of thangnn1510 0.00 $tone May 10, 2011
Public

Hi Herahairsalon!

Thank you. We give much effort to give best service and products. Thank for you interest. The following are our solutions for your questions, problems:

1. How to change the height between menu and JM Slidershow? I want to reduce the height and it’s better to let’s know each details then we can reduce the height and keep it good scale.

>> Could you give an image about what you want to change. In this theme, there

#3
Profile photo of Michael Cao 0.00 $tone May 10, 2011
Public

Hi thangnn1510,

You are helping me to do a perfect website, many thanks, man!
1.

>> 210 is the size of thumbnail that resize function create, you could use this in another way: $this->helper(‘catalog/image’)->init($_product, ‘image’)->resize(210, 210) the first is width and the second is height of the image.

Now I have known what "210" mean but I can’t sure this "resize(210, 210)" control which pictures, please?

2.

*) JM PRODUCTS LIST (change in admin system->configuration->JM product list)

*) JM Product Spotlight (change in admin system->configuration->JM product Spotlight)

Now I am using JM_tyrolite quickstart and I dosen’t find "system->configuration->JM product list" & "system->configuration->JM product Spotlight" so could you let’s know how I can setup that because I need to change products list picture size and products columns.

3. In fact, I just want to change the Logo and header texts between Menu and JM Slideshow so I hope you can let’s know each details then I can change the area between Menu and JM Slideshow perfect. Could you understand me now? The logo’s upside and downside have too much blank area and I want to change little. Meanwhile, I don’t want to show the logo & header text in product page and category list, so please let’s how to do also.

4. I want to add some static blocks like Contact us. In fact, I have added some static blocks in CMS->static blocks but I don’t know how to let it show in frontend?

5. If there is any opportunity that I can join your work team, please? I hope to work with you, I very admire your talent and works.

Any way, thank you again!

#4
Profile photo of thangnn1510 0.00 $tone May 11, 2011
Public

Hi Herahairsalon!

The following are our answers:

1.
Now I have known what "210" mean but I can’t sure this "resize(210, 210)" control which

pictures, please?

>> this control size of Main image in product detail page.

2.
Now I am using JM_tyrolite quickstart and I dosen’t find "system->configuration->JM product

list" & "system->configuration->JM product Spotlight" so could you let’s know how I can setup

that because I need to change products list picture size and products columns.

>> Please view my attachment

3. In fact, I just want to change the Logo and header texts between Menu and JM Slideshow so I

hope you can let’s know each details then I can change the area between Menu and JM Slideshow

perfect. Could you understand me now? The logo’s upside and downside have too much blank area

and I want to change little. Meanwhile, I don’t want to show the logo & header text in product

page and category list, so please let’s how to do also.

>>
Please change padding of:

#ja-header .main {
padding: 30px 0;
z-index: 99;
}

in skin/frontend/default/jm_tyrolite/css/theme.css.

You could hide the logo and header text in category list and product page by css code:

Please do the following:

Add this code:

.catalog-category-view #ja-header, .catalog-category-view #ja-topsl, .catalog-product-view

#ja-header, .catalog-product-view #ja-topsl{
display:none;
}

to the end of skin/frontend/default/jm_tyrolite/css/theme.css.

4. I want to add some static blocks like Contact us. In fact, I have added some static blocks

in CMS->static blocks but I don’t know how to let it show in frontend?

>> Please call this:

<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘your_block_id’)->toHtml() ?>

in phtml file that you want to call the block.

5. If there is any opportunity that I can join your work team, please? I hope to work with you, I very admire your talent and works.
>> there’s many opportunity for us to working together. You could ask Mr.Hung Dinh about this problem. .

#5
Profile photo of Michael Cao 0.00 $tone May 11, 2011
Public

Hi thangnn1510,

Many thanks for your quick and useful reply. I have upgrade the website better now but I still have little problems so hope you can continue to help us:

1.

1.
Now I have known what "210" mean but I can’t sure this "resize(210, 210)" control which

pictures, please?
>> this control size of Main image in product detail page.

In fact, I have adjusted the product details page but I do don’t know "$_img = ‘<img src="’.$this->helper(‘catalog/image’)->init($_product, ‘image’)->resize(210).’" alt="’.$this->htmlEscape($_product->getImageLabel()).’" />’;" this code control which picture. Now you can visit our product page by this link http://herawigs.nextmp.net/hera-wavy…hair-wigs.html and give us one sample then we could know how to change this number.

2.

2.
Now I am using JM_tyrolite quickstart and I dosen’t find "system->configuration->JM product

list" & "system->configuration->JM product Spotlight" so could you let’s know how I can setup

that because I need to change products list picture size and products columns.
>> Please view my attachment

What a pitty that your attachment can’t open. In fact, my main question is how to change the columns number & product picture size of product list page?

3. Now I just find the the slideshow picture is in right about 15-20px, could you let’s know what’s problem and how to solve that? you can check our website by http://herawigs.nextmp.net/

4. About the block, I just want to have same block as http://www.herawigs.com in "contact us place" but I find this theme is not easy as JM Lead. So do you have any easy way to do that just like JM Lead? Please notice I want it show in "Contact us area", not in "Explore Area".

Of course, if you solve followed No.5 question, No.4 question will not be important. Because we just want to supply some tips for customers.

5. This point is very important for us.

About the product page, we want to have same effect like the followed link: http://www.towigs.com/lace-wigs/full…-curly007.html

In this page, there are many dropdown menu before Add to cart button, such as "hair color" behind is "*Hair Color Chart" link, I just want to know how to add this link in our product page: http://herawigs.nextmp.net/hera-wavy…hair-wigs.html.

This is very useful and very important so hope you can let’s know that.

I know I do have too many questions, but I do love your theme and want to make it perfect for us so hope you can continue help us.

Many many thanks in advance for your quick reply!

#6
Profile photo of thangnn1510 0.00 $tone May 14, 2011
Public

Hi herahairsalon!

Below are our solutions/answers for your problems:

1.

In fact, I have adjusted the product details page but I do don’t know "$_img = ‘<img src="’.$this->helper(‘catalog/image’)->init($_product, ‘image’)->resize(210).’"

alt="’.$this->htmlEscape($_product->getImageLabel()).’" />’;" this code control which picture. Now you can visit our product page by this link

http://herawigs.nextmp.net/hera-wavy…hair-wigs.html and give us one sample then we could know how to change this number.

>> you have edited it in a right way. Don’t worry about 210. you just changed it.

2.

What a pitty that your attachment can’t open. In fact, my main question is how to change the columns number & product picture size of product list page?

>>

-- Change column number:

Please change this code:

Code:

<action method="setColumnCount"><count>3</count></action>

(Change 3) in line 102 and 145 of app\design\frontend\default\jm_tyrolite\layout\cat alog.xml

-- Change image size of product (I have answered you before, I posted it again here):

*) to change products image size in products list page (category, search…) please do the following:
-- open list.phtml in app\design\frontend\default\jm_tyrolitetemplate\c atalog\product
-- Change this code:

Code:

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img 

src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(200,150); ?>" width="200" height="150" alt="<?php echo $this->htmlEscape($this-

>getImageLabel($_product, 'small_image')) ?>" /></a>

(change 200, 150 to your image size).

3. Now I just find the the slideshow picture is in right about 15-20px, could you let’s know what’s problem and how to solve that? you can check our website by

http://herawigs.nextmp.net/

>> Please change this code:

Code:

.main .main-inner1 {
 margin-left:15px;
 margin-right:15px;
}

to

Code:

.main .main-inner1 {
 margin-left:0;
 margin-right:0;
}

in skin/frontend/default/jm_tyrolite/css/layout.css

4. About the block, I just want to have same block as http://www.herawigs.com in "contact us place" but I find this theme is not easy as JM Lead. So do you have any

easy way to do that just like JM Lead? Please notice I want it show in "Contact us area", not in "Explore Area".

Of course, if you solve followed No.5 question, No.4 question will not be important. Because we just want to supply some tips for customers.

>> Copy app\design\frontend\base\defaulttemplate\contacts \form.phtml to app\design\frontend\default\jm_tyrolitetemplate\c ontacts\form.phtml

and Please call this:

Code:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('your_block_id')->toHtml() ?>

change "your_block_id" with your static block id.

5. This point is very important for us.

About the product page, we want to have same effect like the followed link: http://www.towigs.com/lace-wigs/full…-curly007.html

In this page, there are many dropdown menu before Add to cart button, such as "hair color" behind is "*Hair Color Chart" link, I just want to know how to add this link

in our product page: http://herawigs.nextmp.net/hera-wavy…hair-wigs.html.

>> We don’t have solution for this. Sorry for this inconvenience.

#7
Profile photo of Michael Cao 0.00 $tone May 15, 2011
Public

Hi thangnn1510,

Thanks again for you and we have perfect our website further. But I still have some littel problem for this:

1.

Change column number:

Please change this code:
Code:

<action method="setColumnCount"><count>3</count></action>

(Change 3) in line 102 and 145 of app\design\frontend\default\jm_tyrolite\layout\cat alog.xml

I have changed 3 to 4 but no any change in products category list, which is still 3 columns, you can check by followed link:http://herawigs.nextmp.net/human-hai…s-on-sale.html

#8
Profile photo of Michael Cao 0.00 $tone May 23, 2011
Public

Hi thangnn1510,

Hope your everything is fine.

Now I am still waiting for the answer for how to change the category products columns. I have changed as what you told me before but it still is 3 columns, please check that on herawigs.nextmp.net , thanks in advance.

#11

This question is now closed

Written By

Comments