Hello All How do I change the Size and Color of Title of Por...

[Naeem Sufi 3]

Hello All

How do I change the Size and Color of Title of Portal the default size is too small , so I would like to increase the size and make it same color as of the Logo, using RGB code

I tried to contact support and so far no solution

if anyone can share the solution here , would appreciate it

Thanks

[Leonard Stockdale]

Hi

We created our own designer based portal which exposes content to the use. We used CSS to control its look and feel.

[Naeem Sufi 3]

I copied the 2018 Theme to Custom Theme (both css and theme files)

I add the following code to css file

.df-theme-background

{

background-color: white;

#ibx-aria-id-8 > div.ibx-label-text{

font-size: 30px !important;}

}

 

image.png699231 9.75 KB

 

It did not do anything

does this look correct

Thanks

[Manoj Chaurasia]

Hi Naeem

You might want to clear the WebFOCUS cache as well as your browser cache and see if that makes a difference.

[Matt Chapin]

Try

.pvd-portal-title {

background-color: transparent;

color: #FFFFFF;

font-weight: bold;

margin: 0 20px;

font-size: 22px;

}

[Naeem Sufi 3]

Thank you Matt that worked is there a way to add any common info on the title of the portal like the userid that is being used etc this will help when asking for screen shot for trouble shooting issues that user has

Thanks

[Matt Chapin]

The user description (name) should already be in the top right of the Portal.

[Naeem Sufi 3]

Hello Matt

Do you have list of these elements . Now they are are requesting to have solid color line where the Page Title is also Since we are going to be showing the Page Category in Top Panel, I will need to change the the size/ color of the Categories in the Top Banner

also the Color on the Left Bar, I need to match to the color on our Launch Pages

if there is a List of these elements of the Portal , would appreciate if you can share it or of if these are available in any of the documents , link to that document will be appreciated

I tried to use Source View it does not show these elements names

Thanks

[Matt Chapin]

Hello Naeem,

I have attached one of my css examples that can be added as a custom theme under Global Resources. This has a lot of them, but I am not sure it has everything. Hopefully this will help a bit more. I do use F12 in Chrome to explore areas to understand where I need to style, I make the changes in there then I copy the snippet of code and add to my CSS.

Hopefully this helps.

css_example.txt (74.0 KB)

[Toby Mills]

Thats great Matt!

I was rooting around to see if I could unearth more about this for Naeem.

You guys know your css html front end stuff better than me for sure.

See if this makes sense (from decompiling jar files):

pvd_css_examples.txt (31.3 KB)

[Naeem Sufi 3]

Thank you Matt and Toby I looked at both examples and they look nice I was able to change left Panel and the Title what I am still trying to figure out is the Banner Category options how do I change the color of these elements and on the Page Title which is Blank now, I would like to have a solid color line . Since the Page Title is the same as the Header in the Launch HTML, so I am not showing the page title, instead would like to have solid color line

I looked for this in both examples I did not find any references to these

Thanks both of you for help

 

image.png844107 7.63 KB

[Matt Chapin]

Try finding this section in the CSS and find other attributes to tinker with.

.pd-page-header {

font-family: Big Shoulders Text;

font-style: bold;

box-shadow: none;

max-height: 60px;

background-color: #171717;

color: #FFFFFF;

}

[Naeem Sufi 3]

Thank you Matt , It worked

[Matt Chapin]

Excellent. The nice thing is, once you have a template, you can pretty much customize anything. I am not a CSS expert just learning as I go.

[Naeem Sufi 3]

Hello Matt

I have looked at all of the code but I cant locate the headings for the pages in the top banner. I need to be able to change the color on these page headings I used F12 but no luck (see the highlighted below )

 

image.png72280 4.95 KB

 

Thanks

[Matt Chapin]

Try something like this

/* Banner */

.pvd-banner-logo {

width: 150px;

min-width: 150px;

}

.pvd-menu-btn {

background-color: #DB6026;

color: #0F436E;

font-weight: 400;

margin: 15px 0;

padding-bottom: 0;

letter-spacing: 1.1px;

text-transform: uppercase;

}

.pvd-menu-btn:hover,

.pvd-menu-btn-border,

.pvd-menu-btn-border:hover {

background: #DB6026;

color: #fff;

border-radius: 3px;

margin: 15px 0;

padding-bottom: 0;

}

[Naeem Sufi 3]

matt.chapin:

 

.pd-page-header

 

 

Thank you Matt , it worked

[Gene Gauthier]

On 8/30/2021 at 7:00 PM, Matt Chapin said:

Hello Naeem,

I have attached one of my css examples that can be added as a custom theme under Global Resources. This has a lot of them, but I am not sure it has everything. Hopefully this will help a bit more. I do use F12 in Chrome to explore areas to understand where I need to style, I make the changes in there then I copy the snippet of code and add to my CSS.

Hopefully this helps.

css_example.txt (74.0 KB)

@Matt Chapin can I get a copy of your css_example?  I don't think the new forum moved over the attachments.  Thanks