Página 1 de 1

[Dúvida] Como colocar imagem no roda pé do Fórum ?

Enviado: 13 Nov 2011, 14:28
por bet00
URL do Fórum: http://www.digitalclube.net

Bom Dia, Boa Tarde ou Boa Noite,

Mais uma vez concedo os parabéns aos serviços prestados até o momento. Estava visualizando o tema antigo do presente suporte e me deparei com algo que, até então, não tinha visualizado em outros temas.

Seria exatamente uma imagem no roda pé do tema junto com os créditos de cada pessoa. Podem verificar melhor no print que efetuei:
Print do Roda Pé Procurei nesse suporte na pesquisa e não encontrei nada semelhante, por acaso existe ? ou teria que efetuar uma solicitação de um tutorial para essa personalização ?

Re: [Dúvida] Como colocar imagem no roda pé do Fórum ?

Enviado: 13 Nov 2011, 15:24
por gssilva
O exemplo que você citou é uma div com um plano de fundo.
Caso você não consiga fazer o procedimento para adicionar um plano de fundo nessa div, basta avisar.

Re: [Dúvida] Como colocar imagem no roda pé do Fórum ?

Enviado: 13 Nov 2011, 16:36
por robra
1- Assista o vídeo postado no Tópico: viewtopic.php?f=149&t=45575
2- Aplique o mesmo procedimento de clicar com o botão direito do mouse sobre o "2007" que está no rodapé da página de seu Fórum, e escolha "inspecionar elemento".
3- Na tabela que abrir no final da página, no lado esquerdo você verá <div class="copyright"> e ao clicar sobre ele 1 vez com o botão esquerdo do mouse, do lado direito você vai ver:

Código: Selecionar todos

.copyright {
color: #555;
} 
Estas linhas você deve procurar em seus arquivos .css na pasta styles/seu_estilo/theme.
Ao achá-las, adicione após a linha color: #555;, em uma nova linha, o seguinte:
background-image: url("./images/SUA-IMAGEM-DO-RODAPÉ.jpg");.
4- Copie o conteúdo da <div class="copyright"> no final de seu arquivo index_body.html e remova-a por completo do arquivo.
5- Cole o conteúdo da <div class="copyright"> copiado anteriormente dentro da <div class="copyright"> em seu arquivo overall_footer.html.
6- Faça o upload dos arquivos HTML e CSS editados para as respectivas pastas, bem como o upload da sua imagem do rodapé para styles/seu_estilo/theme/images, atualize a Templates, Temas e Sets de imagem de seu estilo em uso pela aba ESTILOS do ACP, e limpe o cache do Fórum.

OBS: Utilize o programa Notepad++ para editar os arquivos. Se você não tem o Notepad++, baixe-o no link http://download.tuxfamily.org/notepadpl ... .1.bin.zip e após descompactar o arquivo, abra o executável notepad++.exe da pasta "unicode", porque esta versão lhe dá a opção de alterar o idioma do programa para o português.

Abraço. Imagem

Re: [Dúvida] Como colocar imagem no roda pé do Fórum ?

Enviado: 13 Nov 2011, 19:47
por bet00
Boa Noite,

Obrigado pelas orientações, porém, não ocorreu com sucesso o resultado final, pois a imagem não apareceu. Pesquisando no senhor google, me deparei com uma situação semelhante efetuada nesse link: Como inserir uma tabela no rodapé da página.

Inserindo o mesmo código em overall_footer.html, a imagem apareceu, porém, embaixo do que era planejado e ficou da seguinte maneira:
Print do teste sem sucesso O que pode ter ocorrido ?

Segue os dados do arquivo overall_footer.html

Código: Selecionar todos

	</div>

