Replace folder image with a text (folder image = image od topics, new topics, and locked topics of the categories and forums)

[TulsaH]

Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Google Chrome
Screenshot of problem : https://i.imgbox.com/6k9fMSW6.png
Who the problem concerns : Yourself
Forum link : ( link is hidden, you must reply to see )

Description of problem

Well, Hi!

I apologize for coming here with this problem, but I tried to solve it by myself and I failed. The problem is simple, I wanna replace the image of folder, new folder and locked folder with a text (I'm writting about the image of new topic of the categories and forums, as you can see in the screenshot).

I made some tests to solve this situation. First, i tried the next java code:

Code:

jQuery(document).ready(function() {
$('#i_icon_folder').replaceWith('<div id="iFolder">texto</div>');
});

But, it didn't work, so I tried the next java code:

Code:

jQuery(document).ready(function() {
$('dl.icon[style*="i_folder"]').replaceWith('<div id="iFolder">texto</div>');
});

So, I came here to ask if there's a way to solve this problem.
Here I leave the codes of my template:

Code:

<li class="row">

<dl class="icon" style="background: url({catrow.forumrow.FORUM_FOLDER_IMG})"></dl>

<div id="foroDatos">
  <div id="foroTitulo">
      <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
  </div>
  <div id="foroTemas">
      <p>{catrow.forumrow.TOPICS}</p>
      <p>{catrow.forumrow.POSTS}</p>
      <p><!-- BEGIN switch_topic_title -->
          <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">               
          {catrow.forumrow.LATEST_TOPIC_NAME}</a><!-- END switch_topic_title -->
          {catrow.forumrow.USER_LAST_POST}</p>
  </div>
</div>

<div id="foroDescripcion">{catrow.forumrow.FORUM_DESC}</div>

</li>

Thank for reading.

[Luiz~]

Just to see the forum URL.
Soon I'll edit this message.

o/

--------
Edit:
--------

Use this code in your stylesheet:

Code:

dl.icon[style*="http://2img.net/i/fa/subsilver/folder_big.gif"] {
  background-image: none!important;
  position: relative;
}

dl.icon[style*="http://2img.net/i/fa/subsilver/folder_big.gif"]::before {
  content: "Topics";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

Where is it

Code: http://2img.net/i/fa/subsilver/folder_big.gif

, you change to the icon's URL.
And, where is it

Code: Topics

, you can edit the text.

[TulsaH]

Thank you very much! It's just what I need.

Mark this topic as solved and all my loves to you <3

[SLGray]

Problem solved & topic archived. Please read our forum rules: ESF General Rules