Joomla Templates Club 406,261 posts

[cornishcharlie Friend cornishcharlieJoin date: August 2015Posts: 6Downloads:0Uploads:0 Thanks: 3]

#751650

Seriously Guys, what were you thinking??? This is a nightmare. the whole point of a template is to start with something that’s nice to look at and easy to adapt. Sure it’s nice to look at but totally impossible to change. You have made this so complicated it unworkable. Its bad enough that the code gets immediately stripped using a standard editor, but despite requests to correct it, you still have the incorrect code sitting in the documentation.
I have wasted a whole morning on this one section. And then somehow you get all three images from one png. I have absolutely no idea how you have done that. I’m sure it’s very very clever but what is the point? WHY WHY WHY make it so **** complicated ? Its 3 pictures and a bit of script.
How would I change the images, what if I wanted 6 images?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#705114

Hi cornishcharlie,

You can find my answer for your questions below:

– Editor:

The default editor pre-installed from Joomla often strips some HTML tags – this is a known issue in Joomla community. The initial idea of this ‘introducing’ module is that the template provides custom html module so with a bit knowledge of HTML, you can editor/customize it with ease. So you can disable the editor while editing this module and enable it later.

Another way is that you can go to settings of editor plugin which you’re using, for example, TinyMCE in Back-end > Extensions > Plugin manager, it provides options so that you can add prohibited html elements or valid elements there. You won’t need to worry for missing tags this way.

– 6 images instead of 3 images:

Yes, this is possible. If you see in output of this module, it includes 3 div block with class like:

<div class="span4 block">

if you want to have 6 items with 6 images, you can add additional 3 blocks and change the class to:

<div class="span2 block">

This follows the rule of Bootstrap grid system – 12 grids, you can change the number of span (span2, span4, span6, …) but just make sure the total of span equals to 12.

Here is sample output:


<div class="introducing">

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon1"> </i>
</div>
<h3 class="block-title">Web & UI Design</h3>
<div class="block-content">
<p>Metus Vestibulum cursus elit pretium auctor cursus lorem Vestibulum eros sagittis. Netus pede Vestibulum Quisque Nam pretium Donec ut vitae quis parturient. Auctor vel non <a href="#" title="Sample link">phasellus tincidunt</a>.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon2"></i>
</div>
<h3 class="block-title">Corporate Design </h3>
<div class="block-content">
<p>Condimentum platea cursus porta tellus eros consectetuer metus Sed aliquet tempus. Laoreet non ac porta urna Vestibulum congue id eu elit dignissim. Sollicitudin vitae ipsum massa enim lacus.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon3"></i>
</div>
<h3 class="block-title">iOS Development</h3>
<div class="block-content">
<p>Buspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera magna pharera aliquet. Nulla uitae elit libero, a pharetra augue nulla ligula massa pharera aliquet.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon1"> </i>
</div>
<h3 class="block-title">Web & UI Design</h3>
<div class="block-content">
<p>Metus Vestibulum cursus elit pretium auctor cursus lorem Vestibulum eros sagittis. Netus pede Vestibulum Quisque Nam pretium Donec ut vitae quis parturient. Auctor vel non <a href="#" title="Sample link">phasellus tincidunt</a>.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon2"></i>
</div>
<h3 class="block-title">Corporate Design </h3>
<div class="block-content">
<p>Condimentum platea cursus porta tellus eros consectetuer metus Sed aliquet tempus. Laoreet non ac porta urna Vestibulum congue id eu elit dignissim. Sollicitudin vitae ipsum massa enim lacus.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon3"></i>
</div>
<h3 class="block-title">iOS Development</h3>
<div class="block-content">
<p>Buspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera magna pharera aliquet. Nulla uitae elit libero, a pharetra augue nulla ligula massa pharera aliquet.</p>
</div></div>

</div>


If you have any concern when using this template, just let us know, we’re happy to help.

Regards,

Saguaros

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#751665

Hi cornishcharlie,

You can find my answer for your questions below:

– Editor:

The default editor pre-installed from Joomla often strips some HTML tags – this is a known issue in Joomla community. The initial idea of this ‘introducing’ module is that the template provides custom html module so with a bit knowledge of HTML, you can editor/customize it with ease. So you can disable the editor while editing this module and enable it later.

Another way is that you can go to settings of editor plugin which you’re using, for example, TinyMCE in Back-end > Extensions > Plugin manager, it provides options so that you can add prohibited html elements or valid elements there. You won’t need to worry for missing tags this way.

– 6 images instead of 3 images:

Yes, this is possible. If you see in output of this module, it includes 3 div block with class like:

<div class="span4 block">

