Created custom css style upload #485

milospp · 2025-01-16T15:13:14Z

VIVO GitHub issue
Linked Vivo PR

What does this pull request do?

This pull request enables administrators to manage custom CSS styles directly from the Site Admin page. Admins can upload, download, and remove custom CSS styles, as well as reset styles to ensure accessibility and functionality remain intact.

What's new?

Added a new page for managing custom CSS styles under Site Admin > Site Information.
Features include:
- Upload custom CSS files to override existing styles.
- Download current custom CSS.
- Remove custom CSS to revert to the default styles.
Added download links for CSS files used in the current theme.
Created a Reset button that remains visible and functional, even when styles are broken due to invalid or problematic CSS.

Additional Notes

This PR introduces ReferrerHelper.java
This util class easily retrieves the previous page from the request and uses it for the back button.
The traditional approach for handling the back button was to always navigate to the document.referrer or previously visited page. However, this strategy breaks when dealing with nested navigation flows.
Home -> Page 2 -> Page 3
when the user is on Page 3 and clicks the back button, they are correctly taken back to Page 2. But at that point, the referrer becomes Page 3 again. So if the user clicks back on Page 2, they are taken to Page 3—creating an infinite loop between Page 2 and Page 3.

This ReferrerHelper class mitigates the problem by preventing the referrer from being overwritten in such nested navigation flows.

Screenshoots

Style edit page

Example css

body {
    background: #333;
}

Broken contrast css (RESET button is still visible)

How should this be tested?

Test for every theme

Uploading regular CSS

Login as an admin.
Navigate to Site Admin > Site Information > Change CSS Styles.
Test downloading the default styles.
Upload a custom CSS file with the following content

body {
    background: red;
}

Clikc upload
Expected Result: The site background should change to red.

Download Custom CSS

After uploading custom CSS, return to the Change CSS Styles page.
Click Download Custom CSS.
Expected Result: The downloaded file should match the uploaded custom CSS.

Removing Custom CSS

After uploading custom CSS, navigate to the Change CSS Styles page.
Click Remove Custom CSS.
Expected Result: The site should revert to the default styles.

Uploading broken CSS

Test with CSS that introduces accessibility or visibility issues, such as
Example:

* {
    background: white !important;
    color: white !important;
    border-color: transparent !important;
}

or

