Este guia é destinado a pessoas que não têm conhecimento em CSS / HTML ou PHP qualquer. No entanto, neste guia estamos assumindo que você sabe como usar um cliente de FTP, um editor de texto ou algum software de manipulação de imagem como o Adobe Photoshop, se você quiser modificar as imagens que vêm com o SMF. Neste guia estaremos demonstrando como criar um tema baseado na Curva de passo a passo e, no final, criando um tema com as informações fornecidas neste guia
I. tema Criando o real com base na CurvaEm vez de modificar o tema padrão aCtual é sempre melhor criar um tema baseado nela. SMF, por natureza, é construída de uma forma assim, quando um ficheiro de modelo não está incluído em um tema, ele cai de volta para o modelo padrão de ficheiros, tornando o processo de actualização muito mais fácil e indolor. Se você modificar o tema padrão em vez de criar um que é baseado nele, em upgrades você perderia todas as mudanças que você fez. Também tenha em mente que é sempre melhor para fazer esta operação em uma instalação limpa do SMF, ou uma instalação SMF mods onde não foram instalados. Como os ficheiros são copiados a partir do tema curva, no caso de um mod, o tema tenha copiado algum código mod em que ela daria erros se instalado em um fórum sem que mod.
O processo é muito simples e direta um. Aqui estão os passos para criar um tema baseado na curva:
* Ir para o "Centro Administrativo"
* Clique em "Configuration -> Temas e Layout -> Gerenciar e Instalar"
* Sob o "tipo de secção Instalar Um Novo Theme" do nome do tema em "Criar uma cópia do padrão chamado" campo e clique em "Instalar!" Como você pode ver a seguir, neste caso estamos a criar um tema chamado "Claridade"(Clarity)
Agora que temos o nosso tema, temos de activar a fim de ser capaz de usá-lo. Fazê-lo é muito fácil:
* Vá para a tela anterior onde você criou o tema
* Sob os temas "e layout seção" certifique-se de tema que você criou é escolhido nas caixas de seleção
* Clique em "Save" para activar o novo tema para todos os utilizadores do fórum
Temos um tema que podemos trabalhar agora sem quebrar nosso fórum. Na próxima parte do guia estaremos dizendo a você o básico sobre como modificar a aparência do seu fórum.
II. Personalizar o designBem, personalizando design I, a alteração da aparência, não adicionar ou subtrair de conteúdo para o tema, o que significa que só será modificar os ficheiros CSS no momento. Primeiro de tudo vamos começar por descrever o que cada ficheiro CSS faz e onde eles estão localizados:
Localização: Todos os seus ficheiros CSS estão localizados em "Temas / (seu-tema) / css" pasta. Note-se que há, provavelmente, apenas dois ficheiros lá no momento, index.css que é o nosso estilo principal e rtl.css.
Stylesheets A.
1.
index.cssEste é o nosso estilo principal que podemos usar para criar um visual completamente novo para o nosso fórum. Para conseguir o que quero dizer, basta renomear o ficheiro e Ctrl + F5 para ver que todas as marcações projeto é removido e nosso fórum de texto simples se tornou.
2. rtl.css
Usado para personalizar a forma como o fórum parece se o utilizador está usando um da direita para a esquerda linguagem. Tanto quanto eu sei que há dois amplamente utilizados, que são línguas como o árabe eo hebraico. A não ser que adicione o nosso próprias classes ou ID's para as folhas de estilo que não vai precisar de personalizá-los.
B. Tarefas comuns
Aqui estaremos explicando como alterar a aparência do seu fórum, personalizando o ficheiro index.css:
1. Trocando o fundo do corpo
Navegue para:
/* Set a fontsize that will look the same in all browsers. */
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0 auto;
padding: 15px 5%;
}Aqui, a propriedade background é usado para modificar a imagem de fundo. O primeiro código # E9EEF2 é a cor de fundo que é usado após a imagem de fundo tem sido repetida horizontalmente. Repeat-x, a imagem deve ser repetida horizontalmente, repeat-y iria repeti-lo verticalmente, no-repeat se apenas mostrar uma imagem grande e supressão de texto que tornaria a imagem repetir horizontalmente e verticalmente. Aqui está mais informações sobre o assunto:
http://www.w3schools.com/css/css_background.asp2. Alterando a aparência geral do seu fórum
Em SMF 2.0 Curva de uma imagem é usada para controlar o modo como olha o fórum e é chamado de "main_block.png", que pode ser encontrado em "Temas / (seu-tema) / cssimages / theme /" pasta. Você pode modificá-lo para mudar os fundos globais e imagens do seu fórum. Você verá o que quero dizer quando você abre a imagem com um editor imagem como o Adobe Photoshop ou o open-source alternativa Gimp. Experiência com a imagem que se acostumar como a imagem controla a aparência da SMF.
3. Alterar o tamanho da fonte
Navegue para:
/* Set a fontsize that will look the same in all browsers. */
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0 auto;
padding: 15px 5%;
}Aqui, a propriedade fonte modifica o tamanho do texto geral do fórum. O percentual é o primeiro font-size enquanto o segundo é o espaçamento da linha, a linha de espaçamento determina o espaço entre cada linha. Brinque com ele para conseguir um font-size do seu agrado. Aqui está mais informações sobre o assunto:
http://www.w3schools.com/css/css_font.asp4. Mudar a cor da fonte
Navegue para
/* use dark grey for the text, leaving black for headers etc */
body, td, th, tr
{
color: #444444;
}Aqui, alterando o parâmetro cor que você pode substituir a cor do texto principal. Embora a mudança de cor de texto que você pode pesquisar o arquivo index.css para "cor" e substituir os códigos de cor a seu gosto.
5. Obtendo seu logotipo na parte do cabeçalho do fórum
Vamos ser honestos, a SMF função de mudança de logótipo no centro da administração só remove o nome do fórum e substitui-lo com o seu próprio. Ele dá nenhum controle real sobre o cabeçalho. Aqui eu vou explicar como mudar o tema e inserir sua própria imagem para o cabeçalho:
Primeira forma main_block.png editar o ficheiro "que foi explicado no segundo ponto nesta seção. O grande bloco no fundo pode ser modificado para dar-lhe o cabeçalho olhar que você quer. E então você tem que ter certeza que você não está exibindo o logotipo do SMF, o texto nome do fórum e também certificar-se que há mais esfoso:
Navegue para:
/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
}E substituí-lo como esta adicionando "display: none;" propriedades como o id e classes, elas não são mostradas mais:
/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
display: none;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
display: none;
}Agora teríamos de aumentar a diferença para cima de acordo com o quão grande é a sua imagem de cabeçalho:
Navegue para:
#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
}Altere a propriedade min-height de acordo com o quão grande é o seu cabeçalho.
III. Personalizar os modelosA diferença entre personalizar o design e personalizar os modelos podem parecer pequenas, mas, personalizando o projeto não pode alterar a marcação, mas apenas a aparência. Digamos que você queira adicionar um banner flash para cada página do fórum, você só poderia fazer isso através da edição do SMF modelos. Aqui iremos descrever o que os modelos de controle das partes mais utilizadas dos fóruns.
Há quatro principais modelos na SMF, onde a maioria dos utilizadores a navegar. Há no "index.templates.php", que é carregado em cada clique e basicamente é o que envolve seu fórum. O segundo é o "
BoardIndex.template.php ficheiro", que é a visão índice do quadro, o FrontPage do seu fórum. O terceiro é "MessageIndex.template.php", que contém a sub-boards e as mensagens dentro de uma placa. A quarta e última é a "Display.template.php ficheiro" que contém o código HTML para a vista do tema.
Você pode adicionar código HTML para esses modelos realmente fácil. Se você quiser personalizar um deles (exceto index.template.php arquivo que já está em sua pasta de temas por padrão), navegue até a pasta do tema padrão e copiar o ficheiro para seu diretório do tema e edição de iniciá-lo imediatamente.
O maior erro mais comum cometido durante a edição desses ficheiros é que eles entram código HTML diretamente no ficheiro PHP. Porque o PHP é uma linguagem de programação que você deve dizer para imprimir o código HTML, por conseguinte, você deve usar o "eco" de comando. Aqui está um exemplo:
Navegue até index.template.php arquivo e encontramos:
echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">Existem duas formas onde podemos colocar nossas HTML personalizado aqui, ou podemos usar o eco de base para imprimir nosso código como este:
echo !empty($settings['forum_width']) ? '
My name is Eren and Im uber cool!
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">Ou podemos criar o nosso próprio eco para imprimir o html:
echo 'My name is Eren and Im uber cool! ';
echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">Como você pode ver o conteúdo dentro da função echo deve ser fechado com apóstrofos ( ') e deve terminar com um ponto e vírgula. Essa necessidade gera um problema comum onde qualquer novato começa a receber erros de análise. Quando não há conteúdo dentro da função echo que contém ', este pode ser um javascript usando' ou, basicamente, de texto, como "Eu sou o roxorz!". Não se preocupe, não há uma solução para isso, você tem basicamente para escapar do personagem com uma \. Aqui está como o seu feito:
echo 'My name is Eren and I\'m uber cool! ';
echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">Aviso assinar o \ antes do 'na declaração uber cool:) De qualquer forma se você compreendeu corretamente este guia, agora temos informações suficientes para criar o nosso próprio tema. Na seção seguinte, vamos criar um tema passo a passo. Não se esqueça de lê-lo como ele pode conter algumas dicas e truques que não estão nas partes mais descrptive deste guia.
IV. Vamos criar o nosso próprio tema!Como você sabe antes eu renomei o meu tema "Claridade", de modo nesta secção do guia por favor, considere todas as referências a claridade como referências para o seu próprio tema. Eu recomendo fortemente que você siga esta seção do guia com cuidado e recriar a si mesmo tema. Vou fornecer as imagens que eu usei para criar o tema.
Primeiro de tudo eu vou mudar de plano de fundo para algo mais alegre e adicionar um pouco de toque para que eu estou indo para torná-lo fixo. Verifique a seção relacionada no "Tarefas comuns" do guia.
Logicamente que primeiro terá o arquivo de imagem, eu vou usar essa imagem que eu criei no Photoshop, porque eu vou estar fazendo o fixo e uma imagem grande (sem repetição) Eu fiz a imagem para que ela suporta Full High resoluções Definição. Aqui está a imagem:
http://www.moobi.com.tr/smf/themeguide/clarity_bg.jpgCertifique-se de colocar esta imagem em seu diretório do tema na pasta de imagens da pasta Clarity. Agora vamos mostrar essa imagem de fundo como este. Abra index.css e vá para:
/* Set a fontsize that will look the same in all browsers. */
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0 auto;
padding: 15px 5%;
}E substituí-lo assim:
/* Set a fontsize that will look the same in all browsers. */
body
{
background: url(../images/theme/clarity_bg.jpg) no-repeat fixed;
font: 78%/130% verdana, Helvetica, sans-serif;
margin: 0 auto;
padding: 15px 5%;
}Como você pode ver, temos agora um novo fundo:
Há um monte de falhas, vamos corrigi-los mais tarde no guia. Embora se você rolar para o final do Fórum, você verá que o autor está ilegível. Isso é contra a licença SMF então vamos fazê-la sobressair mais. Navegue para:
#footer_section
{
text-align: center;
background: url(../images/theme/main_block.png) no-repeat 0 -820px;
padding-left: 20px;
}E substituí-lo assim:
#footer_section
{
text-align: center;
background: url(../images/theme/main_block.png) no-repeat 0 -820px;
padding-left: 20px;
}
#footer_section a
{
color: #fff;
}Esta propriedade acrescentado diz para fazer todos os links na seção de rodapé branco. A é a abreviação de ligação e é representado como um em HTML também.
Agora que temos o plano de fundo. Sua hora de editar o ficheiro main_block.png que discutimos earlies no guia para alterar a aparência geral do fórum. Aqui está o que eu fiz com o Photoshop, você vai notar também que eu tenha modificado a imagem de fundo eu usei antes de ir com o ficheiro main_block.png novo.
Você pode baixar essas imagens a partir daqui:
Nova Imagem de fundo:
http://www.moobi.com.tr/smf/themeguide/clarity_bg_new.jpgMain Image Block:
http://www.moobi.com.tr/smf/themeguide/main_block.pngEu meio que não gostam do logo do SMF aonde estai, então vamos removê-lo a navegar para:
/* float these items to the right */
#siteslogan, img#smflogo
{
margin: 0;
padding: 0;
float: right;
line-height: 3em;
}E substitui-lo como este, acrescentando que o display: none; imóvel anteriormente descrito no guia:
/* float these items to the right */
#siteslogan, img#smflogo
{
display: none;
}Também o nome do fórum parece realmente ruim permite alterar o tamanho da fonte ea cor para que fique mais limpa, vá para:
/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
}E substituí-lo assim:
/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
line-height: 45px;
font-size: 2.2em;
font-family: Tahoma, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
font-weight: 100;
}
h1.forumtitle a
{
color: #fff;
}Aqui é como o nosso grande tema parece, também a nota que levou apenas meia hora para criá-lo:Como você pode ver o nosso tema é concluído. Você pode modificar as imagens na pasta imagens com seu software favorito de edição de fotos e personalizar o seu tema ainda mais. O tema que você acabou de criar está ligado a qualquer um de vocês que queiram testá-lo.
Tópico: Criando Temas para SMF 2.0 - 01 The Basics (Lida 15999 vezes)