PHP | MySQL | HTML | CSS | Javascript

Acesse o ADMIN.
Vá em Customization > Themes

Selecione o tema desejado e clica em EDIT.

Clique na ABA HEADER & FOOTER. Cole o seu código onde achar conveniente, e por fim, salve.

Recentemente a empresa AMPER.AG entrou em contato comigo, através da minha empresa de desenvolvimentos de sites em Wordpress - Pixel Project. A demanda era relativamente simples, mas também complexa. O cliente indicou que a validação (obrigatóriedade de preenchido) dos campos não funcionava, além disso caso algum dos campos fosse esquecido no preenchimento, todos os dados já preenchidos era perdido. Mesmo após relatarem esse problema a RD STATION, o suporte da plataforma indicou que eles deveriam contratar alguém especialista em Javascript para corrigir a situação. Originalmente eles tinham esse código abaixo, que funcionava para impedir que o formulário fosse disparo sem o preenchido do formulário.
Esse era o código original deles:
<script type="text/javascript"> </script> <script type="text/javascript"> function limparCampos(){ $('form').trigger('reset'); $('input').prop('checked', false); } function checkRequiredFields(){ let requiredFields = document.querySelectorAll('[required]'); let allFieldsFilled = true; requiredFields.forEach(function(field) { if (!field.value) { allFieldsFilled = false; } }); return allFieldsFilled }; $(document).ready(function(){limparCampos();}) $('form').on("submit",function(event){ if (checkRequiredFields()) { window.setTimeout(function(){limparCampos();}, 1000); }else{ event.preventDefault(); } }); </script> Porém, após uma atualização recente, esse código parou de funcionar. Para resolver a situação eu utilizei o código a seguir.
<script type="text/javascript"> function checkRequiredFields() { let allFieldsFilled = true; let requiredFields = document.querySelectorAll('form [required]'); requiredFields.forEach(function (field) { if (field.type === 'checkbox' || field.type === 'radio') { let checked = document.querySelector(`input[name="${field.name}"]:checked`); if (!checked) allFieldsFilled = false; } else if (!field.value.trim()) { allFieldsFilled = false; } }); return allFieldsFilled; } document.addEventListener('DOMContentLoaded', function () { document.querySelector('form').addEventListener('submit', function (event) { if (checkRequiredFields()) { setTimeout(function () { event.target.reset(); }, 1000); } else { alert('Preencha todos os campos obrigatórios.'); event.preventDefault(); } }); }); </script>  
Nesse código, ele conseguiu abrager todos os campos que eu precisava. 

Mas onde inserir o código? É bem simples.
1. Abra a sua landing page que deseja editar.
2. Vá em EDIÇÃO AVANÇADA, em seguida aba Javascript em HEAD, cole o código acima no campo e salve.

Após isso, todos os campos serão obrigatórios. Lembrando que esse ajuste deveria ser feito pela própria RD STATION. 
A solução foi feita através do CHATGPT, como eu não tenho conhecimento técnico na linguagem, utilizei a ferramenta e ela me ajudou. 

