Change Join/Login to icons

Is it possible to change the Join, Login, Languages at the top of the page (to the right of the logo) to icons? Or, icons, and below subtitles?

Yes, it is possible.  That is the extra service menu, look for extra_service_menu.html in whatever template you are using.

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__>__caption__</a>
        </span>
        <span class="bullet">&#183;</span>
    </bx_repeat:items>
</div>

What you need to do is to make some changes to the link, replacing the plain anchor tag with an image and anchor tag.

<img src="http://mysite.com/image_location/__caption__ .jpg"/>  Name the image the same as the caption, the caption is pulled from the menu structure.  So, you name an image profile.jpg (or png, or gif).  Replace __caption__  in the anchor tag with the image code and you are good to go.  It will build the menu for you and you have an image for each link in the menu.  Login will be replaced with logout just like the links work.

 Thanks geek_girl. I am glad that it is possible. I see this code in extra_service_menu.html but unfortunately I do not know how exactly to do it. It may start with changing the icon Language (here, for example, I loaded the globe icon)

I upload to public_html/templates/tmpl_uni/images/globe.png

what exactly changes in this code I must do now to change "Language / Języki" to this icon?

I know someone who may want to do this as well.

Much Thanks GG

Let's start with changing the text links to an icon link.  First create your icons, name them for each part of the service menu, profile, login, logout, account, etc. and load them to the server, perhaps placing them in the /media/images directory that is already a part of Dolphin.

Now, the service menu hides the links based on if you are logged in and out and you don't need to worry about that because it will do the same for your icons.  Let's get rid of the bullet as well and you can control spacing using css.  We will use png format so we can have transparent areas on our icon.

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__><img src="http://mysite.com/media/images/__caption__.png"/> </a>
        </span>
    </bx_repeat:items>
</div>

This creates a standard image link with standard html.  You have an image that is wrapped in an anchor tag.  When the template parser parses the template, it will replace __caption__ with the actual text stored in the menu.  For the profile link, it becomes <img src="http://mysite.com/image_location/profile.png"/> </a>

Test and let me know and later I will do a tips and tricks.  You can also have rollovers but that involves adding a CSS class to handle the rollovers.  However, the rollovers are the same as you find anywhere and there are lots of tutorials on the net on adding rollover to menu icons.

Oh, and of course you can add an alt attribute to the anchor tag and have the tooltip thing if you desire.

For now I have a globe icon and would like to replace languages (preferably icon and the signature). Soon I will load the next icons. But first I would like to test the icon globe.png

I made these changes in the code (probably still wrong - please correct me)

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" Javascript: showPopupLanguage() __target__><img src="http://areavis.com/media/images/globe.png"/> </a>
        </span>
    </bx_repeat:items>
</div>

In effect I had this:

No, you did not follow my instructions.  You added it hard coded, you were suppose to keep the __caption__ key in place as the parser loops through the menu item changing that to each icon name.  And, you don't add the Javascript: showPopupLanguage() as that would add it to each of the menu items.

<img src="http://mysite.com/media/images/__caption__.png"/>

I don't have the language link.  If the language link caption is "language", then you need to rename the globe.png file to language.png.  Then the parser will be able to replace __caption__ with "language" so that the image file name becomes "language.png" as I indicated in my instructions.

 Probably because the language is a function of php, and I use the term "Język / Language"
I read your instructions carefully but do not want to make a mistake, I try to play with the code but did not go as expected. One came to me three worlds as shown in the previous post, and I also had a blank subtitles. I can well handle css but I'm still learning html.

So in summary, what I have to do exactly with this code?

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__><img src="http://mysite.com/media/images/__caption__.png"/> </a>
        </span>
    </bx_repeat:items>
</div>

I must replace this code and in _link_ , _script_, _target_ add sommething?

I have icon globe.png uploaded in public_html/templates/tmpl_uni/images/globe.png

I went to the boonex demo site and language is not in the service menu.  If you added it I would need to be able to see what you did.  I notice the caption changes when you select a language.  Without seeing what you did; how you added the language link to the service menu, I can not advise you on this.

 I added it myself, because I wanted to select the language to be visible at the top. To add this I go to the Service Menu Builder in admin panel -> add new item and type as in the picture below:

I see.  Remove the spaces from the name and have a graphic image for each language in use.  So if the caption changes based on the language used, you will need one for each language in order for this to work.  In Linux I don't think the slash is a valid character so you need to change that to a hyphen.  Language-Jezyk.png for one language and Jezyk-Language.png for the next language.  That is because the caption is going to change with the language change.  Each image is the same, just with a different name.  And the service menu adds the javascript code so that is NOT added to the template.

To recap, you will edit extra_service_menu.html found in the template you are using, if not in the template you are using, it will be in the base template.  You will create the icons in each language of the site: profile.png, profil.png and so forth because you will be changing the caption when you change the language.  If you only have two languages, then this is not much work.  If you thinking of having lots of languages, then Deano has created a module in the Market that fixes the icon issue for the service menu; it is not very expensive so you may just wish to use it.  He also allows the service menu to have drop-down selects.

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__>__caption__</a>
        </span>
        <span class="bullet">&#183;</span>
    </bx_repeat:items>
</div>

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__><img src="http://mysite.com/media/images/__caption__.png"/> </a>
        </span>
    </bx_repeat:items>
</div>

 So as I understand it, for each language should create a different image / link? I currently have two languages on website but want to increase their number.

