The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Adding the FM notification bar in HTML

Go down

Solved Adding the FM notification bar in HTML

Post by Guest on December 9th 2014, 10:19 pm

Hey! I've just finished adding AWC to HTML but I want to have the notification bar added at the top of the page so that when PM's come in people will get to see a notification. Is that possible?

Here's the HTML code I'm using:


Code:
<STYLE TYPE="text/css">
<!--
body {
    background-image: url('http://i39.servimg.com/u/f39/19/05/73/25/sorryc11.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
-->
</STYLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rsc/85/frm/lang/nl.js" type="text/javascript"></script><script src="/37907.js" type="text/javascript"></script><style>
#avacweb_chat iframe{width:100%; Height:100%}
 
</style>
<div style="width: 100%; height: 100%;" id="chatholder">
</div>

Forum: http://fcnl.actieforum.com/
Chat: http://fcnl.actieforum.com/h1-friendcodes-chatbox (members only)

Guest
Guest


Back to top Go down

Solved Re: Adding the FM notification bar in HTML

Post by Guest on December 11th 2014, 12:27 pm

bump

Guest
Guest


Back to top Go down

Solved Re: Adding the FM notification bar in HTML

Post by Ange Tuteur on December 11th 2014, 8:20 pm

Hello Samanatha,

Add this to the bottom of your document body :
Code:
<!-- START init_fa_toolbar -->
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/toolbar/FAToolbar.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/json/json2.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/printf/printf.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/notif/FA.js"></script>
<iframe id="fa_data" src="/" style="display:none"></iframe>
<div id="fa_style" style="display:none;"></div>
<script type="text/javascript">var _userdata = new Object(), _lang = new Object(), _board = new Object(), fa_data = document.getElementById('fa_data');
fa_data.onload = function() {
  var fa = fa_data.contentWindow, fa_style = fa.document.getElementsByTagName('STYLE');
      
  for (var i = 0; i<fa_style.length; i++) if (/#fa_toolbar/.test(fa_style[i].innerHTML)) document.getElementById('fa_style').appendChild(fa_style[i]);
  for (var a in fa._userdata) _userdata[a] = fa._userdata[a];
  for (var b in fa._lang) _lang[b] = fa._lang[b];
  for (var c in fa._board) _board[c] = fa._board[c];
      
  $(document).ready(Toolbar.init)
}</script>
<!-- END init_fa_toolbar -->
avatar
Ange Tuteur
Forumaster

Male Posts : 13193
Reputation : 2904
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Adding the FM notification bar in HTML

Post by Guest on December 11th 2014, 9:43 pm

@Ange Tuteur wrote:Hello Samanatha,

Add this to the bottom of your document body :
Code:
<!-- START init_fa_toolbar -->
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/toolbar/FAToolbar.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/json/json2.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/printf/printf.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js"></script>
<script type="text/javascript" src="http://illiweb.com/rsc/85/frm/jquery/notif/FA.js"></script>
<iframe id="fa_data" src="/" style="display:none"></iframe>
<div id="fa_style" style="display:none;"></div>
<script type="text/javascript">var _userdata = new Object(), _lang = new Object(), _board = new Object(), fa_data = document.getElementById('fa_data');
fa_data.onload = function() {
  var fa = fa_data.contentWindow, fa_style = fa.document.getElementsByTagName('STYLE');
      
  for (var i = 0; i<fa_style.length; i++) if (/#fa_toolbar/.test(fa_style[i].innerHTML)) document.getElementById('fa_style').appendChild(fa_style[i]);
  for (var a in fa._userdata) _userdata[a] = fa._userdata[a];
  for (var b in fa._lang) _lang[b] = fa._lang[b];
  for (var c in fa._board) _board[c] = fa._board[c];
      
  $(document).ready(Toolbar.init)
}</script>
<!-- END init_fa_toolbar -->

Hi Ange!

Works great, except the style I have in CSS is not copied in FireFox (looks like it partially did in IE). I've got the following CSS codes for the toolbar on my site:


Code:
/**** FA TOOLBAR -------------------- ****/
#fa_toolbar {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_toolbar span {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_toolbar a {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_right {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_mail {display: none!important}
/**** END FA TOOLBAR -------------------- ****/



Could you please add it to the HTML you just gave me?

Guest
Guest


Back to top Go down

Solved Re: Adding the FM notification bar in HTML

Post by Ange Tuteur on December 11th 2014, 10:40 pm

You can add it in an inline stylesheet :
Code:
<style type="text/css">
/**** FA TOOLBAR -------------------- ****/
#fa_toolbar {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_toolbar span {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_toolbar a {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_right {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_mail {display: none!important}
/**** END FA TOOLBAR -------------------- ****/
</style>

or if you know the link to your external stylesheet in the AP, you can use that also.
avatar
Ange Tuteur
Forumaster

Male Posts : 13193
Reputation : 2904
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Adding the FM notification bar in HTML

Post by Guest on December 11th 2014, 10:49 pm

@Ange Tuteur wrote:You can add it in an inline stylesheet :
Code:
<style type="text/css">
/**** FA TOOLBAR -------------------- ****/
#fa_toolbar {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_toolbar span {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_toolbar a {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_right {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_mail {display: none!important}
/**** END FA TOOLBAR -------------------- ****/
</style>

or if you know the link to your external stylesheet in the AP, you can use that also.

Thanks. I see now what's an 'inline stylesheet'. So I just added it to the same HTML page and it's way too big, but I can change it. I'm gonna play a little bit around with it to figure out the right settings. Thanks!

How do I find the external stylesheet link in the AP by the way? Is that the link to the regular CSS?

Guest
Guest


Back to top Go down

Solved Re: Adding the FM notification bar in HTML

Post by Ange Tuteur on December 12th 2014, 8:05 am

Add this to your HTML page :
Code:
<link rel="stylesheet" type="text/css" href="/css.forum"/>

It should refer to your forum stylesheet.
avatar
Ange Tuteur
Forumaster

Male Posts : 13193
Reputation : 2904
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Adding the FM notification bar in HTML

Post by Guest on December 12th 2014, 8:07 am

@Ange Tuteur wrote:Add this to your HTML page :
Code:
<link rel="stylesheet" type="text/css" href="/css.forum"/>

It should refer to your forum stylesheet.

Thanks Ange! Then I know for the next time. This topic can be maked solved and archived. Smile

Guest
Guest


Back to top Go down

Solved Re: Adding the FM notification bar in HTML

Post by Ange Tuteur on December 12th 2014, 8:14 am

You're welcome ^^

Topic archived
avatar
Ange Tuteur
Forumaster

Male Posts : 13193
Reputation : 2904
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


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