[Tutorial] Customize the Publications page

Go down

[Tutorial] Customize the Publications page Empty [Tutorial] Customize the Publications page

Post by Wecoc on Fri Aug 10, 2018 4: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.

[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:
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.
Wecoc
Wecoc
Forumember

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

Back to top Go down

[Tutorial] Customize the Publications page Empty Re: [Tutorial] Customize the Publications page

Post by TonnyKamper on Sun Aug 12, 2018 12:10 am

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

Female Posts : 544
Reputation : 45
Language : Dutch/English
Location : The Netherlands

http://www.nederlandheelt.nl/forum

Back to top Go down

[Tutorial] Customize the Publications page Empty Re: [Tutorial] Customize the Publications page

Post by kittykitty on Mon Jul 01, 2019 4: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!


Last edited by kittykitty on Tue Jul 02, 2019 5:34 am; edited 1 time in total
kittykitty
kittykitty
New Member

Posts : 10
Reputation : 1
Language : english

http://google.com

Back to top Go down

[Tutorial] Customize the Publications page Empty Re: [Tutorial] Customize the Publications page

Post by SLGray on Mon Jul 01, 2019 7:36 am

When you did the JavaScript, did you do all pages?


[Tutorial] Customize the Publications page Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 46565
Reputation : 3269
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

[Tutorial] Customize the Publications page Empty Re: [Tutorial] Customize the Publications page

Post by kittykitty on Mon Jul 01, 2019 8:37 pm

@SLGray wrote:When you did the JavaScript, did you do all pages?

yes mr SLGray, i belive i did: http://grabilla.com/09701-5879890c-6c0c-4d9a-b630-4265762bdec9.html
kittykitty
kittykitty
New Member

Posts : 10
Reputation : 1
Language : english

http://google.com

Back to top Go down

[Tutorial] Customize the Publications page Empty Re: [Tutorial] Customize the Publications page

Post by SLGray on Tue Jul 02, 2019 12:12 am

Are you sure that you have the correct link to the HTML page?


[Tutorial] Customize the Publications page Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 46565
Reputation : 3269
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

[Tutorial] Customize the Publications page Empty Re: [Tutorial] Customize the Publications page

Post by kittykitty on Tue Jul 02, 2019 5:32 am

@SLGray wrote:Are you sure that you have the correct link to the HTML page?
yup: http://grabilla.com/09702-459535a5-ad8e-4318-b70c-d8337d8d1fe0.html
kittykitty
kittykitty
New Member

Posts : 10
Reputation : 1
Language : english

http://google.com

Back to top Go down

[Tutorial] Customize the Publications page Empty Re: [Tutorial] Customize the Publications page

Post by ClarkkZ on Sun Jul 14, 2019 2:14 am

Thanks for sharing!
ClarkkZ
ClarkkZ
New Member

Posts : 1
Reputation : 1
Language : English

https://help.forumotion.com

Back to top Go down

Back to top


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