Alterações no header do estilo SE Square left

Suporte aos Styles/Templates para phpBB.
Trancado
Avatar do usuário
lascowski
Novato
Novato
Mensagens: 97
Registrado em: 21 Fev 2011, 23:20

Re: Alterações no header do estilo SE Square left

Mensagem por lascowski »

continua ja ta feito
Imagem
Voltar ao topo
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Alterações no header do estilo SE Square left

Mensagem por robra »

Ué.. cadê o ícone Imagem ?

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Voltar ao topo
Avatar do usuário
lascowski
Novato
Novato
Mensagens: 97
Registrado em: 21 Fev 2011, 23:20

Re: Alterações no header do estilo SE Square left

Mensagem por lascowski »

robra escreveu:Ué.. cadê o ícone Imagem ?

Abraço. Imagem
Esta assim

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>

<!-- 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: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:

	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 and 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_SUPER_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_SUPER_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 -->

</head>

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

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
    				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

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

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

			<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>
  <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
							<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<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" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			
		<!-- ENDIF --></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-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</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>
		</div>

	</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 -->
Imagem
Voltar ao topo
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Alterações no header do estilo SE Square left

Mensagem por robra »

Agora voltou o ícone.
Quanto ao "pesquisar" você quer só a caixa onde digita o texto, sem o botão "pesquisar" e sem o link "pesquisa avançada ?

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Voltar ao topo
Avatar do usuário
lascowski
Novato
Novato
Mensagens: 97
Registrado em: 21 Fev 2011, 23:20

Re: Alterações no header do estilo SE Square left

Mensagem por lascowski »

só o local de procura a box de digitação.
Imagem
Voltar ao topo
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Alterações no header do estilo SE Square left

Mensagem por robra »

Beleza...
1- Posicione o mouse sobre o botão "pesquisar", clique com o botão direito do mouse e escolha "inspecionar elemento". Do lado esquerdo do painel que abrirá na parte de baixo da página, clique com o botão direito do mouse sobre o texto <input class="button2" value="Pesquisar" type="submit"> e escolha "Delete node". O botão "pesquisar" vai sumir.
2- Depois faça o mesmo procedimento do "inspecionar elemento" sobre a palavra "Pesquisa avançada" da página. Clique com o botão direito do mouse sobre o texto <a href="./search.php" title="Ver as opções da pesquisa avançada">Pesquisa avançada</a> e escolha "Delete node". O texto "Pesquisa avançada" vai sumir também.
OBS: Vai ficar uma tag <br> que pode ser aplicada nela o "Delete node" também.
Até aí, vai ficar assim:
img006.jpg
3- Posicione o mouse sobre o botão de alterar o tamanho da fonte Imagem, clique com o botão direito do mouse e escolha "inspecionar elemento". Do lado esquerdo do painel você vai ver a linha <a href="#" onclick="fontsizeup(); return false;...</a>. Vá no lado direito do painel, na barra de rolagem, e procure por:

Código: Selecionar todos

a.fontsize {
background-image: url("./styles/se_square_left/theme/images/icon_fontsize.gif");
} 
Clique 2 vezes sobre o background-image com o botão esquerdo do mouse e vai abrir a edição do texto. Pressione a tecla ENTER 2 vezes e abrirá uma nova linha embaixo. Digite float, pressione a tecla ENTER e digite left, pressione a tecla ENTER e na linha abaixo que abrirá digite padding-right, pressione a tecla ENTER e digite 5px;, e pressione a tecla ENTER 2 vezes para fechar a edição das linhas.
4- Clique dentro da caixa de texto do "pesquisar" e escolha "inspecionar elemento". No lado esquerdo do painel, um pouco mais acima, clique 1 vez com o botão esquerdo do mouse sobre a linha:
<div id="search-box">. Vá no lado direito do painel, na barra de rolagem, e procure por:

Código: Selecionar todos

