Title: Custom CSS Formatting
Last modified: June 20, 2024

---

# Custom CSS Formatting

 *  Resolved [sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/)
 * (@sebastianpetrovski)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/)
 * Hi,
 * There’s a bug where the formatting on Custom CSS is lost sometimes and instead
   is relgated to one long line with word-wrap.

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

 *  [Kris – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport13/)
 * (@wpmudevsupport13)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/#post-17840653)
 * Hi [@sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/)
 * I hope you are doing well today.
 * We do not have any current reports in that matter. Can you let us know in your
   next reply in which Hustle module this exists? Also please share with us your
   custom CSS code so that we can replicate this on our side.
 * Kind Regards,
   Kris
 *  Plugin Support [Dmytro – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport16/)
 * (@wpmudevsupport16)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/#post-17859007)
 * Hello [@sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/),
 * I hope you are doing great today!
 * As there has been no reply from you for a while, I will be marking this thread
   as resolved. Please let us know if need further assistnace.
 * Best Regards,
    Dmytro
 *  Thread Starter [sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/)
 * (@sebastianpetrovski)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/#post-17873890)
 * Hello,
 * Sorry for the late reply!
 * This is happening in the Pop-Up module.
 * Here is the css:
   .hustle-layout .hustle-title { font-size: 48px; text-align: 
   center; margin-bottom: 25px; } .hustle-layout .hustle-subtitle { font-size: 32px;
   font-family: terminal, monaco, monospace; font-weight: bold; text-align: center;
   color: black; text-shadow: 0px 1px 0px black, 0px -1px 0px white, -1px 0px 2px#
   aaaaaa, 1px 0px 2px #aaaaaa, 0px 1px 2px #aaaaaa, 0px -1px 2px #aaaaaa; margin:
   10px; } .hustle-layout .hustle-layout-body .hustle-layout-form .hustle-input {
   border: 0px white solid; box-shadow: 0 0 10px 0px white; position: relative; 
   font-size: 16px; font-family: arial; font-weight: normal; text-align: center;
   color: #000000; margin-bottom: 20px; } .hustle-input-label span { font-size: 
   16px; font-family: arial; font-weight: normal; text-align: center; color: black;}.
   hustle-button-text { font-size: 18px; font-family: terminal, monaco, monospace;
   font-weight: normal; text-align: center; } .hustle-error-message { border-radius:
   100px; display: none; } .hustle-layout .hustle-error-message p { font-size: 18px;
   font-family: terminal, monaco, monospace; font-weight: normal; text-align: center;}.
   hustle-image { margin-bottom: 15px; } .hustle-checkbox.hustle-gdpr { align-items:
   center; flex-direction: column; width: 100%; padding-top: 10px; } .hustle-checkbox.
   hustle-gdpr span { color: black; border-color: black; background-color: cyan;
   border-radius: 15px; margin-top: 10px; } .hustle-group-content a { background:
   white; padding: 2px 5px; border-radius: 25px; } [@media](https://wordpress.org/support/users/media/)(
   max-width: 600px) { .hustle-layout .hustle-layout-body .hustle-layout-form .hustle-
   input { font-size: 16px; font-family: arial; font-weight: normal; text-align:
   center; color: #000000; margin-bottom: 10px; } } [@media](https://wordpress.org/support/users/media/)(
   max-width: 600px) { .hustle-layout .hustle-subtitle { font-size: 18px; font-family:
   terminal, monaco, monospace; font-weight: bold; text-align: center; color: black;
   text-shadow: 0px 1px 0px black, 0px -1px 0px white, -1px 0px 2px #aaaaaa, 1px
   0px 2px #aaaaaa, 0px 1px 2px #aaaaaa, 0px -1px 2px #aaaaaa; } }
 *  Thread Starter [sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/)
 * (@sebastianpetrovski)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/#post-17876162)
 * I’m really stuck on something related to this…
   I can’t figure out why the “Enter
   Email Address” and “Mobile (optional)” fields don’t have the same border and 
   box shadow properties as the other input fields. Can you spot why?I’ve pasted
   the formatted css below the image, courtesy of chatGPT – hopefully it didn’t 
   make any mistakes while formatting – I’ve found it does sometimes.
 * ![](https://i0.wp.com/i.imgur.com/BY0PQZy.png?ssl=1)
 *     ```wp-block-code
       .hustle-layout .hustle-title {font-size: 48px;text-align: center;margin-bottom: 25px;}.hustle-layout .hustle-subtitle {font-size: 32px;font-family: terminal, monaco, monospace;font-weight: bold;text-align: center;color: black;text-shadow: 0px 1px 0px black, 0px -1px 0px white,-1px 0px 2px #aaaaaa, 1px 0px 2px #aaaaaa,0px 1px 2px #aaaaaa, 0px -1px 2px #aaaaaa;margin: 10px;}.hustle-layout .hustle-layout-body .hustle-layout-form .hustle-input {border: 0px white solid;box-shadow: 0 0 10px 0px white;position: relative;font-size: 16px;font-family: arial;font-weight: normal;text-align: center;color: #000000;margin-bottom: 20px;}.hustle-input-label span {font-size: 16px;font-family: arial;font-weight: normal;text-align: center;color: black;}.hustle-button-text {font-size: 18px;font-family: terminal, monaco, monospace;font-weight: normal;text-align: center;}.hustle-error-message {border-radius: 100px;display: none;}.hustle-layout .hustle-error-message p {font-size: 18px;font-family: terminal, monaco, monospace;font-weight: normal;text-align: center;}.hustle-image {margin-bottom: 15px;}.hustle-checkbox.hustle-gdpr {align-items: center;flex-direction: column;width: 100%;padding-top: 10px;}.hustle-checkbox.hustle-gdpr span {color: black;border-color: black;background-color: cyan;border-radius: 15px;margin-top: 10px;}.hustle-group-content a {background: white;padding: 2px 5px;border-radius: 25px;}@media (max-width: 600px) {.hustle-layout .hustle-layout-body .hustle-layout-form .hustle-input {font-size: 16px;font-family: arial;font-weight: normal;text-align: center;color: #000000;margin-bottom: 10px;}}@media (max-width: 600px) {.hustle-layout .hustle-subtitle {font-size: 18px;font-family: terminal, monaco, monospace;font-weight: bold;text-align: center;color: black;text-shadow: 0px 1px 0px black, 0px -1px 0px white,-1px 0px 2px #aaaaaa, 1px 0px 2px #aaaaaa,0px 1px 2px #aaaaaa, 0px -1px 2px #aaaaaa;}}
       ```
   
 *  Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/#post-17877940)
 * Hi [@sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/)
 * Thanks for response!
 * However, could you also share export of your popup in question?
 * To do that:
    – go to the “Hustle -> Pop-ups” page – click on a little “gear” 
   icon next to that popup – select “Export” option – download provided export file–
   put that file on your Google Drive, Dropbox or similar account – and in response
   below include direct link (with permission like “Everyone with a link can view…”
   set) to it
 * This way we’ll be able to import that popup to the test setup with all its current
   settings and test that CSS with is to see what’s happening.
 * Kind regards,
    Adam
 *  Thread Starter [sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/)
 * (@sebastianpetrovski)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/#post-17878504)
 * Hello,
 * Thanks for your reply
 * Here is the export: [https://drive.google.com/file/d/1YgdSeyYO5owxRl7UlnONwCfmw36ZjN2e/view?usp=sharing](https://drive.google.com/file/d/1YgdSeyYO5owxRl7UlnONwCfmw36ZjN2e/view?usp=sharing)
 * Please let me know how you go.
 * Best,
 * Sebastian
 *  Plugin Support [Nithin – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport11/)
 * (@wpmudevsupport11)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/#post-17883059)
 * Hi [@sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/),
 * I’m afraid, we’ll need a bit more information regarding the issues noticed, at
   the moment when I check the given popup export it appears the “Enter Email Address”
   and “Mobile (optional)” fields have the same border and box-shadow properties.
 * Is the current issue specific with applying custom CSS or with formatting? At
   the moment, the popup seems to be load fine when checked.
 * > There’s a bug where the formatting on Custom CSS is lost sometimes and instead
   > is relgated to one long line with word-wrap.
 * Do you have any test site where you still notice issues regarding this? If yes,
   possible to check how it behaves how it loads if you temporarily switch to a 
   default WP theme and with only Hustle enabled?
 * If the issue is still the same even after that then please do share the page 
   URL if possible to test site where we could check further if needed.
 * Looking forward to your response.
 * Kind Regards,
 * Nithin
 *  Thread Starter [sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/)
 * (@sebastianpetrovski)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/#post-17886398)
 * Hello,
 * Sorry to waste your time on this; Your suspecion was right!
 * I didn’t think to check “computed” in the inspector until today.
 * I found the issue; my wordpress theme has the below code baked into it’s css –
   not sure why the developer opted for that.
 *     ```wp-block-code
       input[type=text],input[type=number],input[type=email],input[type=tel],textarea {  /* Remove First */  -webkit-appearance: none !important;  -moz-appearance: none !important;  appearance: none !important;  box-shadow: none !important;}
       ```
   
 * I was able to override it by marking the custom css in hustle with !important–
   I guess it works because hustle css is being read after theme css – pretty dirty
   fix, but it works!
   Based on this the single line css issue is probably to do 
   with my theme as well. It’s not a big deal, I get chatgpt to reformat it after
   it happens.

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

The topic ‘Custom CSS Formatting’ is closed to new replies.

 * ![](https://ps.w.org/wordpress-popup/assets/icon-256x256.gif?rev=3446944)
 * [Hustle - Email Marketing, Lead Generation, Optins, Popups](https://wordpress.org/plugins/wordpress-popup/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wordpress-popup/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wordpress-popup/)
 * [Active Topics](https://wordpress.org/support/plugin/wordpress-popup/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wordpress-popup/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wordpress-popup/reviews/)

 * 8 replies
 * 5 participants
 * Last reply from: [sebastianpetrovski](https://wordpress.org/support/users/sebastianpetrovski/)
 * Last activity: [1 year, 11 months ago](https://wordpress.org/support/topic/custom-css-formatting/#post-17886398)
 * Status: resolved