Intro Icons disappear after upgrade to DW Page modern 1.0.5

Jeff
asked 10 years ago

Based on past questions and comparing to working sites using 1.0.2 (I haven’t seen any using 1.0.5), I’ve checked and changed the HTML and checked the css. Everything seems in order but no icons are loaded in the Introduction section. I had corrected this problem in 1.0.2, but it’s back and I just don’t know what else to do.

Jeff
replied 10 years ago

The site in question is http://www.dsinr.com

2 Answers

DominicStaff
answered 10 years ago

Hello Jeff !
I have checked your site and the reason was: missing class in Introducing section to display icon.
Please find here for the document guide on how to configure the introducing pages: http://designwall.com/guide/dw-page/#introducing-section
Hope this helps!

Jeff
replied 10 years ago

Thanks for your answer. But I need a little more info.
What missing class? For icon-tpl?
If so where is it missing from? html? style.css? template.css?
And what is the code that is missing?

Also, I’ve noticed with web inspector that when loading there is a 404 error for intro-icons.png and intro-icons-hover.png. And in the url it’s displaying it’s missing the sub folder “/inc/” before the “/assets/” folder.
Could this be the problem?
And if it is, how would I fix it?

DominicStaff
answered 10 years ago

Hi Jeff !
Currently, the Introducing page on your site missing the class for the 3 section (Conception, Layout, Prepress):
– Conception
Class: hide
– Layout
Class: hide
– Prepress
Class: hide
To display the icon in the Introducing page, You can log in to Dashboard > Pages > Introducing, click “Text” frame then add the following code:

 <div class="span4 block">
<div class="section-img"><i class="hide-text icon-tpl-design">hide</i></div>
<h2 class="section-content-title">Conception</h2>
<div class="content">
       Content
</div>
</div>

<div class="span4 block">
<div class="section-img"><i class="hide-text icon-tpl-spaceship">hide</i></div>
<h2 class="section-content-title">Layout</h2>
<div class="content">
       Content
</div>
</div>

<div class="span4 block">
<div class="section-img"><i class="hide-text icon-tpl-galaxy">hide</i></div>
<h2 class="section-content-title">Prepress</h2>
<div class="content">
       Content
</div>
</div>

See the screenshot:

Also, If you want to use the old image as our demo, You can open the style.css file in the folder path “\wp-content\themes\dw-page-modern”, find the line 285
Replace the following code:
.introducing [class*=”icon-tpl”] {
background-image: url(“assets/img/intro-icons.png”);
}
With new Code:
.introducing [class*=”icon-tpl”] {
background-image: url(“img/intro-icons.png”);
}
– If you want to change the icon in the Introducing page, You can add the icon to the Img folder in the folder path “\wp-content\themes\dw-page-modern\img”, open the style.css file add the following code to the bottom.

 .introducing .icon-tpl-design {
    background-image: url("/img/icon-60x60.png");
}

.introducing .icon-tpl-spaceship {
    background-image: url("/img/icon-60x60.png");
}

.introducing .icon-tpl-galaxy {
    background-image: url("/img/icon-60x60.png");
}

And to change icon when you hover, You can add the following code to the bottom of the style.css file

 .introducing .block:hover .icon-tpl-spaceship {
    background-image: url("img/icon-60x60.png");
}

.introducing .icon-tpl-spaceship {
    background-image: url("img/icon-60x60.png");
}

.introducing .block:hover .icon-tpl-galaxy {
    background-image: url("img/icon-60x60.png");
}

Notice: Please change your title icon here: icon-60×60.png
If you still face there issue, You can send me username & password your site for further checking (via private answer )
Hope this helps !

Jeff
replied 10 years ago

Thanks a bazillion. Got it solved.