Suporte phpBB

Suporte com ética e seriedade
https://suportephpbb.com.br/

Personalizando o jGrowl Popup

https://suportephpbb.com.br/viewtopic.php?t=46627

Página 1 de 2

Personalizando o jGrowl Popup

Enviado: 12 Abr 2012, 19:17
por Holmes
Qual a URL do seu fórum: http://chakra-linux.com.br/forum/portal.php
Tipo de Hospedagem: Free
Qual a versão do phpBB: phpBB 3.0.10
É um novo ou uma conversão: Instalação Limpa
Usuário de teste: Usuário: Senha:
Estilos instalados: Style we_clearblue
Modificações instaladas: "quem esteve aqui?"; "board3 portal"; "Resolvido"; "WMP"; "Posting Template"; "Legend Repositioning"; "ACP Announcement Centre"; "Share One"; "jGrowl Popup"
Qual seu nivel de experiência:: Iniciante
Quando começou o problema: uma orientação
Descreva seu problema: oi pessoal, instalei o jGrowl Popup e gostaria de saber: Como deixar um popup jGrowl para visitantes e um para usuários logados? ou seja, assim:

1) para os visitantes:

Imagem

2) para os que fazem login:

Imagem

é possível, como eu poderia fazer isto?

abaixo posto o meu arquivo overrall_heard.html.

