Mudanças entre as edições de "Pagina de teste"

De wiki.eliteSoft.com.br
Ir para: navegação, pesquisa
(.)
 
(286 revisões intermediárias por 5 usuários não estão sendo mostradas)
Linha 1: Linha 1:
 +
{| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #99CCFF" align="center"
 +
|- style="background-color:#FFFFFF"
 +
| [[arquivo:BarraAzul.png|8px]]
 +
| [[arquivo:informacoes.jpg|60px]]
 +
| ''Através desta tela é possível consultar os dados cadastrais de planos e serviços, financeiros e de atendimento''.
 +
|}
  
<!--------------------------------
 
  
2 - DESTAQUES
+
{| style="border: 1px solid #99CCFF;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;background-color:#f4faff" align="center"
---------------------------------->
+
|- style="background-color:#f4faff"
{| style="border-spacing:8px;margin:0px -8px"
+
| [[arquivo:BarraAzul.png|8px]]
|class="MainPageBG" style="width: 60%; border: 1px solid #cedff2; background-color: #ffffff; vertical-align: top; -moz-border-radius:10px" |
+
| [[arquivo:informacoes.jpg|60px]]  
{| width="100%" cellpadding="2" cellspacing="5" style="vertical-align:top; background-color:#ffffff; -moz-border-radius:10px"
+
| ''Através desta tela é possível consultar os dados cadastrais de planos e serviços, financeiros e de atendimento''.
<!--------------------------------
+
|}  
2.1 Artigo em destaque
 
---------------------------------->
 
! style="background-color: #cedff2; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 100%; border: 1px solid #B1CDEB; text-align: left;  padding-left: 7px;   -moz-border-radius:10px"  | <div style="float:right;">[[Ficheiro:Wbar_blue.jpg|link=|alt=]]</div><div style="float:left;">[[Ficheiro:Star Ouro 8bits.png|link=Predefinição:Em destaque|Predefinição:Em destaque]] [[Wikipedia:Artigos destacados|Artigo em destaque]]</div>
 
|-
 
| style="; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%" | <div id="mp-tfa">{{em destaque}}</div>
 
|-
 
<!--------------------------------
 
2.2 Anexo em destaque
 
---------------------------------->
 
! style="background-color: #cedff2; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 100%; border: 1px solid #B1CDEB; text-align: left;  padding-left: 7px;  -moz-border-radius:10px" | <div style="float:right;">[[Ficheiro:Wbar_blue.jpg|link=|alt=]]</div><div style="float:left;">[[Ficheiro:Star Ouro 2 8bits.png|link=Predefinição:Anexo em destaque|Predefinição:Anexo em destaque]] [[Wikipedia:Anexos destacados|Anexo em destaque]]</div>
 
|-
 
| style="; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%" | {{Anexo em destaque}}
 
|-
 
<!--------------------------------
 
Neste dia em....
 
---------------------------------->
 
! style="background-color: #DCF4CC; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 100%; border: 1px solid #9EE072; text-align: left; padding-left: 7px;  -moz-border-radius:10px"  | <div style="float:right;">[[Ficheiro:wbar_green2.jpg|link=|alt=]]</div><div style="float:left;">[[Ficheiro:Nuvola apps date.png|20px|link=Wikipedia:Efemérides/{{CURRENTDAY}} de {{CURRENTMONTHNAME}}|Wikipedia:Efemérides/{{CURRENTDAY}} de {{CURRENTMONTHNAME}}]] [[Wikipedia:Efemérides da Página Principal|Neste dia...]]</div>
 
|-
 
| style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%" |
 
<div id="mp-otd">{{Wikipedia:Efemérides/{{CURRENTDAY}} de {{CURRENTMONTHNAME}}}}</div>
 
|-
 
|-
 
  
<!--------------------------------
 
Sabia que
 
---------------------------------->
 
! style="background-color: #F0F3CD; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 100%; border: 1px solid #DDDDA4; text-align: left;  padding-left: 7px;  -moz-border-radius:10px"  | <div style="float:right;">[[Ficheiro:wbar_green3.jpg|link=|alt=]]</div><div style="float:left;">[[Ficheiro:Nuvola apps filetypes.svg|22px|link=Predefinição:Sabia que|Predefinição:Sabia que]] [[Wikipedia:Sabia que|Sabia que...]]</div>
 
|-
 
| style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%" |
 
{{Sabia que}}
 
  
<div style="float:right; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%; padding:0 .5em 0 2em">'''[[Wikipedia:Sabia que.../Arquivo|Arquivo]]'''-'''[[Wikipedia:Sabia_que/Antigos_mais_curiosos|Mais interessantes]]'''</div>
+
{| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #DDC12B" align="center"
 +
|- style="background-color:#FFFFFF"
 +
| [[arquivo:BarraAmarela.png|6px]]
 +
| [[Arquivo:Lampada.png|40px]]
 +
| ''Através desta tela é possível exibir notas importantes''.
 
|}
 
|}
<!--------------------------------
 
Coluna da direita
 
---------------------------------->
 
|class="MainPageBG" style="width:40%;border:1px solid #cedff2; background-color:#ffffff; vertical-align:top; -moz-border-radius:10px"|
 
{| width="100%" cellpadding="2" cellspacing="3" style="vertical-align: top; background-color:#ffffff; -moz-border-radius:10px;"
 
  
|-
+
 
<!--------------------------------
+
{| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #F27A13" align="center"
Eventos Recentes
+
|- style="background-color:#FFFFFF"
---------------------------------->
+
| [[arquivo:BarraLaranja.png|6px]]
! style="background-color: #CEF2E8; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; border: 1px solid #8BE0C9; text-align: left; padding-left: 7px; -moz-border-radius:10px"  | <div style="float:right;">[[Ficheiro:wbar_green1.jpg|link=|alt=]]</div><div style="float:left;">[[Ficheiro:Pp clock 8bits.png|link=Predefinição:Eventos atuais|Predefinição:Eventos atuais]] [[Portal:Eventos atuais|Eventos recentes]]</div>
+
| [[Arquivo:Cadeado.png|40px]]
|-
+
| '' Através desta tela é possível informar telas bloqueadas''.
| style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%" | <div id="mp-dyk">{{Eventos atuais}}</div>
 
----
 
<div style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 80%; text-align: center">[[Ficheiro:Wikinews-logo.png|25px|link=|alt=]] Veja mais no [[n:Página principal|Wikinotícias]]</div>
 
|-
 
<!--------------------------------
 
Imagem em destaque
 
---------------------------------->
 
! style="background-color: #F7CADA; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 100%; border: 1px solid #EF98B7; text-align: left;  padding-left: 7px;  -moz-border-radius:10px" | <div style="float:right;">[[Ficheiro:Wbar_pink.jpg|link=|alt=]]</div><div style="float:left;">[[Ficheiro:Nuvola filesystems camera 8bits.png|22px|link=Wikipedia:Imagem em destaque/{{CURRENTDAY}} de {{CURRENTMONTHNAME}} de {{CURRENTYEAR}}|Wikipedia:Imagem em destaque/{{CURRENTDAY}} de {{CURRENTMONTHNAME}} de {{CURRENTYEAR}}]] [[Wikipedia:Imagem em destaque|Imagem do dia]]</div>
 
|-
 
| style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%" |
 
{{Wikipedia:Imagem em destaque/{{CURRENTDAY}} de {{CURRENTMONTHNAME}} de {{CURRENTYEAR}}}}<div style="float:right; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 80%; padding:0 .5em 0 2em">
 
</div>
 
|-
 
<!--------------------------------
 
Correlatos
 
---------------------------------->
 
! style="background-color: #F7CADA; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 100%; border: 1px solid #EF98B7; text-align: left; padding-left: 7px;  -moz-border-radius:10px"  | <div style="float:right;">[[Ficheiro:Wbar_pink.jpg|link=|alt=]]</div><div style="float:left;">[[Ficheiro:Wikimedia logo family complete.svg|20px]] Projetos irmãos</div>
 
|-
 
| style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 80%" |
 
|----
 
| style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%" |A Wikipédia existe graças à [[Wikimedia Foundation]], entidade sem fins lucrativos que gere projetos em diversos idiomas e de [[Free content|conteúdo livre]]:
 
{{Projetos correlatos}}
 
<br />
 
{{Comunidade wikipédia}}
 
 
|}
 
|}
 +
 +
 +
{| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #A5030E" align="center"
 +
|- style="background-color:#FFFFFF"
 +
| [[arquivo:BarraVermelha.png|6px]]
 +
| [[Arquivo:AlertaVermelha.png|40px]]
 +
| ''  Através desta tela é possível exibir alertas na página''.
 
|}
 
|}
  