Crie um novo documento html e css (presumindo que você saiba linkar o css no html)
dentro do body do html coloque:
<div id="container"> <p><a href="https://en.wikipedia.org/wiki/Red"> RED </a></p> <p><a href="https://en.wikipedia.org/wiki/Blue"> BLUE </a></p> <p><a href="https://en.wikipedia.org/wiki/Yellow"> Yellow </a></p> <p><a href="https://en.wikipedia.org/wiki/Green"> GREEN </a></p> <p><a href="https://en.wikipedia.org/wiki/Orange_(colour)"> ORANGE </a></p> <p><a href="https://en.wikipedia.org/wiki/Violet_(color)"> VIOLET </a></p> </div> <div id="linkBack" style="position:absolute;right:0px;top:0px;background-color:#333;margin:0;width:60px;padding:5px"><a href="http://www.f-rilling.com/projects/" target="_blank" style="font-size:14px;text-decoration:none;color:#fff;padding:0 0 0 5px;font-family:sans-serif">My Site</a></div>  
Agora no CSS coloque:
body { background-color: #222222; background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px; } #container { width: 500px; margin: auto; } /*Neon*/ p { text-align: center; font-size: 7em; margin: 20px 0 20px 0; } a { text-decoration: none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } p:nth-child(1) a { color: #fff; font-family: Monoton; -webkit-animation: neon1 1.5s ease-in-out infinite alternate; -moz-animation: neon1 1.5s ease-in-out infinite alternate; animation: neon1 1.5s ease-in-out infinite alternate; } p:nth-child(1) a:hover { color: #FF1177; -webkit-animation: none; -moz-animation: none; animation: none; } p:nth-child(2) a { font-size: 1.5em; color: #228DFF; font-family: Iceland; } p:nth-child(2) a:hover { -webkit-animation: neon2 1.5s ease-in-out infinite alternate; -moz-animation: neon2 1.5s ease-in-out infinite alternate; animation: neon2 1.5s ease-in-out infinite alternate; } p:nth-child(3) a { color: #FFDD1B; font-family: Pacifico; } p:nth-child(3) a:hover { -webkit-animation: neon3 1.5s ease-in-out infinite alternate; -moz-animation: neon3 1.5s ease-in-out infinite alternate; animation: neon3 1.5s ease-in-out infinite alternate; } p:nth-child(4) a { color: #B6FF00; font-family: "Press Start 2P"; font-size: 0.8em; } p:nth-child(4) a:hover { -webkit-animation: neon4 1.5s ease-in-out infinite alternate; -moz-animation: neon4 1.5s ease-in-out infinite alternate; animation: neon4 1.5s ease-in-out infinite alternate; } p:nth-child(5) a { color: #FF9900; font-family: Audiowide; } p:nth-child(5) a:hover { -webkit-animation: neon5 1.5s ease-in-out infinite alternate; -moz-animation: neon5 1.5s ease-in-out infinite alternate; animation: neon5 1.5s ease-in-out infinite alternate; } p:nth-child(6) a { color: #BA01FF; font-family: Vampiro One; } p:nth-child(6) a:hover { -webkit-animation: neon6 1.5s ease-in-out infinite alternate; -moz-animation: neon6 1.5s ease-in-out infinite alternate; animation: neon6 1.5s ease-in-out infinite alternate; } p a:hover { color: #ffffff; } /*glow for webkit*/ @-webkit-keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } @-webkit-keyframes neon2 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } @-webkit-keyframes neon3 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @-webkit-keyframes neon4 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00; } } @-webkit-keyframes neon5 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } } @-webkit-keyframes neon6 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } } /*glow for mozilla*/ @-moz-keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } @-moz-keyframes neon2 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } @-moz-keyframes neon3 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @-moz-keyframes neon4 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00; } } @-moz-keyframes neon5 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } } @-moz-keyframes neon6 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } } /*glow*/ @keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } @keyframes neon2 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } @keyframes neon3 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @keyframes neon4 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00; } } @keyframes neon5 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900; } } @keyframes neon6 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de; } } /*REEEEEEEEEEESPONSIVE*/ @media (max-width: 650px) { #container { width: 100%; } p { font-size: 3.5em; } } Feito isso salve, caso queira ver como fica online clique aqui

Pré Requisito

1. Hospedagem própria
2. Cardápio em JPG ou PDF
 
Vamos ao tutorial.5.
1. Faça o upload do seu cardápio no FTP. Recomendo a HOME MESMO.
2. Digite o endereço do seu cardapio no navegador e copie ele. Se ele se chama 'cardapio.pdf', então estará em meusite.com.br/cardapio.pdf'
3. Copie o endereço e acesse agora o WHATSFACIL.COM ou então sua cópia GGBR.ME
4. Cole o endereço no campo mencionado e aperte GERAR, depois é só baixar o QRCODE.
5. Faça o download do QRCODE e imprima ele, depois é só colar onde deseja e pedir para escanear. 

E aí, povo.
Seguinte, pra quem tá querendo começar a programar e já leu sobre por onde começar, viu python e javascript nas sugestões e decidiu seguir pelo javascript, eu to recomendando esse curso aqui que vai te ajudar muito a dar os primeiros passos tanto na linguagem e na lógica de programação(isso pra quem não for programador, claro kk)
O curso é gratuito e tá todo hospedado no youtube, só não tem muita divulgação e eu não sei por quê:
 

Template > Core > Front > Global > Sidebar
Antes de colocarmos o código você vai comentar o código original, como assim, você vai colocar no inicio do código <!-- e no final --> assim vai comentar as linhas de código! vai ficar mais ou menos assim, o código fora do <!-- --> é o que você deve colocar. dentro do sidebar, senão entender comente que eu explico!
<!-- Save o código de linha ORIGINAL é similar a esse! {{$adsForceSidebar = ( \IPS\Settings::i()->ads_force_sidebar AND \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) );}} {{if (isset( \IPS\Output::i()->sidebar['enabled'] ) and \IPS\Output::i()->sidebar['enabled'] ) && ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) || ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) || ( \IPS\Dispatcher::i()->application instanceof \IPS\Application AND \IPS\Dispatcher::i()->application->canManageWidgets() ) || $adsForceSidebar )}} <div id='ipsLayout_sidebar' class='ipsLayout_sidebar{$position} {{if !( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) && ( !isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) || !\count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) && \IPS\Dispatcher::i()->application->canManageWidgets() && !$adsForceSidebar}}ipsLayout_sidebarUnused{{endif}}' data-controller='core.front.widgets.sidebar'> {{if $announcements = \IPS\core\Announcements\Announcement::loadAllByLocation( 'sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) )}} {template="announcementSidebar" group="global" app="core" params="$announcements"} {{endif}} {{if isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== ''}} <aside id="elContextualTools" class='ipsClearfix' {{if isset( \IPS\Output::i()->sidebar['sticky'] )}}data-ipsSticky{{endif}}> {expression="\IPS\Output::i()->sidebar['contextual']" raw="true"} </aside> {{endif}} {{if $adsForceSidebar OR ( \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) ) )}} <div data-role='sidebarAd'> {advertisement="ad_sidebar"} </div> <br><br> {{endif}} {template="widgetContainer" group="global" app="core" params="'sidebar', 'vertical'"} </div> {{endif}} --> {{$adsForceSidebar = ( \IPS\Settings::i()->ads_force_sidebar AND \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) );}} {{if (isset( \IPS\Output::i()->sidebar['enabled'] ) and \IPS\Output::i()->sidebar['enabled'] ) && ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) || ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) || ( \IPS\Dispatcher::i()->application instanceof \IPS\Application AND \IPS\Dispatcher::i()->application->canManageWidgets() ) || $adsForceSidebar )}} <div id='ipsLayout_sidebar' class='ipsLayout_sidebar{$position} {{if !( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) && ( !isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) || !\count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) && \IPS\Dispatcher::i()->application->canManageWidgets() && !$adsForceSidebar}}ipsLayout_sidebarUnused{{endif}}' data-controller='core.front.widgets.sidebar'> {{if $announcements = \IPS\core\Announcements\Announcement::loadAllByLocation( 'sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) )}} {template="announcementSidebar" group="global" app="core" params="$announcements"} {{endif}} <div class='ibtFloatSidebar'> {{if isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== ''}} <aside id="elContextualTools" class='ipsClearfix' {{if isset( \IPS\Output::i()->sidebar['sticky'] )}}data-ipsSticky{{endif}}> {expression="\IPS\Output::i()->sidebar['contextual']" raw="true"} </aside> {{endif}} {{if $adsForceSidebar OR ( \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) ) )}} <div data-role='sidebarAd'> {advertisement="ad_sidebar"} </div> <br><br> {{endif}} {template="widgetContainer" group="global" app="core" params="'sidebar', 'vertical'"} </div></div> {{endif}} <script> // обработчик "прилипания" контента в правой колонке (function(){ var a = document.querySelector('.ibtFloatSidebar'), b = null, K = null, Z = 0, P = 0, N = 0; // если у P ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента, если у N — нижний край дойдёт до нижнего края элемента. Может быть отрицательным числом window.addEventListener('scroll', Ascroll, false); document.body.addEventListener('scroll', Ascroll, false); function Ascroll() { (function(jQuery) { var c = document.querySelector('#ipsLayout_mainArea'), Rc = c.getBoundingClientRect(), Ra = a.getBoundingClientRect(), R1bottom = Rc.bottom; if (b == null) { var Sa = getComputedStyle(a, ''), s = ''; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) { s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; ' } } b = document.createElement('div'); b.className = "stopSticky"; b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;'; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes[1]); } } //просчитываем высоту колонки a.style.height = b.getBoundingClientRect().height + 'px'; a.style.padding = '0'; a.style.border = '0'; var Rb = b.getBoundingClientRect(), Rh = Ra.top + Rb.height, W = document.documentElement.clientHeight, R1 = Math.round(Rh - R1bottom), R2 = Math.round(Rh - W); if (Ra.bottom < R1bottom) { if((Rc.height > Rb.height) /*&& (Rb.height > W)*/) { // проверка того, что высота колонки больше высоты контента if (Rb.height > W) { if (Ra.top < K) { // скролл вниз //console.log('скролл вниз'); if (R2 + N > R1) { // не дойти до низа //if ((Rb.bottom - W + N < 0) && (Rb.top - P < 0)) { // подцепиться if ((parseInt(Rb.bottom) - W + N) <= 0/* && (Rb.top + W < 0)*/) { // подцепиться b.className = 'startSticky'; b.style.top = W - Rb.height - N + 'px'; Z = N + Ra.top + Rb.height - W; } else { b.className = 'stopSticky'; b.style.top = -Z + 'px'; } } else { b.className = 'stopSticky'; b.style.top = -R1 + 'px'; Z = R1; } } else { // скролл вверх //console.log('скролл вверх'); if (Ra.top - P < 0) { // не дойти до верха if (Rb.top - P >= 0) { // подцепиться b.className = 'startSticky'; b.style.top = P + 'px'; Z = Ra.top - P; } else { b.className = 'stopSticky'; b.style.top = -Z + 'px'; } } else { b.className = ''; b.style.top = ''; Z = 0; } } K = Ra.top; } else { if ((Ra.top - P) <= 0) { if ((Ra.top - P) <= R1) { b.className = 'stopSticky'; b.style.top = -R1 + 'px'; } else { b.className = 'startSticky'; b.style.top = P + 'px'; } } else { b.className = ''; b.style.top = ''; } } } else { // если высота контента меньше высоты колонки, то "прибиваем" колонку к верху Z = 0; b.className = 'stopSticky'; b.style.top = Z + 'px'; } window.addEventListener('resize', function() { a.children[0].style.width = getComputedStyle(a, '').width }, false); } })(jQuery) } })() </script> e no CSS>Core>Front>Custom>custom.css adicione isso
#ipsLayout_mainArea {height: auto;} .startSticky {position: fixed; z-index: 101;} .stopSticky {position: relative; z-index: 101;}  

