[Tutorial] Customize the Publications page

by Wecoc August 10th 2018, 5:36 am

The publications page can't be modified by default but with this little trick you will be able to apply CSS there as much as you want! Very Happy

This method consists of a HTML page including an iframe with the real /publi page embedded. This way, the modifications can be applied inside.
As you can see the idea is very simple.

1) Create the HTML page

AP  Modules  HTML & JAVASCRIPT  HTML pages management  Create in Advanced Mode (HTML)

Title * : Publications
Do you wish to use your forum header and footer ? : No
Use this page as homepage ? : No

And insert this content, this is where the CSS will be defined:

Code:: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" type="image/x-icon" href="http://illiweb.com/fa/favicon/discussion.ico" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="https://illiweb.com/rs3/38/frm/lang/en.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="https://illiweb.com/rs3/38/frm/jquery/ticker/ticker.css" /> <script src="https://illiweb.com/rs3/38/frm/jquery/ticker/ticker.js" type="text/javascript"></script> <script type="text/javascript" src="https://illiweb.com/rs3/38/frm/jquery/cookie/jquery.cookie.js" ></script> <script type="text/javascript" src="https://illiweb.com/rs3/38/frm/mentions/tooltipster.js" ></script> <script type="text/javascript" src="https://illiweb.com/rs3/38/frm/mentions/init.js" ></script> <script type="text/javascript" src="https://illiweb.com/rs3/38/frm/jquery/toolbar/FAToolbar.js" ></script> <script type="text/javascript" src="https://illiweb.com/rs3/38/frm/json/json2.js" ></script> <script type="text/javascript" src="https://illiweb.com/rs3/38/frm/jquery/printf/printf.js" ></script> <script type="text/javascript" src="https://illiweb.com/rs3/38/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js" ></script> <script type="text/javascript" src="https://illiweb.com/rs3/38/frm/jquery/notif/FA.js" ></script> <script type="text/css" name="publi_css"> /* Set here the CSS of the publi page */ article { background: #808080 !important; } h1 { color: #fff; } </script> </head> <body style="margin:0;"> <iframe class="publi" style="width:100%;height:100%;border:none;" src="/publi" onload="setPubliFormat();"></iframe> <script type="text/javascript"> //<![CDATA[ function setPubliFormat() { var win = document.querySelector('.publi').contentWindow, css = document.querySelector('script[name="publi_css"]'), h = win.document.querySelector('head'), style = win.document.createElement('STYLE'); // Append the CSS inside the iframe style.innerText = css.innerText; h.append(style); // Back to forum when the return link is clicked win.document.querySelectorAll('a').forEach(function(element) { if (element.href && !element.href.match(/publi/)) { element.onclick = function() { var href = element.href, parser = document.createElement('a'); element.href = ""; parser.href = href; parser.click(); } } }); } //]]> </script> </body> </html>

Once you copied this, click Submit and check the pathname of the HTML you just created, as it will be important for the next part.
For example in my case it was /h1-publications

2) Create the Javascript

We need a very short Javascript to replace all the /publi links on the page with the new link.

AP  Modules  HTML & JAVASCRIPT  Javascript codes management  Create a new Javascript
 Make sure the javascripts are enabled in your page.

Title * : Customize Publications
Placement : In all the pages

Code:: $(function(){ var publi_url = "/h1-publications"; $('a[href^="/publi"]').filter(function() { this.href = publi_url }); });

Change the

Code:: "/h1-publications"

to the pathname of your HTML.

3) Customization

In my example I changed the article background color to gray and the main title text to white, so if you test it at this point that's how it should look.

[Tutorial] Customize the Publications page Publi10

But now it's your turn to change everything you want on the page.

Go back to the HTML page. Inside the code (line 20) you will see this code inside a script tag.

Code:: /* Set here the CSS of the Publications page */ article { background: #808080 !important; } h1 { color: #fff; }

All the CSS edits will go there. You don't have to change anything else on the code, only the CSS.

Extra - Favicon:

Deprecated method:

by TonnyKamper August 12th 2018, 1:10 am

Awesome @Wecoc Yes

I'll try this one out for sure Smile

by kittykitty July 1st 2019, 5:26 am

hi @Wecoc , i have followed these instructions obvioulsy the css does gets applied..
but, no links work back O.o
individual articles open if i right click and open them in new window, and then are rendered pimped-up-css-less, but anything else links, menu included, stops working...

am i doing something wrong?
http://doden.forumgratuit.ro/h1-pubframe
Thank you!