Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Adding "New" Notification To Category Table Layout

Unfortunately the mixed layout doesn't work well for my needs. I would like to add the orange new notification to the table category layout. Basically any time there is a new discussion in one of the categories the notification would appear for the whole category. Any ideas on how I should go about this?

Comments

  • peregrineperegrine MVP
    edited September 2014

    you could add a little image - if you wanted. or change the background color - you won't get a count

    • but you will see it there are posts in the category that are unread.

    meta and talk have unread comments in the categories.

    added to custom.css.

    table.DataTable.CategoryTable  tr.Item.Unread {
    background-image:  url("new.png");
    background-repeat: no-repeat;
    background-position: 40% 0;
    background-size: 25px 25px;
    }
    

    with the new.png (that you create) image in the design folder of your theme,

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Thanks for the guidance. I ended up getting these results.

  • peregrineperegrine MVP
    edited September 2014

    so is that what you want. you need to be explicit.

    if it is not what you want, post the code you added and the theme you are using.

    the concept is,

    • if you have solved what you need - you post your code to help others.

    or

    • if you have not solved what you need - you post the code so someone can decipher what you did and possibly help you arrive at what you want to do.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Sorry. I was expecting only to have the new image once next to the discussion title like you. While utilizing your code I had the above results. Bootstrap 2.3.2 theme.

    table.DataTable.CategoryTable tr.Item.Unread { background-image: url("new.png"); background-repeat: no-repeat; background-position: 40% 0; background-size: 37px 17px; }

  • peregrineperegrine MVP
    edited September 2014

    it doesn't repeat when I test on bootstrap with any of the 3 css changes I've provided.

    you need to post your entire custom.css and a screen shot with you web developer showing the elements.

    and post a link to your website.

    or try this

     table.DataTable.CategoryTable tr.Item.Unread td.CategoryName {
        background-image: url("new.png");
        background-repeat: no-repeat;
        background-position: 40% 0;
        background-size: 37px 17px;
        }
    

    or try

     table.DataTable.CategoryTable tr.Item.Unread  {
            background-image: url("new.png");
            background-repeat: no-repeat !important;
            background-position: 40% 0;
            background-size: 37px 17px;
            }
    

    or try

    .CategoryTable .Unread td.CategoryName {
    background: url("new.png");
    background-repeat: no-repeat;
    background-position: 40% 0;
    background-size: 37px 17px;
    }

    and upload your .png file

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • name all the plugins you are using.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited September 2014

    .

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • My site is private but I could give a username to login I suppose.

    Your first code suggestion worked, but I had some other non-related issues. One was the "new" image would cover the thread title when resizing the window. It didn't work like it would in the discussion modern layout where it would be resized correctly and not cover up the title.

    The next was it seems that the new notification appears for categories that don't have any discussion yet and can't go away. Additionally, it would sometimes still remain even after I read the discussion in the category.

    custom.css is pretty much stock:

    .RSS{ display:none!important; }

    .MItem.MCount.CommentCount{ font-size: 14px; olor: #c46f6f }

    .MItem.MCount.ViewCount{ font-size: 14px; color: #c46f6f }

    custom_cerulean.css is mostly stock too:

    @media (min-width:1400px) { .container,.container { width: 1330px; } }

    @media (min-width:1600px) { .container,.container { width: 1520px; } }

    @media (min-width:1800px) { .container,.container { width: 1710px; } }

    @media (min-width:2000px) { .container,.container { width: 1900px; } }

    These are my plugins.

  • @peregrine said:
    now that is a quick response you have. lol. somewhat tiring to work with people who are obviously logged in and reading threads and still don't respond. I'm done.

    Sorry was trying to figure it out on my own as I know this community encourages that. I'm just learning CSS still and feel a little overwhelmed sometimes.

  • good luck. maybe someone else can guide you though the issues. I don't have the patience.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited September 2014

    scottybweyy said: but I had some other non-related issues.

    One was the "new" image would cover the thread title when resizing the window.
    It didn't work like it would in the discussion modern layout where it would be resized correctly and not cover up the title.

    there are so many options for doing things, you need to decide what is best for you.
    Below is another example with jQuery.

    The next was it seems that the new notification appears for categories that don't have any discussion yet and can't go away. Additionally, it would sometimes still remain even after I read the discussion in the category.

    well just put a primer discussion in the category. and mark it as Read with the toggle on the Categories page Mark Read.

    Additionally, it would sometimes still remain even after I read the discussion in the category.

    my guess , I could be wrong. Alot of people use the back button in their browser, and of course this will have stale data. since you are looking at cached info. always go forward in your browser and re-click categories or discussions. don't use the back option from your browser for up-to-date information (including read and unread and new discussions).

    one more option of the millions of things you could do.

    add this to the bottom of custom.js in Boostrap.js

    jQuery(document).ready(function($) {
    $( '<span class="MyNew">New</span>' ).appendTo( "tr.Item.Unread    td.CategoryName" );
    });
    

    add this to the custom.css

    .MyNew {
    background-color: yellow;
    color: red;
    margin: 3px;
    padding: 0 2px;
    
    }
    

    narrow screen

    widescreen

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Sign In or Register to comment.