My Customizing destroys Visual Editor

  • Hi,

    anyhow I managed it to destroy the Visual Editor in WordPress Backend by customizing the CSS in the Theme/Adjust/Stylesheets.

    The Behaviour of the Visual Editor is now, that for every <p> it is Visualizing an Table Column – Text & installed HTML Editor are working fine. Also the Published Content is not organized in Columns.

    I have no Idea what does this – do you have any clue? Following you can find my CSS Adjustments:

    /* Aktion beim Hovern von Links*/
    a:hover {
    color: #E1007A !important;
    font-weight: bold;
    }
    .banner nav , .banner nav a:focus{
    color: #E1007a !important;
    }
    .sd-social-icon-text .sd-content ul li a.sd-button:hover{
    border: 1px solid #E1007A !important;
    }
    .logo2 {
    height: 20% !important;
    width: 12% !important;
    margin-right: 1%;
    }
    .search button {
    background-color: #E1007A;
    color: white;
    font-weight: bold;
    text-align: center;
    }
    .post-content a {
    color: #E1007A;
    }
    .banner img {
    height: 100%;
    width: 30%;
    margin-left: 2%;
    margin-top: 2%
    }
    .widget {
    margin-bottom: 25px;
    margin-top: 25px;
    border-bottom: solid #DADADA;
    border-bottom-width: 1px
    }
    .wrapper a[rel=”bookmark”] {
    color: #7C7C7C;
    }
    .widget h1 a{
    color: #E1007A;
    }
    .post h1 {
    color: #E1007A
    }
    aside h1{
    color: #E1007A;
    }
    .cat-item, .menu {
    list-style-image: url(‘https://zensiert/wp-content/uploads/2015/06/Logo-e1434532219800.png&#8217;);
    margin-bottom: 3%;
    }
    .menu-item-167 {
    margin-left: 0%;
    }
    .menu-item {
    margin-right: 0%;
    font-weight: bold;
    }
    td {
    border: none;
    vertical-align: top
    }
    /*
    main{
    box-shadow: 0px 0px 1rem rgba(0,0,0,0.2);
    margin-left: 3%;
    }*/
    .textwidget {
    font-size: 80%
    }
    .banner nav {
    background-color:#FFFFFF;
    margin-left: 18%;
    margin-right: 15%;
    }
    .banner ul ul {
    background-color:#FFFFFF;
    }
    .banner li.current-menu-ancestor > a{
    background-color: #E1007A;
    color: #FFF;
    font-weight: bold;
    }
    .banner h1{
    margin-top: 1%;
    }
    .wrapper {
    margin-left: 5%;
    margin-right: 5%;
    box-shadow: 0px 0px 5rem #E1007A;
    }
    /* Verstecken des Autors von Beitr?gen */
    [rel=”author”] {
    display: none;
    }
    /* Anpassungen für das Beitragserstellungsdatum */
    time {
    color: #555;
    }
    /* Farbverlauf für die Menüs
    .banner nav {
    background: transparent linear-gradient(to bottom, #DADADA 0%, #EEE 100%) repeat scroll 0% 0%;
    }
    .banner ul ul {
    background: transparent linear-gradient(to bottom, #DDD 0%, #EEE 100%) repeat scroll 0% 0%;
    }*/
    /* Anpassen der Seitenleisten an die Seitenl?nge. Kompatibilit?tseintrag für Internet Explorer*/
    .content {
    display: flex;
    display: -ms-flexbox;
    }
    /* Hintergrundfarbe der Seitenleisten */
    .sidebar1 {
    background-color: #FFF;
    border-right: solid #DADADA;
    border-right-width: 1px;
    margin-top: 10px;
    }
    .sidebar2 {
    background-color: #FFF;
    border-left: solid #DADADA;
    border-left-width: 1px;
    margin-top: 10px;
    }
    .content {
    border-top: solid #DADADA;
    border-top-width: 10px;
    }
    /* Anpassungen am Footer */
    .contentinfo {
    background-color: #FFF;
    }
    .contentinfo {
    color: #000
    }
    /* Zur Zeit nicht genutzte Anpassungen
    .banner p {
    background-color: #C1C1C1;
    }
    .banner h1 {
    background-color: #C1C1C1;
    }
    */

Viewing 4 replies - 1 through 4 (of 4 total)

  • I am having the same issue with the Visual Editor no longer working after making customizations via Appearance / Customize. Paragraphs do not appear in the Visual Editor, but do appear in the Text editor. Has anyone had any experience fixing this? Thanks.

    Ditto, although the editor is working but the right margin in set to about half the width of the edit area. I did a cursory exploration of the editor related source but nothing jumped out at me so I thought I would just ask. I have customized twentyfourteen but I am not using a child theme approach. Instead I am using the Custom css-js-php plugin. I do intend to move the changes into a child theme later. One thing I do find interesting is that the editor seems to be set for the 673px width set by one of the theme’s @media directives.

    Ok, I finally turned off all my custom css (easy to do with the css-js-php plugin) and that didn’t fix the problem. What it did do, however, was suggest something. I noticed that the original 2014 theme had a narrow, centered text column that looked suspiciously the same as the column in the editor. Given that insight, I changed the wording of my googling and, lo and behold, I found the answer to my problem in Why is the visual editor in WordPress limiting the width by wrapping the content?

    To put it in a nutshell, there is a file called editor-style.css that contains a width specification for the editor. I changed it from width: 474px; (or there abouts) to width: 98%; and I was a happy camper.

    I found a possible solution: https://github.com/mgsisk/inkblot/issues/51
    I had the same problem , the visual post editor did not work

    Thanks for the report @smazat… I’m not sure what it is right now, but Inkblot’s editor stylesheet seems to be the issue.

    As a temporary fix: commenting out line 174 in /inkblot/functions.php – add_editor_style(get_stylesheet_uri()); – will correct the issue.

    I’ll probably submit a theme update this weekend, but – because of how Theme Review works – it’s hard to say when it will actually be available through the theme directory. =/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘My Customizing destroys Visual Editor’ is closed to new replies.