Customize page design with JS and Jquary.

Go down

Customize page design with JS and Jquary. Empty Customize page design with JS and Jquary.

Post by Storyteller of Wonderland on June 6th 2019, 7:38 pm

GOOD GOOD! guitar

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:

:wouhou: phpbb3

Code:
.darkbody {
  background-color: green;
}

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


:wouhou: modernBB

Code:
.darkbody {
  background-color: green;
}

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


:wouhou: punbb

Code:
.darkbody {
  background-color: green;
}

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

:wouhou: invision

Code:
.darkbody {
  background-color: green;
}

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

:wouhou: 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!

groar

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


Last edited by Storyteller of Wonderland on June 9th 2019, 6:54 pm; edited 1 time in total (Reason for editing : addition script more accurate examples)
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 47
Reputation : 6
Language : English, Russian, Elfen, HTML, CSS, JS, Okey ?
Location : Russia

http://4enris.profiforum.ru

Back to top Go down

Customize page design with JS and Jquary. Empty Re: Customize page design with JS and Jquary.

Post by TonnyKamper on June 6th 2019, 9:25 pm

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

Female Posts : 461
Reputation : 40
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Customize page design with JS and Jquary. Empty Re: Customize page design with JS and Jquary.

Post by Storyteller of Wonderland on June 7th 2019, 8:15 pm

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

Hello, Tonny. Shamrock

if there are errors, please report. Hug
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 47
Reputation : 6
Language : English, Russian, Elfen, HTML, CSS, JS, Okey ?
Location : Russia

http://4enris.profiforum.ru

Back to top Go down

Customize page design with JS and Jquary. Empty Re: Customize page design with JS and Jquary.

Post by TonnyKamper on June 7th 2019, 10:55 pm

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..  blackeye
TonnyKamper
TonnyKamper
Forumember

Female Posts : 461
Reputation : 40
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Customize page design with JS and Jquary. Empty Re: Customize page design with JS and Jquary.

Post by Storyteller of Wonderland on June 8th 2019, 1:00 am

@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..  blackeye


problem in the codes.

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

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. Moderator Love and peace, baby Doff
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 47
Reputation : 6
Language : English, Russian, Elfen, HTML, CSS, JS, Okey ?
Location : Russia

http://4enris.profiforum.ru

Back to top Go down

Customize page design with JS and Jquary. Empty Re: Customize page design with JS and Jquary.

Post by TonnyKamper on June 8th 2019, 1:18 am

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
TonnyKamper
Forumember

Female Posts : 461
Reputation : 40
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Customize page design with JS and Jquary. Empty Re: Customize page design with JS and Jquary.

Post by Storyteller of Wonderland on June 9th 2019, 6:58 pm

@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.

Cheer Moderator
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 47
Reputation : 6
Language : English, Russian, Elfen, HTML, CSS, JS, Okey ?
Location : Russia

http://4enris.profiforum.ru

Back to top Go down

Customize page design with JS and Jquary. Empty Re: Customize page design with JS and Jquary.

Post by TonnyKamper on June 10th 2019, 12:18 am

Thanks for updating the tutorial :wouhou: 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  Smile
TonnyKamper
TonnyKamper
Forumember

Female Posts : 461
Reputation : 40
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Customize page design with JS and Jquary. Empty Re: Customize page design with JS and Jquary.

Post by Storyteller of Wonderland on June 10th 2019, 10:54 pm

Good, @TonnyKamper. In the meantime, I am writing new textbooks to publish them on the forum! geek afro
Storyteller of Wonderland
Storyteller of Wonderland
Forumember

Female Posts : 47
Reputation : 6
Language : English, Russian, Elfen, HTML, CSS, JS, Okey ?
Location : Russia

http://4enris.profiforum.ru

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum