Images on profile tabs - is it possible?

I've got an image at {jrCore_image module="jrSlate" image="timeline.PNG"}. Is it possible to use custom images on the tabs to replace the text?
updated by @iamtimbo: 03/14/15 08:34:35AM

Which tabs are you refering to?


--
Paul Asher - JR Developer and System Import Specialist

The options to choose from timeline/followers/blog/gallery etc...
updated by @iamtimbo: 02/06/15 09:13:03AM

I've not tried it but at the end of the day its all html, css and smarty so I would guess that if you replace the text in the template with an image call (with its size set appropriately) it would work.


--
Paul Asher - JR Developer and System Import Specialist

You can also customize the profile_menu.tpl file and customize the links there if you'd like.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

That's great - thanks - I think I might have been making it more complicated in my head than it might be! I'll have a go after tea....

@iamtimbo -

I am interested in seeing what you come up with and how you arrived at making it happen. I have been thinking about ways to modify the menu, too.

TIA.

@claygordon Don't hold your breath! I'm learning my way through this all so slowly!

I'd already found the profile_menu.tpl, which seems to use a foreach loop to go throug all active tab, and then label them with their respective $tab.label . I can't tell where tab.label is set (yet). I think that means that it should be possible to substitute an image, but taht it would be the same image for each tab, which is not what I'm after.

I shall carry on poking about. I have a whole different tab issue at present, where some don't show. I've reset the profile_menu template back to the default, but it's persisting and I have no idea what's causing it...!

Make sure you clear your cache if it is enabled. ACP > System Tools > Reset Cache


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Hi @douglas - I did try that last night. I've tried it again, with no joy. It's odd because you can still access the page, e.g. http://iamtimbo.com/merley-dorset-england-bh21-1/timeline , just no tab shows up.
updated by @iamtimbo: 02/07/15 10:07:10AM

I had this issue in another template. You actually do a test inside the foreach loop to select the one tab you want to modify.

Is this logged in as the master admin or a regular profile?

You may not see those buttons if the modules "Quota Config" is not allowing them to use the module.

Check all of your modules "Quota Config" tabs and make sure the quota the profile belongs to is allowed to use the module.

Hope this helps.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

That's logged in as a regular user.

I'm sure the Quotas are set right. Brian suggested in another thread that it's to do with the tabs not having anything to show, so not appearing until they have something to say, as it were.

I'll go through it all again, I've also discovered the jrProfile documentation which I overlooked for some reason earlier in the week. Thank you for your patience!

I would think this would be possible and could be done purely in css. I will have a play around and see what I can come up with.

The way I'd do it is to put an image up in the skin that corresponds to the url output for the module:

/skin/(YOUR SKIN)/img/icon_action.png
/skin/(YOUR SKIN)/img/icon_blog.png
/skin/(YOUR SKIN)/img/icon_documentation.png
/skin/(YOUR SKIN)/img/icon_follow.png
/skin/(YOUR SKIN)/img/icon_page.png
etc...

Then use the .url that is coming out anyhow to output the image:
add in the image you want:

something like that.

Good call John. If you wanted to go that way perhaps classes or ids of the target name:

and use .tab_button (or whatever name you like) for the spacing and .tab_(the button specific) to add the pic.

Is this the sort of thing you are looking to do ? I have added just two images for now to demo this, one for the audio and one for youtube. When they are hovered over the image is replaced with the original tab link so the user can tell for which it is referring to. Once clicked on it returns back to the image.

You can see it working here: http://1940snetwork.com/founder

All this was done just using css in the profile.css template. You can just have images on certain tabs like the demo or have images on them all.

Here is how I did this.
First I got a couple of images, the ones I used where 128px x 128px transparent png's, and these I just uploaded via ftp straight into the skins img folder.

Next I added this to the profile.css sheet

.profile_menu a[href$="youtube"] > .profile_menu_entry {
background-image: url("/skins/jr1940sNetworkningja/img/videocamera.png") !important; color:transparent}

.profile_menu a[href$="audio"] > .profile_menu_entry {
background-image: url("/skins/jr1940sNetworkningja/img/music-record.png") !important;color:transparent }

.profile_menu a > .profile_menu_entry{background-size: contain;
background-repeat: no-repeat;
background-position: center center;}

.profile_menu a > .profile_menu_entry:hover{ background-image: none!important; color:blue }


So here is how it works

In the first line you see the href$="youtube" This is telling the css to look for the tab which ends with the word youtube at the end of the url and so appplies the background image to it. The background image you can see I linked to where it is by adding the url for it. Next the link text colour is set to transparent so it's not visible on top of the image. So to add more images you just add a new block for the tab as you can see for the one I added for the audio. This way you can just add images to the tabs you prefer or just add a block for each tab. It's really easy then to change or remove the images by just editing the url for the image or remove that block of css.

Next we add a little default styling for the images and that is the little block of code under the audio block.

And lastly the final line removes the image on hover and shows the text for the tab as blue.
updated by @john-bizley: 02/10/15 02:46:09PM

John -

I am really enjoying watching your work and your sharing it.

These are very neat CSS tricks. One thing I would suggest - if you plan to put this into production - is to work with smaller image files. I am the end of a relatively slow connection and it takes a while for the images to download and scale. Just a thought.

I am also interested in the CSS for the rounded corners in the headers of the content areas and the shadows. So - maybe a CSS tweaks thread would be a way to share those? I added the rounded corners to my profile menus last night and it's a subtle - and meaningful difference.

Cheers!
:: Clay

Just added a few more to the menu for a bit of fun, events, documentation and gallery.

Thanks Clay, yes I agree about the images and will do something about that before I go into an active site. Yes I will add a section for all the css I use as I find my way about. I wil post another thread of how I did those other bits.

Thanks!

I was looking at the profile menu looks with the images on it and it's very cool. Without very little effort you could reverse it as well so the images appeared on the mouseover.

I noticed in another screenshot you'd added cascading menus ... something else I want to try. I'd like to put Vimeo and YouTube under Videos - the same way they are in the top nav to save space and be consistent.

No worries Clay gald you like it and yes you can easily reverse it. Those cascading menus where already part of the Ningja skin but yes I will add more of my own at some point.

Thanks Michael, I did it a little bit of a different way than adding anything into the jrcore itself. I just added it all in the css sheet using the code in the posts above.