Not sure if this should be here or in another forum. This is the template I'm using so I'll start here. Feel free to move it or ask me to, if needed.

My website:
newprairiecounseling.com/

I've got a custom HTML module in the Sidebar2 position - same one as the demo, with my content in it. I would like to replace the current single photo at the top of the module with a slideshow of a couple photos. So, what I want in the module is: Photos, then some text, then the button (just as it appears currently, but with multiple photos fading from one to another).

If I create a new zentools module to do this, it doesn't look like I can keep the text and button in the module. If I keep it as a custom HTML it doesn't look like there's a way to add a zentools slideshow into that HTML module.

Any suggestions? Is there another extension I could try from JED? I prefer sticking with joomlabamboo built-ins whenever possible, to avoid stuff not playing nicely together. What's the easiest way to get it looking like it does now, but with a simple fading slideshow rather than one image? Any ideas are welcome. Thanks.

Andy

Hi Andy

Can you add the zentools module so we can see what it looks like
The amount of space is limited to work with which may be the problem

Cheers
Paul

I haven't created a zentools module yet. At least not fully. Is it possible to add text and a button into a zentools module the way the current HTML module looks?
Thanks,
Andy

Hi Andy,

You can load another module within a custom html module using the {loadposition positionname} syntax and enabling the 'prepare content' option.

So you can create a zentols module to just rotate the images and then use that to replace the current image.

Regards,

Rob

Thanks!
That sounds like exactly what I'm looking for. I'll give it a try and report back.
Andy

Good luck with it

Cheers
Paul

OK, So I've got the module created. Check it out at:

newprairiecounseling.com/

The only thing I'd still like to do is match the styling closer to the module with the static image. If you compare the two (they're both in the sidebar position, one above the other) the module with the slideshow has some extra dropshadow stuff and the image is smaller.

Any ideas how I could tweak it to match the other module - bigger image without the dropshadows?

Thanks,
Andy

First - For this to work we need a unique class added to the module - to ensure styling doesn't affect other areas of the site

Cheers
Paul

Can you point me to any tutorials or info on creating unique classes? I have a basic idea, but haven't done this before.

OK, so I read a quick bit on using module class suffixes. Figured if I put a new class into the module with no leading space it would override existing CSS. I did that, and it seems to have worked. I haven't added anything to the template.css file for that unique class. I don't think I need to. Have I done anything that would majorly screw things up?

It's now definitely sufficiently close to the other module in style. I'd love to get the top margin smaller - again matching the module with the static image. I'm not sure how to do that. Maybe adding some specific styling to that unique class in the css file?

Thanks,
Andy

Hi Andy,

for classes to work you need a space first - without the spacing it is actually breaking the styling that would apply

Are you loading the zentools in a custom module?

#sidebar-2 .moduletable.biosnewclass {margin:0}

#sidebar-2 .moduletable.biosnewclass .zentools.flexslider .slides img {margin:0;}

Adjusts it

Cheers
Paul

OK. So, I add the leading space to the bios class in the module. Then I add that code you mentioned to the template.css file. Correct?

Yes its the start of the process

Cheers
Paul

Not sure what I'm doing wrong. I added the leading space to the module class suffix. I added the above code to the template.css file. It doesn't seem to be changing anything. I've tried changing the margin value to a bigger number just to see if anything changed - no change.

I also tried adding 'box-shadow: none' to the above code to see if that got rid of the dropshadow, to no avail. However, I might be missing something more fundamental because nothing is changing.

Any advice would be great.

Thanks,
Andy

Hi Andy,

Where are you adding the css code?

Cheers
Paul

I added it to the end of the template.css file in the Venture folder, via cPanel.

ah ok

Every time you save the template settings those changes will be lost

You need to check out this page

docs.joomlabamboo.com/zen-grid-framework-4/theme/customisation.html

I'd suggest the easiest way is to use the custom.css file

Cheers
Paul

OK, so I added the following to the custom.css:

#sidebar-2 .moduletable.biosnewclass {margin:0; padding:0; box-shadow:none; position: relative; top: -13px;}

#sidebar-2 .moduletable.biosnewclass .zentools.flexslider .slides img {margin:0; Padding:0; box-shadow:none; position: relative; top: -13px;}

That seems to have done the trick. I was able to move the images up where I wanted them using the position:relative:top tag. Is that the best way to do that? Feel free to suggest something better, but it seems to have worked - at least on my macbook/chrome.

Thanks!
Andy

I don't think you need the relative or top values

Cheers
Paul