Переносы строк и слов html css

Не переноить слова на нову строчку: white-space: nowrap; Не разделять слова а переносить целиком: -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; Перенос слова без тире: word-wrap: break-word; Не переносить слово которое не умещается частично: word-wrap: normal;    

Основные коды WordPress для верстки шаблонов

Основные коды которые покрывают 90% потребностей при создании шаблона wordpress. Подключение своего файла .js В functions.php: add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ ); function my_scripts_method() { wp_enqueue_script( ‘my-script’, get_stylesheet_directory_uri() . ‘/script.js’, array(‘jquery’),»,true ); } Не забываем: array(‘jquery’) — зависимость, после чего подключать скрипт. ‘my-script’ — уникальное имя скрипта (если подрубаем несколько). Ссылка на главную (для логотипов и т.д.) … Читать далее

Чекбокс cf7 согласен с правилами

.wpcf7-form .wpcf7-acceptance label {font-weight: 500; font-size: 10px; line-height: 16px; margin: 0px; } .wpcf7-form input[type=checkbox] {display: none;} .wpcf7-form .wpcf7-list-item-label {margin: 10px 0 0 0px; display: block; padding-left: 24px; position: relative;} .wpcf7-form .wpcf7-list-item-label:before { background-color: #181C22; border-radius: 3px; border: 0px; width: 18px; height: 18px; content: »; display: block; position: absolute; left: 0; top: 2px; } .wpcf7-form input[type=checkbox]:checked … Читать далее

Как изменить css input type file и подсвечивать если выбран файл

Что бы стилизовать input file можно оформить его так: <div class=»fileup»> <label for=»file-1″> <span class=»wpcf7-form-control-wrap file-1″> <input type=»file» name=»file-1″ size=»40″ class=»wpcf7-form-control wpcf7-file» id=»file-1″ accept=».jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv» aria-invalid=»false»> </span> </label> </div> В плагине для вордпресс contact form 7 в редакторе выглядит примерно так: <div class=»fileup»> <label for=»file-1″> [file file-1] </label> </div>   Скрипт добавляет класс для input file … Читать далее

Как изменить или убрать иконку у input type date

В хроме, и в некоторых других браузерах для поля input type date добавляется стандартная иконка черного цвета в виде календарика. Что бы убрать её или изменить пользуем такой псевдоселектор: /*Так можно перекрасить*/ ::-webkit-calendar-picker-indicator { filter: invert(1); } /*А так убрать*/ input[type=date]::-webkit-calendar-picker-indicator { opacity: 0; }  

Как подключить локальные шрифты на сайт

В последнее время чаще всего использую ttf шрифты, подключаются следующим образом: @font-face { font-family: «Circe»; src: url(«fonts/circe-light.ttf») format(«truetype»); font-weight: 300; font-style: normal; } @font-face { font-family: «Circe»; src: url(«fonts/circe-bold.ttf») format(«truetype»); font-weight: 400; font-style: normal; } @font-face { font-family: «Circe»; src: url(«fonts/circe-extrabold.ttf») format(«truetype»); font-weight: 700; font-style: normal; } Сами файлы шрифтов должны лежать в папке fonts. … Читать далее

Как заменить домен в mysql wordpress

Поиск и замена по базе домена при переезде или смене урл сайта. Что бы заменить домен в mysql нужно выполнить такой запрос: UPDATE PREFIX_options SET option_value = REPLACE(option_value, ‘https://oldsite.ru’, ‘http://novyisait.ru’) WHERE option_name = ‘home’ OR option_name = ‘siteurl’; UPDATE PREFIX_posts SET post_content = REPLACE (post_content, ‘https://oldsite.ru’, ‘http://novyisait.ru’); UPDATE PREFIX_postmeta SET meta_value = REPLACE (meta_value, ‘https://oldsite.ru’,’http://novyisait.ru’); … Читать далее

Woocommerce вкладки товара по горизонтали

Использую тему storefront, там по умолчанию вертикальные вкладки, вот код css делающий их горизонтальными. .product .woocommerce-tabs ul.tabs { width: 100%; float: none; margin-right: 5.8823529412%; border: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; padding: 0 0 0 1em; margin: 0 0 1.618em; overflow: hidden; position: relative; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { position: absolute; … Читать далее

Как отключить создание копий изображений wordress и удалить лишние фото

По умолчанию wordpress создает много копий загружаемой картинки, плюс плагины, темы. Обычно используется 2-3 размера, остальные просто занимают место на хостинге. Узнать какие размеры создаются можно посмотрев в папку uploads, но удобнее воспользоваться плагином regenerate thumbnail, тем более он пригодится для пересоздания картинок. На странице плагина: Добавляем следующий код в functions.php add_filter( ‘intermediate_image_sizes’, ‘towp_delete_image_sizes’ ); … Читать далее

Проблема широких таблиц и адаптива

Что бы обернуть тэгом таблицы добавляем следующий код add_filter(‘the_content’, ‘table_replace’); function table_replace ($content) { global $post; $pattern = «!<table(.*?)<\/table>!si»; $replacement = ‘<div class=»table_container»>\\0</div>’; $content = preg_replace($pattern, $replacement, $content); return $content; } А в стили правило для контейнера: .text .table_container {       overflow-x: auto;     }