WordPress.org

Forums

Customizr
[resolved] Every time I edit custom CSS the customizr configuration is completely lost (5 posts)

  1. Pat Garner
    Member
    Posted 1 year ago #

    Every time I change the custom CSS field in the Customize Customizr screen the entire customizr configuration is lost. Here are a few entries I've made:

    body{
    background: #d7e3bf;
    }
    header.tc-header {
    background: none;
    }
    .round-div {
    border: 104px solid #d7e3bf;
    }
    @media (max-width: 976px) {
      .round-div {
          border: 94px solid white;
      }
    }
    .page h1.format-icon:before {
    content: "🍂"
    }

    Each time I add a line to the custom CSS and click "Save and Publish" the entire configuration disappears e.g.

    1. My slider completely disappears from the system.
    2. My chosen skin selection reverts back to the default blue.
    3. My uploaded logo selection is gone (but the logo still remains in Media).
    4. etc. etc.
    5. The Site Title and Tagline remain intact, however.

    On my slider images in the Media library,

    Add to a slider (create one if needed)

    is still set to Yes. However, because there is no slider in the system in the Choose Slider section a message says, "You haven't create any slider yet. Write a slider name and click on the button to add you first slider."

    So some, but not all of the Customizr settings vanish. Please tell me what I have to do to make this stop happening.

  2. Pat Garner
    Member
    Posted 1 year ago #

    I think I know what causes the problem. When I first enter the following CSS it works fine. I had to use HTML entity reference because it's the only way I could get the fallen leaf icon to display. Note: for this post I had to put a space between & # so that the fallen leaf icon would not be displayed:

    .page h1.format-icon:before {
    content: "& #127810;"
    }

    But later, when I refresh the Custom Customizr web screen I notice that the entity reference has changed to the UTF-8 Unicode Character 'FALLEN LEAF':

    .page h1.format-icon:before {
    content: "🍂"
    }

    The HTML entity encoding, & #127810;, is replaced by the UTF-8 Unicode Character, 🍂, and when I click Save & Publish an error occurs and my Customizr configuration is lost. Customizr does not like UTF-8.

    The reason I used the HTML entity was because the ASCII did not work:

    .page h1.format-icon:before {
    content:   '\1F342';
    }

    and neither did the following, which displayed "1F342" on the web page in place of the icon:

    .page h1.format-icon:before {
    content: "\1F342"
    }

    So the HTML entity works properly until I attempt to edit Custom Customizr CSS settings. Also, none works as it should:

    .page h1.format-icon:before {
    content:  none;
    }

    So I know the selector is correct. Why is the ASCII not working for me? I would use it in lieu of HTML entity if it would work.

  3. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    Hi @Pat, for the ASCII to work in the custom CSS, just escape it as follow :

    .page h1.format-icon:before {
    content:   '\\1F342';
    }

    That should to the trick.
    Looking forward to reading your feedback on this.

  4. Pat Garner
    Member
    Posted 1 year ago #

    Hi @nikeo, your example, with the single quotes, did not work. However, the following, using double quotes, does work:

    .page h1.format-icon:before {
    content:   "\\1F342";
    }

    The fallen leaf now displays. Thanks for your help!

  5. Pat Garner
    Member
    Posted 1 year ago #

    Whoops, forgot to mark this as resolved.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic