Child pages
  • _UI Styling Customizations
Skip to end of metadata
Go to start of metadata

Changing CSS Styles

In order to customize the TopBraid $ProductAbbrevName user interface styling, follow this process:

  1. Identify the CSS style that you want to change. This is usually done by looking at the source code or the DOM tree of the HTML with a tool such as FireBug.
  2. Create a folder ending with .www in the workspace—for example, my.www. Restart TBC to make sure that it knows about that folder.
  3. In that folder create a CSS file, for example, my.css.
  4. Add your custom CSS In that CSS file.
  5. Create a .ui. file (File -> New RDF/SWP File), and add evn.topbraidlive.org/$ProductAbbrevName/$ProductAbbrevName.ui.ttlx to its imports.
  6. In that file, select the SWA:Elements class and add an empty row to the ui:headIncludes property.
  7. In that row, enter a line such as <link href="lib/my/my.css" rel="stylesheet" type="text/css"/>.

Here is an example CSS snippet to override the default logo:

.edg-product-logo {
    background-image: url(images/CustomizedLogo.png);
}

To verify that this worked, you should see the link to your CSS file in the generated source of $ProductAbbrevName.

Note that the /lib/... folder is a redirect to any folder ending with .www in your workspace. This way you can also add images and other resources such as JavaScript files.

Customizing the login screen

To implement a background image, locate the following code in logon.html: 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<style type="text/css"> 

And beneath it, insert the following code: 

html, body { 
    min-height: 100%; 

body { 
    background-image: url(http://path-to-your-background.jpg); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    background-size: cover; 

@media (min-width: 1024px), (min-height: 576px) { 
    body { background-size: auto; } 


Update the background-image url, add the @media’s min-width and min-height dimensions to match the image. 

To add an image to the login window, browse to the bottom of the file and locate the following section: 
</style> 
<title>TopBraid Live Login Page</title> 
</head> 

<body> 
<div class="loginform-dialog"> 
<div class="loginform-container"> 
<!-- <img src="http://your-custom-logo-here.jpg" alt="Logo"> --> 

Uncomment the <img> tag and update the src attribute to point to the location where the image is hosted. 

Images cannot be hosted from within the application server. Authentication prevents any assets outside of the .html file from being accessed anonymously. Because of this, they must be hosted on a separate web server. You can also alter the html file to use colors, text and fonts. 

Customizing the Landing Page

  1. In TBCME File -> New -> RDF/SWP File
  2. Import edgproduct.ui.ttlx into the newly created file
  3. From classes view, navigate to edproduct:LandingPage
  4. Right Click -> Clone
  5. Set the ui:overrides in the newly created cloned class to edgproduct:LandingPage

At this point we should have a clone of the landing page that is overriding the standard one, and are ready to make some changes.


Replacing the EDG Heading Information -

The 'Welcome to TopBraid EDG' part of the landing page is coming from teamwork:EdgLandingPageHeading - so we can do the same sort of clone and override operation to change this content:

  1.  Navigate to teamwork:EdgLandingPageHeading
  2. Right Click -> Clone, and set the ui:overrides on the clone to teamwork:EdgLandingPageHeading
  3. Make some changes - update the body to something like this:

 

edgproduct.ui.ttlx
<ui:group>
   <section>
       <div class="col-xs-12">
           <h1>This is my Custom header EDG</h1>
           <span class="subHeading">Totally Customizable</span>
           <p>How cool is that?</p>
       </div>
   </section>
</ui:group>


4. Save, and refresh the homepage.

5. You should see your changes reflecting:

Customizing Icons

TopBraid $ProductAbbrevName allows the icons of resources in the tree components to be changed, even assigning different icons to representing different classes for easier visual identification by end users.

To do this, first define a CSS style using the steps described above, pointing that style to a background image of your choice. Then, store the name of that style at the class that you want to change the icon of, using the property swa:typeIcon. Point the evnui:Editor SWA application at your CSS file, and the tree will use that icon for all instances of the associated class.

For example, to reset the concept hierarchy icon for instances of the Country class in the Geography vocabulary with a myCountryIcon.jpg file stored in the same directory as your CSS file, you could add the following lines to it:

.CountryStyle {
background-image: url('myCountryIcon.jpg');
background-position: center;
background-size: 100%;
}

Then, import the Geography schema file geo.tdb into your custom ui.ttlx file and assign the g:Country class a swa:typeIcon value of "CountryStyle". Finally, import evn.topbraidlive.org/taxonomy/evn.ui.ttlx into your custom .ui.ttlx file and add a ui:headIncludes value of the following to the evnui:Editor class, adjusting the name and path to point at your own CSS file:

<link href="lib/my/my.css" rel="stylesheet" type="text/css"/>

On the concept hierarchy, you will see your new icon in place of the default one for the specified class:

 

 

If no direct type icon exists, it will walk up the superclass tree. In the case of the Concept hierarchy, it will eventually reach the icon defined for the class skos:Concept.

Adding New Menu Choices

For an example of adding a new menu choice you can follow the procedure below.

In the evn-plugins.ui.ttlx example file described at the beginning of this section, navigate to evn-plugins:ExampleGlobalAction to see how to contribute items to the global context menu in the header area. This example adds the "Example global action" menu choice. When selected, it counts the number of concepts in the model.

These global menu items can be used for a large variety of tasks, and the example illustrates how to make an Ajax call-back to the server along the way.

The context menu at the bottom of the screen lists menu choices that act on the currently selected resource. See evn-plugins:ExampleResourceAction in the example file for an example of how to add an item to this menu. Those action items are often used to perform edits on the selected resource, and the example shows how such edits are implemented using ui:update. Below we can see the "Example resource action" item that this example adds to the menu; selecting it displays a dialog box that queries the user for "related" and "date" values that it then adds to the resource:

 

Further details are provided in the rdfs:comment values of the examples.

  • No labels