Version 1.2 Squashed bug that made the icons themselves transparent - tldr icons aren't transparent anymore added new mod "Trans Borders" in addition to the background of the icons being transparent the border is too
Could you add a checkbox to the settings menu to toggle between the small and normal sizes? I honestly don't like the smaller one because it slows me down in selecting the thing to build so it would be helpful to have a transparent yet normal sized build bar.
I don't know about a checkbox but do you think it will be a good idea to put in a slider bar to change the size of the icons, anywhere between 50% to 100%?
As I don't completely understand the examples in the Settings manager thread, can you give me a working code bit for a slider?
this is as far as I got before I got confused: Code: model.addSetting_Slider("Icon Size", "cBBB_Size", "UI",
https://forums.uberent.com/threads/rel-possible-fix-for-blackscreen-issues.56735/page-3#post-891860 this needs to be looked into, confirmed. we can't be causing blackscreens.
Okay so I think I know what is causing but I have no idea how to fix it and still have my mod work: The way BBB works is it appends <link id='cBBCSS' href='' rel='stylesheet' type='text/css'> to the <head> it then takes the value from the settings page and uses that value in an if statment. Depending on what the value is for the if statment it edits the href element in the <link> appended to the <head> to pick from 4 different css documents. I beleive this is where the problem lies because it is not loading the css like the "no blackscreens" mod says to. If you didn't understand anything I just said but you understand javascript here is the main js file: Code: initialSettingValue("cBBB_Trans", 0); $('head').append( "<link id='cBBCSS' href='' rel='stylesheet' type='text/css'>" ); var CBB = decode(localStorage.settings).cBBB_Trans; console.log("cBBB: Loaded, cBBB_Trans = " + CBB); if (CBB === "Transparency On") { $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background-color', 'rgba(13, 13, 13, .7)'); $("#cBBCSS").prop('href', 'corBetterBuildBar.css') } else if (CBB === "Transparency Off") { $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background-color', 'rgba(13, 13, 13, 1)'); $("#cBBCSS").prop('href', 'corBetterBuildBar.css') } else if (CBB === "Icons Only") { $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background', 'none'); $("#cBBCSS").prop('href', 'corBetterBuildBarMini.css') } else if (CBB === "No Borders") { $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background-color', 'rgba(13, 13, 13, .7)'); $("#cBBCSS").prop('href', 'corBetterBuildBarMiniWithBG.css') } else if (CBB === "Trans Borders") { $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background-color', 'rgba(13, 13, 13, .7)'); $("#cBBCSS").prop('href', 'corBetterBuildBarWithTransBorder.css') }
It looks like you are very knowledgeable with respect to js and css, etc. Think you could help me out? (refer to previous post)
Just don't do that. There is a loadCss method that is used by all other mods, that is fixed by no blackscreens. If you want to load different CSS based on some if statements do the if statements and call something like loadCSS('coui://ui/mods/yourmoddir/yourcss.css'); The method loadCSS is by the way defined in PA\media\ui\alpha\shared\js\common.js That file is shadowed by no blackscreens.
so instead of Code: $('head').append( "<link id='cBBCSS' href='' rel='stylesheet' type='text/css'>" ); and Code: $("#cBBCSS").prop('href', 'corBetterBuildBar.css') I should do Code: loadCSS('coui://ui/alpha/live_game/corBetterBuildBar.css'); ?
The standard (at least in regular web development) way to do this kind of thing is to load all the styles in one file and change a class on the top level element of interest to select which ones become active.
So basicly you just need to copy your code from the drop down setting item and use it for the slider. This should help: For settings js file: Code: model.addSetting_Slider("Build bar scale:", "cBBB_Size", "UI", 50, 100, 75, "Better Build Bar"); This will save a value between 50%-100% and have a default of 75%. For main js file: Code: initialSettingValue("cBBB_Size", 75); var CBB_Size = decode(localStorage.settings).cBBB_Size; console.log("CBB_Size= " + CBB_Size);
Okay so I have a problem again, how do I use a variable in a jquery css edit? for some reason this isn't working Code: var CBB_Size = decode(localStorage.settings).cBBB_Size; console.log("CBB_Size= " + CBB_Size + "%"); var c_Size_w = CBB_Size * 0.01 * 62; var c_Size_h = CBB_Size * 0.01 * 56; (function () { $(".div_build_item > div").css('height', c_Size_h + 'px').css('width', c_Size_w + 'px'); })();
Update notes: - Fixed blackscreen issues - requires blackscreenfix - icon size adjustable 50% to 100%