Joomla Templates Club 406,261 posts

[ghbridge Friend ghbridgeJoin date: July 2013Posts: 12Downloads:9Uploads:0 Thanks: 9 Thanked: 3 times in 1 posts]

#189821

I would like to replace the background colour on the Masshead with an image or even just make the background white. I have looked at the documentation for masshead and it tells me to put

[Masshead Itemid=”435,481,482,483,484,546,547,548,549″ title=”Hi.” background=”/images/joomlart/demo/photo/box_1_th.jpg”]

into the configuration conditions, which I have done, but it appears to have no effect.

For a start, there appears to be no reference to the background colour in these conditions, so therefore where is it determined? In the case of this template, the colour derives frome the colour scheme for the template itself but when I look in template.css the masshead section again makes no reference to the background.

What can I do to change it?

Alternatively, if I switch off Masshead, can someone tell me how to create a custom module of the same size as Mass head and ensure that it appears in that position on the Home page.

Thanks in advance 🙂

Ps – just seen the title and I can spell coloured but can’t change it – sorry! (Or even colored for all you northern Americans out there..)

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#502758

Hi ghbridge,

As the document here:
http://www.joomlart.com/forums/topic/userguide-ja-masshead-module-for-joomla-1-7/
You should modify the markup of JA Masshead module to something like this.

<?php
/**
* $JA#COPYRIGHT$
*/

defined('_JEXEC') or die('Restricted access');
?>
<div class="jamasshead<?php echo $params->get('moduleclass_sfx','')?>" <?php if(isset($masshead['params']['background'])): ?> style="background-image: url(<?php echo $masshead['params']['background'] ?>)" <?php endif; ?>>
<h3 class="jamasshead-title"><?php echo $masshead['title']; ?></h3>
<div class="jamasshead-description"><?php echo $masshead['description']; ?></div>
</div>

1. Create a folder /html/mod_jamasshead
2. Create default.php file in that folder with content above

In case that you want to turn off JA Masshead and use another module.
Please take a look at the userguide here:
http://joomlart.com/documentation/joomla/ja-templates/904-ja-fixel-template

1. Make sure you select a Additional position in template settings (home-1 should be default)
2. Publish your module to that position
3. Use class suffix to control the size and order (grid-2×2 grid-pos-1, please check JA Slideshow module (Shop menu) for example)

Hope it helps,

Regards

1 user says Thank You to Wall Crasher for this useful post

1. ghbridge

[ghbridge Friend ghbridgeJoin date: July 2013Posts: 12Downloads:9Uploads:0 Thanks: 9 Thanked: 3 times in 1 posts]

#502838

Thanks for the reply – very useful. The background image in masshead makes perfect sense and I will try it to see that I can! In the meantime, what I actually did was to put JA Slideshow module in the home-1 position. However, I seem to be restricted in the width of the module to 2×1 or 3×2, defined by the class suffix. I have tried editing the template.css to allow a size of 4×2 but even with the css edited, if you try putting grid-4×2 it just defaults to 1×1. Is there somewhere else in the css that constrains the allowable module sizes?

Thanks again.

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#502850

Hi ghbridge,

After you define the grid size in css, you need to change on javascript also.
You should see the function below around line 290 in templatesja_fixeljsscript.js. Just add your new size there.

updateItems = function(items){
if(itemWidth == 0){
return false;
}

if(!items){
items = $(masonry.masonry('getItemElements'));
}

items.width(itemWidth).height(itemWidth);
items.filter('.grid-2x1').width(itemWidth * 2);
items.filter('.grid-1x2').height(itemWidth * 2);
items.filter('.grid-2x2').width(itemWidth * 2).height(itemWidth * 2);
items.filter('.grid-3x2').width(itemWidth * 3).height(itemWidth * 2);
},

Regards

1 user says Thank You to Wall Crasher for this useful post

1. ghbridge

[ghbridge Friend ghbridgeJoin date: July 2013Posts: 12Downloads:9Uploads:0 Thanks: 9 Thanked: 3 times in 1 posts]

#502918

Awesome – thank you so much – works perfectly.

[aaronnak Friend aaronnakJoin date: September 2013Posts: 22Downloads:0Uploads:9 Thanks: 12]

#508299

Hi, I think I’m trying to do something similar to the original question.. I don’t have much coding skills but I’m trying to get an image to be in place of the masshead except 2×3. I disabled the masshead module and created a custom HTML module with the image I want but when I did that, the image was resized to fill the 2×2 spot and there’s white space on the bottom of the box. I’ve attached a screenshot. Or you can visit the page for yourself here. Any pointers to get me going in the right direction, please?

---

Attachments:

1. 

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#508307

Hi aaronnak,

For module sizing, you should use Module class suffix. Here the document.
http://www.joomlart.com/documentation/joomla-templates/ja-fixel#extensions-config

By default, we have grid-1×1, grid-1×2, grid-2×1, grid-2×2 and grid-3×2. As in my first answer, you can define a new grid type via javascript and css.

For your problem, you can define a new grid type, or just crop your image to a rectangle size. It is more easier.

Regards

[Author]

Posts