size and position of picture and title

hi,
I have installed masshead extension under JM-Sporty but I need some help to

1. change image height. Now its 300px and when if I am using a picture of ex 200px the higher 100part of my picture are repeated

2. I would like to change position of the image to show in full width of the screen like with 1 col layout but having the layered navigation options at the left. ex your screenshot of introduction of the extension
Attachment 33387

3. finally I would like to make appear both title and description (with the used code bellow, only description is appearing) and also change the size and position of those texts

Pls find bellow the Code that I have copy and using in category design
<reference name="mass-top3">
<block type="joomlart_jmmasshead/core" name="jmmasshead" >
<action method="setData"><name>title</name><value>Bags</value></action>
<action method="setData"><name>background</name><value>images/media/BAGS-BANNER-810×300.jpg</value></action>
<action method="setData"><name>description</name><value>Spring summer bags collection</value></action>
</block>
</reference>

I will appreciate a lot if somebody can tell me where to find the code that I shall change

4 answers

Profile photo of Seoki Lee 1510.00 $tone January 28, 2014
Public

Please find my answers to your questions below:

1. To change image height, you can edit CSS style in ../skin/frontend/default/jm_sporty/css/styles.css file:
line 7602:

Code:

.jm-masshead {
	    height: 200px;
	    overflow: hidden;
	    width: 810px;
	}

2. To change position of the image to show in full width of the screen like with 1 col layout but having the layered navigation options at the left, you can edit via admin:
Catalog/Manage Categories: chosse category which you want change, click tab "Custom design":
Insert following code block into Custom Layout Update:

Code:

<reference name="topsl">
			<block type="joomlart_jmmasshead/core" name="jmmasshead"  >
				<action method="setData"><name>title</name><value>Hoodies Top</value></action>
				 <action method="setData"><name>background</name><value>images/media/mass-head-banner.jpg</value></action>
			</block>
		</reference>

See screen short for more details:

Attachment 33411

3. To display both title and description, you can insert your code via admin as follows:
Catalog/Manage Categories: chosse category which you want change, click tab "Custom design":
insert code block below into Custom Layout Update:

Code:

<reference name="topsl">
				<block type="joomlart_jmmasshead/core" name="jmmasshead" >
				<action method="setData"><name>title</name><value>Bags</value></action>
				<action method="setData"><name>background</name><value>images/media/BAGS-BANNER-810x300.jpg</value></action>
				<action method="setData"><name>description</name><value>Spring summer bags collection</value></action>
				</block>
			</reference>

Hope that helps.

#1
izyshoes 0.00 $tone January 28, 2014
Public

Thanks a lot for your quick reply.
All your team is very fast and I appreciate a lot since I can continue my job without delays.

I have used all information as described but I still have problem with Title and description.
Title is not showing at all and description is coming with small letters.

Shall I change anything more in style.css?
.jm-masshead .ja-masshead-title {display: none;} seems to be the problem but I am not sure.

The code that I a musing in categories custom layout is
===
<reference name="topsl">
<block type="joomlart_jmmasshead/core" name="jmmasshead" >
<action method="setData"><name>title</name><value>ACCESSORIES</value></action>
<action method="setData"><name>background</name><value>images/media/out-and-about-SSc2014--810×200.png</value></action>
<action method="setData"><name>description</name><value>Spring summer accessories collection</value></action>
</block>
</reference>
=== and the page url when selecting this category is
http://fashiontherapy.gr/magento/ind…cessories.html
(don’t worry for the size of the pic, I didn’t have the time to make a larger one)

#2
Profile photo of Lara 4810.00 $tone January 30, 2014
Public

Hi izyshoes,

Sorry that we can not provide you the solution soon, we need more time to resolve this. We will inform you of the progress of your issue

#3
Profile photo of Sherlock 0.00 $tone February 2, 2014
Public

@ izyshoes,

You can change

HTML Code:

 .jm-masshead .ja-masshead-title {display: none;}

to:

HTML Code:

 .jm-masshead .ja-masshead-title {display: block;}

To change the description’s font-size, you can add CSS rule below to the skin/frontend/default/jm_sporty/css/styles.css file:

HTML Code:

 .ja-masshead-desc > span {
                 font-size: 16px;
              }

You can modify the value 16px as you wish.

#4

Please login or Register to Submit Answer

Written By

Comments