Ribbon Theme

[James Bott]

Frances,

Glad to hear you got it working.

I now see that you were talking about the tab color and I was thinking the button hover color.

[James Bott]

Frances,
Still no class modification.

There is still at least one thing you cannot do without class modification. You cannot draw group separator bars without also drawing outlines. This is a show-stopper if you want an exact look like Office.

All that needs to be done is to provide a new color variables for separator bars which defaults to the same colors as "box" outlines. Then when you set the outlines to the same color as the ribbonbar (to make them disappear), then you can still set the color of the separator bars to whatever color you wish.

It would also be nice to have this new color as a passable parameter to the button's New() method.

However, I think a much better way to do this is by adding color variables to the ribbonbar class that will then automatically passed to every button by passing the oBar which is already happening.

James

[fraxzi]

Hi James,

You are correct. Eventually, we cannot avoid modifying the class.

[James Bott]

Now we have separator bars.



I also adjusted the text to the right colors. Oh, and I did it without any class modifications.

I have to leave now but I will explain how to do the separator bars tommorow.

James

[fraxzi]

Now we have separator bars.



I also adjusted the text to the right colors. Oh, and I did it without any class modifications.

I have to leave now but I will explain how to do the separator bars tommorow.

James

I'll be waiting Mr. James ...

[Silvio.Falconi]

Frances,
Still no class modification.

There is still at least one thing you cannot do without class modification. You cannot draw group separator bars without also drawing outlines. This is a show-stopper if you want an exact look like Office.

All that needs to be done is to provide a new color variables for separator bars which defaults to the same colors as "box" outlines. Then when you set the outlines to the same color as the ribbonbar (to make them disappear), then you can still set the color of the separator bars to whatever color you wish.

It would also be nice to have this new color as a passable parameter to the button's New() method.

However, I think a much better way to do this is by adding color variables to the ribbonbar class that will then automatically passed to every button by passing the oBar which is already happening.

James

But You could make an Override to RibbonBar(rbgroup,rbtn) Class

[James Bott]

Ok, here is how to get the separator bars without the outline boxes.

I found that the separator bars are actually drawn by the TBRGroup class. Groups are the sections of the ribbonbar. After you define the group, then you redefine the colors used to draw the separator bar. You can also redefine the color of the group title text the same way. You will have to do this for each group. I do have an idea that will make this much easier that I will be testing soon.

One other thing you need to do to get a ribbonbar style that looks like Office 2016 is to use the l2010 flag for the ribbon definition. Yes, it is ironic the the 2010 version looks most like the 2016 version.

Here is an example showing the Black Theme of Office 2019.

Code: Select all  Expand view

  ADD GROUP oGr1 RIBBON oBar TO OPTION 1  WIDTH 120  PROMPT "Work Log"

   // Controls the group title text color
   oGr1:nClrTxt := RGB( 224,224,224 ) // Black theme

   // These 2 control the separator bar colors
   oGr1:nClrBoxOut:= RGB(102,102,102) // Black theme
   oGr1:nClrBoxIn:= RGB(102,102,102)  // Black theme

Later I will put together some full working samples of the different themes.

James

[James Bott]

Silvio wrote:
But You could make an Override to RibbonBar(rbgroup,rbtn) Class

That is a possibility although I was never able to get that working. I usually just subclass, but the ribbonar code uses some code like this:

Code: Select all  Expand view

if oWnd:IsKindOf( "TRPANEL" ) .and. oRB != NIL

If you subclass you have to change the class name, thus subclassing might not work depending on what you are attempting.

Ideally, would be to have the classes modified to read in parameters from data files. Right now they are full of IF/THENs and DO/CASEs based on the style flags. However this is big task. I have spent a couple of weeks just trying to understand the code.

Then we also have the issue of themes. Office 2019 has 12 themes!

James

[James Bott]

Frances,

Do you have any idea how to change the tab text color when hovering over it. The blue theme has white text on a dark blue background, then when you hover over it the tab background turns white and thus the text disappears. I need to change the text on the tab to a dark color when you hover the pointer over it.

Any ideas?

Thanks,
James

[cnavarro]

James, try

Code: Select all  Expand view

#define CLRTEXT             RGB(  21,  66, 139 )

.../...
   oRBar:nClrPaneRB := Rgb( 43, 87, 154 )
   nClrTabText   := CLR_WHITE
   For x = 1 to Len( oRBar:aClrTabTxt )
      oRBar:aClrTabTxt[ x ] := { | oSelf, nPrompt | ;
                       if( oSelf:l2013 .or. oSelf:l2015,;
                          if( nPrompt == oSelf:nOption, RGB( 255, 255, 255 ), ;
                              if( oSelf:l2015, nClrTabText, RGB( 100, 100, 100 ) ) ),;
                          if( oSelf:l2016, ;
                              if( nPrompt == oSelf:nOption, ;
                                  oRBar:nClrPaneRB, nClrTabText ), CLRTEXT ) ) }
   Next x

 

[fraxzi]

Frances,

Do you have any idea how to change the tab text color when hovering over it. The blue theme has white text on a dark blue background, then when you hover over it the tab background turns white and thus the text disappears. I need to change the text on the tab to a dark color when you hover the pointer over it.

Any ideas?

Thanks,
James

Hi James,

I did this:

Code: Select all  Expand view

 :aGradOver  :=   { { 1, nRGB( 0, 114, 198 ), nRGB( 0, 114, 198 ) } }
 ...
  FOR i := 1 TO Len( :aPrompts )
        :aClrTabTxt[ i ] := {|oSelf, nPrompt| iif( nPrompt == oSelf:nOption, nRGB(0,0,0), nRGB( 255, 255, 255 ) )}
 NEXT
...
 

[James Bott]

Cristobal and Frances,

OK guys, I apparently didn't make myself clear.

You both seem to have given me code to set the tab text color of unselected tabs. What I really need is to change the color of unselected tabs only when the cursor is hovering over it. Then when the cursor moves off, the color goes back to the unselected color. Below is a sample image. The capture doesn't include the cursor but it is over the second tab (Home) which you can barely read. I am hoping to be able change the text color to a darker color when the cursor is over the tab.



Actually, I don't know exactly how MS Word 2016 does this. It just came to me, that perhaps they change the color of the hovered tab instead of the text. If either of you has access to a copy of MS Word 2016 maybe you can take a look and give me some feedback. I am trying to emulate Word as closely as possible.

Thanks,
James

[fraxzi]

Mr James,

This is ow my Standard MS Word ..

[James Bott]

Frances,

Thanks for the video. I looked back at your code on the previous page where you showed how to get that effect with the tabs. I see that you used aGradOver. I have never been able to see any affect by either passing that array to the New() method or redefining it after the New() method.

I have had the same problem with the aGradNormal array--no effect I can see.

I am using FWH 18.05 and I see you are using 18.07. Maybe that is the issue. I think I am going to have to modify 18.05's TRibbonbar class method MouseHover() to see what is happening.

[James Bott]

OK, I just discovered that aGradOver is not working (it is ignored) with l2010, but it works fine with l2016.

All my work has been done with the l2010 flag since it makes groups the most similar to Office 2016.

So now I have to figure out where the bug is.

James