Joomla Templates Club 406,261 posts

[hunnchback Friend hunnchbackJoin date: September 2009Posts: 23Downloads:0Uploads:7 Thanks: 8]

#190914

for some reason images are gone on my test template. please see attached image..

can anyone help?

url: seofy.ca

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#507116

Hi hunnchback,

The reason that TinyMCE editor will automatically replace the <li> tag to <div> after you save or update something in our default Introducing module. In this case, you can try to replace the HTML codes of that Introducing module with the below codes:

<div class="introducing">
<div class="span4 block">
<div class="introducing-icon1">
<div class="block-img">*</div>
</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="span4 block">
<div class="introducing-icon2">
<div class="block-img">*</div>
</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="span4 block">
<div class="introducing-icon3">
<div class="block-img">*</div>
</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>

Then add the css styles of new <div> tag into tempates/ja_onepage/css/custom.css file:

.introducing div.block-img {
background-image: url(../images/intro-icons.png);
background-repeat: no-repeat;
display: block;
height: 120px;
margin: 0 auto;
text-indent: -999em;
width: 120px;
}

.introducing .introducing-icon1 div.block-img {
background-position: 0px 0px;
}
.introducing .introducing-icon2 div.block-img {
background-position: -120px 0px;
}
.introducing .introducing-icon3 div.block-img{
background-position: -240px 0px;
}

The icons will display fine again.

2 users say Thank You to phong nam for this useful post

1. hunnchback
2. cdboutique

[hunnchback Friend hunnchbackJoin date: September 2009Posts: 23Downloads:0Uploads:7 Thanks: 8]

#507149

Hey thanks alot for quick reply.

I have update the code and css but I cant see the images :S .. is there anything I am missing??

please help thanks

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#507155

Hi hunnchback,

I see the icons are displaying fine on the Introducing module of your website, http://seofy.ca/ . Can you check it again ?

1 user says Thank You to phong nam for this useful post

1. hunnchback

[hunnchback Friend hunnchbackJoin date: September 2009Posts: 23Downloads:0Uploads:7 Thanks: 8]

#507161

🙂 yes they are Leo.. i removed my cache and it good.. thanks alot .. good stuff..:)

[nepo Friend nepoJoin date: October 2013Posts: 2Downloads:0Uploads:2]

#508655

I had the same problem. I followed your instructions and got the images back, but they no longer change colors when you hover. How do I get that back?

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#508675

Hi nepo,

On JA Onepage template, we don’t include the color hover effect on the images of Introducing section, just only on Awesome Team section.

[nepo Friend nepoJoin date: October 2013Posts: 2Downloads:0Uploads:2]

#509084

Okay, thanks for the reply… but when I look at your demo site, I see the hover over change to blue???

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#509118

Hi nepo,

Yeah, i saw it. That is the box-shadow of Introducing block on Modern theme. You can get this effect by putting below css styles into templates/ja_onepage/css/custom.css file:

.introducing .block:hover {
box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: solid 1px #e5e5e5 9;
}

But make sure that you still keep the default HTML makup layout of Introducing section.

[jewellman Friend jewellmanJoin date: September 2009Posts: 80Downloads:25Uploads:19 Thanks: 10]

#516793

Hello, I tried the above fixes for the same issue and instead of the icons appearing I only see a * instead.

Obviously I am not doing something right..

I changed the name of the module from Introducing to Services, maybe that is the issue?

Thanks!

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#517091

Hi Jewellman,

I are sorry for this late response to you. If possible, could you send me via PM the site’s credentials ? I will take a look and give you a suggestion then.

[Author]

Posts