Suggestion: more HTML/CSS info in "Myself" tab

Please add some more class and/or id attributes to the HTML in the &quotMyself&quot tab, for use by end-user in the &quotStylish&quot browser extension/add-on which lets users .

Examples:

  • For each <li> containing an item, set the id to the plain English name of the item (e.g., id=&quotBundle_of_Fourth_City_Rags&quot)[/li][li]For each <ul> containing a category of items, set the id to the plain English name of the category (e.g., id=&quotWild_Words&quot)[/li][li]For inventory items which are usable, put the &quotusableitem&quot class into the <li> tag as well as the <a> tag

That sounds like a vast amount of work…
edited by genesis on 11/4/2016

I doubt the first point would be much work if FBG decided to implement it, as it would only involve telling the server to output the item name in a second place. The other two would likely be much more complicated.

The only issue I can see with this is concerns over making automation easier.

In database implementation (and relational modeling) that unique key (tag, superkey, primary, id, etc) gives the information, not the other way around.
If you’re looking to style or manipulate DOM you just need to reference to those keys. Even if we had classes, ids or attributes, you would still to verify if you got it right.
Out of curiosity, what exactly do you wish to accomplish? I need to put more ideas on the paper in case I’ll have some free time! :D

Cheers!

[quote=Skinnyman]Out of curiosity, what exactly do you wish to accomplish?[/quote]I’ve written a Stylish style which makes blank non-usable (non-clickable) inventory items, but I want to improve it so that:

  1. It only applies to items in the &quotCuriosities&quot category.
  2. The blanked-out items don’t take up any horizontal space (I can’t do that now since I can’t selected the <li> for those items, but only the content inside each <li>)
    edited by Matthew Cline on 11/4/2016

[quote=Matthew Cline][quote=Skinnyman]Out of curiosity, what exactly do you wish to accomplish?[/quote]I’ve written a Stylish style which makes blank non-usable (non-clickable) inventory items, but I want to improve it so that:

  1. It only applies to items in the &quotCuriosities&quot category.
  2. The blanked-out items don’t take up any horizontal space (I can’t do that now since I can’t selected the <li> for those items, but only the content inside each <li>)
    edited by Matthew Cline on 11/4/2016[/quote]
    Bit early for me and coffee’s en route, but can you send/post a picture with this? I’m having small issues understanding exactly what you wish to achieve.

Cheers and a lovely weekend!

Here’s what it looks like:

Having better HTML attributes may also help people with disabilities.

I see what you mean and sorry for the late reply, but I was very busy1
What you wish to obtain can’t be done in a clean way in CSS and it’s bound to fail at a certain point. But some JS love does the job!

if($(‘h3:contains(&quotCuriosity&quot)’).next().length > 0) {
var curiosityList = $(‘h3:contains(&quotCuriosity&quot)’).next();
curiosityList.find(‘li’).each(function () {
if($(this).find(‘a.usableitem’).length == 0 && !$(this).hasClass(’.empty-icon’)) {
$(this).hide();
}
if($(this).hasClass(’.empty-icon’)) {
$(this).remove();
}
});
if(curiosityList.find(‘a.usableitem’).length % 6 != 0) {
for(var i = 0; i < curiosityList.find(‘li’).length % 6; i++) {
curiosityList.append(’<li class=&quotempty-icon&quot></li>’);
}
}
}
edited by Skinnyman on 11/8/2016