<div id="page-footer">

	<div class="navbar">
		<div class="inner"><span class="corners-top"><span></span></span>

		<ul class="linklist">
			<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{S_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
					<!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
				<!-- ENDIF -->
			<li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
		</ul>

		<span class="corners-bottom"><span></span></span></div>
	</div>

<div id="wrapfooter">	
	<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a>&reg; Forum Software &copy; phpBB Group
	<center>Elaborado pelos Fundadores <a href="http://www.digitalclube.net/memberlist.php?mode=viewprofile&u=2/">Beto</a> & <a href="http://www.digitalclube.net/memberlist.php?mode=viewprofile&u=54/">Fiuza</a>. Customizado por Karion</center>
	<center>&copy; <a href="http://www.digitalclube.net/">DigitalClube</a> - 2010 | 2012 :: Todos os Direitos Reservados :: Plataforma <a href="http://www.digitalclube.net/viewforum.php?f=5/">PC</a> & <a href="http://www.digitalclube.net/viewforum.php?f=9/">PS3</a></center>
	<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
</div>

</div>

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>


    <table style="width: 100%">
       <tr>
          <td>
          <img alt="" longdesc="rodape.png" src="images/rodape.png" width="1276" height="126"></td>
       </tr>
    </table>


</body>
</html>
Agradeço a atenção e os serviços prestados até o momento.

Re: [Dúvida] Como colocar imagem no roda pé do Fórum ?

Enviado: 13 Nov 2011, 20:15
por robra
O problema é que você está inserindo a imagem no HTML.
É só seguir exatamente os passos que postei em minha mensagem anterior que vai dar certo.
P.S.: Ao invés de colocar o arquivo rodape.png na pasta styles/seu_estilo/theme/images/, coloque-o na pasta raiz_do_forum/images.

Abraço. Imagem

Re: [Dúvida] Como colocar imagem no roda pé do Fórum ?

Enviado: 13 Nov 2011, 21:01
por bet00
Bom,

No arquivo colours.css, foi localizado o color: #555555; na pasta styles/seu_estilo/theme. Cujo o mesmo foi editado da seguinte forma:

Código: Selecionar todos

.copyright {
	color: #555555;
	background-image: url("./images/rodape.png");
}
No arquivo index_body.html, não foi localizado o arquivo <div class="copyright">, com isso, nada foi removido. Segue os seus códigos.

Código: Selecionar todos

<!-- INCLUDE overall_header.html -->

<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>
<!-- IF U_MCP --><p>{CURRENT_TIME} <br />[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ELSEIF S_USER_LOGGED_IN --><p>{CURRENT_TIME}</p><!-- ENDIF -->

<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
<ul class="linklist">
	<!-- IF S_DISPLAY_SEARCH -->
		<li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><!-- IF S_LOAD_UNREADS --> &bull; <a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a><!-- ENDIF --><!-- IF S_USER_LOGGED_IN --> &bull; <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><!-- ENDIF --> &bull; <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
	<!-- ENDIF -->
	<!-- IF not S_IS_BOT and U_MARK_FORUMS --><li class="rightside"><a href="{U_MARK_FORUMS}" accesskey="m">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
</ul>
<!-- ENDIF -->

<!-- INCLUDE forumlist_body.html -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
	<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
	<h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
		<fieldset class="quick-login">
			<label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
			<label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
			<!-- IF S_AUTOLOGIN_ENABLED -->
				| <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
			<!-- ENDIF -->
			<input type="submit" name="login" value="{L_LOGIN}" class="button2" />
			{S_LOGIN_REDIRECT}
		</fieldset>
	</form>
<!-- ENDIF -->

<!-- IF S_DISPLAY_ONLINE_LIST -->
	<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	<p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
	<h3>{L_BIRTHDAYS}</h3>
	<p><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->

<!-- IF NEWEST_USER -->
	<h3>{L_STATISTICS}</h3>
	<p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->

<!-- INCLUDE overall_footer.html -->
Onde que no arquivo overall_footer.html, foi adicionado o código <div class="copyright">, não sei se da forma correta. Confira:

Código: Selecionar todos

	</div>

<div id="page-footer">

	<div class="navbar">
		<div class="inner"><span class="corners-top"><span></span></span>

		<ul class="linklist">
			<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{S_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
					<!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
				<!-- ENDIF -->
			<li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
		</ul>

		<span class="corners-bottom"><span></span></span></div>
	</div>

<div id="wrapfooter">	
	<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a>&reg; Forum Software &copy; phpBB Group
	<center>Elaborado pelos Fundadores <a href="http://www.digitalclube.net/memberlist.php?mode=viewprofile&u=2/">Beto</a> & <a href="http://www.digitalclube.net/memberlist.php?mode=viewprofile&u=54/">Fiuza</a>. Customizado por Karion</center>
	<center>&copy; <a href="http://www.digitalclube.net/">DigitalClube</a> - 2010 | 2012 :: Todos os Direitos Reservados :: Plataforma <a href="http://www.digitalclube.net/viewforum.php?f=5/">PC</a> & <a href="http://www.digitalclube.net/viewforum.php?f=9/">PS3</a></center>
	<div class="copyright">
	<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
</div>

</div>

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>


    <table style="width: 100%">
       <tr>
          <td>
          <img alt="" longdesc="rodape.png" src="images/rodape.png" width="1276" height="126"></td>
       </tr>
    </table>


</body>
</html>
Onde que no resultado final, não apareceu a imagem. Peço desculpas pelo ocorrido, mas são minhas primeiras edições com o phpbb e é normal tal dificuldade ao meu ver.

Re: [Dúvida] Como colocar imagem no roda pé do Fórum ?

Enviado: 13 Nov 2011, 22:47
por robra
Encontrei o seu estilo, que é o Proformell, e o baixei para pegar os arquivos originais.
Este estilo tem 2(duas) referências ao .copyright {, 1 sendo no colours.css e a outra no common.css.
Além disso, como estamos lidando com a página do Portal, realmente o <div class="copyright"> que pensei estar no index_body.html, que é do Fórum, está no \styles\proformell\template\portal\portal_body.html, na penúltima linha do arquivo. Me enganei quanto a esta informação e me desculpe por isso.
O problema é que ao incluir uma imagem de fundo(background-image) na classe .copyright {, esta imagem além de pegar todo o rodapé(footer) também pega a linha acima da barra de navegação do rodapé, onde está escrito:
"board3 Portal - based on phpBB3 Portal Traduzido para português brasileiro por phpBB Portugal / CC BY-NC-ND 2.5".
O desenvolvedor a colocou justamente aí para que os créditos fiquem apenas na página do Portal.
Aí você tem 3 opções:
1ª) É a <div> com um plano de fundo que o gssilva mencionou.
2ª) Colocar os créditos do Portal no rodapé, junto com os demais, porém, tais créditos ficarão visíveis em todas as páginas do Fórum.
3º) Criar uma classe .copyright board3 { só para os créditos no Portal, de maneira que a alteração do .copyright { do rodapé não vai interferir na frase:"board3 Portal - based on phpBB3 Portal Traduzido para português brasileiro por phpBB Portugal / CC BY-NC-ND 2.5".
Bem... vou deixar a 2ª e a 3ª opção disponível e o gssilva disponibiliza depois a <div> com um plano de fundo. Ok ?

Vamos às mudanças, e tomarei como base os arquivos originais do estilo proformell. Ok ?:
2ª) Opção:
1- Abra o arquivo colours.css, ache e exclua as linhas:

Código: Selecionar todos

.copyright {
    color: #555555;
} 
2- Abra o arquivo common.css e ache as linhas:

Código: Selecionar todos

.copyright {
    padding: 5px;
    text-align: center;
    color: #555555;
} 
Adicione antes da chave final }, em uma nova linha, o seguinte:
background-image: url("./images/rodape.png"); ficando desta forma:

Código: Selecionar todos

.copyright {
    padding: 5px;
    text-align: center;
    color: #555555;
    background-image: url("./images/rodape.png");
} 
3- Faça upload do arquivo rodape.png para a pasta raiz_do_forum/images. Verifiquei, e o arquivo não se encontra lá.
4- Copie o conteúdo da <div class="copyright"> no final de seu arquivo styles/proformell/template/portal/portal_body.html e remova-a por completo do arquivo, ficando as linhas finais desta forma:

Código: Selecionar todos

<!-- [-] bottom module area -->
    </tr>
    <!-- ENDIF -->
</table>

<!-- INCLUDE overall_footer.html --> 
5- Cole o conteúdo da <div class="copyright"> copiado anteriormente, dentro da <div class="copyright"> em seu arquivo overall_footer.html, ficando desta forma:

Código: Selecionar todos

<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group<br />Style by <a href="http://www.m-a-styles.de">Marc Alexander</a> &copy; 2007 - 2011
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
		<br />Powered by <a href="http://www.board3.de/">Board3 Portal</a> &copy; 2009 - 2011 Board3 Group
	</div>
6- Atualize a Templates, Temas e Sets de imagem do estilo Forformell pela aba ESTILOS do ACP, e limpe o cache do Fórum pela aba GERAL do ACP.

Opção 3:
1- Abra o arquivo colours.css, ache e exclua as linhas:

Código: Selecionar todos

.copyright {
    color: #555555;
} 
2- Abra o arquivo common.css e ache as linhas:

Código: Selecionar todos

.copyright {
    padding: 5px;
    text-align: center;
    color: #555555;
} 
Substitua por:

Código: Selecionar todos

.copyright {
    padding: 5px;
    text-align: center;
    color: #555555;
    background-image: url("./images/rodape.png");
}

.copyright board3 {
    padding: 5px;
    text-align: center;
    color: #555555;
} 
3- Faça upload do arquivo rodape.png para a pasta raiz_do_forum/images. Verifiquei, e o arquivo não se encontra lá.
4- Abra o arquivo styles/proformell/template/portal/portal_body.html e ache as linhas:

Código: Selecionar todos

<div class="copyright">Powered by <a href="http://www.board3.de/">Board3 Portal</a> &copy; 2009 - 2011 Board3 Group</div>
 
Substitua o texto class="copyright" por class="copyright board3".
5- Atualize a Templates, Temas e Sets de imagem do estilo Forformell pela aba ESTILOS do ACP, e limpe o cache do Fórum pela aba GERAL do ACP.

Abraço. Imagem

Re: [Dúvida] Como colocar imagem no roda pé do Fórum ?

Enviado: 13 Nov 2011, 22:52
por robra
O seu Portal está desalinhado com o fundo porque as imagens postadas nos blocos centrais estão muito grandes.
Se a imagem "Bem-vindos" tiver height="130px" e a "Exclusiva com Bagagini" tiver height="230px", a página voltará ao tamanho normal.

Abraço. Imagem

Re: [Dúvida] Como colocar imagem no roda pé do Fórum ?

Enviado: 15 Nov 2011, 16:34
por bet00
Obrigado pelas orientações, vou efetuar novamente o teste e posto o resultado entre hoje ou amanhã.