Código: Selecionar todos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>
	<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
	<meta http-equiv="content-style-type" content="text/css" />
	<meta http-equiv="content-language" content="{S_USER_LANG}" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="resource-type" content="document" />
	<meta name="distribution" content="global" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	{META}
	
	<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>
	
	<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
	<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
	    <style type="text/css">

    div.jGrowl {
       padding:          1em;
       z-index:          9999;
    }

    /** Special IE6 Style Positioning **/
    div.ie6 {
       position:          absolute;
    }

    div.ie6.top-right {
       right:             auto;
       bottom:          auto;
       left:             expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
         top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.top-left {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.bottom-right {
       left:             expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.bottom-left {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.center {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
       width:             100%;
    }

    /** Normal Style Positions **/
    body > div.jGrowl {
       position:         fixed;
    }

    body > div.jGrowl.top-left {
       left:             0px;
       top:             0px;
    }

    body > div.jGrowl.top-right {
       right:             25%;
	   left:              37%;
       top:               2px;
    }

    body > div.jGrowl.bottom-left {
       left:             0px;
       bottom:            0px;
    }

    body > div.jGrowl.bottom-right {
       right:             0px;
       bottom:          0px;
    }

    body > div.jGrowl.center {
       top:             0px;
       width:             50%;
       left:             25%;
    }

    /** Cross Browser Styling **/
    div.center div.jGrowl-notification, div.center div.jGrowl-closer {
       margin-left:       auto;
       margin-right:       auto;
    }

    div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
       background-color:       #ECD5D8;
       color:                #000000;
       opacity:             .85;
       filter:             alpha(opacity = 85);
       zoom:                1;
       width:                280px;
       padding:             10px;
       margin-top:          130px;
       margin-bottom:          5px;
       font-family:          Tahoma, Arial, Helvetica, sans-serif;
       font-size:             13px;
       text-align:          justify;
       display:             none;
       -moz-border-radius:    5px;
       -webkit-border-radius:   5px;
    }

    div.jGrowl div.jGrowl-notification {
       min-height:          40px;
    }

    div.jGrowl div.jGrowl-notification div.header {
       font-weight:          bold;
       font-size:            10px;
    }

    div.jGrowl div.jGrowl-notification div.close {
       float:                right;
       font-weight:          bold;
       font-size:             12px;
       cursor:               default;
    }

    div.jGrowl div.jGrowl-closer {
       height:             15px;
       padding-top:          4px;
       padding-bottom:       4px;
       cursor:             default;
       font-size:            11px;
       font-weight:          bold;
       text-align:          center;
    }

    </style>
    <script type="text/javascript" src="{ROOTPATH}images/jgrowl/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="{ROOTPATH}images/jgrowl/jquery.ui.all.js"></script>
    <script type="text/javascript" src="{ROOTPATH}images/jgrowl/jquery.jgrowl.js"></script>
	<!-- IF S_CONTENT_DIRECTION eq 'rtl' --><link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" /><!-- ENDIF -->
	
	<!-- IF S_ENABLE_FEEDS -->
		<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
		<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
		<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
		<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
		<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
		<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
		<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
	<!-- ENDIF -->
	
	<!--
		phpBB style name: we_clearblue
		Based on style:   prosilver (this is the default phpBB3 style)
		Original author:  Tom Beddard (http://www.subBlue.com/)
		Modified by:      weeb (http://weeb.pl)

		NOTE: This page was generated by phpBB, the free open-source bulletin board package.
			  The phpBB Group is not responsible for the content of this page and forum. For more information
			  about phpBB please visit http://www.phpbb.com
	-->

	<script type="text/javascript">
	// <![CDATA[
		var jump_page = '{LA_JUMP_PAGE}:';
		var on_page = '{ON_PAGE}';
		var per_page = '{PER_PAGE}';
		var base_url = '{A_BASE_URL}';
		var style_cookie = 'phpBBstyle';
		var style_cookie_settings = '{A_COOKIE_SETTINGS}';
		var onload_functions = new Array();
		var onunload_functions = new Array();
	
		/**
		* Find a member
		*/
		function find_username(url)
		{
			popup(url, 760, 570, '_usersearch');
			return false;
		}
	
		/**
		* New function for handling multiple calls to window.onload and window.unload by pentapenguin
		*/
		window.onload = function()
		{
			for (var i = 0; i < onload_functions.length; i++)
			{
				eval(onload_functions[i]);
			}
		}
	
		window.onunload = function()
		{
			for (var i = 0; i < onunload_functions.length; i++)
			{
				eval(onunload_functions[i]);
			}
		}
	
	// ]]>
	</script>
	
	<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
	
<style>
#toTop {
   width:100px;
    border:1px solid #ccc;
    background:#1C3C57;
    text-align:center;
    padding:5px;
   position:fixed; /* this is the magic */
    bottom:10px; /* together with this to put the div at the bottom*/
    right:14px;
    cursor:pointer;
    display:none;
    color:#fdfdfd;
    font-family:verdana;
    font-size:11px;
}
</style> 
	
<script type="text/javascript">
$(function() {
   $(window).scroll(function() {
      if($(this).scrollTop() != 0) {
         $('#toTop').fadeIn();   
      } else {
         $('#toTop').fadeOut();
      }
   });
 
   $('#toTop').click(function() {
      $('body,html').animate({scrollTop:0},800);
   });   
});
</script>
<!-- Coloque esta chamada de renderização conforme necessário -->
<script type="text/javascript">
  window.___gcfg = {lang: 'pt-BR'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
	    <script type="text/javascript">

          // In case you don't have firebug...
          if (!window.console || !console.firebug) {
             var names = ["log", "debug", "info", "warn", "err0r", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
             window.console = {};
             for (var i = 0; i < names.length; ++i) window.console[names[i]] = function() {};
          }

          (function($){

             $(document).ready(function(){

                // This value can be true, false or a function to be used as a callback when the closer is clciked
                $.jGrowl.defaults.closer = function() {
                   console.log("Closing everything!", this);
                };
                
                // A callback for logging notifications.
                $.jGrowl.defaults.log = function(e,m,o) {
                   $('#logs').append("<div><strong>#" + $(e).attr('id') + "</strong> <em>" + (new Date()).getTime() + "</em>: " + m + " (" + o.theme + ")</div>")
                }            
                <!-- IF S_DISPLAY_PM and (S_USER_NEW_PRIVMSG or S_USER_UNREAD_PRIVMSG) -->
                $.jGrowl("You have {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD --> and {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->.", { header: 'Hello {S_USERNAME}', sticky: true, });
                <!-- ENDIF -->
                
                <!-- IF not S_IS_BOT and not S_USER_LOGGED_IN -->
                $.jGrowl("Bem-vindo ao {SITENAME}, se você for um usuário registrado faça o login, caso contrário, registre-se para participar das discussões.", { header: 'Olá', sticky: true, });
                <!-- ENDIF -->
             });
          })(jQuery);

          </script>
		  
	</head>
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrapper">

	<div id="header">
		<div id="account">
			<ul class="leftside">
				<li><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></li>
			</ul>
			
			<!-- IF not S_IS_BOT -->
				<ul class="rightside">
					<!-- IF S_USER_LOGGED_IN -->
						<!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}" title="{L_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
						<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a></li>
						<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}" title="{L_PRIVATE_MESSAGES}">{PRIVATE_MESSAGE_INFO}</a></li> <!-- ENDIF -->
						<!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}" title="{L_SEARCH_SELF}">{L_SEARCH_SELF}</a></li> <!-- ENDIF -->
					<!-- ELSE -->
						<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li><a href="{U_REGISTER}" title="{L_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<!-- ENDIF -->
					<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
					<!-- IF U_SEND_PASSWORD --><li><a href="{U_SEND_PASSWORD}" title="{L_FORGOT_PASS}">{L_FORGOT_PASS}</a></li><!-- ENDIF -->
				</ul>
			<!-- ENDIF -->
		</div>
		
		<div id="illustration">
			<div id="site-description">
			<p>{SITE_DESCRIPTION}</p>
			</div>
		</div>
		
		<!-- IF not $S_IN_PORTAL or S_DISPLAY_PHPBB_MENU -->
   <center>
      <table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td>
      <div id="main-navigation">
         <ul id="primary-navigation" class="leftside">
            <!-- IF U_PORTAL --><li><a href="{U_PORTAL}" title="Portal">{L_PORTAL}</a></li><!-- ENDIF -->
			<li><a href="{U_INDEX}" title="{L_INDEX}">{L_INDEX}</a></li>
            <li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
			<li><a href="http://www.chakra-linux.com.br/forum/viewtopic.php?f=9&t=9" title="Regras">Regras</a></li>
			<!-- IF not S_IS_BOT-->
               <!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li><!-- ENDIF -->
               <!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
               <!-- IF U_TEAM --><li><a href="{U_TEAM}" title="{L_THE_TEAM}">{L_THE_TEAM}</a></li> <!-- ENDIF -->
			   <li><a href="http://chakra-linux.org/" target="_blank" title="Chakra Project">Chakra Project</a></li>
			   <li><a href="http://www.chakra-linux.com.br/wiki/doku.php" target="_blank" title="Wiki">Wiki</a></li>
			   <!-- IF U_MCP --><li><a href="{U_MCP}" title="{L_MCP}">{L_MCP}</a></li><!-- ENDIF -->
               <!-- IF U_ACP --> <li><a href="{U_ACP}" title="{L_ACP}">{L_ACP}</a></li><!-- ENDIF -->
			<!-- ENDIF -->
         </ul>
         
         <!-- IF U_EMAIL_TOPIC or U_EMAIL_PM or U_PRINT_TOPIC or U_PRINT_PM -->
            <ul class="rightside linklist icons">
               <!-- IF U_EMAIL_TOPIC --><li><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
               <!-- IF U_EMAIL_PM --><li><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
               <!-- IF U_PRINT_TOPIC --><li><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
               <!-- IF U_PRINT_PM --><li><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
            </ul>
         <!-- ENDIF -->
      </div>
     <!-- ENDIF -->
      </td></tr></tbody>
      </table>
     </center>
   <!-- IF $S_IN_PORTAL and not S_DISPLAY_PHPBB_MENU -->
   <div id="main-navigation"></div>
   <!-- ENDIF -->
   </div>
	
	<div id="container">
	
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
			<div id="information" class="rules">
				<div class="inner"><span class="corners-top"><span></span></span>
				
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
				
				<span class="corners-bottom"><span></span></span></div>
			</div>
		<!-- ENDIF -->
		<!-- IF $S_IN_PORTAL -->
		<!-- INCLUDE announcement_centre.html -->
		<!-- ENDIF -->
obrigado pela ajuda!

vlw fwi, Holmes

Re: Personalizando o jGrowl Popup

Enviado: 12 Abr 2012, 23:14
por Holmes
robra, fuxando olha o que fiz

Imagem

o código que adaptei foi este

Código: Selecionar todos

<!-- IF S_USER_LOGGED_IN -->
                $.jGrowl("Agradeçemos por entrar no site", { header: 'Olá¡ {S_USERNAME}', sticky: true, });
                <!-- ENDIF -->
não sei se está certo?

vlw fwi, Holmes

Re: Personalizando o jGrowl Popup

Enviado: 13 Abr 2012, 00:02
por robra
Não mexa em nada, senão vou perder a referência de seu arquivo overal_header.html que você postou.

Abraço. Imagem

Re: Personalizando o jGrowl Popup

Enviado: 13 Abr 2012, 00:08
por Holmes
beleza robra, não vou mexer! obrigado...

vlw fwi, Holmes

Re: Personalizando o jGrowl Popup

Enviado: 13 Abr 2012, 01:12
por robra
Bem... são várias alterações e vou me basear no overall_header.html que você postou.
Preste atenção nos procedimentos:
1º) Vamos limpar um pouco o seu overall_header.html e jogar as definições do css para 2 arquivos, sendo um para visitantes(jgrowl_v.css) e o outro para usuários logados(jgrowl_v.css).
- Ache as as linhas...

Código: Selecionar todos

<style type="text/css">

    div.jGrowl {
       padding:          1em;
       z-index:          9999;
    }

    /** Special IE6 Style Positioning **/
    div.ie6 {
       position:          absolute;
    }

    div.ie6.top-right {
       right:             auto;
       bottom:          auto;
       left:             expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
         top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.top-left {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.bottom-right {
       left:             expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.bottom-left {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.center {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
       width:             100%;
    }

    /** Normal Style Positions **/
    body > div.jGrowl {
       position:         fixed;
    }

    body > div.jGrowl.top-left {
       left:             0px;
       top:             0px;
    }

    body > div.jGrowl.top-right {
       right:             25%;
      left:              37%;
       top:               2px;
    }

    body > div.jGrowl.bottom-left {
       left:             0px;
       bottom:            0px;
    }

    body > div.jGrowl.bottom-right {
       right:             0px;
       bottom:          0px;
    }

    body > div.jGrowl.center {
       top:             0px;
       width:             50%;
       left:             25%;
    }

    /** Cross Browser Styling **/
    div.center div.jGrowl-notification, div.center div.jGrowl-closer {
       margin-left:       auto;
       margin-right:       auto;
    }

    div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
       background-color:       #ECD5D8;
       color:                #000000;
       opacity:             .85;
       filter:             alpha(opacity = 85);
       zoom:                1;
       width:                280px;
       padding:             10px;
       margin-top:          130px;
       margin-bottom:          5px;
       font-family:          Tahoma, Arial, Helvetica, sans-serif;
       font-size:             13px;
       text-align:          justify;
       display:             none;
       -moz-border-radius:    5px;
       -webkit-border-radius:   5px;
    }

    div.jGrowl div.jGrowl-notification {
       min-height:          40px;
    }

    div.jGrowl div.jGrowl-notification div.header {
       font-weight:          bold;
       font-size:            10px;
    }

    div.jGrowl div.jGrowl-notification div.close {
       float:                right;
       font-weight:          bold;
       font-size:             12px;
       cursor:               default;
    }

    div.jGrowl div.jGrowl-closer {
       height:             15px;
       padding-top:          4px;
       padding-bottom:       4px;
       cursor:             default;
       font-size:            11px;
       font-weight:          bold;
       text-align:          center;
    }

    </style>
... e substitua por:

Código: Selecionar todos

<!-- IF not S_IS_BOT and not S_USER_LOGGED_IN -->
    <link rel="stylesheet" type="text/css" href="{ROOTPATH}images/jgrowl/jgrowl_v.css" />
	<!-- ENDIF -->
	<!-- IF S_USER_LOGGED_IN -->
    <link rel="stylesheet" type="text/css" href="{ROOTPATH}images/jgrowl/jgrowl_ul.css" />
	<!-- ENDIF -->
- Ache as linhas...

Código: Selecionar todos

<!-- IF S_DISPLAY_PM and (S_USER_NEW_PRIVMSG or S_USER_UNREAD_PRIVMSG) -->
                $.jGrowl("You have {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD --> and {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->.", { header: 'Hello {S_USERNAME}', sticky: true, });
                <!-- ENDIF -->
                
                <!-- IF not S_IS_BOT and not S_USER_LOGGED_IN -->
                $.jGrowl("Bem-vindo ao {SITENAME}, se você for um usuário registrado faça o login, caso contrário, registre-se para participar das discussões.", { header: 'Olá', sticky: true, });
                <!-- ENDIF -->
             });
          })(jQuery);
... e substitua por:

Código: Selecionar todos

<!-- IF S_DISPLAY_PM and (S_USER_NEW_PRIVMSG or S_USER_UNREAD_PRIVMSG) -->
                $.jGrowl("Você tem {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD --> e {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->.", { header: 'Olá {S_USERNAME}', sticky: true, });
                <!-- ENDIF -->
                
                <!-- IF not S_IS_BOT and not S_USER_LOGGED_IN -->
                $.jGrowl("Bem-vindo ao {SITENAME}, se você for um usuário registrado faça o login, caso contrário, registre-se para participar desta comunidade.", { header: 'Olá', sticky: true, });
                <!-- ENDIF -->
				
				<!-- IF S_USER_LOGGED_IN -->
                $.jGrowl("Agradeçemos por entrar no site", { header: 'Olá {S_USERNAME}', sticky: true, });
                <!-- ENDIF -->
             });
          })(jQuery);