if you want to have 6 items with 6 images, you can add additional 3 blocks and change the class to:

<div class="span2 block">

This follows the rule of Bootstrap grid system – 12 grids, you can change the number of span (span2, span4, span6, …) but just make sure the total of span equals to 12.

Here is sample output:


<div class="introducing">

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon1"> </i>
</div>
<h3 class="block-title">Web & UI Design</h3>
<div class="block-content">
<p>Metus Vestibulum cursus elit pretium auctor cursus lorem Vestibulum eros sagittis. Netus pede Vestibulum Quisque Nam pretium Donec ut vitae quis parturient. Auctor vel non <a href="#" title="Sample link">phasellus tincidunt</a>.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon2"></i>
</div>
<h3 class="block-title">Corporate Design </h3>
<div class="block-content">
<p>Condimentum platea cursus porta tellus eros consectetuer metus Sed aliquet tempus. Laoreet non ac porta urna Vestibulum congue id eu elit dignissim. Sollicitudin vitae ipsum massa enim lacus.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon3"></i>
</div>
<h3 class="block-title">iOS Development</h3>
<div class="block-content">
<p>Buspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera magna pharera aliquet. Nulla uitae elit libero, a pharetra augue nulla ligula massa pharera aliquet.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon1"> </i>
</div>
<h3 class="block-title">Web & UI Design</h3>
<div class="block-content">
<p>Metus Vestibulum cursus elit pretium auctor cursus lorem Vestibulum eros sagittis. Netus pede Vestibulum Quisque Nam pretium Donec ut vitae quis parturient. Auctor vel non <a href="#" title="Sample link">phasellus tincidunt</a>.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon2"></i>
</div>
<h3 class="block-title">Corporate Design </h3>
<div class="block-content">
<p>Condimentum platea cursus porta tellus eros consectetuer metus Sed aliquet tempus. Laoreet non ac porta urna Vestibulum congue id eu elit dignissim. Sollicitudin vitae ipsum massa enim lacus.</p>
</div></div>

<div class="span2 block">
<div class="block-img">
<i class="introducing-icon3"></i>
</div>
<h3 class="block-title">iOS Development</h3>
<div class="block-content">
<p>Buspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera magna pharera aliquet. Nulla uitae elit libero, a pharetra augue nulla ligula massa pharera aliquet.</p>
</div></div>

</div>


If you have any concern when using this template, just let us know, we’re happy to help.

Regards,

Saguaros

[cornishcharlie Friend cornishcharlieJoin date: August 2015Posts: 6Downloads:0Uploads:0 Thanks: 3]

#705488

Hi Saguaros,
many thanks for taking the time to come back to me, I am sorry that I may seem harsh, but I think this is really important for you. You have made a lovely simple looking template, but look at all the comments and complaints about it, you have made it way too complicated to modify. Can you explain exactly how and why you have used one image, that is then split into three images, in this case intro-icons.png. I have never seen this done, and must be going on in the css. Why do you not just call up three separate images? I would like 6 images and descriptions ( 3 on top of 3 ).
I was expecting just to repeat the script and swap out the image url’s, but there are no image urls.
When it is this difficult your customers walk away

[cornishcharlie Friend cornishcharlieJoin date: August 2015Posts: 6Downloads:0Uploads:0 Thanks: 3]

#751921

Hi Saguaros,
many thanks for taking the time to come back to me, I am sorry that I may seem harsh, but I think this is really important for you. You have made a lovely simple looking template, but look at all the comments and complaints about it, you have made it way too complicated to modify. Can you explain exactly how and why you have used one image, that is then split into three images, in this case intro-icons.png. I have never seen this done, and must be going on in the css. Why do you not just call up three separate images? I would like 6 images and descriptions ( 3 on top of 3 ).
I was expecting just to repeat the script and swap out the image url’s, but there are no image urls.
When it is this difficult your customers walk away

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#705746

I get your point but from the concept of template, it’s best to show 3 items there so we use only an image and set background position so that it displays in 3 items.

If you don’t want to use that way, you can easily add background for each item, for example:


.introducing .block-img introducing-icon1 i {
background-image: url (your image path here);
}


I will also pass to the team for further consideration.

1 user says Thank You to Saguaros for this useful post

1. cornishcharlie

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#752077

I get your point but from the concept of template, it’s best to show 3 items there so we use only an image and set background position so that it displays in 3 items.

If you don’t want to use that way, you can easily add background for each item, for example:


.introducing .block-img introducing-icon1 i {
background-image: url (your image path here);
}


I will also pass to the team for further consideration.

1 user says Thank You to Saguaros for this useful post

1. cornishcharlie

[Author]

Posts