CSS Override #

Added Version – V1.0.3 define(‘RUP_RS4F_CUSTOMSTYLES’, true);

It is possible to use your own CSS on Response for SureForms without the need for !important tags and this is by completely removing the CSS and replacing it with your own stylesheet you can do this by defining a variable called “RUP_RS4F_CUSTOMSTYLES”

The CSS is conditionally loaded if “RUP_RS4F_CUSTOMSTYLES” doesn’t exist and as such allows for total replacement

CSS as of V1.0.3 #

/* Custom response styling */
.responsefsf-response {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin-top: 20px;
    padding: 20px;  /* Ensure the padding matches form size */
    width: 100%; /* Make the response full width */
    max-width: 100%;
    box-sizing: border-box;
    margin: auto;
}

.responsefsf-response .response-body {
    border-radius: 8px;
    padding: 16px; /* Increase padding for better spacing */
    background: var(--srfm-color-input-background-hover);
    border: 1px solid var(--srfm-color-input-border-disabled);
    font-size: var(--srfm-label-font-size);
    font-weight: var(--srfm-label-font-weight);
    line-height: var(--srfm-label-line-height);
}

.responsefsf-response .response-link {
    text-decoration: none;
    color: var(--srfm-color-input-link);
    font-weight: 600;
    align-self: center;
}

.responsefsf-response .response-image {
    border-radius: 8px;
    padding: 16px; /* Increase padding for better spacing */
    /*background: var(--srfm-color-input-background-hover);*/
    border: 1px solid var(--srfm-color-input-border-disabled);

    /* Add these properties for centering */
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
}


/* Smaller copy button */
.copy-button {
    cursor: pointer;
    padding: 6px 12px; /* Adjust padding to make the button smaller */
    background: #fff;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--srfm-color-input-text);
    border: 0.5px solid var(--srfm-color-input-border);
    border-radius: 4px;
    display: inline-flex; /* Use inline-flex to ensure it's just wide enough for content */
    align-items: center;
    justify-content: center;
    gap: 4px; /* Adjust gap between SVG and text */
    width: auto;  /* Auto width to fit content */
    min-width: 80px;  /* Min-width to avoid button shrinking too much */
    max-width: 80px;  /* Set a max-width to prevent button from expanding too far */
    text-align: center; /* Ensure the text is centered */
    align-self: center;
}

/* Ensure the SVG icon and text are centered vertically */
.copy-button svg {
    vertical-align: middle; /* Keep the icon aligned with the text */
}


/* Hide srfm-branding with !important */
.srfm-branding {
    display: none !important;
}

.polling-error-message {
    border-radius: 8px;
    padding: 16px; /* Increase padding for better spacing */
    background: var(--srfm-color-input-background-hover);
    border: 1px solid var(--srfm-color-input-border-disabled);
    font-size: var(--srfm-label-font-size);
    font-weight: var(--srfm-label-font-weight);
    line-height: var(--srfm-label-line-height);
    color: red;
}