2º) Vamos criar os 2 arquivos CSS:
- No Notepad++, crie 2 novos arquivos com a "linguagem CSS". Copie o conteúdo abaixo...

Código: Selecionar todos

	div.jGrowl {
       padding:          1em;
       z-index:          9999;
    }

    /** Special IE6 Style Positioning **/
    div.ie6 {
       position:          absolute;
    }

    div.ie6.top-right {
       right:             auto;
       bottom:          auto;
       left:             expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
         top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.top-left {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.bottom-right {
       left:             expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.bottom-left {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.center {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
       width:             100%;
    }

    /** Normal Style Positions **/
    body > div.jGrowl {
       position:         fixed;
    }

    body > div.jGrowl.top-left {
       left:             0px;
       top:             0px;
    }

    body > div.jGrowl.top-right {
       right:             25%;
	   left:              37%;
       top:               2px;
    }

    body > div.jGrowl.bottom-left {
       left:             0px;
       bottom:            0px;
    }

    body > div.jGrowl.bottom-right {
       right:             0px;
       bottom:          0px;
    }

    body > div.jGrowl.center {
       top:             0px;
       width:             50%;
       left:             25%;
    }

    /** Cross Browser Styling **/
    div.center div.jGrowl-notification, div.center div.jGrowl-closer {
       margin-left:       auto;
       margin-right:       auto;
    }

    div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
       background-color:       #ECD5D8;
       color:                #000000;
       opacity:             .85;
       filter:             alpha(opacity = 85);
       zoom:                1;
       width:                280px;
       padding:             10px;
       margin-top:          130px;
       margin-bottom:          5px;
       font-family:          Tahoma, Arial, Helvetica, sans-serif;
       font-size:             13px;
       text-align:          justify;
       display:             none;
       -moz-border-radius:    5px;
       -webkit-border-radius:   5px;
    }

    div.jGrowl div.jGrowl-notification {
       min-height:          40px;
	   border: 2px solid red;
    }

    div.jGrowl div.jGrowl-notification div.header {
       font-weight:          bold;
       font-size:            10px;
    }

    div.jGrowl div.jGrowl-notification div.close {
       float:                right;
       font-weight:          bold;
       font-size:             12px;
       cursor:               default;
    }

    div.jGrowl div.jGrowl-closer {
       height:             15px;
       padding-top:          4px;
       padding-bottom:       4px;
       cursor:             default;
       font-size:            11px;
       font-weight:          bold;
       text-align:          center;
    }
...cole no 1º novo arquivo, salve-o com o nome jgrowl_v.css e faça upload para a pasta /forum/images/jgrowl.

- Copie o conteúdo abaixo...

Código: Selecionar todos

	div.jGrowl {
       padding:          1em;
       z-index:          9999;
    }

    /** Special IE6 Style Positioning **/
    div.ie6 {
       position:          absolute;
    }

    div.ie6.top-right {
       right:             auto;
       bottom:          auto;
       left:             expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
         top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.top-left {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.bottom-right {
       left:             expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.bottom-left {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }

    div.ie6.center {
       left:             expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
       top:             expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
       width:             100%;
    }

    /** Normal Style Positions **/
    body > div.jGrowl {
       position:         fixed;
    }

    body > div.jGrowl.top-left {
       left:             0px;
       top:             0px;
    }

    body > div.jGrowl.top-right {
       right:             25%;
	   left:              37%;
       top:               2px;
    }

    body > div.jGrowl.bottom-left {
       left:             0px;
       bottom:            0px;
    }

    body > div.jGrowl.bottom-right {
       right:             0px;
       bottom:          0px;
    }

    body > div.jGrowl.center {
       top:             0px;
       width:             50%;
       left:             25%;
    }

    /** Cross Browser Styling **/
    div.center div.jGrowl-notification, div.center div.jGrowl-closer {
       margin-left:       auto;
       margin-right:       auto;
    }

    div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
       background-color:       #FFFFFF;
       color:                #000000;
       opacity:             .85;
       filter:             alpha(opacity = 85);
       zoom:                1;
       width:                280px;
       padding:             10px;
       margin-top:          130px;
       margin-bottom:          5px;
       font-family:          Tahoma, Arial, Helvetica, sans-serif;
       font-size:             13px;
       text-align:          justify;
       display:             none;
       -moz-border-radius:    5px;
       -webkit-border-radius:   5px;
    }

    div.jGrowl div.jGrowl-notification {
       min-height:          40px;
	   border: 2px solid blue;
    }

    div.jGrowl div.jGrowl-notification div.header {
       font-weight:          bold;
       font-size:            10px;
    }

    div.jGrowl div.jGrowl-notification div.close {
       float:                right;
       font-weight:          bold;
       font-size:             12px;
       cursor:               default;
    }

    div.jGrowl div.jGrowl-closer {
       height:             15px;
       padding-top:          4px;
       padding-bottom:       4px;
       cursor:             default;
       font-size:            11px;
       font-weight:          bold;
       text-align:          center;
    }
...cole no 2º novo arquivo, salve-o com o nome jgrowl_ul.css e faça upload para a pasta /forum/images/jgrowl.

3º) Faça o download do arquivo compactado abaixo, descompacte-o e depois faça upload do arquivo botaofechar.gif para a pasta /forum/images/jgrowl:
botaofechar.zip
4º) Abra o arquivo jquery.jgrowl.js no Notepad++ ache as linhas...

Código: Selecionar todos

((o.group != undefined && o.group != '') ? ' ' + o.group : '') + '">' +
				'<div class="jGrowl-close">' + o.closeTemplate + '</div>' +
				'<div class="jGrowl-header">' + o.header + '</div>' +
... e substitua por:

Código: Selecionar todos

((o.group != undefined && o.group != '') ? ' ' + o.group : '') + '">' +
				'<div class="jGrowl-close" style="cursor: pointer;float: right;">' + '<img src="http://chakra-linux.com.br/forum/images/jgrowl/botaofechar.gif" width="16" height="16">' + '</div>' +
				'<br>' +
				'<div class="jGrowl-header">' + o.header + '</div>' +
Se você fizer tudo certo, vai ficar assim para visitante...
img000.jpg
... e assim para usuário logado:
img001.jpg
Tomara que dê tudo certo...Imagem

Abraço. Imagem

Re: Personalizando o jGrowl Popup

Enviado: 13 Abr 2012, 01:41
por Holmes
oi robra, acertei nessa. está funcionando. obrigado pela ajuda! todavia, o popup para logado sempre fica ativo, se fecho no botão ele volta; se estou no portal fecho e vou para o fórum ele volta!

vlw fwi, Holmes

Re: Personalizando o jGrowl Popup

Enviado: 13 Abr 2012, 01:52
por robra
Toda a vez que a página for carregada e junto com ela o overall_header.html, o popup vai aparecer, seja para visitantes ou para usuários logados.
Se você navegar como visitantes também verá que se você fechá-la, ao acessar um tópico ou um fórum o popup vai aparecer novamente.

Abraço. Imagem

Re: Personalizando o jGrowl Popup

Enviado: 13 Abr 2012, 01:56
por Holmes
entendi, mas para o logado não para o popup aparecer somente uma vez! é possível?

vlw fwi, Holmes

Re: Personalizando o jGrowl Popup

Enviado: 13 Abr 2012, 02:28
por robra
Aí tem de procurar no Google por "popup aparecer só uma vez" ou algo deste gênero para ver se tem alguma coisa a respeito e tentar aproveitar para a sua situação.
Uma outra opção é achar as linhas abaixo no overall_header.html

Código: Selecionar todos

<!-- IF S_USER_LOGGED_IN -->
        <link rel="stylesheet" type="text/css" href="{ROOTPATH}images/jgrowl/jgrowl_ul.css" />
       <!-- ENDIF -->
... e substituir a linha <!-- IF S_USER_LOGGED_IN --> por:
<!-- IF S_USER_LOGGED_IN and SCRIPT_NAME eq 'index' -->
Desta forma, o popup para usuários logados só vai aparecer na página inicial do Fórum. Se ele sair da página principal, o popup vai sumir sem a necessidade de fechá-lo. Se ele voltar para a página principal, o popup vai reaparecer.

Abraço. Imagem

Re: Personalizando o jGrowl Popup

Enviado: 13 Abr 2012, 10:01
por Holmes
oi robra, desse jeito ficou melhor, pois o outro modo estava aparecendo em todas as páginas. ficou muito bom. realmente esse jGrowl popup é muito interessante, pois tem um comunicado aos visitantes, aos usuários logados e avisos de mps. novamente obrigado pela grande ajuda que você vem dando o Chakra Brasil.

vlw fwi, Holmes
Todos os horários são UTC-03:00
Página 1 de 2

Powered by phpBB® Forum Software © phpBB Limited

Traduzido por: Suporte phpBB