Theme Changer plugin

[toetapping]

I changed that line to this. $('#pbn-bar').css('width', $('#pbn-bar').width() + "22px"); //this line was added and it didn't work.

[Lynx]

I don't use the Theme Changer plugin (we typically just have one theme on most of my forums), but I'll see about installing it on my test forum later (I've got some work I need to do first) and see if I can get a fix working there - it's already got the Scavenger Hunt plugin installed, so I'll see what I can do with the Scavenger Hunt plugin to get it to play nicely with the Theme Changer.

[toetapping]

Much appreciated MSG. Thank you for taking the time.

[Lynx]

Okay.

I've tried everything I could think of, but nothing seemed to work. Then I tried raising the height of the PBN bar from 23px to 46px. Interesting result:



The Theme Changer icon IS there - it's just been pushed to a 2nd line for some reason. I'm not sure why, but it almost appears as if the PBN bar is only allowing 4 icons - regardless of width set - to show on 1 line. It's not the prettiest, but a quick fix would be to add this to your stylesheet:


#pbn-bar-wrapper {
   height: 46px !important;
}



I'll keep working on a more viable solution, but until then, this may work as a temporary fix - at least to get the Theme Changer icon to show. I'm either not thinking of the solution, or it's beyond my knowledge.

Sorry.

toetapping and gardenmeister,

EDIT: Ignore the code above and add this instead (into your theme's stylesheet):

#pbn-bar {
   width: 120px !important;
}


You may have to adjust the width to your preference.


If you want this global, add this to your Global Footer:

<style>
#pbn-bar {
   width: 120px !important;
}
</style>




You can also remove both occurrences of this line from the Scavenger Hunt plugin:

$('#pbn-bar').css('width', $('#pbn-bar').width() + "22px");



Texas,

It seems that the PBN bar seems to not want to always adjust its width within the JS - not sure why, or what its reason is - but at least we've got a solution now.
Thanks for setting me on the right track!

[toetapping]

Thank you. Thank you. It works just like a gem. Merry Christmas from Aussie Land.

[Lynx]

Glad we got it fixed for you, toetapping! Have a Merry Christmas yourself.

[Texas]

Dec 8, 2016 19:42:13 GMT -8 toetapping said:

This is my test forum that I used to try it. testingsssss.proboards.com/

I added the above and it still doesn't work.

The problem was probably that I didn't add enough pixels to the side. I tested it on my own forum, but not extensively. I think if you had tried changing the number from 22 to 44 or some larger number it would have worked (at least it did when I tested). Anyway, if what you have works than great. Just remember you'll need to remove that when you remove the scavenger hunt plugin or your PBN bar will look really wacky.

Also, protip Lynx

Dec 8, 2016 22:11:52 GMT -8 Lynx said:

toetapping and gardenmeister,

See if this line (both occurrences):

$('#pbn-bar').css('width', $('#pbn-bar').width() + 22);



needs to be slightly modified to this:

$('#pbn-bar').css('width', $('#pbn-bar').width() + "22px");



Note the quotes and the px around the 22. Let me know how that goes. Be sure you change both occurrences of that line.

The second line you wrote will actually result in "8822px" (or something close to that) because your adding a number to a string. Javascript will just concatenate the two as strings and put the result there. Hence doing something like 11 + '111' will result in '11111' instead of the expected 122.

Just something to keep in mind in the future as I've struggled with it on a number of occasions in the past.

[Lynx]

Dec 10, 2016 9:24:44 GMT -8 Texas said:

Dec 8, 2016 19:42:13 GMT -8 toetapping said:

This is my test forum that I used to try it. testingsssss.proboards.com/

I added the above and it still doesn't work.

The problem was probably that I didn't add enough pixels to the side. I tested it on my own forum, but not extensively. I think if you had tried changing the number from 22 to 44 or some larger number it would have worked (at least it did when I tested). Anyway, if what you have works than great. Just remember you'll need to remove that when you remove the scavenger hunt plugin or your PBN bar will look really wacky.

Also, protip Lynx

Dec 8, 2016 22:11:52 GMT -8 Lynx said:

toetapping and gardenmeister,

See if this line (both occurrences):

$('#pbn-bar').css('width', $('#pbn-bar').width() + 22);



needs to be slightly modified to this:

$('#pbn-bar').css('width', $('#pbn-bar').width() + "22px");



Note the quotes and the px around the 22. Let me know how that goes. Be sure you change both occurrences of that line.

The second line you wrote will actually result in "8822px" (or something close to that) because your adding a number to a string. Javascript will just concatenate the two as strings and put the result there. Hence doing something like 11 + '111' will result in '11111' instead of the expected 122.

Just something to keep in mind in the future as I've struggled with it on a number of occasions in the past.

Yeah - I did notice that when I did an Inspect Element after plugging that in with the quotes. My bad on that one. If anything, I should have had that as:

$('#pbn-bar').css('width', $('#pbn-bar').width() + 22 + "px");


so it would add the px onto the number rather than making it all a string.

[Brian]

Ideally you should just change the PBN bar's width to auto so that it accommodates all elements added to it.

So long as the PBN bar is set to a pixel width you're still going to have the same problem when other new icons are added to it by other plugins.

[Lynx]

Dec 11, 2016 9:17:28 GMT -8 Brian said:

Ideally you should just change the PBN bar's width to auto so that it accommodates all elements added to it.

So long as the PBN bar is set to a pixel width you're still going to have the same problem when other new icons are added to it by other plugins.

So, the best method would be to just use:


$('#pbn-bar').css('width','auto');


[Brian]

Correct.

[gardenmeister]

Thank you everyone. Will try it.

[gardenmeister]

Dec 11, 2016 11:30:13 GMT -8 Lynx said:

Dec 11, 2016 9:17:28 GMT -8 Brian said:

Ideally you should just change the PBN bar's width to auto so that it accommodates all elements added to it.

So long as the PBN bar is set to a pixel width you're still going to have the same problem when other new icons are added to it by other plugins.

So, the best method would be to just use:


$('#pbn-bar').css('width','auto');


$('#pbn-bar').css('width','auto');
When I tried to add that to the bottom of the css it gives a syntax error.  Did I try to put it in the wrong place?

[Brian]

Dec 12, 2016 11:36:06 GMT -8 gardenmeister said:

Dec 11, 2016 11:30:13 GMT -8 Lynx said:

So, the best method would be to just use:


$('#pbn-bar').css('width','auto');


$('#pbn-bar').css('width','auto');
When I tried to add that to the bottom of the css it gives a syntax error.  Did I try to put it in the wrong place?

The line you quoted is Javascript/jQuery, not CSS, so it's not applicable to your theme's style sheet.

The CSS version of that line is:

#pbn-bar { width: auto !important; }