New category

[₪» ⅀ ƪ Ƒ «₪]

Chris
Years ago you made me this main header code:
<script>
(function(){
/* Add "new" to category titles if there are new posts (Alcryst Edition)*/

var new_icon = 'http://i1375./ag467/bradyty2/categorynew_zps12f57802.png';
$(function () {
$('.container.boards')
.each(function () {
var b = $(this);
if (b.find('img.board-icon[title="New Posts"]').length) {
b.find('.title_wrapper').append('<img class="new-icon-category" src="' + new_icon + '" style="position:relative" >')
}
})
})
})()
</script>

It generates an image of the word "NEW" over my category images when there is a new post in it. I just changed my category images, and now the NEW floats at the bottom awkwardly:
Ideally, it would float at the top left as it once did rather than the bottom. It also seems to currently float just a little bit past the border of the category image for some reason, if we could push it back in so it's only on the image.

Is this possible? Would you be willing to do this for me when you have the time, by chance?

[₪» ⅀ ƪ Ƒ «₪]

bump

[₪» ⅀ ƪ Ƒ «₪]

bump :) It doesn't have to be Chris to respond if someone else has any idea how to move the "NEW" image around the category =3

[Chris]

₪» ⅀ ƪ Ƒ «₪ the code was obviously made for a custom theme and not something off the rack so I would need to take new measurements of the forum before I could let out of the waist or adjust the seat to account for a forum that may have put on some weight...
(in other words a forum link is necessary)

[₪» ⅀ ƪ Ƒ «₪]

I have PM'd you the forum's URL and taken it temporarily out of maintenance mode ^^ Thank you!

[Chris]

OK, just to be clear, exactly where are you expecting the image to appear in this new layout?

For reference here is the old layout that the code was created for


and this is what I am seeing (assuming I am on the right theme)

[₪» ⅀ ƪ Ƒ «₪]

This spot would be perfect!

[₪» ⅀ ƪ Ƒ «₪]

bump :)

[Scott]

May 29, 2018 16:33:42 GMT -8 ₪» ⅀ ƪ Ƒ «₪ said:

bump

Hint: You may wish to just tag Chris in your conversations in case he doesn't have this thread bookmarked.  I find most member's helping others have their notifications set for tagging.

[₪» ⅀ ƪ Ƒ «₪]

=3 duly noted, thank you, Scott! I felt too pushy tagging him but I guess it is probably better than just hoping he sees my lil bump

[Chris]

₪» ⅀ ƪ Ƒ «₪ , try adding the following CSS rule to the bottom of your theme's style sheet to override the CSS that is in the original coding

img.new-icon-category{margin-top: -98px;}

[₪» ⅀ ƪ Ƒ «₪]

Thank you so much! With that and an addition of a margin-left, I was able to put it exactly where I desired. Next time I can change it myself now that I know how to target it =3 Thank you for your assistance, I am very happy with how it looks now!

Chris
EDIT: Dangit, actually, there is an issue. Using a negative top margin is causing the category image itself to get cut in half. I tried using a positive margin bottom as an alternative and that pushed the other categories away, causing a gap. So it appears one method will shorten the category it's over and the other method will cause holes. I'll grab a screenshot and edit it in here in a moment

With positive margin bottom:


With negative margin top:

I included the category below it so that you can see how tall it should be. After the line, there is a text description for the rest of the image, so the top category with the "NEW" is currently cut nearly in half unfortunately =/

I'm sorry, I wish I could say it was okay - I did try fiddling with margins and that didn't work. Maybe I need to do some sort of relative or absolute positioning with different top and bottom pushers? I'm not super familiar with that method of moving stuff so I'd need your assistance but maybe that is a solution?


EDIT EDIT: Nothing like multiple edits lol! I was actually thinking- I could make a new "NEW" image and just change its dimensions to it pushes the image over. Like the transparent BG can be taller/wider so the visible "NEW" part actually covers the correct part of the image. I'm going to begin working on that now and see if it works - I'm sure it'd be a lot easier than continuing to bug you haha

[₪» ⅀ ƪ Ƒ «₪]

Dang, nope, changing the dimensions of the image didn't work - just pushed the categories around lol

[Chris]

The better option as you suggested then would be to make DIV.title_wrapper container position:relative then the image can be made absolute but bound to the relative container for its coordinates, something along the lines of...


.boards .title-bar .title_wrapper {
   position: relative;
}
img.new-icon-category{
   position:absolute!important;
   left: 1%;
   bottom: 22%;
}


[₪» ⅀ ƪ Ƒ «₪]

from what I can tell, it is now working perfectly. Thank you so much for your help, Chris!