* {
    background: white !important;
    color: white !important;
    border-color: transparent !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

Upload the CSS file and observe the Reset button.
Reset button should still be visible and working
Click Reset

Additional Notes:

The custom CSS file is saved using the Vitro FileStorage class and file is stored into vivo-home/uploads.
The file's path is stored in the ApplicationBean under the key customCssPath (vitro-kb-applicationMetadata).

balmas

On the whole, this works as documented.

The CSS links on the Style upload page are broken when VIVO is deployed at the root and not /vivo.

Also there is some security risk with this feature as a whole, since it's possible that CSS injection could be used in the uploaded css file (or potentially other malware). I suppose this is mitigated by the fact that only an admin has access to the page, but it still feels worth pointing out.

I wonder if it would be better to allow the user to specify a remote url for css rather than uploading the file locally.

balmas · 2025-02-02T20:59:42Z

webapp/src/main/webapp/templates/freemarker/body/siteAdmin/siteAdmin-siteStyle.ftl

@@ -0,0 +1,130 @@
+<div>
+    <h2>Site Styles</h2>
+    <div class="button-group">


These links don't work if VIVO is deployed at the root instead of at /vivo

Great catch, I'll fix this right away

balmas

With the fix to the css links in place, I'm good with this PR now.

litvinovg · 2025-04-07T12:59:58Z

.../main/java/edu/cornell/mannlib/vitro/webapp/controller/freemarker/FreemarkerHttpServlet.java

@@ -469,6 +476,9 @@ protected Map<String, Object> getPageTemplateValues(VitroRequest vreq) {

        // Add these accumulator objects. They will collect tags so the template can write them
        // at the appropriate location.
+
+        map.putAll(getCustomCss());


I think instead you could create a static String field initialized with the same code and updated by SiteStyleController.

litvinovg · 2025-04-24T11:29:09Z

webapp/src/main/webapp/templates/freemarker/body/siteAdmin/siteAdmin-siteStyle.ftl

+        <a class="button blue" download href="${urls.base}/css/home-page-maps.css">page-createAndLink.css</a> 
+
+
+        <#if themeDir == "themes/wilma">


Hardcoding theme paths is not an option. It will be broken once theme is renamed for customization.

webapp/src/main/webapp/templates/edit/specific/applicationBean_retry.jsp

webapp/src/main/webapp/templates/freemarker/body/siteAdmin/siteAdmin-siteStyle.ftl

balmas

This seems to work well enough. My review is mostly of the functionality and not of the code itself. It would be good to have someone with more familiarity with the VIVO code to confirm the code. I did have a couple of minor suggestions for wording changes for clarity but they aren't critical.

This reverts commit 7a11a44.

litvinovg · 2025-06-11T08:49:36Z

.../main/java/edu/cornell/mannlib/vitro/webapp/controller/freemarker/FreemarkerHttpServlet.java

@@ -20,6 +20,9 @@
 import org.apache.commons.lang3.StringUtils;
 import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;
+import org.apache.jena.ontology.OntModel;
+import org.apache.jena.rdf.model.*;


Could you fix wildcard import here?

…proved css upload preview

litvinovg · 2025-06-23T13:10:50Z

home/src/main/resources/rdf/i18n/en_US/interface-i18n/firsttime/vitro_UiLabel.ttl

@@ -6931,3 +6931,34 @@ uil-data:there_are_no_results_to_display.Vitro
        uil:hasKey       "there_are_no_results_to_display" ;
        uil:hasPackage   "Vitro-languages" .

+uil-data:back.Vitro


I think it is not used.

Missed that one to remove. Fixed

litvinovg · 2025-06-23T13:11:39Z

webapp/src/main/webapp/css/vitro.css

+
+.button.red {
+    background-color: #b40000
+}


Buttons look different

Fixed padding

litvinovg · 2025-06-23T13:14:41Z

...rc/main/java/edu/cornell/mannlib/vitro/webapp/controller/freemarker/SiteStyleController.java

+
+        displayModel.removeAll(portalResource, property, null);
+
+        if (!cssFilePath.isEmpty() && !cssFilePath.equals("null")) {


Is there a way to avoid "null" special value?

It looks like this isn't used, I initially added it to improve the robustness of the function, but on closer inspection, it seems that workflow is never going to happen.
Removed that check

litvinovg · 2025-06-23T13:17:01Z

...rc/main/java/edu/cornell/mannlib/vitro/webapp/controller/freemarker/SiteStyleController.java

+    private void showMainStyleEditPage(HttpServletRequest request, HttpServletResponse response, String info) {
+        try {
+            response.setContentType("text/html");
+            response.getWriter().println("<html><body><h2>Site Style</h2><pre>customCssUrl: "


Is this used somewhere?

This is intended for direct API calls to reset CSS. It should not be used in regular workflows—only as a fallback solution.

How this html is used in direct API calls? I couldn't find the code.

To check what file is uploaded
http://localhost:8080/vivo/siteStyle

To remove file (works only if admin is logged in)
http://localhost:8080/vivo/siteStyle?action=remove

This is the same request that is sent when the user clicks on the remove button, but in case somehow this is not available, this is a workaround

litvinovg · 2025-06-23T13:23:09Z

...rc/main/java/edu/cornell/mannlib/vitro/webapp/controller/freemarker/SiteStyleController.java

+    }
+
+
+    private void removeCssFileDisplayModel() {


Uploaded css style file is not deleted on removal.

File related triples should be removed too.

Added deleting file on replace or remove CSS

litvinovg · 2025-06-23T13:23:49Z

webapp/src/main/webapp/templates/edit/formBasic.js

+    }
+
+    function resetStyles() {
+        if (confirm('Are you sure you want to remove the custom CSS?')) {


Text should be in translation files I think

Resolved, added to i18n

…ransaltions and styles

litvinovg · 2025-06-25T12:06:24Z

...rc/main/java/edu/cornell/mannlib/vitro/webapp/controller/freemarker/SiteStyleController.java

+            is = file.getInputStream();
+            mediaType = tika.detect(is);
+        } catch (IOException e) {
+            log.error(e.getLocalizedMessage());


I suggest using log.error(e, e)

litvinovg · 2025-06-25T12:06:31Z

...rc/main/java/edu/cornell/mannlib/vitro/webapp/controller/freemarker/SiteStyleController.java

+        try {
+            fileInfo = fileHelper.createFile(storedFileName, getMediaType(file), file.getInputStream());
+        } catch (Exception e) {
+            log.error(e.getLocalizedMessage());


I suggest using log.error(e, e)

litvinovg · 2025-06-25T12:08:35Z

webapp/src/main/webapp/templates/edit/formBasic.js

+        return confirm(msg);
+    }
+
+    async function onSave(e) {


As this new js code is page specific it would be better to move js code in a separate file to be only applicable to one page.

Since formBasic (and scripts are generally included via controller)

Vitro/api/src/main/java/edu/cornell/mannlib/vitro/webapp/controller/edit/ApplicationBeanRetryController.java

Line 88 in aeee7e7

request.setAttribute("scripts","/templates/edit/formBasic.js");

Should I replace this formBasic.js with my custom JS or include it inside the .ftl document?

Could new js be added in applicationBean_retry.jsp ?

I can add a <script> tag inside applicationBean_retry.jsp, which would inject the script into the body. This approach works technically, and it aligns with how scripts are already being included in some other parts of VIVO. However, my only concern is whether it's clean practice to place script tags in the body instead of the head, as is typically recommended.

Currently in formBasic.js, there is only this code, which I think is not used in this jsp page, therefore I can also replace the script inside Controller without problems.

 <script language="JavaScript" type="text/javascript"> function confirmDelete() { var msg="Are you SURE you want to delete this record? If in doubt, CANCEL." return confirm(msg); } </script>

What do you think?

if it is not used on the page, then sure it should be easier to just replace formBasic.js with new js filename.

Split into separate parts. Please check if I didn’t accidentally introduce any issues.

milospp mentioned this pull request Jan 16, 2025

Created custom css style upload vivo-project/VIVO#4039

Open

chenejac requested review from balmas and litvinovg January 28, 2025 10:55

balmas suggested changes Feb 2, 2025

View reviewed changes

chenejac linked an issue Feb 14, 2025 that may be closed by this pull request

Branding VIVO via UI vivo-project/VIVO#4019

Open

milospp requested a review from balmas February 18, 2025 15:32

balmas approved these changes Feb 21, 2025

View reviewed changes

litvinovg reviewed Apr 7, 2025

View reviewed changes

litvinovg reviewed Apr 24, 2025

View reviewed changes

milospp requested a review from balmas May 15, 2025 11:27

balmas reviewed May 17, 2025

View reviewed changes

webapp/src/main/webapp/templates/edit/specific/applicationBean_retry.jsp Outdated Show resolved Hide resolved

balmas reviewed May 17, 2025

View reviewed changes

webapp/src/main/webapp/templates/freemarker/body/siteAdmin/siteAdmin-siteStyle.ftl Outdated Show resolved Hide resolved

balmas reviewed May 17, 2025

View reviewed changes

webapp/src/main/webapp/templates/freemarker/body/siteAdmin/siteAdmin-siteStyle.ftl Outdated Show resolved Hide resolved

balmas approved these changes May 17, 2025

View reviewed changes

milospp added 15 commits June 11, 2025 10:25

Created custom css style upload

0847c7f

Upadted reset button style

b9542d5

Fixed referred loop problem in siteStore

717e5df

Repalced fixed urls with ${urls.base}

78c9db6

Changed the location where the URL is saved in the display model

245ee18

implemented simple cache for customCssPath

30eb8dd

Created theme config that contain related css for every thame

54c5145

Revert "Created theme config that contain related css for every thame"

535910c

This reverts commit 7a11a44.

Removed css link shortcuts

2746abb

Added eof space

e29bba0

Changed title size

aa3f60a

Updated some labels

301d6dd

Fixed checkstyle and added localization

8954a4c

Fixed localization

383f4d6

Removed inline important styles for btn

3e3c797

milospp force-pushed the feature/css-upload branch from 38f23c5 to 3e3c797 Compare June 11, 2025 08:27

Replaced null check with ?has_content in ftl

c49c1fc

litvinovg reviewed Jun 11, 2025

View reviewed changes

milospp added 5 commits June 12, 2025 20:34

Fixed RefererHelper typo

e97193e

Optimized imports in FreemakerHttpServlet

d34e4dc

Moved SiteStyle to SiteInfomration page, removed RefererHelper and im…

8a90a2d

…proved css upload preview

Removed yellow bg around file input

a355de8

Reverted ignoreReferers

6f73149

milospp requested a review from litvinovg June 18, 2025 12:07

litvinovg reviewed Jun 23, 2025

View reviewed changes

Remove file object when css is replaced or removed, fixed some i18n t…

f66f759

…ransaltions and styles

litvinovg reviewed Jun 25, 2025

View reviewed changes

milospp added 2 commits June 25, 2025 16:05

Updated log.error(e,e);

a17e156

Created separate file for cssUpload javascript

6e6fbcb

		<a class="button blue" download href="${urls.base}/css/home-page-maps.css">page-createAndLink.css</a>


		<#if themeDir == "themes/wilma">


		displayModel.removeAll(portalResource, property, null);

		if (!cssFilePath.isEmpty() && !cssFilePath.equals("null")) {

Created custom css style upload #485

Are you sure you want to change the base?

Created custom css style upload #485

Uh oh!

Conversation

milospp commented Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this pull request do?

What's new?

Additional Notes

Screenshoots

Style edit page

Example css

Broken contrast css (RESET button is still visible)

How should this be tested?

Uploading regular CSS

Download Custom CSS

Removing Custom CSS

Uploading broken CSS

Additional Notes:

Uh oh!

balmas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

balmas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

balmas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

milospp commented Jan 16, 2025 •

edited

Loading