<!--------------------------------
 
ÍNDICE F7F7FF
 
---------------------------------->
 
{| width="100%" style="border-spacing:0px;"
 
|class="MainPageBG" style="width: 100%; border:1px solid #778FE1; background-color:#CCD5F4; vertical-align:top;  -moz-border-radius:10px" |
 
{| width="100%" cellpadding="2" cellspacing="3" style="vertical-align:top; background-color: #CCD5F4;  -moz-border-radius:10px"
 
| style="background-color: #cedff2; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 100%; border: 1px solid #778FE1; text-align: center; padding-left: 1px; -moz-border-radius:10px" |
 
[[Ficheiro:Indice.png|link=|alt=]]
 
|
 
{| width="100%" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%; line-height: 110%; background-color: #FFFFFF;"
 
|-
 
| width="45%" style="padding: 0 2px 0 0;"|
 
  
{{Enciclopédia seções}}
 
  
|-
+
{| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #6BB25A" align="center"
|}
+
|- style="background-color:#FFFFFF"
|-
+
| [[arquivo:BarraVerde.png|6px]]
|}
+
| [[Arquivo:Regras.png|60px]]
 +
| ''Através desta tela é possível exibir regras na página''.
 
|}
 
|}
  
<div style=" font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 90%; margin: 0; padding: 7px 0px 0px 0px; -moz-border-radius:10px">
 
  
<!-----------Línguas ------------>
 