Fala pessoal!
Recentemente eu iniciei um projeto de um canal no youtube focado em projetos feitos com html, css e javascript. São projetos ensinados passo a passo, e vão de sites responsivos até jogos. Atualmente eu estou ensinando lá como fazer um site responsivo usando flexbox e como fazer o jogo clássico Genius, tbm em html, css e js.
Eu tbm estou com um instagram onde posto conteúdo diário sobre html, css e js, além de quizzes diários e desafios de programação nos finais de semana. 
Caso tenham interesse, segue o link do canal:
https://www.youtube.com/channel/UCPGJqGxkYfmxO77LCh2Vimw?sub_confirmation=1
E o instagram:
https://www.instagram.com/inkasadev/
Tmj galera!
 

Fala pessoal, nesse tutorial irei ensina-los a atualizar a plataforma Invision Power Service. Literalmente para você realizar esse tipo de atualização hoje em dia é moleza, é só clicar em alguns botões rs... Antigamente era bem chato fazer isso, mas hoje não.
Mas e aí, quando eu devo atualizar? É fácil... a IPS vai te avisar! Você verá essa mensagem no topo do seu fórum (só exibe para os admins).

1. Após essa mensagem aparecer, clique em ATUALIZAR AGORA.
2. Você será direcionado para o AdminCP. Acesse-o.
3. Agora clique em Continue.

