In the Banner of my VP, how do I display a logo?

ddumas

In the top "Banner" section of my Visual Perspective (VP), I would like to display a logo. I have attached a screenshot in which I have defined a .jpg file as the "background" property of the Banner. It is 50 pixels tall, just like the Banner.

I am guessing that maybe the background "layer" is behind the foreground layer (which is just all blue going across the Banner)? So not sure how to bring that forward, or even if the background property of the Banner is even where I s/b doing this.

I even tried created and uploaded a SystemSettings.Logo_Banner (picture) attribute, and added <<SystemSettings.Logo_Banner>> as the title of the Banner section

I also tried adding a <<SystemSettings.Logo_Banner>> as a menu item in my top bar (command: Text)

No luck.

Dave

rocketman

As I recall, the banner gets displayed before anything is initialised (including the database), so you basically have to create a standard html page (albeit a thin page. I think mine is about height 90Px) with your graphics embedded in that. Take a look at the sample CRM bsv and see how it is constructed.

BLOMASKY

What I do, is have CSS class in the HTML that looks like:
.header {
background-color: #ffffd0;
background-image: url('../CSS/ALC/americanLumber.gif');
background-repeat: no-repeat;
vertical-align: top !important;
background-size: 250px 30px;
}
bruce

ddumas

Thanks.

Not sure how to implement the css. Does that just get pasted into the CustomHTML property of a content panel in the Banner?

As a stop gap, I copied a jpg into the AwareIM/tomcat/webapps/AwareIM folder, and added a text menu item to my Top Bar frame, pasting in this into the text property:

The white background in the logo jpg does not match the light blue in the BlueOpal theme. I set the background color property of the Banner frame to White, but that property setting gets ignored, and the light blue panel background remains. It does not look terrible, but not optimal.

Dave

BLOMASKY

assuming your application is called XXX...
go to the Aware/Tomcat/WebApps/AwareIM/Custom folder
then create an XXX folder and put the CSS into that folder

Bruce

ddumas

and then in the custom HTML (text property), just place this code: /XXX/logo.css ?

where XXX would be the folder name inside the Custom Folder

BLOMASKY

Sounds like your experience with CSS is limited. In the folder you will have a file with any name, "Mine is called "mycss.css". In this file you will have a bunch of CSS code. a snippet of mine looks like:

.k-context-menu.k-menu-vertical>.k-item>.k-link {
background-color: #FED7AA;
font-size: 14px;
border-radius:6px;
box-shadow: 5px 2px 5px 0px rgba(50, 50, 50, 0.75);

}

.header {
background-color: #ffffd0;
background-image: url('../CSS/ALC/americanLumber.gif');
background-repeat: no-repeat;
vertical-align: top !important;
background-size: 250px 30px;
}

.customerGraph .k-window-actions {
display: none;
}

.textForHeader {
margin-top: 5px !important;
padding-left: 300px;
padding-top: 10px;
font-size: 10px;
}

.bigTextForHeader {
padding-left: 50px;
font-size: 14px;
}

Then, in the CSS class property of your content panel you have the name of the class (no .css, just the name of the class) . Look at the file attached.

Bruce

Screen Shot 2020-03-17 at 10.51.57 AM.png

ddumas

Thanks Bruce.

I assume at a minimum my XXXPanel.css file placed in the XXX folder (my app) will at a minimum, contain this:

.header {
background-color: #ffffd0;
background-image: url('../CSS/ALC/americanLumber.gif');
background-repeat: no-repeat;
vertical-align: top !important;
background-size: 250px 30px;
}

And that I would set the url and size appropriate

Dave

BLOMASKY

Yup, you've got it!

BLOMASKY

Yup, you've got it!

Jaymer

bruce, no posting after the 1st margarita of the evening

BLOMASKY

I resemble that statement Jaymer! I only had 2 last night. (of course, with me as the bartender, I do not make weak, girly drinks!).

p.s. I apologize to all the "girly" men out there...

Bruce