[Tutorial] Customize the Publications page

Go down

[Tutorial] Customize the Publications page

Post by Wecoc on 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 Cool
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.


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:
You can change the page favicon (the little icon displayed in the browser tabs) in the HTML code, too.
Search this in the code (line 6)
Code:
<meta name="viewport" content="width=device-width, initial-scale=1" />


Add this line under it:
Code:
<link rel="shortcut icon" type="image/x-icon" href="https://illiweb.com/fa/favicon/discussion.ico" />


And change there the href with the new icon.

Deprecated method:
You could add the CSS stylesheet in the Publications template directly.
First get the name of the CSS file used in your forum looking at the page source, in my example
Code:
/219-ltr.css

Then in the very start of both available Publications templates (list_publications, view_publications) you can add something like this:
Code:
<link rel="stylesheet" href="/219-ltr.css" type="text/css" />
This allows pages customization using the default CSS stylesheet, but using this method there are many pages where this is still not available, so it makes it a bad option in my opinion.
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: [Tutorial] Customize the Publications page

Post by TonnyKamper on August 12th 2018, 1:10 am

Awesome @Wecoc Yes I'll try this one out for sure Smile
avatar
TonnyKamper
Forumember

Female Posts : 350
Reputation : 25
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

Back to top


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