Request: Replace Cat/Legend/Infocenter w/ Images

[Aaron]

Is this similar to what you are requesting?

support.proboards.com/thread/431878/plugin-multicolored-categories-1-3

[Tohsaka Rin]

Nope. That allows you to change the gradient behind the category itself.

What myself, and others, are looking for is the ability to completely remove/swap the text and gradient area out for an image. I will explain why you cannot use the default way in the new v5 system.

First off, you CAN sort of do it right now, but it only works for categories and not for the Forum Legend or the InfoCenter area. All you do is go in where the category is set up and replace the name text with an image under Admin>Categories&Boards>then edit the category you want.

This causes a huge problem though with table spacing later on (which I will explain when I get to that part.)

So, by doing what I stated you CAN change it, but it leaves the gradient behind (the thing you changed in your image.) The next part you would have to do is go remove the gradient, because the gradient ends up causing an overlap between the image you just designated for your category and the placement of the gradient image within the category table behind it. This creates a huge padding problem.... Either it messes up your boards alignment/size or it pushes things out of proportion.

Thus you then need to remove the gradients by going to Themes>Advance Styles&CSS>Visual Editor and remove all the gradients by making them transparent.

BOOM, a huge problem ends up happening now.

All your forum tables have a 10-20px gap between the category container and the forum container body. Apparently proboards didn't have the foresight to fix this problem or notice it. More or less it makes it look as if your category head is detached from the forum body.

So you have this huge, horrible, gap that will now show up between every category container and body container.. not just in the forum lists but for things like the bank, your profile tables, and all of that.

There is no way to fix it because we have no access to the global coding, and unless you start putting a bunch of injector hacks into it you cannot fix it. Believe me, we tried and pulled our hair out. Eventually we gave up and forced the tables to fix themselves by using injector hacks....but then things like the Dynamically Tabbed Table, the Sidebar Redux, and Monetary System plugins get screwed up again because most of them are using the same value as the forum category header... so if you do end up fixing the forum spacing issue with your forum board container you have screwed up the format for all the other containers..

You cannot fix one without screwing up all the other ones..... or making about 10 injector hacks to force it all to work (which we did and is a pain in the arse!!!)

So, in order to remedy the entire darn problem we need a plugin that allows you to switch out the container area for category headers with those of an image, while re-aligning your board properly to stop all of that from messing up.

This includes the ability to throw in images for the Forum Legend and Infocenter.. because right now the only way you can change those is doing a template mod... and THAT IS A PAIN ALSO BECAUSE EVERY TIME YOU WANT TO MAKE A NEW SKIN YOU HAVE TO DO IT ALL OVER AGAIN.....

I guess proboards had little hindsight about a lot of this..... especially since many people make skins and are now forced to sit there and copy-pasta all these codes in multiple times into every single new skin sheet since we are not allowed to have a global css to format ALL SKINS.

There really should be an option for you to tick in the template areas saying "use this for all skins" so you don't have to do and change it every single time you make a new skin.

So, that is that.

^e@^

[Tohsaka Rin]

Bump

[feline]

looking to replace this v 4.5 code please



<script type="text/javascript">
<!--

// Category or title text to image

var tCat = document.getElementsByTagName("td");

function textToImage(text,image){
for(t = 0; t < tCat.length; t ++){
var re = new RegExp("<b>" + text + "</b>","i");
if(tCat.item(t).className.match(/^(cat|title)bg/i) && tCat.item(t).innerHTML.match(re)){
tCat.item(t).innerHTML = tCat.item(t).innerHTML.replace(re, "<img src='" + image + "'>");
}
}
}

textToImage("templates","URL/templates.png");

textToImage("Downloads","URL/downloads.png");

//-->
</script>

[SuperChick]

Totally waiting to see what comes of this! I want to erase the gradients behind my categories as well and, like you, replace the info center title with an image like I had before.

(This is essentially a bump for you. )

[Tohsaka Rin]

I had to make a work around for this until someone actually makes a plugin, the only problem is that by doing what I have done you will end up with this hideous space between your cat headers and forum list rows because proboards apparently never did anything to compensate for how removing gradients would cause the forum to get spaced out nonsensically.

I had stopped bumping this because it got little to no attention and a fix was never provided to help anyone.

To place images in your cat header you can merely go to Structure> Categories % Boards> Select a Category you want to edit>Edit Properties>Change Display Name by adding image url here [/img].

However that leaves a tacky and horrible gradient behind your image so now you have to go remove that...

Themes>Advance Styles & CSS> Visual Editor> I forget what thing it is... It is either in Forum>Header (top) where you have to remove the "background image" or the Forum>Body (content)>Lists  (Boards, Threads,Posts...)

To remove Infocenter and replace it with an image you have to currently modify a template...

Themes>Layout Templates>Home>

Find this line:

{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
<div class="content">
<table>

Remove "<h2>Forum Information & Statistics</h2>" and replace it with "<img src="url here">. Make sure the </div> is after it or else you will mess up the area.

Even after you do this, though, your going to have that stupid freaking gap between where the gradient USE TO BE touching the forum list. Your cat header image will look "detatched" from the forum row.

Like I said, seems proboards hasn't thought about this to fix it at all and so far there has not been a plugin made to compensate for any of this.

You will be forced to have someone code you a custom css piece to fix that gap; I cannot do that for you. And if they do get you a code which will move that gap it is going to mess up plugins like the Monetary System, the Dynamically Tabbed Table, custom pages, thread posts, and all of that because its some universal css crap.

By moving the forum rows up to match the cat header image to compensate for the gap you are also moving a bunch of other stuff up that same amount of pixels...which will start cutting off text in certain areas.

Its a huge, and stupid, mess that should have been resolved months ago....

Believe me, even my code that we have to fix it still screws everything else up because the cat header and forum row has a UNIVERSAL css tag which almost everything else uses...

It's like saying that if you change "cat header" you affect every single "cat header" on the entire forum that is in any plugin or any other area that might not just be the forum list area....

Sorry, it is stupid, and hopefully this helps a little.

[SuperChick]

Sadly I still didn't find where to delete the gradient in either of the aforementioned areas. Do you remember if it specifically uses the word "gradient" in the visual editor? Or if I am looking for something else?


The info center hack worked beautifully, though (despite the horrible gradient still visible behind it). Thanks a lot. At least I have that now!

[Tohsaka Rin]

Mn, its somewhere in the top part of the Visual Editor where you select a "background image".

Try this:

Visual Editor> Forum> Body (content)> Title Bars> Background Image> Change to "none".

[Tohsaka Rin]

bump

[Tohsaka Rin]

Bump

[Tohsaka Rin]

bump

[Tohsaka Rin]

Bump

[Tohsaka Rin]

bump

[Wormopolis]

This will probably have to go through several incarnations until I get the whole request in there.

I can start with making something that targets the Text area for replacement, as well as the gradiant behind category bars. Im guessing you want to do an image background on the bars?

try this

Download

[Tohsaka Rin]

Give me 24 hours to get back to you on this. I am very ill at the moment. Please know that I appreciate your help on this matte and hope to get back to you soon regarding this plugin request.