Solved

Artisteer - Icons WERE showing up in horizontal menu but my lastest version of the template now doesn't

Posted on 2010-08-24
24
1,478 Views
Last Modified: 2012-05-10
I managed to make a horizontal menu with icons.
I first created a template in Artisteer and then I enabled the show image ( icon ) within Joomla for each menu item individually so that I can select a unique icon I uploaded via the Media manager.

Here lies my dilemma.
I created an updated version with improvements to the template in Artisteer and then exported it to Joomla but now the icons do not work despite the toggles in Joomla, and despiyte that they are pointed to the same menu module.
I'm thinking there must be something I did/modified in the template.css or module.php to get this to work where the icons show up next to the menu links.

I do know that it does work because my prototype template from Artisteer works but my new one does not .
I see that there must have been something I toggled that I now can't figure out.
Would anyone have any ideas ?
Perhaps a tweak in the TEMPLATE,CSS or module. php?

Lost way too much sleep on this.

Thanks in advance.
0
Comment
Question by:colonelblue
  • 14
  • 9
24 Comments
 
LVL 13

Expert Comment

by:StormITSolutions
Comment Utility
Can you post both template files and the css files and ill have a look

Storm
0
 

Author Comment

by:colonelblue
Comment Utility
Hey Storm.

I have those files at my home PC.

But I did get some clues. Perhaps they may help.
I noticed that the 2 templates that DO work ( with images icons showing )have one thing in common :
They both had these images in the "images" folder.
"block_h.png", "block_s.png" and "block_v.png".

And then I camer across a cryptic reply on a forum looking for the same solution.

Q:
How could I go about changing the main navigation menu so that there  is an icon beside the text. Or just replace the text with an icon  instead of the text. Pretty sure it can't be done within the program  itself, but anyone know how to customize it in this way?

A:
Artisteer supports placing icons in block headings, you should see how it is inserted there to get an idea.

I looked around for entries for the images above but not sure where to find them,
 however I know seem to be major clues.

Oh Lordy, I so need to get this working.



0
 
LVL 24

Accepted Solution

by:
lenamtl earned 500 total points
Comment Utility
Did you update Artisteer between the 2 templates?
Which artisteer version are you using?

Last time I updated Artisteer it took me more week to adapt the new template to my site because they have change css value name, image file name and so on.

So you can use a file comparator to compare both css file this will point you the difference and help you to fix it.

You can download a free one: http://winmerge.org/?lang=en

Im usig this one it worth the price http://www.araxis.com/merge/?gclid=CKKRx93Z1KMCFV195Qods2tMtw
0
 

Author Comment

