🌍
Brasil
Differences
This shows you the differences between two versions of the page.
|
css_code [2014/02/25 19:12] msakik [Introdução] |
css_code [2014/03/11 13:21] (current) msakik [Como salvar as alterações no meu Piwigo] |
||
|---|---|---|---|
| Line 20: | Line 20: | ||
| Isso depende do seu navegador: | Isso depende do seu navegador: | ||
| - | * Firefox : install the extension Firebug. Then press F12, or right-click to open the contextual menu and click on "Inspect this element" | + | * Firefox: instale a extensão Firebug. Uma vez instalado, pressione F12, ou clique com o botão direito para abrir o menu de contexto e selecione "Inspecionar esse elemento". |
| - | * Internet Explorer : press "F12". | + | * Internet Explorer: pressione "F12". |
| - | * Opera : use Opera Dragonfly by pressing Ctrl + Maj + I on a Pc, or ⌘ + ⌥ + I for a Mac. You can also right-click to open the contextual menu and click on "Inspect the element". | + | * Opera: use Opera Dragonfly clicando em Ctrl + Maj + I em um PC, ou ⌘ + ⌥ + I para um Mac. Você também pode clicar o botão direito para abrir o menu de contexto e selecionar "Inspecione o elemento". |
| - | * Chrome : press "F12", and the icon magnifying glass to inspect an element. | + | * Chrome: pressione "F12", e o ícone de lupa para inspecionar um elemento. O menu de contexto do botão direito também possui a opção "Inspecionar elemento". |
| - | * Safari : go to Edition->Preferences->advanced et tick "Activate the dev menu...". By doing that, you will have a new menu between Favorites et Windows. In there click on Display the web inspector". | + | * Safari: vá para Edition->Preferences->advanced e selecione "Activate the dev menu...". Depois disso você terá um novo menu entre Favorites e Windows. Nesse menu clique em "Display the web inspector". |
| - | You might need to download several of these well-know browsers, because the render of a page may change according to the browser. | + | Você pode precisar baixar e instalar vários desses navegadores populares porque a página pode ficar diferente em cada um deles. |
| - | ===== How To: como encontrar o seletor correto ===== | + | ===== Como encontrar o seletor correto ===== |
| - | Each HTML element is accessible through CSS by selector. Read [[http://www.w3schools.com/css/css_syntax.asp|Syntax]] and [[http://www.w3schools.com/css/css_id_class.asp|Id and Class]] to understand. | + | Cada elemento HTML é acessado pelo CSS por um seletor. Leia [[http://www.w3schools.com/css/css_syntax.asp|Syntax]] e [[http://www.w3schools.com/css/css_id_class.asp|Id and Class]] para entender como funciona. |
| - | Here is an example of how you can easily access to the html/css code of any web page, and change it. With Firebug, a new windows appears in Firefox (see **Fig.01**). | + | A seguir apresentaremos um exemplo de como acessar o código html/css de uma página e modificá-la. No caso do Firebug, uma nova janela aparece no firefox.(veja **Fig.01**). |
| <WRAP smaller centeralign> | <WRAP smaller centeralign> | ||
| {{http://piwigo.org/doc/lib/exe/fetch.php?media=03-05-2012_20-37-49.jpg? |Fig.01 Firebug Menu}}\\ | {{http://piwigo.org/doc/lib/exe/fetch.php?media=03-05-2012_20-37-49.jpg? |Fig.01 Firebug Menu}}\\ | ||
| - | //**Fig.01** Firebug Menu// | + | //**Fig.01** Menu do Firebug// |
| </WRAP> | </WRAP> | ||
| \\ | \\ | ||
| - | **Fig.01** illustrates the HTML tab, where you can visualize the content of any web page -on-line or off-line-. You see what the browser receives and interprets. | + | A **Fig.01** ilustra uma aba HTML onde você pode visualizar o conteúdo de uma página web on-line ou off-line. Você pode ver o quê o navegador recebe e interpreta. Esta janela é dividida em duas regiões. |
| - | This windows is split in 2 zones. | + | - A primeira região, à esquerda, contém o código HTML.\\ <wrap info>__Info__:</wrap> Você pode ver na figura 01 uma região azulada: o mouse está sobre o elemento <tr> que corresponde àquela zona azul destacada pelo Firebug |
| - | - The first one (on your left) contains the HTML code.\\ <wrap info>__Info__ :</wrap> You can see on the screen-shot a blue zone on the page : the mouse is over the <tr> which corresponds to that blue zone highlighted by Firebug | + | - A segunda região, à direita, mostra todas as propriedades CSS aplicadas ao elemento HTML selecionado. Ele também mostra o seletor utilizado para aplicar as propriedades no elemento e onde o código está localizado - em um arquivo e em quais linhas -. Você pode modificar as propriedades em tempo real clicando no valor e/ou na propriedade. As alterações são aplicadas imediatamente e pode ser visto na página web sem atualizá-la. |
| - | - The second zone (on the right) gives all the CSS properties applied to the HTML element selected. It shows also the selector used to apply the properties on that HTML element, and where the code is located -in a file and on what lines-. You can change on the fly the properties, by clicking on value and/or the property. The changes are applied immediately and can be seen on the web page without refreshing | + | |
| + | ===== Como modificar a propriedade CSS do elemento ===== | ||
| - | ===== How To: como modificar a propriedade CSS do elemento ===== | + | Como vimos anteriormente, o valor de quealquer propriedade pode ser modificada em tempo real. As propriedades podem ser desabilitadas, modificadas ou criadas livremente. |
| - | As we have seen, the value of any properties can be changed on-the-fly. The properties can be disabled, changed and created. | + | ===== Como salvar as alterações no meu Piwigo ===== |
| - | ===== How To: como salvar as alterações no meu Piwigo ===== | + | > No fórum, alguém lhe forneceu um trecho de código CSS?\\ Você experimentou alguma das ferramentas mencionadas anteriormente e quer salvar suas modificações?\\ |
| - | > In the forum someone gave you a piece of CSS code ?\\ | + | Você deve ter notado que o Firebug não modifica nenhum arquivo. Se você recarregar a página você perde todas as alterações.\\ |
| - | > You have played with one of the tools previously mentioned, and you want to save your changes ?\\ | + | <wrap important>Se você seguir este tutorial você não perderá as suas mudanças no caso de uma atualização do Piwigo.</wrap> |
| - | You might have noticed that Firebug doesn't change the files : if you refresh the page, you will loose all your changes\\ | ||
| - | <wrap important>If you follow that tutorial, you will NOT loose your changes during updates.</wrap> | ||
| + | No Piwigo vá para **[ Administração >> Plugins >> LocalFiles Editor]]((Ele precisa ser ativado!)) >> aba "//CSS//" ]**\\ | ||
| + | Aqui você pode escolher no menu drop-down entre o ''rules.css'' e todos os temas instalados na sua galeria. | ||
| - | Go to **[ Administration >> Plugins >> LocalFiles Editor]]((It needs to be activated!)) >> Tab "//CSS//" ]**\\ | + | * ''rules.css'' é um arquivo que o Piwigo carrega independente do tema: se sua mudança de CSS vai ser aplicado à todos os temas, esta é a opção. |
| - | There you can choose in the drop-down menu between ''local-rules.css'' and a all the themes enable on your gallery. | + | * Se você selecionar um tema, o seu código CSS será carregado somente para aquele tema. Na maioria dos casos, recomenda-se aplicar o código CSS para um tema específico.\\ <wrap info>__Info__ :</wrap>Para um tema pai (que possui filhos), seu arquivo *-rules.css será carregado para ele e para todos os temas filhos! Então um tema filho pode ter vários arquivos de regras locais carregados. |
| - | * ''local-rules.css'' is a file loaded by Piwigo whatever the theme : if your CSS change need to be applied to all themes, select it. | + | Agora cole seu código CSS e salve o arquivo. O resultado deve ser visto imediatamente atualizando a página: caso não ocorra, tente limpar o cache do seu navegador e limpar os templates compiados através do menu **[ Ferramentas >> Manutenção >> Limpar os modelos compilados]**\\ |
| - | * If you select a theme, the CSS code written will be loaded only for that theme. In most of the case, it's recommend to apply the CSS code to one theme.\\<wrap info>__Info__ :</wrap>For a parent theme, his *-rules.css file will be loaded for him-self and his child themes! So a child theme can have several local-rules files loaded. | + | |
| - | + | ||
| - | Now just copy/past your CSS code and save. The effects should be seen immediately : if not, try to refresh the cache of your browser and purge the Purge compiled templates, in **[ Tools >> Maintenance>> ]**\\ | + | |
| <WRAP center round info 60%> | <WRAP center round info 60%> | ||
| - | Se você precisar adicionar comentários sobre o que o código faz, coloque duas barras antes do seu comentário para que essa linha não seja interpretada. | + | Se você precisar adicionar comentários sobre o que o código faz, coloque duas barras antes do seu comentário para que essa linha não seja interpretada.\\ |
| Exemplo:\\ | Exemplo:\\ | ||
| <code css> | <code css> | ||
| Line 84: | Line 80: | ||
| ===== FAQ ===== | ===== FAQ ===== | ||
| - | === É necessário copiar/colar todo o conteúdo do arquivo theme.css? === | + | === 1. É necessário copiar/colar todo o conteúdo do arquivo theme.css? === |
| Com certeza não!\\ | Com certeza não!\\ | ||
| O código CSS em *-rules.css será aplicado por cima do CSS contido no arquivo padrão como no theme.css do tema que você está modsificando. | O código CSS em *-rules.css será aplicado por cima do CSS contido no arquivo padrão como no theme.css do tema que você está modsificando. | ||
| - | === Onde minhas personalizações são salvas? === | + | === 2. Onde minhas personalizações são salvas? === |
| O arquivo CSS gerado pelo LocalFiles Editor são guardados na pasta: | O arquivo CSS gerado pelo LocalFiles Editor são guardados na pasta: | ||
| ./piwigo/local/css/ | ./piwigo/local/css/ | ||
| Eles são nomeados como *-rules.css, onde * é o nome do tema. | Eles são nomeados como *-rules.css, onde * é o nome do tema. | ||