![[Tutorial] Customize the Publications page Hitskin_logo](https://2img.net/i/fa/hitskin/hitskin_logo.png){kind=logo}
Hitskin.com
![[Tutorial] Customize the Publications page Empty](https://2img.net/i/empty.gif)
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! 
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.
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:
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
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
Change the
to the pathname of your HTML.
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](https://i.servimg.com/u/f86/14/49/87/10/publi10.png)
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.
All the CSS edits will go there. You don't have to change anything else on the code, only the CSS.
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
|
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](https://servimg.com/r/8614498710/publi10.png)
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" />
I'll try this one out for sure 
![[Tutorial] Customize the Publications page Slgray10](https://i.servimg.com/u/f28/11/40/02/06/slgray10.png)
![[Tutorial] Customize the Publications page Fb11](https://i.servimg.com/u/f21/18/21/41/30/fb11.png)
Facebook![[Tutorial] Customize the Publications page Tw10](https://i.servimg.com/u/f21/18/21/41/30/tw10.png)
Twitter![[Tutorial] Customize the Publications page Pi10](https://i.servimg.com/u/f21/18/21/41/30/pi10.png)
Pinterest![[Tutorial] Customize the Publications page Yt10](https://i.servimg.com/u/f21/18/21/41/30/yt10.png)
Youtube
