1. Carrie Wrigley
  2. Commercial Templates
  3. Saturday, 21 May 2016
  4.  Subscribe via email
On a recent forum post, a moderator answered one of my questions with this comment:

"You have to put module J51_Carousel on position showcase. With J51_Carousel you can put text and other content on the header image."

That sounds great - except I couldn't find any documentation anywhere on J51's site about how to do this. Tutorials exist for some of the other J51 modules, but there didn't seem to be any on Carousel. (Or on the Header Slideshow for Caitlyn either, which launched my original question, as I couldn't get more than 1 inch of image to display above the nav bar.)

I love the look of these features in the demo - in fact they are the reason I resubscribed to J51 after my subscription expired. However, I am not finding it possible to manage these modules without some guidance. Please help?
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Carrie

In our Caitlin template the header slideshow runs in the background of the header. This allows the option to overlay the header slideshow with any module of your choice. Any module placed in the 'showcase' module position will sit on top of your header slideshow. The downside to this is that the slideshow does not have a physical height with the exception of a min-height to contain the logo. Extending the height of the header area relies on content in the 'showcase' module position. For the homepage of the template demo we used the J51 Carousel module set in the 'showcase' module position.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
This is great - except that I can't figure out how to use the Carousel module, and there doesn't seem to be any help or documentation for this particular module. I want to be able to add images with text. How do I do that for each of the slides?

In your Caitlyn demo, I notice 3 examples of what I want to be able to do, but can't figure out how to do:

1) The first is the home page example for the Caitlyn template, where the female model appears in a navy blue box about 3-4 inches high, with text in white to the left of her face., with the nav bar below. This is a non-moving, static example. Then, on pages other than the homepage, the top of the model's head (about an inch) is visible above the nav bar. It is this variation, the full image for the home page, the partial image above the nav bar for other pages, that I want to be able to replicate.

2) The same basic idea, a static image with words across the image, is visible in all 6 of your "example styles." I'd like to similarly be able to use different images with different text for several multi-vendor pages within my site, each with a different look and different text. Just can't figure out how to do it.

3) The third and most important example on the demo (my favorite!) is under Caitlyn demo/TemplateFeatures/Header Image Slideshow. a slideshow consisting of 6 images. Text floats over the top of the images, "popping" out in an animated way. This is the look I most want to replicate on my site. The descriptive text for this page says:

"Bring your website project to life by easily adding a selection of images to appear in a slideshow in the header area of your template. Setup of the slideshow is all done within the templates parameters without the need of any module extension. This has allowed us to style the slideshow to form perfectly within the styling of your template. The slideshow is fully responsive to ensure your images are displayed perfectly across all screen sizes and devices."

Which sounds perfect - but when I try to do it, I just get the top 1 inch showing on my images and no ability to add text. Though it says "without the need of any module extension" and it is supposed to "form perfectly" across all screen sizes and devices" - I can't get it to display more than the 1 inch above the nav bar, and can't figure out how to add text to the image. The forum posts responding to my queries seem to suggest you need to plug in Carousel (which lacks how-to documentation) though this Header Slideshow text says you need no additional module. I'm confused by this seeming discrepancy.

The Caitlyn demo is unspeakably beautiful and inspiring - which is why I renewed my subscription, because I really want to use this template on several of my sites, with the ability to create similar pages. Now that I'm here though, I need clarification on how to use the template to create what I see, since there is no default in the template itself matching the look of the demo. Hope you can help.

I
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
PS - All 5 of my current websites are using Joomla 51 templates with slideshows in the header. I love the look of these, but have been told by my SEO adviser that these images should contain text (as your demos do) with links to spur visitors to action within the site. Is there a way to do that within the template functionality ?

When I saw the Header Slideshow in the Caitlyn demo, featuring text as well as images in the slideshow, I was hopeful that this might be a new module or capacity in your templates, allowing users to input text as well as images directly into the template, without having to previously layer text into the image in Photoshop or something first. True/false?
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Carrie

For the homepage of the Caitlin template demo a 'Custom HTML' module was used in the shocase module position to extend the height of the header area. In this 'Custom HTML' module the following markup was used...


<div style="max-width: 400px; margin-top: 40px; margin-bottom: 60px;">
<h4>LETS BE INSPIRED</h4>
<h2>A Joomla Template that is flexible, powerful & easy to use.</h2>
<a class="btn" href="#">Get started</a>
</div>


On the 'Header Image Slideshow' page of the Caitlin template demo we used the 'J51 - Carousel' module in the 'showcase' module position to extend the height of the header area. For this module we used the following 'General Settings'... https://gyazo.com/1c8c1f7aaa293bc6c6540ecfd7dcbfa3

For each column of the carousel module we a centered H2 heading. Eg.


<h2 style="text-align: center;">A Unique and Innovative Design</h2> 


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.