Suporte phpBB

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

Ajuda com logotipo e barra de pesquisa

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

Página 2 de 3

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 05 Nov 2011, 12:16
por lascowski
deu erro robra...
erro.jpg

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 05 Nov 2011, 14:50
por robra
Eita... vou fazer umas alterações aqui e daqui a pouco eu posto as mudanças.

Abraço. Imagem

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 05 Nov 2011, 14:54
por lascowski
beleza, to no aguardo.;;

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 05 Nov 2011, 15:05
por lascowski
Robra, fiz as alterações do commom e do stylesheet e deixei a do overall header como estava anteriormente e cheguei na seguinte imagem.


erro.jpg

Agora eu quero centralizar o logo e deixar o botão da pesquisa ao lado do box de pesquisa.

Sei que to dando trabalho, mas ficaria estranho upar como esta no momento...

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 05 Nov 2011, 15:41
por lascowski
centralizar eu consegui, agora a box da pesquisa não tem como...

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 05 Nov 2011, 17:57
por robra
Bem... fiz algumas alterações conforme mostram as imagens abaixo. Não sei se será do seu gosto, mas nada que não possa ser mudado:
Imagem 1
img1.jpg
Imagem 2
img2.jpg
Vamos as alterações:
1- Logo centralizado, podendo ser visto pelas tonalidades diferentes do azul acima da barra de navegação.
2- Criei uma nova caixa de pesquisa porque toda a alteração feita na original mexia também nas demais caixa de texto, como a dos títulos do Tópicos e etc. Além disso, tirei o botão "Pesquisar" por falta de espaço na barra de navegação quando se está logado. Veja na imagem 1 que o Sair[admin] está bem colado à caixa de pesquisa. Ela é arredondada no cantos, com o mesmo fundo da barra de navegação e com a palavra "Pesquisar..." em branco. Ao clicar sobre ela, o ponteiro do mouse torna-se ponteiro de texto, o fundo fica branco e a palavra "Pesquisar..." desaparece. Como não tem o botão "Pesquisar", após digitar o texto tem-se que apertar a tecla ENTER.
3- O texto "A sua última visita foi em Sáb - 05/Nov/2011 - 12:37" que originalmente ficava acima da caixa de pesquisa, na mesma direção do logo, foi colocado abaixo da barra de navegação.
Caso queira alterar alguma coisa é só falar.
O overall_header.html está abaixo:

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="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>
<!-- 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: 1thank
   Based on style:   prosilver (this is the default phpBB3 style)
   Original author:  Tom Beddard ( http://www.subBlue.com/ )
   Modified by:        gokintudio ( http://www.gokinstudio.com/ )   
   
   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();

   <!-- IF S_USER_PM_POPUP -->
      if ({S_NEW_PM})
      {
         var url = '{UA_POPUP_PM}';
         window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
      }
   <!-- ENDIF -->

   /**
   * 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_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<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" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
   <link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->



<script type="text/javascript" src="{T_TEMPLATE_PATH}/editor.js"></script>


</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="bodybg">
   <div id="wrapper">
      <div id="shad-l">
         <div id="shad-r">
            <div id="header">
               <div id="head-l">
                  <div id="head-r">
                  <div align="center"><a href="{U_INDEX}" title="{L_INDEX}" id="logo"></a></div>
                  </div>
               </div>
            </div>
            <div id="toolbar">
               
      <div id="topmenu">

         <ul>
         <li><a  href="{U_INDEX}"><span>{L_INDEX}</span></a></li>
         <li><a  href="{U_PROFILE}"><span>{L_PROFILE}</span></a></li>
         <li><a  href="{U_SEARCH}"><span>{L_SEARCH}</span></a></li>
         <li><a  href="{U_FAQ}"><span>{L_FAQ}</span></a></li>
         <li><a  href="{U_MEMBERLIST}"><span>{L_MEMBERLIST}</span></a></li>
         <li><a  href="{U_REGISTER}"><span>{L_REGISTER}</span></a></li>
         <li><a  href="{U_LOGIN_LOGOUT}"><span>{L_LOGIN_LOGOUT}</span></a></li>
         <li><a  href="#"><span></span></a></li>

         <li><a  href="#"><span></span></a></li>
         <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<form action="{U_SEARCH}" method="post" id="search">
				<fieldset class="search">
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="box" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
				</fieldset>
			</form>
      <!-- ENDIF -->
         </ul>
      </div>
            </div>
		
<div id="bodyarea">
<br />
<div id="userarea" class="smalltext"><p class="{S_CONTENT_FLOW_END}<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
		</div>
		<div id="" class="smalltext">
		</div>
<br />
<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>
</div>
         <ul class="linklist navlinks">
                    <li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

        
                 <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>
        
                    <!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
                    <!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
                    <!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
                    <!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
                 </ul>

     
               <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
                 <ul class="linklist leftside">
                    <li class="icon-ucp">
                          <a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
                  <!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
               <!-- IF S_DISPLAY_SEARCH --> &bull;
               <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
               <!-- ENDIF -->

                       <!-- IF U_RESTORE_PERMISSIONS --> &bull;
                       <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
                       <!-- ENDIF -->
                    </li>
                 </ul>
                 <!-- ENDIF -->

                 <ul class="linklist rightside">

<li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH}">{L_SEARCH}</a></li>
                    <!-- IF not S_IS_BOT -->
                       <!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
                          <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
               <li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
                    <!-- ENDIF -->
                 </ul>

        
                 <span class="corners-bottom"><span></span></span></div>
        
      
        
           <a name="start_here"></a>
           <div id="page-body">
              
              <!-- 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 -->
</div>
Os arquivos theme/stylesheet.css e theme/common.css alterados estão no arquivo theme.zip anexado e precisam ser colados na pasta /theme substituindo os originais.
theme.zip
Para incluir o seu logo, abra o arquivo theme/stylesheet.css e ache as linhas:

Código: Selecionar todos

#logo {
    top: 0px;
    display: block;
    width: 820px;
    height: 120px;
    cursor: pointer;
    background: url("{T_THEME_PATH}/images/logo.gif") no-repeat;
} 
Altere a linha background: url("{T_THEME_PATH}/images/logo.gif") no-repeat; trocando logo.gif para o nome de seu logo.
Não esqueça de atualizar a Template, Temas e Sets de imagem deste estilo e também limpar o cache.
Espero ter ajudado.

Abraço. Imagem

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 06 Nov 2011, 12:55
por lascowski
|Só mais uma coisa robra, é a ultima prometo...
erro2.jpg

Que imagem é essa embaixo do forum que eu não consegui achar?

ja editei o body-bg.gif para uma imagem personalizada. toda a footer (L, R e BG) teoricamente deveria estar o background da imagem que eu coloquei no body-bg. mas não esta aparecendo.

Sabe dizer como faço pra deixar o fundo do forum aquela imagem por inteiro?

Muito grato.

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 06 Nov 2011, 15:14
por robra
Que imagem é essa embaixo do forum que eu não consegui achar?
...
Sabe dizer como faço pra deixar o fundo do forum aquela imagem por inteiro?
Realmente este seu fundo azul com desenho está esquisito porque o original é um degradê cinza escuro para o mais claro, de cima para baixo, como você mesmo pode ver na página do DEMO postada por você.
O fundo está definido no arquivo stylesheet.css nas linhas:

Código: Selecionar todos

body {
    background: #5f5e5e url("{T_THEME_PATH}/images/body-bg.gif") 0 0 repeat-x;
    padding: 30px 0 0 0;
    margin: 0;
} 
Pode ser que haja um outro arquivo em seu diretório do Fórum em localhost com o mesmo nome body-bg.gif, gerando a confusão.
Independente disto, abaixo seguem mais algumas opções de configuração:
1- Caso queira que o fundo da caixa de pesquisa seja sempre branco com as letras em preto.
- Abra o arquivo theme/stylesheet.css e ache as linhas:

Código: Selecionar todos

.search input.box {
   color: white;
   border-radius: 12px;
   box-shadow: rgba(0, 0, 0, 0.6) 0 2px 1px inset, rgba(255, 255, 255, 0.2) 0 1px 0;
   font-size: 13px;
   font-weight: bold;
   text-align: left;
   width: 140px;
   height: 17px;
   padding: 7px 0px 0px 25px;;
   background: url(styles/1thank/theme/images/bg_list.gif) 5px 5px no-repeat;
   background-image: url(styles/1thank/theme/images/icon_search.gif);
   margin-right: 14px;
   margin-top: 2px;
} 
Altere a linha color: white; para color: black; e a linha
background: url(styles/1thank/theme/images/bg_list.gif) 5px 5px no-repeat; para
background: #FFFFFF 5px 5px no-repeat;.

2- Caso queira a caixa de texto original com o botão.
- Abra o arquivo overall_header.html e substitua a linha...

Código: Selecionar todos

<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="box" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
...pelas linhas...

Código: Selecionar todos

<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" />
- Abra o arquivo theme/stylesheet.css, ache e exclua as linhas desde /*-- custom search box --*/ até a chave } do final da página.
>Substitua o valor 85% na linha input.inputbox { width: 85%; } por 59%.
>Ache as linhas...

Código: Selecionar todos

input.search {
    background-image: none;
    background-repeat: no-repeat;
    background-position: left 1px;
    padding-left: 17px;
} 
...e adicione antes da chave } final, em uma nova linha, a linha margin-top: 6px;.
>Ache as linhas:

