Onde adicionar código CSS no template?

  • liclopes
  • Avatar de liclopes Autor do Tópico
  • Offline
  • JCB! Professional
  • JCB! Professional
Mais
14 anos 10 meses atrás #41625 por liclopes
liclopes created the topic: Onde adicionar código CSS no template?
Como se adiciona esse simples código no template (DIV como janela Popup)? o código CSS nos arquivos de CSS ou na index ou na parte de administração do template?
<html>
 <head>
  <title>Criar uma DIV igual a uma janela Popup</title>

  <style>
   #pop{display:none;position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-100px;padding:10px;width:300px;height:200px;border:1px solid #d0d0d0}
  </style>

 </head>

 <body>

  <div id="pop">
   <a href="#" onclick="document.getElementById('pop').style.display='none';">&#91;Fechar&#93;
   </a>
	Agora coloque o estilo dessa div.
  </div>

  <a href="#" onclick="document.getElementById('pop').style.display='block';">Mostra
  </a>

 </body>
<html>

Fonte: http://codigofonte.uol.com.br/codigo/js ... nela-popup

Please Entrar ou Registrar to join the conversation.


Mais
14 anos 10 meses atrás #41630 por angelo.galo
angelo.galo replied the topic: Re: Onde adicionar código CSS no template?
Abra o arquivo index.php da sua template e segue os passos abaixo.

Antes de </head> você coloca o código abaixo:
#pop{display:none;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-100px;
padding:10px;
width:300px;
height:200px;
border:1px solid #d0d0d0
}

e no final antes de </body> você coloca o código abaixo:
<div id="pop">
<a href="#" onclick="document.getElementById('pop').style.display='none';">&#91;Fechar&#93;</a>
<br />
	Agora coloque o estilo dessa div.

</div>

Qualquer coisa só falar. Se resolvido coloca no titulo [RESOLVIDO]. <!-- s;) --><img src="{SMILIES_PATH}/icon_e_wink.gif" alt=";)" title="Piscada" /><!-- s;) -->

Abraços <!-- s:P --><img src="{SMILIES_PATH}/icon_razz.gif" alt=":P" title="Legal" /><!-- s:P -->

[center:pq7gqxir]Tudo Sobre PC
Tecnologia em um só lugar!
[url:pq7gqxir]http://www.tudosobrepc.com.br[/url:pq7gqxir][/center:pq7gqxir]

Please Entrar ou Registrar to join the conversation.

Mais
14 anos 10 meses atrás #41674 por angelobaccili
angelobaccili replied the topic: Re: Onde adicionar código CSS no template?
Também tem um módulo de popup aqui no site mesmo, assim fica bem mais fácil.

o link é: http://www.joomlaclube.com.br/site/down ... Moo-Pop-Up

[color=#BF0000:240e68y1]Angelo Baccili[/color:240e68y1]

Please Entrar ou Registrar to join the conversation.

  • liclopes
  • Avatar de liclopes Autor do Tópico
  • Offline
  • JCB! Professional
  • JCB! Professional
Mais
14 anos 10 meses atrás #41758 por liclopes
liclopes replied the topic: Re: Onde adicionar código CSS no template?
Se eu for usar os efeitos/códigos em um artigo coloco também no index.php do template e o html no artigo?
Quero usar o Overlap Image Viewer
<script type="text/javascript" src="overlapviewer.js">
</script>
<script type="text/javascript" src="jquery-1.2.2.pack.js">
</script>

<style type="text/css">
 #overlappopup
 { /*don't change id name */
  position: absolute; /*don't change position property */
  z-index: 1000;
  background: white;
  border: 12px solid black;
  padding: 10px;
  left: 0;
  top: 0;
  visibility: hidden;
 }
</style>
<a href="pancakes.jpg" class="&#91;b&#93;jkimagelarge&#91;/b&#93;" title="pancakes.jpg">pancakes</a>
<div style="width: 150px; height: 150px; color: white; background: navy; padding: 5px;" class="&#91;b&#93;jkimagelarge&#91;/b&#93;" title="http://www.nasa.gov/images/content/168531main_image_feature_752_ys_4.jpg">Some DIV</div>
<img src="netherlands.gif" width="50" height="31" class="&#91;b&#93;jkimagelarge&#91;/b&#93;" title="netherlandslarge.gif" />

Fonte: http://javascriptkit.com/script/script2 ... ewer.shtml

Please Entrar ou Registrar to join the conversation.

Mais
14 anos 10 meses atrás #41796 por angelo.galo
angelo.galo replied the topic: Re: Onde adicionar código CSS no template?
Olá

Tente usar o mesmo procedimento que lhe expliquei em cima e segue as instruções do site javascriptkit.com. Depois posta o resultado.

Abraços <!-- s;) --><img src="{SMILIES_PATH}/icon_e_wink.gif" alt=";)" title="Piscada" /><!-- s;) -->

[center:pq7gqxir]Tudo Sobre PC
Tecnologia em um só lugar!
[url:pq7gqxir]http://www.tudosobrepc.com.br[/url:pq7gqxir][/center:pq7gqxir]

Please Entrar ou Registrar to join the conversation.