Popup Redesign

  • Resolved vvalisoy

    (@vvalisoy)


    1 year, 1 month ago

    How can i redesign Translatepress popup using CSS? I added CSS code below to wordpress Additional CSS section still didnt work:

    /* Popup Background / .qtranxs-available-languages-container { background-color: #f5f8fc; padding: 16px; / Increase padding for mobile */
    }

    /* Popup Text / .qtranxs-available-languages-container p, .qtranxs-available-languages-container a { color: #0D479B; font-family: 'Poppins', sans-serif; font-size: 14px; / Decrease font size for mobile */
    }

    /* Popup Hover */
    .qtranxs-available-languages-container a:hover {
    color: #013580;
    }

    /* Popup Buttons / .qtranxs-available-languages-container button { background-color: #0D479B; color: #fff; font-family: 'Poppins', sans-serif; padding: 8px 16px; border-radius: 4px; transition: background-color 0.3s ease; font-size: 14px; / Decrease font size for mobile / display: block; / Stack buttons vertically on mobile / width: 100%; / Full width on mobile / margin-top: 8px; / Add spacing between buttons on mobile */
    }

    .qtranxs-available-languages-container button:hover {
    background-color: #013580;
    }

    /* Media Query for Mobile / @media (max-width: 767px) { .qtranxs-available-languages-container { padding: 12px; / Decrease padding for mobile */
    }

    .qtranxs-available-languages-container p,
    .qtranxs-available-languages-container a {
    font-size: 12px; /* Decrease font size further for mobile */
    }

    .qtranxs-available-languages-container button {
    font-size: 12px; /* Decrease button font size for mobile */
    }
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter vvalisoy

    (@vvalisoy)

    1 year, 1 month ago

    Also this CSS didn’t work as well:

    /* General popup container / .tp-popup { background-color: #ffffff; / Matches website background color / border: 1px solid #e0e0e0; / Subtle light border / border-radius: 8px; / Rounded corners / box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); / Soft shadow / padding: 20px; font-family: 'Poppins', sans-serif; / Website font / color: #0D479B; / Primary text color / text-align: center; / Center alignment */
    }

    /* Language dropdown / .tp-popup select { font-size: 14px; / Adjust for readability / padding: 10px; border: 1px solid #cccccc; / Border styling / border-radius: 4px; background-color: #f9f9f9; / Light background / color: #0D479B; / Dropdown text color / font-family: 'Poppins', sans-serif; / Font match */
    }

    /* Change language button / .tp-popup button { background-color: #0D479B; / Primary button color / color: #ffffff; / Button text color / font-size: 14px; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-family: 'Poppins', sans-serif; / Font match */
    transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .tp-popup button:hover {
    background-color: #013580; /* Darker hover color / transform: scale(1.05); / Slight hover zoom */
    }

    /* Close button / .tp-popup-close { background-color: transparent; color: #0D479B; / Matches site text color */
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
    }

    .tp-popup-close:hover {
    color: #013580; /* Hover color */
    }

    /* Text and alignment / .tp-popup h2, .tp-popup p { margin: 0; padding: 0; font-size: 16px; / Adjust font size / line-height: 1.5; color: #0D479B; / Matches site color / font-family: 'Poppins', sans-serif; / Font match */
    }

    /* Popup alignment / .tp-popup { text-align: center; / Center all content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

    /* Adjust mobile responsiveness / @media (max-width: 768px) { .tp-popup { width: 90%; / Adjust popup width on smaller screens */
    padding: 15px;
    }
    }
    Plugin Author Cristian Antohe

    (@sareiodata)

    1 year ago

    Hello,

    qtranxs-available-languages-container is not a TranslatePress css class, it’s most likely from another plugin.

    The only popup TranslatePress has, is for suggesting a user language based on browser language or IP.
    This particular feature is only available in the Paid version and according to the WordPress.org forum guidelines, we are not allowed to discuss paid features on the forums.

    Please contact us directly via the translatepress.com website. I’m sorry we could be more helpful here.

    Best Regards,

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

The topic ‘Popup Redesign’ is closed to new replies.