{{Línguas wikipédia}}
 
  
 +
<html>
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 +
<style type="text/css">
 +
#bubble_tooltip{
 +
width:147px;
 +
position:absolute;
 +
display:none;
 +
}
 +
#bubble_tooltip .bubble_top{
 +
background-image: url("http://wiki.elitesoft.com.br/images/8/85/Bubble_top.gif");
 +
background-repeat:no-repeat;
 +
height:16px;
 +
}
 +
#bubble_tooltip .bubble_middle{
 +
background-image: url("http://wiki.elitesoft.com.br/images/7/7f/Bubble_middle.gif");
 +
background-repeat:repeat-y;
 +
background-position:bottom left;
 +
padding: 18px 18px 68px 18px;
 +
top: -150px;
 +
left: 10px;
 +
 +
 +
}
 +
#bubble_tooltip .bubble_middle span{
 +
position:relative;
 +
top:-8px;
 +
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
 +
font-size:11px;
 +
}
 +
#bubble_tooltip .bubble_bottom{
 +
background-image: url("http://wiki.elitesoft.com.br/images/3/33/Bubble_bottom.gif");
 +
background-repeat:no-repeat;
 +
background-repeat:no-repeat;
 +
height:44px;
 +
position:relative;
 +
top:-6px;
 +
}
 +
</style>
 +
<link rel="stylesheet" href="css/tooltip.css" media="screen">
 +
<script type="text/javascript">
 +
function showToolTip(e,text){
 +
if(document.all)e = event;
 +
 +
var obj = document.getElementById('bubble_tooltip');
 +
var obj2 = document.getElementById('bubble_tooltip_content');
 +
obj2.innerHTML = text;
 +
obj.style.display = 'block';
 +
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
 +
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
 +
/*var leftPos = e.clientX - 100;*/
 +
  var leftPos = 30
 +
if(leftPos<0)leftPos = 0;
 +
obj.style.left = leftPos + 'px';
 +
obj.style.top = 70 + 'px'
 +
/*obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';*/
 +
}
 +
 +
function hideToolTip()
 +
{
 +
document.getElementById('bubble_tooltip').style.display = 'none';
 +
 +
}
 +
</script>
 +
 +
</head>
 +
<body>
 +
 +
<div id="bubble_tooltip">
 +
