"New" button

[Former Member]

Brian I have tried the cold and the only thing I am getting to show up is a blank space.



This is the image that I used.

[Brian]

Feb 19, 2013 12:18:19 GMT -8 @christine1966 said:

Brian I have tried the cold and the only thing I am getting to show up is a blank space.



This is the image that I used.

Your background declaration was spaced out over several lines, causing it to become invalid. I've corrected this in your style sheet and the images are now displaying.

[Former Member]

Thank you Brian.

[Lauren]

Thanks Brian, I was able to change the "New" text to an icon I wanted in the thread list. Now I want to change the "New" text to that icon in the legend, BUT  I don't want to change the "New" text where it appears next to the Participated box at the top... is that possible? Thanks!

[Brian]

Apr 21, 2013 18:43:08 GMT -8 Lauren said:

Thanks Brian, I was able to change the "New" text to an icon I wanted in the thread list. Now I want to change the "New" text to that icon in the legend, BUT  I don't want to change the "New" text where it appears next to the Participated box at the top... is that possible? Thanks!

Yep. Just tell the code to find the container each icon is in first. In this particular case, "threads" and "legend".

.threads .new-icon {
    background: url("URL TO IMAGE") no-repeat scroll center center transparent;
    display: inline-block;
    height: 30px;
    width: 27px;
}

.legend .new-icon {
    background: url("URL TO IMAGE") no-repeat scroll center center transparent;
    display: inline-block;
    height: 30px;
    width: 27px;
}

[Lauren]

Thanks Brian, the default new icon was still showing after I added that code, so I added this to the code as well

color: transparent !important;
which made it go away... I think that's the correct way to do it. But, I do have another problem, the key text labeling what the icon is, is now set above the rest... any ideas?

Thanks!

Attachments:

[Brian]

That's due to both the image and the text being in the same cell. The text will always be anchored to the top or bottom of the height of the current line when an image is present.

One way around this is to make the icons and the text present in separate cells. Go to Structure > Layout Templates > Board and find this section.

{foreach $[legend]}
    <td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}

Change it to this.

{foreach $[legend]}
    <td>$[legend.icon]</td>
    <td><span>$[legend.name]</span></td>
{/foreach}

[Lauren]

Cool, that makes sense! Thanks so much Brian!

[Brian]

Sure thing.

[shazaam2005]

I used all of this information to successfully change mine! Thank you for having this info available!

[shazaam2005]

Feb 7, 2013 16:08:50 GMT -8 Brian said:

Feb 7, 2013 14:57:07 GMT -8 DeltaDart said:

Brian does that change every instance the NEW display appears?

That's just for threads.

If you want it done everywhere, remove everything preceding .new-icon for both selectors.

.new-icon {
    background: url("http://i57./g229/dtroseth/CatGeeks/bbeb0e21.png") no-repeat scroll center center transparent;
    display: inline-block;
    height: 30px;
    width: 27px;
}
.new-icon a {
    color: transparent !important;
    display: block;
    height: 100%;
    width: 100%;
}

You'll also need to change the height and width to the dimensions of your image.

ALL of this information was very helpful to me... however any idea how/where to change the icons I have circled?

[Brian]

Themes > Theme Manager

Hover over the name of your theme and click on the Images button. You can upload your own image, or link to an image you already have hosted online.