CSS is all new to us. We figured out to do a custom color ba...

[robert fuschetto]

CSS is all new to us. We figured out to do a custom color background for a container by pasting this code in the CSS folder: .panelclass {background-color: rgb(0,51,85);} and then entering this for the container:

The background is now what we want!

However the container has a black border around it. What we really want is a CSS command to make the background our color blue and hide the border. We have had no luck. Perhaps CSS commands have to be in a certain order Perhaps there is special syntax in how you stack commands Is it incompatibilities with Designer Studio I assume we would add to the panelclass definition Anyway we have had no luck.

Can someone share the CSS code that would set our custom backgorund (rgb(0,51,85) and hide the border for the container

[Marita Locklear 3]

Here is my goto for syntax on CSS. https://www.w3schools.com/css/

if you still do not get the borders or colors showing then they maybe not showing because of the styling used in the tools by default. You can override this in your custom style sheet with

!important at the end of the css line

example:

.section h2 { color:red !important; }

[Rene Nunnington 2]

The border may be coming from inherited styling. You can try:

box-shadow: none;

This should turn off the inherited shadow box.

Then set your border to what you need using border-style, border-width and border-color, eg:

border-style: solid;

border-width: 1px;

border-color: #AA3939;

border-radius: 6px;

You can turn off the border with border: 0;

[Warren Hinchliffe]

I usually play in the browsers developer tools to get it right, then add it to the css.

[robert fuschetto]

We will play with this and thanks. To be honest, DS is easier/faster to use but lacks a lot of flexibility at this point. They want us to use CSS, they should have a library of functions available! I never needed CSS in App Studio. At least it sounds like we are on the right track

[robert fuschetto]

rene.nunnington:

 

The border may be coming from inherited styling. You can try:

box-shadow: none;

This should turn off the inherited shadow box.

Then set your border to what you need using border-style, border-width and border-color, eg:

border-style: solid;

border-width: 1px;

border-color: #AA3939;

border-radius: 6px;

You can turn off the border with border: 0;

 

 

Well, No Luckor as much luck as we had yesterday. Somethings sort of work, somethings not at all, some things half waylike making the border a dashthe top and left side are dashed but no the bottom and right.

Anyway, unless someone sees something wrong with the code examples below, I will open a case.

We tried this:

.panelclass {background-color: rgb(0,51,85);box-shadow: none;border-style: solid;

border-width: 1px;

border-color: #AA3939;

border-radius: 6px;

}

It gave me the blue background. The border was still there but the top and left were red.

.panelclass {background-color: rgb(0,51,85);box-shadow: none;}

Background blueborder still there.

.panelclass {background-color: rgb(0,51,85);border: 0};

Background blue, border still there.

Thanks!

[SATHEESH B]

have you tried border-style:none;

[robert fuschetto]

satheesh.babu.murugesan:

 

border-style:none;

 

 

.panelclass {background-color: rgb(0,51,85);border-style:none;}

yields: (I tried to highligh ti n yellownot teh empty continer at the top withthe partial white border.

 

image.png1407322 36.5 KB

[SATHEESH B]

the border is coming from the Title bar style sheet which is out side the scope of custom css.

 

image.png1892616 69.6 KB

 

You may need to create custom global theme by copying existing theme folder . Then you may need to customize one of the default 8 style and apply to the panel .

There 8 default styles

 

image.png694533 21.1 KB

[robert fuschetto]

OrTibco can add some functionality. For now I am torn between try this stuff and just staying with HTML pages.

Thanks Satheesh, do you know if Tibco is planning to enhance this in some way to make it easier for the end user

[SATHEESH B]

CSS customization can be done in Custom theme or CSS on the page. Both are text version and there is no editor. i always use chrome to edit the css online and copy the code and put it in the custom theme.css . i am doing this for customers since page designer release (8203). it has 1000s of css tags. i am not sure if the product team gonna add ui for css customization. You can do the NFR for this.

[robert fuschetto]

Well, you should not lose functionality when upgrading your software. DS is lacking at this point. I will close this and open another case. Thanks!