by:colonelblue
Comment Utility
I found a major clue. I pitted the two templates side by side ( the one that works and the other that doesn't ) with firebug showing the code in question ( please see image provided ).

Using firebug, as soon as I used the "edit" feature and pasted the code below to the template css that wasn't working, it rendered!
Now how do I find making this work correctly on the "bad" template?

[b]The key code in question that works:[/b]
[code]<span class="t">
<img alt="members-only" style="margin-right: 5px; vertical-align: middle;" src="/images/stories/networking---black_25.png" class="art-metadata-icon">
Members Only</span>[/code]
The correlating code above from the non-working menu:[code]<span class="t"></span>[/code]
As you can see it's missing all the "meaty" stuff. ( "Where's the beef"? )


[b]The (Working vs. the non-working) buttons compared to another:[/b]

[b]Non-working:[/b]
[code]<li class="item62"><a href="/members-only">
                       <span>Members Only</span>
                       <span class="l"> </span>
                       <span class="r"> </span>
                      <span class="t">
                     </span>
                     </a>
        </li>[/code]

[b]Working:[/b]
[code]<li class="item62">
        <a href="/members-only">
            <span class="l"> </span>
            <span class="r"> </span>
            <span class="t">
                <img alt="members-only" style="margin-right: 5px; vertical-align: middle;" src="/images/stories/networking---black_25.png" class="art-metadata-icon">
                Members Only
            </span>
        </a>
    </li>[/code]

Any help would be so greatly appreciated. I long for a good night's sleep!





BTW:
Thank you lenamtl, a great tool.

firebug-comparison.png
0
 
LVL 24

Expert Comment

by:lenamtl
Comment Utility
As i can see
 <img alt="members-only" style="margin-right: 5px; vertical-align: middle;" src="/images/stories/networking---black_25.png" class="art-metadata-icon">
is missing in one non working css / template so check for class "t" in both css and modify accordingly.

What is a little bit complicate with Artisteer is there is a lot of inherited classes so one class depend on others classes this is why you need to compare both css file completely and compare both image file too
and add what is missing to the non working one.

You can post both css so we we can take a look.
0
 

Author Comment

by:colonelblue
Comment Utility
Thank you again for taking the time. Words can't express just for your help alone.
 Here they are zipped. One called bad and the other called good.

templates.zip
0
 
LVL 24

Expert Comment

by:lenamtl
Comment Utility
Here is the complete report see the attached file.

You are using the  Artisteer v 2. 4 .0.2 766 6 now and previous template was done using  2. 3 .0.2 332 6

As I told you when you updated Artisteer they made a lot of changes in images file name and css class name this is why you having some issue.

Did you udpated the images files in your Joomla template directory?

Maybe to debugg this make 2 seperate template folder in Joomla this will be easier for you to make test if you still have the old templates in backup.
Report.html
0
 
LVL 24

Expert Comment

by:lenamtl
Comment Utility
Also in the new Artisteer version there is a new place called Block for left menu and also there is a way to put Flash header these 2 updates are wonderful for new template but a pain to update existing template..
0
 

Author Comment

by:colonelblue
Comment Utility
Hello lenamtl and thank you for doing that.

Oh yes I did take my old file and opened it in a different PC  with the newer version of Artisteer ( my bad , you were right ).

But what I can't  figure out is that on my other PC with Artisteer2.3, I still get the same finished product with the no menu icons. ( scratching head ).

How did you mean update the images?
They are the same images that were in Media Manager. all I did was change from good working template to bad and vice versa.

I am not sure how to fix this and at this point think that perhaps I could just hard code into the template css. as the code above.

<li class="item62">
        <a href="/members-only">
            <span class="l"> </span>
            <span class="r"> </span>
            <span class="t">
                <img alt="members-only" style="margin-right: 5px; vertical-align: middle;" src="/images/stories/networking---black_25.png" class="art-metadata-icon">
                Members Only
            </span>
        </a>
    </li>

BUT where do I put this? I searched the good template.css and I do not see a reference to item62 although it shows up in the html source. So where do I edit it so that I can modify each menu item according to it's ID.

Am I to add it manually to the template .css? And if so what would I call it to make it work correctly. I am left-footed with css code and not sure if it would be something like:
.art-menu li,item62 {
margin-right: 5px;
vertical-align: middle;"
src="/images/stories/networking---black_25.png" class="art-metadata-icon
}

Again thank you for your graciousness.




0
 
LVL 24

Expert Comment

by:lenamtl
Comment Utility
Because new images created by Artisteer have different name now for example
Sheet - s.png
and
sheet _ s.png

plus new images for the block part.

I don't know why they have change that, but in my case I have updated my template only to get the new feature but in the main time when generate the new template all name have changed like that.

In my case it was a html template so it was more complicated than Joomla template, to fix my template it's took me more than 50 hours one full week !! but that was a huge project hopefuly for you this will be easier to  fix.

I would recommand and you don't really have the choice to take the whole new template images and css. My first idea was like you to change manually the css but it was a big mistake and finally I had to adapt the new css to my whole site and start from scratch because nothing was corresponding du to much new features and new names and also new css organisation (the first part of the new css plus the block left menu).
0
 

Author Comment

by:colonelblue
Comment Utility
Thanks again lenamtl and I will do that.
Just one more question though if I may, if Iwere  to add something like

<li class="item62">
        <a href="/members-only">
            <span class="l"> </span>
            <span class="r"> </span>
            <span class="t">
                <img alt="members-only" style="margin-right: 5px; vertical-align: middle;" src="/images/stories/networking---black_25.png" class="art-metadata-icon">
                Members Only
            </span>
        </a>
    </li>

how would that be syntaxed to be put in the css file.

Is it something like
art-menu li.item62  {
margin-right: 5px;
vertical-align: middle .....

Thank you again.
0
 

Author Comment

by:colonelblue
Comment Utility
BTW, I was looking for , where are these images stored?
Sheet - s.png
and
sheet _ s.png


I was trying to find them on the templates.css and the image folder.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 24

Expert Comment

by:lenamtl
Comment Utility
these images are located templates/yourtemplate/images
0
 
LVL 24

Expert Comment

by:lenamtl
Comment Utility
sorry i'm not home right now I will check this later
0
 

Author Comment

by:colonelblue
Comment Utility
Hello lenamtl ! I found the solution but of course it has set one thing off thing ( submenu does not show ) but is now VERY narrowed down and I am hoping you can help because I do not know code much at all.

It works and the icons show!!! Woo-hoo ( Happy Dance ! )

BUT!

Now the dropdown submenus do not work.
SO attached are the the 2 default pages.

default.php is where the menu images DO show.
and
default2.php is where it doesn't show the menu images BUT the submenus do.

I compared the 2 in winMerge and can't understand the code.

Any help would be so greatly appreciated!
0
 

Author Comment

by:colonelblue
Comment Utility
Oops I forgo to attach,
0
 

Author Comment

by:colonelblue
Comment Utility
The files.

default-pages.zip
0
 

Author Comment

by:colonelblue
Comment Utility
Oh and I also found one another problem . :( The tab that is clicked does not stay highlighted.
0
 

Author Comment

by:colonelblue
Comment Utility
Hey there.  Sorry for the many entries.

About the menu tab staying highlighted, although not ideal,  I find that it works again when turning off Search Friendly URLS in Global Config.
0
 
LVL 24

Expert Comment

by:lenamtl
Comment Utility
Hi,

In fact the new template should work as it, without modifying the code or Joomla settings.

I don't know how you proceed when updating the template but as I recommanded you should make a new template directory using the latest files generated by Artisteer (CSS, Images, php files etc).

Like the CSS if you trying to modify all file manually it will not work, it requiered too much knowledge and time to do it.

The only problem is if you have modified the template on the first Artisteer template this will be hard to help if you have not take some notes at that time...
0
 

Author Comment

by:colonelblue
Comment Utility
Hello lenamtl. I just want to thank you for sticking in there with me and your show of help was all the encouragement I needed!

After much comparing between the pages i found all I had to do was add "true" to this line:
Here it is with it set to "true">

'show_submenus' => $GLOBALS['artx_settings']['menu']['show_submenus'] = true && 1 == $params->get('showAllChildren'),



Again thank you so much!!!!!!!
0
 

Author Closing Comment

by:colonelblue
Comment Utility
Thank you for your patience lenamt !
0
 

Author Comment

by:colonelblue
Comment Utility
That is crazy you should have gotten a rating much higher than 5.

0
 
LVL 24

Expert Comment

by:lenamtl
Comment Utility
My pleasure, you welcome
Good luck with your project!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

What you will need: Any version of Photoshop or similar product (examples in Photoshop) Internet Access FTP Access to your joomla install or ability to upload images within joomla administrator backend Create Image: Lets start off with cre…
First of all, we will need Jumi component or Sourcerer plugin for this to work. We need either of these because the main focus here is custom development outside of the standard modules or articles within Joomla. You can find Jumi here...it's my …
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now