Código: Selecionar todos

input.button1, input.button2 {
    font-size: 1em;
} 
Substitua por:

Código: Selecionar todos

input.button1, input.button2 {
    font-size: 14px;
    margin-top: 4px;
} 
3- Caso queira excluir a linha "A sua última visita foi em Sáb - 05/Nov/2011 - 12:37" que está abaixo da barra de navegação, no canto direito da página.
- Abra o arquivo overall_header.html, ache e exclua as linhas:

Código: Selecionar todos

<div id="userarea" class="smalltext"><p class="{S_CONTENT_FLOW_END}<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
		</div>
		<div id="" class="smalltext">
		</div>
Abraço. Imagem

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 07 Nov 2011, 13:59
por lascowski
robra escreveu:
Que imagem é essa embaixo do forum que eu não consegui achar?
...
Sabe dizer como faço pra deixar o fundo do forum aquela imagem por inteiro?
Realmente este seu fundo azul com desenho está esquisito porque o original é um degradê cinza escuro para o mais claro, de cima para baixo, como você mesmo pode ver na página do DEMO postada por você.
O fundo está definido no arquivo stylesheet.css nas linhas:

Código: Selecionar todos

body {
    background: #5f5e5e url("{T_THEME_PATH}/images/body-bg.gif") 0 0 repeat-x;
    padding: 30px 0 0 0;
    margin: 0;
} 
Pode ser que haja um outro arquivo em seu diretório do Fórum em localhost com o mesmo nome body-bg.gif, gerando a confusão.
Robra resolvi com sua dica, o body-bg.gif esta repetindo apenas na horizontal, e não na vertical - (é tal do repeat-x no codigo acima), tentei apenas repeat-y e funfou na vertical, apenas depois tirei o y, e deixei apenas o repeat e ficou do jeito que eu esperava.


Muito obrigado pela sua ajuda, mandou muito bem,
sou grato pela sua preocupação e sua prontidão em ajudar.


Valeu mesmo.

Re: Ajuda com logotipo e barra de pesquisa

Enviado: 09 Nov 2011, 03:26
por robra
Tá com problema novamente na caixa de pesquisa ?
Tente o seguinte:
1- Abra o arquivo stylesheet.css e ache as linhas:

Código: Selecionar todos

#topmenu ul {
padding: 0 0 0 5px;
margin: 0;
list-style-type: none;
width: auto;
float: left;
} 
Altere a linha width: auto; para width: 100%;.

2- Ache as linhas:

Código: Selecionar todos

fieldset {
border-width: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1.1em;
} 
Adicione antes da chave final }, em uma nova linha, as linhas:

Código: Selecionar todos

float: right;
margin-right: 10px; 
Aumentando o valor 10px na linha margin-right: 10px;, a caixa de pesquisa se moverá para a esquerda(centro da página), e diminuindo este valor a caixa de pesquisa se moverá para a direita(canto da página).

Abraço. Imagem
Todos os horários são UTC-03:00
Página 2 de 3

Powered by phpBB® Forum Software © phpBB Limited

Traduzido por: Suporte phpBB