Как отрегулировать ширину текста и поместить его в центр пост-визуального редактора? - PullRequest
Новая
       26

Как отрегулировать ширину текста и поместить его в центр пост-визуального редактора?

1 голос
/ 22 мая 2019

Редактировать 3 : Я думаю, это решено.Я только что включил редактор Гутенберга и обнаружил его «Классический редактор», редактор кода.Единственное, к чему я должен привыкнуть, это высота строки редактора, которую я не могу легко изменить, что неплохо.Это работает для меня, и это перевешивает необходимость изменить functions.php или другие сложные вещи, как это (для меня).Спасибо.

[Отказ от ответственности: я не являюсь разработчиком, но хочу потратить время.(Может сделать немного CSS.) Также, новичок в этом форуме.]

Я использую тему Андерса Норена Хемингуэя.

Я еще не пробовал создавать дочерние темы, и я 'Я не уверен, требуется ли для этого решение.

Короче говоря, моя цель - сделать всю веб-страницу «Редактировать сообщение» похожей на автономный текстовый процессор:

  1. СделатьВизуальный редактор занимает весь экран.(Я использую классический редактор.) (Готово: свернуто вертикальное меню с левой стороны, выбран макет из 1 столбца и отключен «редактор полной высоты и функция без отвлечения».)
  2. Установить ширину длятекст (потому что в настоящее время текст почти от края до края экрана)
  3. Поместите текст в центр (но «выровненный по левому краю», а не «выровненный»).Это для «левого и правого полей» в редакторе сообщений.

It now looks like this.

Как мне сделать # 2 и # 3?

Спасибо.

Редактировать: Просто чтобы уточнить: я хочу изменить внешний вид визуального редактора - только визуальный редактор, а не какой-либо вывод, который показывал бы живой сайт.

Редактировать 2:

Я могу повторить то, что показал Балаш Варга, но (извините, я должен был сказать это раньше), это не работает после сохранения кода на «Дополнительный CSS».(И после очистки всех кешей.) Я использовал id #tinymce.

Мой браузер (Firefox Developer) показывает изменения в режиме реального времени, пока я работаю с Инспектором, но не после того, как сохраню дополнительный CSS.Я думаю, это странно, и я вполне могу справиться с CSS: тема Hemingway на моем сайте больше не похожа на оригинальную Hemingway, но все изменения были сделаны только с помощью дополнительного CSS.

Поиск вGoogle показал мне, что мне может понадобиться отредактировать «functions.php» (?), Но я не знаю, как это работает сейчас, и я подумал, что может быть другой способ в 2019 году. Я избегаю редактировать «сложные» вещи, подобные этому(для меня), если Wordpress не мешает мне ломать вещи, как, например, с помощью «Дополнительного CSS».

В Инспекторе я могу решить это следующим образом: 

#tinymce {
    margin-left: 300px;
    margin-right: 300px;
}

Интересно, почему это уже не «особенность» визуального редактора.Было бы очень приятно.Это может устранить необходимость в текстовых редакторах или сторонних редакторах (по крайней мере для таких авторов, как я).

1 Ответ

0 голосов
/ 22 мая 2019

Вы можете проверить элемент в своем браузере, чтобы увидеть, что это iframe tinymce с идентификатором content_ifr.

Если вы хотите установить ширину в пикселях, вы можете сделать: 

#content_ifr {
    position: relative;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 0);
}

left:50% вместе с position:relative сдвинет элемент к центру по горизонтали. Однако он будет сдвигать левую сторону к центру, поэтому вам также потребуется горизонтальное значение transform, установленное на -50%, чтобы оно вернулось в правильное положение (поскольку проценты в преобразованиях считаются с размера самого элемента, а не от его родителя, как left делает)

Вы должны увидеть что-то вроде этого: enter image description here

Если вы хотите установить ширину в процентах, вы можете просто применить margin-left для центрирования элемента: 

#content_ifr {
    width: 80%;
    margin-left: 10%; // set this value to: (100 - width) / 2
}

EDIT

Вы также можете отредактировать functions.php, чтобы добавить свои стили к странице, например, в области заголовка с помощью хука admin_head: 

function hook_css() {
?>
    <style>
    #content_ifr {
        position: relative;
        max-width: 600px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    </style>
<?php
}
add_action('admin_head', 'hook_css');
...