When I paste this code I had 3x globe earth but with the signatures so it is a little better. While I understand that I'm doing wrong yet, but all time I`m analyzing your instructions and I'm trying to do.

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__>__caption__</a>
        </span>
        <span class="bullet">&#183;</span>
    </bx_repeat:items>
</div>

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__><img src="http://areavis.com/media/images/globe.png"/> </a>
        </span>
    </bx_repeat:items>
</div>

Because you are not following the instructions.  You keep hard coding the name of the image.  I keep telling you to use the key, __caption__, you are telling it to use the same image for all of the links so it is going to use the same image for all of the links.

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__><img src="http://areavis.com/media/images/globe.png"/> </a>
        </span>
    </bx_repeat:items>
</div>

The part in blue is wrong.

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__><img src="http://areavis.com/media/images/__caption__.png"/> </a>
        </span>
    </bx_repeat:items>
</div>

And don't lose the dot (.) accidentally as the caption key only contains the caption of the link, the text of the link.  And, your link is not Globe, so you need to have a globe icon with the name of the caption for the link.  I don't think you understand how Dolphin creates the service menu.  for example, Language-Jezyk (file names can not have a slash so you need to change that) would have an icon Language-Jezyk.png.

Maybe it is the language barrier.  Maybe I should have tried to explain in Polish using Google translate.

 I tried, I used the key _caption_ as you wrote. But then what should I do if I already uploaded image to the media folder?
At the moment I removed Languages / Languages because as you write the name should be cubicle. First, I will deal with png images to Join and Register and then come back to the globe (languages).

I understand well your language, much worse with HTML language

I tell you what I will do.  If you want hands-on help, then PM me details for your server, set up a new admin account for me and give me FTP access, tell me which icons you want to use.  Don't do it here in the forums because these forums are crawled and indexed in the search engines and anything posted in the forums show up in searches for Boonex.

Welcome back to this topic. I have a little problem with the display service menu for other browsers. For mozilla look good but eg Opera or Internet Explorer, do not load the icons Join and Login (because they do not exist). I would like to present only the display next to the globe icon languages. How can I fix this?

Anyone knows how to improve this appearance?

The images are not there.  Go to the media/images directory and make sure you got the name correct, check the extension, etc.  The images are not there for Firefox either; you must have saw them due to caching.

You are saying in the code that the name of the images are Join.png and Login.png so make sure they exist because the browser is not finding them,

 Thank you. But what to do to search engine does not even try to find these photos (join and login)? I would like to show only the globe next to languages.

I can not tell you because I don't have access to your site files.  You are either pointing to the wrong location, or the wrong name, or both.  I can not tell you because I don't have access to your site files.

This is how you can fix it.  Upload a Join.png and a Login.png image to the /media/images directory and it will fix it.  Make sure the name is exactly that, Capital J, lower case o, lower case i, lower case n and so forth.  In other words, the way you spell the name must match, case is important, Join.png and join.png are two different files.  I am probably just adding to the confusion LOL

 Ok, but I don`t want icons after login. Please take a look what I have after login:

I don`t want icons for:

- Profile

- Account

- Logout

Only icon for Languages stay after login. So how can I do this?

And for other languages upload photo for eg Join.png not work. Only for english language. So I must upload for other languages Join.png name in that language. For eg spanish - Idiomas.png

Do not be automatically matched icon? Do I need to upload for every language?

OH, I misunderstood.  The answer is an easy one.  Remove the image tags that you inserted, wherever you inserted them.  The reason IE shows that "image" you see if that IE does that when it can not find the image in an image tag <img src=

If you did this in the template file, then remove it from the template.

 I see this also on Opera. All icons I send to media/images, but where exactly can be tags?

In extra_service_menu.html is one tag <img src= but important and I can`t delete it.

OK, the normal service menu does not have image tags with the links.  So either you added them, or someone else added them, or a third party template added them.  If you can not fix it yourself, you may just have to hire someone to do it.  I checked the code with Firebug, and the image tags are there.

 I remember that you were helping me with this earlier in the code, as well as on the website. I think the tag is automatically generated by this code:

<a class="sys-sm-link" href="__link__" __script__ __target__><img src="http://mysite.com/media/images/__caption__.png"/>__caption__</a>

Also, I looked at the code at the Opera (because Firefox does not see it). I see tags but do not know where to remove them and after all, I have a few languages on my website. And for each language separately would have to remove the tag?

I apologise for my earlier attitude, I was upset over the Trusted Vendor thing going on.  If you can PM me the login to your control panel, I will fix this for you.

To be very clear, you want to keep the icon for languages, and remove the icon for Join and Login.

 Everything ok :) I understand and I also observe the strange situation about Trusted Vendors.

But to very clear now I want to keep all icons before login (Join, Register, Languages) and after login I want keep only Languages icon.

So I don`t want icons for: Profile, Account, Logout

I will send you PM :) Thanks

I looked and this is the solution, upload the transparent 1 pixel by 1 pixel png file attached to this reply.  Rename to the proper name for each icon you don't want to show.  For example, to not show an icon for the Profile link, upload and rename the transparent_1x1.png file to Profile.png.  Do this for each of the links where you don't want an icon.  You would upload to the /media/images directory where you have the other icons for the service menu.

 Thank you. I was already thinking about something similar before but I thought it manages to change something in the code. In this case, I had to do this for several languages, but it is important that it is a good solution. Thanks again! :)