Customize page design with JS and Jquary.

GOOD GOOD!

Hello! I recently on this technical support forum, since I worked for a long time with Russian technical support, but the time is changing, and I decided to go out into the light.

I want to offer you a good script that can change the page design, and, gosh, you can even add other scripts to run on the right page using this script!

This will help you to diversify the design of your forum, and even if you do not have access to the desired page, now you can do everything easily!

ACP(Admin Control Panel) > Modules > HTML & JAVASCRIPT > Javascript codes management > Javascript codes management

Title: Whatever you like
Placement: All pages.

Code:


jQuery(document).ready(function($) {

if (window.location.href.indexOf("your_link") > -1) {

    //you script
}

});


1. Insert your code.

2. Put your link. You need to take not the whole link, but the end of the link of the page you want to change.

Full link: http://4enris.profiforum.ru/g7-group

Take the end: g7-group


Simple example of changing the general background of the page and header settings for changing the design for the page of group 7:

Script for all versions of the working:

Code:


jQuery(document).ready(function($) {
if(window.location.href.indexOf("g7-group")>-1){
jQuery("body").addClass("darkbody")}
});


CSS settings for different versions except phpbb2:

phpbb3

Code:

.darkbody {
  background-color: green;
}

.darkbody .headerbar {
  background-color: #222;
  width: 100%;
  height: 400px;
}

modernBB

Code:

.darkbody {
  background-color: green;
}

.darkbody .headerbar {
  background-color: #222;
  width: 100%;
  height: 400px;
}

punbb

Code:

.darkbody {
  background-color: green;
}

.darkbody #pun-intro {
    background-color: #00ec3e;
    width: 100%;
    height: 400px;
}


invision

Code:

.darkbody {
  background-color: green;
}

.darkbody #logostrip {
    background-color: #1372f3;
  width: 100%;
  height: 400px;
}

awesomebb

Code:

.darkbody {
  background-color: green;
}

.darkbody #header-banner {
    background-color: #e5e6e6;
    width: 100%;
height: 400px;
}

That's all!

If you have questions, please contact!



Works for all versions. Pick up just the settings correctly.

That sure looks nice and easy, great job 
When I have time I'm gonna try this out on my testforum..

TonnyKamper wrote:That sure looks nice and easy, great job 
When I have time I'm gonna try this out on my testforum..

Hello, Tonny.

if there are errors, please report.

Sadly It's not working on phpBB3, on invision it only works halfway, the background changes but the logo image not at all, on ModernBB it changes the background only halfway down and the the logo image not at all.. tried it with different element ID's, but did'nt get it to work.. 

TonnyKamper wrote:Sadly It's not working on phpBB3, on invision it only works halfway, the background changes but the logo image not at all, on ModernBB it changes the background only halfway down and the the logo image not at all.. tried it with different element ID's, but did'nt get it to work.. 

problem in the codes.

May I have a look at the scripts that you use?

EDIT:

did you take my clearance settings? therefore, they are partly for all versions. Because all versions have different styles. Those. here you need to select the desired setting for each topic.

Today I will do it and lay out a list for all versions.

Great, I'll wait for that.. 
I tested it with your example version, only replaced the g7-group for g1 and also tested it with a portalpage..

TonnyKamper wrote:Great, I'll wait for that.. 
I tested it with your example version, only replaced the g7-group for g1 and also tested it with a portalpage..

Tonny, I updated the tutorial. Now there is a cleaner script and settings for all versions except phpBB2.

To be honest, there are no problems. It is only necessary to select an id or class based on the version. The developer panel in Chrome or Mozilla is a great help in this.

Thanks for updating the tutorial At the moment I'm quite busy, but I'll try to test it again as soon as I'm having a bit of free time on my hands @Storyteller of Wonderland 

Good, @TonnyKamper. In the meantime, I am writing new textbooks to publish them on the forum!