4. Faça login na sua área do cliente.

5. Após o login, ele vai começar a fazer o download dos arquivos de atualização.

6. Após o download, vai perguntar quais aplicativos quer atualizar, irei atualizar todos os que possuo.

7. Agora é só apertar em START UPGRADE e aguardar.

8. Por favor, não feche seu navegador enquanto a atualização acontece. Seja paciente.

9. Após o termino, você receberá essa notificação.

É isso aí. Esse método que usei é apenas para quem é cliente da IPS. Não faço ideia como se atualiza uma comunidade pirata.

CacheOrcamentoProxy.php

Comandos:  
 
UPDATE mysql.user SET authentication_string = PASSWORD(nova-senha') WHERE User = 'root' AND Host = 'localhost'; Agora recarregue a tabela de permissões, com o comando:
FLUSH PRIVILEGES; E fim pode sair e aproveitar seu BD

A reposta é muito simples, vou ensinar tanto no Android e PC 
PC
Basta usar a extensão Browsec VPN configurando para os EUA, depois disso, abra o YouTube, e pesquise o que quiser, que estará desbloqueado. 
Android
Também com o mesmo VPN, o Browsec VPN, também está disponível para download na Play Store, é só baixar o app e configurar para os EUA. 
 

Tudo que você precisa fazer é, editar seu arquivo php.ini para aumentar o limite de memória do PHP e do tamanho de upload de arquivos. Se você estiver usando WAMP, siga os passos abaixo.
Vá até a pasta onde está instalado o wampserver  C:wamp/bin/apache/Apache2.4.4/bin e abra o arquivo ini.php (abra o arquivo via bloco de notas)
Aberto o arquivo no bloco de notas, encontre as seguintes linhas :  (Ctrl +F ajuda bastante…  )
post_max_size = 8M   e altere para:  post_max_size = 750M 

upload_max_filesize = 2M  e altere para:  upload_max_filesize = 750M 

Quem nunca viu aqueles sites de programadores e viu aqueles códigos sempre bonitos e mas nunca soube criar uma imagem ou algo parecido, nesse simples tutorial irei lhe ensinar como usar a ferramenta e deixar seu código mais bonito na hora de apresentá-lo.
Antes de tudo já deixa seu like e vamos que vamos.
 
 
1. Primeiro vamos entrar no site: https://carbon.now.sh/

 
 
2. Feito isso é basicamente colar seu código ai e depois clicar no Export e pronto, porém vou ensinar como eu deixei o meu configurado.

 
 
3. Após isso seu código irá ficar exatamente assim:

 
Outro exemplo:

Bonito não é?
 
 
4. Na hora de exportar é só seguir:

 
Deixe o Size 4x e no Save as você baixa como PNG ou SVG.

Nesse tutorial vou explicar como manter seus direitos autoriais sempre atualizados. Eu gosto desse simples código, pois ele garante que meus sites sempre se demonstrem atualizados.
<script>document.write(new Date().getFullYear());</script> Ele funciona perfeitamente em arquivos HTML e PHP.
Um exemplo de código de HTML usado e seu resultado.
 
© Copyright 2010 - <script>document.write(new Date().getFullYear());</script>   |   Todos os Direitos Reservados <a href='https://laboratorioranieri.com.br' target='_blank'>Laboratório Ranieri</a>  |   Desenvolvido por <a href='https://pixelproject.com.br' target='_blank'>Pixel Project</a> Resultado: 

Antes de começarmos este tutorial, clique aqui para conferir como é uma imagem com efeito parallax.
Agora vamos começar.
1º – Crie a estrutura HTML
Neste exemplo faremos o efeito de parallax em uma imagem que está junto com o texto, então dentro da div onde ficará o conteúdo de sua página crie uma nova div com uma classe que será nosso parallax, neste exemplo a chamaremos de ‘parallax’ mesmo.
1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <html> <body> <div class="conteudoTuto"> <div class="parallax"></div> </div>   </body> </html> Após isso pode colocar o restante do conteúdo de sua página tranquilamente, a única div que precisávamos criar é esta.
2º – Criar o efeito com css
Após ter criado a div responsável por exibir a imagem, temos que criar o css para mostrar a mesma.
Primeiramente defina a imagem que escolheu para ser o background de nossa div, logo em seguida defina a altura que essa div terá, como nossa imagem agora é um background ela precisa ter um tamanho definido.
Agora vem o passo chave para criar o nosso efeito, adicione a propriedade ‘background-attachment’ como ‘fixed’, é aqui que a mágica acontece, a imagem ficará fica no fundo e o restante do conteúdo passará por cima dela criando nosso efeito de parallax, mas ainda não acabou, mas algumas propriedades precisam ser acrescentadas.
Agora que ela está fixa, precisamos posiciona-la e redimensiona-la para que tudo fique certo.
01 02 03 04 05 06 07 08 09 10 11 12 13 .parallax { /* Coloque a imagem a ser usada como background */ background-image: url("img/img.jpg");   /* Defina uma altura para a visão que o usuário terá da imagem */ min-height: 350px;   /* defina o background como fixo e posicione a imagem */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } Pronto, o parallax está pronto, você pode criar vários em sua página, basta atribuir uma nova imagem a uma nova classe e acrescenta-la a uma div.

Nesse tutorial irei explicar como renomear usuários existentes em seu painel CPANEL, também dou detalhes de como editar o usuário nesse artigo.
 
1. Acesse o CPANEL da sua HOSPEDAGEM.
2. Vá em MYSQL.

3. Localize o usuário desejado, na coluna AÇÕES clique em EDITAR ou RENAME.

4. Digite o nome de usuário desejado.

Caso esse banco esteja em uso, é importante atualizar também o arquivo de conexão da aplicação, no meu caso foi o Wordpress, então editei o wp_config
 
 

Se você é uma pessoa organizada como eu, e precisa renomear um banco de dados por alguma razão, esse é o procedimento.
1. Acesse o CPANEL da sua HOSPEDAGEM.
2. Vá em MYSQL.

3. Localize o banco de dados, na coluna AÇÕES clique em EDITAR ou RENAME.

4. Digite o nome desejado.

Caso esse banco esteja em uso, é importante atualizar também o arquivo de conexão da aplicação, no meu caso foi o Wordpress, então editei o wp_config.

Fiz isso para deixar mais fácil identificar qual são os bancos, ainda mais que o CPANEL não permite colocar descrição do banco de dados.

Clique aqui e veja o que vai aprender a fazer, então chega de enrolação e vamos lá.
1. Personalizar a barra de rolagem
Neste exemplo vamos alterar a largura e a altura de nossa barra de rolagem, além de trocar a cor do fundo e também da própria barra.
Confira abaixo.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 /* personalizar a barra em geral, aqui estou definindo 10px de largura para a barra vertical e 10px de altura para a barra horizontal */ ::-webkit-scrollbar { width:10px; height: 10px; }   /* aqui é para personalizar o fundo da barra, neste caso estou colocando um fundo cinza escuro*/ ::-webkit-scrollbar-track { background:#333; }   /* aqui é a alça da barra, que demonstra a altura que você está na página estou colocando uma cor azul clara nela*/ ::-webkit-scrollbar-thumb { background: #2e9dd8; } 2. Degrade na barra de rolagem
Também é possível adicionar degrade em sua barra de rolagem, para isso, ao invés de colocar uma cor chapada, basta utilizar a propriedade ‘linear-gradient’ e definir quais as cores que você deseja usar, mas tem mais uma coisinha que precisa ser alterada.
Se você apenas substituir a cor chapada pelo gradiente, a barra de rolagem terá seu degrade na vertical também sendo para barras horizontais é necessário ter um degrade na horizontal, então para isso basta dizer que para barras horizontais você deseja um novo degrade, assim como no código abaixo.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 /* degrade para a barra vertical */ ::-webkit-scrollbar-thumb { background: #2e9dd8; background: -moz-linear-gradient(top, #333333 0%, #3f69b1 25%, #2e9dd8 50%, #3f69b1 76%, #333333 100%); background: -webkit-linear-gradient(top, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); background: linear-gradient(to bottom, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 ); }   /* degrade para a barra horizontal com a direção do degrade alterada */ ::-webkit-scrollbar-thumb:horizontal { background: #2e9dd8; background: -moz-linear-gradient(left, #333333 0%, #3f69b1 25%, #2e9dd8 50%, #3f69b1 76%, #333333 100%); background: -webkit-linear-gradient(left, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); background: linear-gradient(to right, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 ); } 3. Barra de rolagem personalizada apenas em uma div em específico
Para personalizar sua barra de rolagem em determinados lugares sem mexer na barra do site em si, basta dizer qual o elemento que você quer que ela seja estilizada, confira.
  01 02 03 04 05 06 07 08 09 10 11 12 .scroll::-webkit-scrollbar { width:10px; height: 10px; }   .scroll::-webkit-scrollbar-track { background:#333; }   .scroll::-webkit-scrollbar-thumb { background: #2e9dd8; } Bom é isso, é assim que se personaliza a barra de rolagem, simples, não é?
Espero que tenham gostado, até a próxima.

Se você precisa inserir um vídeo que inicie automaticamente dentro de um site, é bem simples.
Basta você inserir esse código no final do endereço do seu vídeo.
?rel=0&arp;autoplay=1 Por exemplo, imagine que você use um tema do SHOPIFY ou WORDPRESS que exige apenas o LINK do vídeo, basta colocar o endereço e no final do endereço do vídeo usar esse SUFIXO.
Fiz isso no site MIMMIC.COM e deu certo - Aperte PLAY dentro no SLIDE.
O endereço ficaria assim:
https://www.youtube.com/watch?v=XApsDE_LMxw?rel=0&arp;autoplay=1 Fácil né?

Nesse tutorial irei explicar como atualizar um APP instalado em seu fórum IPS, o processo é bem similar para instalar um novo APP, conforme esse tutorial.
Vá em System > Site Features > Applications
Localize o APP que deseja atualizar e clique em Update Avaliable!
Você será direcionado para o site da IPS, faça o download do mesmo. Só vai estar disponível o download se sua licença do app estiver renovada.
Agora, voltando para o IPS, clique em UPLOAD A NEW VERSION.
Selecione o arquivo que fez o download e clique em INSTALAR. Ele deve ser .TAR
Provavelmente seu fórum vai ficar em modo de atualização, calma que faz parte. Após 1 minuto estava pronto.
É isso aí, espero ter ajudado vocês. Graças a essa atualização eu corrigi um bug no meu ADMINCP. Agora o fórum tá cremoso.