Custom CSS Formatting

Hi @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

Hello @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

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 (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; } }

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.

.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;
}
}

Hi @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

Hello,

Thanks for your reply

Here is the export: https://drive.google.com/file/d/1YgdSeyYO5owxRl7UlnONwCfmw36ZjN2e/view?usp=sharing

Please let me know how you go.

Best,

Sebastian

Hi @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

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.

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.