<div class="bubble_top"><span></span></div>
 +
<div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
 +
<div class="bubble_bottom"></div>
 
</div>
 
</div>
  
<!-- [[Categoria:Conteúdo| ]] --><!-- Por se diferenciar do restante do domínio principal, desnecessário. -->
+
<h1>Dica em formato de balão</h1>
 
+
<p>Esta demonstração mostra como trabalhar com dicas em formato de balão semelhantes ao do Windows.</p>
<!---------- InterWikis ---------->
+
<p><a href="#" onmouseover="showToolTip(event,'Este é apenas\ um exemplo!');return false" onmouseout="hideToolTip()">Passe o mouse aqui.</a> para ver a ação.</p>
{{PáginaPrincipalnterwikis}}
 
  
Página de Teste
+
<img src="http://wiki.elitesoft.com.br/images/4/4f/Smile1.png"  onmouseout="this.src='http://wiki.elitesoft.com.br/images/4/4f/Smile1.png';hideToolTip()" onmouseover="this.src='http://wiki.elitesoft.com.br/images/3/33/Smile2.png';showToolTip(event,'Este é apenas\ um exemplo!');return false"

Edição atual tal como às 15h54min de 9 de fevereiro de 2023

BarraAzul.png Informacoes.jpg Através desta tela é possível consultar os dados cadastrais de planos e serviços, financeiros e de atendimento.


BarraAzul.png Informacoes.jpg Através desta tela é possível consultar os dados cadastrais de planos e serviços, financeiros e de atendimento.


BarraAmarela.png Lampada.png Através desta tela é possível exibir notas importantes.


BarraLaranja.png Cadeado.png Através desta tela é possível informar telas bloqueadas.


BarraVermelha.png AlertaVermelha.png Através desta tela é possível exibir alertas na página.


BarraVerde.png Regras.png Através desta tela é possível exibir regras na página.


<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">

  1. bubble_tooltip{

width:147px; position:absolute; display:none; }

  1. bubble_tooltip .bubble_top{

background-image: url("http://wiki.elitesoft.com.br/images/8/85/Bubble_top.gif"); background-repeat:no-repeat; height:16px; }

  1. bubble_tooltip .bubble_middle{

background-image: url("http://wiki.elitesoft.com.br/images/7/7f/Bubble_middle.gif"); background-repeat:repeat-y; background-position:bottom left; padding: 18px 18px 68px 18px; top: -150px; left: 10px;


}

  1. bubble_tooltip .bubble_middle span{

position:relative; top:-8px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size:11px; }

  1. bubble_tooltip .bubble_bottom{

background-image: url("http://wiki.elitesoft.com.br/images/3/33/Bubble_bottom.gif"); background-repeat:no-repeat; background-repeat:no-repeat; height:44px; position:relative; top:-6px; } </style> <link rel="stylesheet" href="css/tooltip.css" media="screen"> <script type="text/javascript"> function showToolTip(e,text){ if(document.all)e = event;

var obj = document.getElementById('bubble_tooltip'); var obj2 = document.getElementById('bubble_tooltip_content'); obj2.innerHTML = text; obj.style.display = 'block'; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; /*var leftPos = e.clientX - 100;*/ var leftPos = 30 if(leftPos<0)leftPos = 0; obj.style.left = leftPos + 'px'; obj.style.top = 70 + 'px' /*obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';*/ }

function hideToolTip() { document.getElementById('bubble_tooltip').style.display = 'none';

} </script>

</head> <body>

Dica em formato de balão

Esta demonstração mostra como trabalhar com dicas em formato de balão semelhantes ao do Windows.

<a href="#" onmouseover="showToolTip(event,'Este é apenas\ um exemplo!');return false" onmouseout="hideToolTip()">Passe o mouse aqui.</a> para ver a ação.

<img src="http://wiki.elitesoft.com.br/images/4/4f/Smile1.png" onmouseout="this.src='http://wiki.elitesoft.com.br/images/4/4f/Smile1.png';hideToolTip()" onmouseover="this.src='http://wiki.elitesoft.com.br/images/3/33/Smile2.png';showToolTip(event,'Este é apenas\ um exemplo!');return false"