The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Topic Icons Placement and Availability

View previous topic View next topic Go down

In progress Topic Icons Placement and Availability

Post by Rhino.Freak on December 14th 2014, 3:39 pm

So I recently added the Topic Icons in my forum, and I have 2 serious questions/issues with it.

1.
I want the icon to appear JUST before the topic title text, like a prefix to the title.

2. I want SPECIFIC icons available to SPECIFIC forums only! (The reason why I have created this topic in script's section)
Like I have an Art section, I want the available icons only : GFX, Gallery
and in Feedback n Questions section, I want the available icons : Bug, Question, Idea

etc..
Thanks in advanced!
Phpbb3
Forum Link

Rhino.Freak
Helper
Helper

Male Posts : 1247
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Ramdaman on December 14th 2014, 3:42 pm

I'm not sure if phpBB3 can have a row for those, try this code if you would like to move it (maybe under the title)
Code:
.forumbg .dterm { background-position:100% 95% !important }

Adjust the percentage to move it around.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Rhino.Freak on December 14th 2014, 3:54 pm

@Ramdaman Hello! Thanks a lot for that, but you did not see I want it as a PREFIX, that is, it is supposed to SHIFT the text-forward and be in-its place.. kinda hard to explain so here it is :

Rhino.Freak
Helper
Helper

Male Posts : 1247
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Ramdaman on December 14th 2014, 3:56 pm

Yes I know, but throughout my time with PhpBB3 forums, there used to be a row created when you added these icons, so they acted as prefixes. Now, it no longer works like that, except on the other forum versions I believe.

Though, I would await Ange, @JScript, or someone else from the staff team who may know a fix for this issue. I would definitely use it too.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Ange Tuteur on December 14th 2014, 9:32 pm

Hello @Rhino.Freak,

Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages
Paste the code below and submit :
Code:
$(function() {
 $('dd.dterm[style*="background-image"]').each(function() {
  $(this).find('a.topictitle').before('<img src="'+$(this).css('background-image').replace(/.*?url\("(.*?)"\).*/,'$1')+'"/>');
  $(this).css('background-image','none');
 });
});

It should place the topic icon next to the topic title as an Image.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Rhino.Freak on December 15th 2014, 6:54 am

Ange its working I believe, but it adds an extra ")" at the end of URL, making image appear broken. :/

Also is the availability of icons at specific areas possible?

Rhino.Freak
Helper
Helper

Male Posts : 1247
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Ange Tuteur on December 15th 2014, 8:50 am

Okay, try with the templates instead. Go to Administration Panel > Display > Templates > General > topics_list_box Edit

Find and remove :
Code:
{topics_list_box.row.ICON}

Find :
Code:
<div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>

Replace by :
Code:
<div class="topic-title-container"><span class="topicIcon" {topics_list_box.row.ICON}></span><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>

Save and publish Add


Then add this to your stylesheet :
Code:
.topicIcon {
 background-repeat:no-repeat;
 display:inline-block;
 height:25px;
 width:40px;
}

You may need to adjust the height and width depending on the size of your topic icons.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Rhino.Freak on December 15th 2014, 10:17 am

I haven't added these yet, but I would like to mention that the width of the images varies significantly for my topic icons.

Rhino.Freak
Helper
Helper

Male Posts : 1247
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Ange Tuteur on December 15th 2014, 10:00 pm

Try replacing your script with this :
Code:
$(function() {
  $('dd.dterm[style*="background-image"]').each(function() {
    $(this).find('a.topictitle').before('<img src="'+$(this).css('background-image').replace(/(.*?url\("(.*?)"\).*|.*?url\((.*?)\).*)/,'$2')+'"/>');
    $(this).css('background-image','none');
  });
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Rhino.Freak on December 16th 2014, 6:49 am

that new JavaScript made the icons disappear totally o.O

Rhino.Freak
Helper
Helper

Male Posts : 1247
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Ange Tuteur on December 16th 2014, 8:42 am

Okay, I rewrote everything. See if this works :
Code:
$(function() {
 for (var i=0,d=document.getElementsByTagName('DD'); i<d.length; i++) {
  if (d[i].style.backgroundImage) {
  var img = document.createElement('IMG');
  img.src = d[i].getAttribute('style').replace(/.*?\((.*?)\).*/,'$1');
  d[i].insertBefore(img,d[i].firstChild), d[i].style.backgroundImage = '';
  }
 }
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Rhino.Freak on December 16th 2014, 10:32 am

Still can't see the icons Sad

http://onepiecea-edition.yoo7.com/f5-game-discussion-and-feedback

take a look yourself :/

Rhino.Freak
Helper
Helper

Male Posts : 1247
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Ange Tuteur on December 16th 2014, 11:34 pm

I could see it fine on Firefox and Chrome, however, there was a problem in IE. Replace the script with this :
Code:
$(function() {
  for (var i=0,d=document.getElementsByTagName('DD'); i<d.length; i++) {
    if (d[i].style.backgroundImage) {
      var img = document.createElement('IMG'), src = d[i].getAttribute('style').replace(/.*?\((.*?)\).*/,'$1');
      if (/"/.test(src)) src = src.replace(/"/g,'');
      img.src = src;
      d[i].insertBefore(img,d[i].firstChild), d[i].style.backgroundImage = '';
    }
  }
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Rhino.Freak on December 17th 2014, 4:15 am

Awesome! can finally see them! Very Happy
And, one last thing, the image seems to be a little off the center in y-axis (a little above compared to topic titles), can that be fixed?

Also if possible the icon of "You have wrote in this topic" come BEFORE this image?

Thanks Smile

Rhino.Freak
Helper
Helper

Male Posts : 1247
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by najm.net on December 17th 2014, 5:42 am

Hello

najm.net
New Member

Posts : 1
Reputation : 1
Language : Batna

http://najm7.forumalgerie.net

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Ange Tuteur on December 17th 2014, 7:34 am

Replace your script by :
Code:
$(function() {
  for (var i=0,d=document.getElementsByTagName('DD'); i<d.length; i++) {
    if (d[i].style.backgroundImage) {
      var img = document.createElement('IMG'), src = d[i].getAttribute('style').replace(/.*?\((.*?)\).*/,'$1');
      if (/"/.test(src)) src = src.replace(/"/g,'');
      img.src = src, img.className = 'topicIcon';
      d[i].insertBefore(img,d[i].getElementsByTagName('DIV')[0]), d[i].style.backgroundImage = '';
    }
  }
});


And add this to your stylesheet :
Code:
.topicIcon { vertical-align:middle }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Topic Icons Placement and Availability

Post by Rhino.Freak on December 17th 2014, 2:06 pm

Awesome! Smile
Worked like a charm! +1

I would like to let the topic stay open for sometime if anyone can help/comment on 2.

Rhino.Freak
Helper
Helper

Male Posts : 1247
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum