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.

Highlight announced discussions in BitterSweet theme?

Hello everyone,

I was wondering if it was possible to alter the visuals of the announced threads in the BitterSweet theme so that they stood out from the rest of the discussions (in addition to merely being on top).

From my basic understanding, I believe this can be done through CSS of some sort, but I'm not really sure what I should do, and where I should do it.

Any help would be appreciated, thanks!

«13

Comments

  • peregrineperegrine MVP
    edited October 2015

    From my basic understanding, I believe this can be done through CSS of some sort

    you are absolutely correct.

    see http://vanillaforums.org/discussion/comment/219925/#Comment_219925

    • you need to identify the element via a web developer tool for your browser
    • then change the css as you like (background or border, etc.
    • either with cssedit plugin or via custom.css

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

  • R_JR_J Ex-Fanboy Munich Admin

    What to do is completely up to you. But you can toy around with some online tools to find out the code you need: http://selfcss.org/

  • Thanks for both your responses, and for that website.

    In this case, I imagine there isn't just a line of code I could inject in somewhere to have the announcement box change to a particular colour?

    Learning CSS could be indeed be a valuable skill to acquire over time, but I was hoping I could put the change into effect as I do so, rather than only being able to several months into the future.

    If not, I understand. I just figured that since it's a built-in theme, there might be enough experience with it already to offer a quick adjustment.

    Thanks again either way.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited October 2015

    @MrCanadian

    It is just a simple line change, which you could make via the dashboard by installing the CSSEdit plugin.

    People aren't just being mean when they don't give you the exact answer, they are trying to help you to learn and develop.

    Type the name of the browser you use and 'web inspector' into Google (other search engines are available)

    Some browsers have them built in, others need them to be added.

    I use Firefox, and added the Firebug inspector.

    Now, when I want to know what line(s) I need to change, I right click on the page, over the element I am looking at, and Firebug shows me what css elements are involved.

    If you really, really can't even get this far, let us know on here, and someone will give you the line of CSS code needed, but you really would benefit from working out how to use a web inspector.

  • Thanks for the advice on that plug-in, I'll definitely check it out.

    And sure, I never thought anyone was being anything but helpful, and just hoped I could tackle this directly and swiftly rather than have my learning process burden the needs of the website.

    I'll try those things you've mentioned and see if I can successfully make the change.

  • R_JR_J Ex-Fanboy Munich Admin

    You might get more detailed help if you provide more detail. If you can post a picture of what you like to achieve, maybe someone can provide you with the css that can do this change.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @MrCanadian

    I don't think anyone replying would feel you were being a burden.

    I had pretty much no knowledge of css when I first started using Vanilla.

    For simple customisation, being shown Firebug was a massive help to me.

    If you're really pressed for time, just say on here, and we'll give you the code (or our best guess at it!), but then, at your leisure, I really would try to get to grips with a web inspector.

  • edited October 2015

    Thanks for the added support, everyone.

    Let me share some more precise information in that case:

    The website in question is - http://www.crisisforums.org

    One will notice a number of announced threads at the top. While they do indeed indicate themselves as being "announced", I was wondering if the entire "box" the discussion rests in could have its colour changed to one of my choosing.

    Tangentially, I wondered if items of a specific category could also have their boxes changed to a specific colour.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @MrCanadian

    This might do for your category colours (I haven't used it.)

    http://vanillaforums.org/addon/categoryclass-plugin

    The answer to the first part is 'Yes'.

    If you use Firefox, even without Firebug, visit my site:

    http://www.whu606.com

    Right click on the announced thread at the top, and choose Inspect element.

    Roll the mouse over the classes listed in the Inspector tab until the relevant element is highlighted on the page. If you are struggling, it is the first one under

    class = Datalist Discussions

    Click on the relevant line, and in the right hand section you will see the rules applied to it.

    You can change any of the values by double-clicking on them and entering a new value, to see what they would look like. This only affects the page you are looking at, and is not permanent.

    Copy the rule, make your desired changes and add them to CSSEdit via the dashboard.

    Come on!

    You can do this!

  • I have done everything mentioned in the above posts, and none of them seem to do anything, or I simply lack the skill to be able to do this on my own. I've even tried the "CategoryBG" plugin, and everything I do with it changes nothing on the actual website.

    Therefore, I would like to rephrase the initial question to this:

    What is the exact line of code that I need to change the background colour of a particular category on the "recent discussions" page to neon pink, and where exactly do I put it?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You inspect the code with a web inspector in your browser to find the name of the class you need to attach the css to

    example using your forum post , this would only affect that specific discussion on the index list

    .DataList .Item.Announcement.Announcement-Everywhere.Closed.Unread.ItemDiscussion{
        background: rgba(204,51,0,.5);
        }
    

    If you want to be more general then anything with that class name attached will use the same color

    .DataList .Item.Announcement{
        background: rgba(204,51,0,.5);
        }
    
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    where exactly do I put it?

    You would put it inside your custom.css file or add it to the plugin CSSEDIT....

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I've even tried the "CategoryBG" plugin, and everything I do with it changes nothing on the actual website.

    That plugin would need to be modified to work with your theme.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited October 2015

    This is example of your site using the code I gave above which only works on that specific post.

  • Fantastic, I'll try that out.

  • peregrineperegrine MVP
    edited October 2015

    .

    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 October 2015

    here is another css option that would make the announcements stand out.

    you might like.

    (you could put it in the same place as the other 4 comments mentioned as far as where to add it.)

    or you could clone your theme and then add it to your cloned theme's css.

    @-webkit-keyframes rotate {
      from { -webkit-transform:rotate(0deg); }
      to { -webkit-transform:rotate(360deg); }
    }
    
    @-moz-keyframes rotate {
      from { -moz-transform:rotate(0deg); }
      to { -moz-transform:rotate(360deg); }
    }
    
    @-ms-keyframes rotate {
      from { -ms-transform:rotate(0deg); }
      to { -ms-transform:rotate(360deg); }
    }
    
    @-o-keyframes rotate {
      from { -o-transform:rotate(0deg); }
      to { -o-transform:rotate(360deg); }
    }
    
    .Announcement {
      -webkit-animation-name: rotate;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: 2;
      -webkit-animation-timing-function: linear;
      -moz-animation-name: rotate;
      -moz-animation-duration: 5s;
      -moz-animation-iteration-count: 2;
      -moz-animation-timing-function: linear;
      -ms-animation-name: rotate;
      -ms-animation-duration: 5s;
      -ms-animation-iteration-count: 2;
      -ms-animation-timing-function: linear;
      -o-animation-name: rotate;
      -o-animation-duration: 5s;
      -o-animation-iteration-count: 2;
      -o-animation-timing-function: linear;
    }
    

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

  • @vrijvlinder said:
    You inspect the code with a web inspector in your browser to find the name of the class you need to attach the css to

    example using your forum post , this would only affect that specific discussion on the index list

    .DataList .Item.Announcement.Announcement-Everywhere.Closed.Unread.ItemDiscussion{
        background: rgba(204,51,0,.5);
        }
    

    If you want to be more general then anything with that class name attached will use the same color

    .DataList .Item.Announcement{
        background: rgba(204,51,0,.5);
        }
    

    Thank you tremendously for this - I was successfully able to alter the code so that all announced discussions are now highlighted.

    Now, I attempted to do this for a specific category, and after some fiddling, got it to work - but it only highlights the category name within the discussion box, rather than the entire discussion box as with the announcements.

    The code I attempted to use is this:

    .DataList .MItem.Category.Category-societal-collapse{
    background: #cc0000;
    }

    Is there something I'm missing? If I change the background colour on something as generic as "Item Content Discussion", as I obtain when I inspect the element, won't that change the colour of everything as opposed to a single category?

    I'm not sure how I can make it more specific.

  • peregrineperegrine MVP
    edited October 2015

    In the FAQ link I provided you there was a great link on specificity. It may not give you the answer to your question but explains specificity pretty well.

    Is there something I'm missing?

    Yes.

    you would need to change the background via a plugin and adjusting class in the li. you can't just do it via css changes alone since the category class is downstream in a descendant.

    But you would ruin the background color shown by read and unread if you override with a category color.

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

  • K17K17 Français / French Paris, France ✭✭✭

    @peregrine a dit :
    But you would ruin the background color shown by read and unread if you override with a category color.

    The link of a read subject is grey, and the link of an unread subject is blue (in the default theme and bittersweet), and the "Announcement" tag is more "whiter" (sorry I don't know how to say it, I'm a french teen) than the tags when subject is unread.

Sign In or Register to comment.