#search-box {
    color: #FFFFFF;
    position: relative;
    margin-top: 30px;
    margin-right: 5px;
    display: block;
    float: right;
    text-align: right;
    white-space: nowrap; /* For Opera */
} 
Desative as caixas de seleção que aparecem no canto direito da tela, alinhadas com as linhas margin-top: 30px; e margin-right: 5px;, clicando sobre as caixas.
5- Clique novamente dentro da caixa de texto do "pesquisar" e escolha "inspecionar elemento". Do lado direito do painel, pela barra de rolagem, procure por:

Código: Selecionar todos

input.search {
background-image: url("./styles/se_square_left/theme/images/icon_textbox_search.gif");
} 
Clique 2 vezes sobre o background-image com o botão esquerdo do mouse e vai abrir a edição do texto. Pressione a tecla ENTER 2 vezes e abrirá uma nova linha embaixo. Digite vertical-align, pressione a tecla ENTER, depois digite top e pressione a tecla ENTER 2 vezes para fechar a edição das linhas.
Feito isso, ficará desta forma:
img007.jpg
Agora, é só fazer as mudanças no overall_header.html e no arquivo .css que possui as linhas citadas no item 3, que neste caso é o colours.css.

Abraço. Imagem
Você não está autorizado a ver ou baixar esse anexo.
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Voltar ao topo
Avatar do usuário
lascowski
Novato
Novato
Mensagens: 97
Registrado em: 21 Fev 2011, 23:20

Re: Alterações no header do estilo SE Square left

Mensagem por lascowski »

Ta feito, ficou meio estranho mas ta bom.

Valeu robra...
Imagem
Voltar ao topo
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Alterações no header do estilo SE Square left

Mensagem por robra »

Opa... desculpe aí, mas tiveram 2 procedimentos que acabei pulando e por isso não ficou igual a imagem final que postei.
Adicionei os procedimentos como item 4 e 5 em minha mensagem anterior só para deixar os procedimentos corretos juntos, mas para facilitar, você pode fazer as alterações diretas, conforme instruções abaixo:
- No overall_header.html:
Ache as linhas:

Código: Selecionar todos

<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<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" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

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

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

			<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>
Substitua por:

Código: Selecionar todos

<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

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

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

			<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>
				<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<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}';" />
				</fieldset>
				</form>
			</div>
				<!-- ENDIF -->
				</li>
- No common.css:
Ache as linhas:

Código: Selecionar todos

#search-box {
    color: #FFFFFF;
    position: relative;
    margin-top: 30px;
    margin-right: 5px;
    display: block;
    float: right;
    text-align: right;
    white-space: nowrap; /* For Opera */
} 
Substitua por:

Código: Selecionar todos

#search-box {
    color: #FFFFFF;
    position: relative;
    display: block;
    float: right;
    text-align: right;
    white-space: nowrap; /* For Opera */
} 
- No colours.css:
Ache as linhas:

Código: Selecionar todos

a.fontsize {
    background-image: url("{T_THEME_PATH}/images/icon_fontsize.gif");
} 
Adicione antes do colchete final }, e novas linhas:

Código: Selecionar todos

    float: left;
    padding-right: 5px; 
Ache as linhas:

Código: Selecionar todos

input.search {
    background-image: url("{T_THEME_PATH}/images/icon_textbox_search.gif");
} 
Adicione antes do colchete final }, e uma nova linha: vertical-align: top;.

OBS: Caso o opção "pesquisar no painel" seja desativada ao grupo "visitantes", o ícone para alterar o tamanho da fonte se deslocará automaticamente para o canto direito

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Voltar ao topo
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Alterações no header do estilo SE Square left

Mensagem por robra »

Fiz uma nova alteração para que o ícone de mudar o tamanho da fonte - Imagem, se desloque automaticamente para à direita caso a pesquisa no painel não seja permitida aos visitantes.
Você pode usar direto as informações da minha mensagem anterior para fazer as alterações finais no overall_header.html, colours.css e comon.css.

P.S.: A explicação ficou tão detalhada que criei um artigo sobre Identificar e interagir com os elementos da página, falando sobre o recurso "inspecionar elemento" do Google Chrome.

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Voltar ao topo
Trancado

Voltar para “Styles / Templates phpBB 3.0.X”