Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: added some additional tips from DS-1758

...

The user will need to refer to the extensive WebUI/JSPUI configurations that are contained in JSP Web Interface Settings.

...

The 'layout' of each page, that is, the top and bottom banners and the navigation bar, are determined by the JSPs /layout/header-*.jsp and /layout/footer-*.jsp. You can provide modified versions of these (in [jsp.custom-dir]/dspace/modules/jspui/src/main/webapp/layout), or define more styles and apply them to pages by using the "style" attribute of the dspace:layout tag.

The basic branding of the public pages of the repository is possible editing the header-default.jsp file and specifically the "container banner" div https://github.com/DSpace/DSpace/blob/dspace-6_x/dspace-jspui/src/main/webapp/layout/header-default.jsp#L133 this banner is shown in all the public page but hide in "backend functionalities" to allow more space for the functionality itself.

For the backend pages, both administrative than "registred user", you should edit the header-submission.jsp.

To change colors, fonts and CSS settings in general It is preferable to generate a new bootstrap.css using the tool provided by the bootstrap creator here: https://getbootstrap.com/docs/3.3/customize/ or choose one of the several themes available for bootstrap online, like the freely available provided by bootwatch
http://bootswatch.com/

  1. Rebuild the DSpace installation package by running the following command from your [dspace-source]/dspace/ directory:

    Code Block
    mvn package


  2. Update all DSpace webapps to [dspace]/webapps by running the following command from your [dspace-source]/dspace/target/dspace-installer directory:

    Code Block
    ant -Dconfig=[dspace]/config/dspace.cfg update 


  3. Deploy the the new webapps:

    Code Block
    cp -R /[dspace]/webapps/* /[tomcat]/webapps


  4. Restart Tomcat
    When you restart the web server you should see your customized JSPs.

Styling the Simple Item View

DSpace offers following CSS classes in the HTML output to style metadata labels and values in the simple item view, :

  • metadataFieldLabel
  • metadataFieldValue

Each label and value gets enhanced by a CSS class identifying the metadata field by its schema, element and qualifier. The pattern for this classes is: schema_element_qualifier. Examples:

  • Select the CSS classes metadataFieldValue and dc_title to style the title element.
  • Select the CSS classes metadataFieldValue and dc_description_abstract  to style the abstract element
Code Block
languagecss
/* Make title bold */
.metadataFieldValue.dc_title { 
    font-weight: bold;
}

/* Make abstract italic and enforce the display of its line breaks */
.metadataFieldValue.dc_description_abstract {
    white-space: pre-line;
    font-style: italic;
}