FiveTech Software tech support forums

by **James Bott** » Wed May 01, 2019 4:05 pm

I believe Tim is referring to what they call the "Simplified Ribbon" option. You can still use the standard ribbonbar. See screenshots of each here:

https://support.office.com/en-us/article/the-new-look-of-office-a6cdf19a-b2bd-4be1-9515-d74a37aa59bf

Note that a user can have a different color scheme for each app. I presume this is so you can more easily keep track of which app you are using when you have multiple ones running. This is the big challenge for us. There are several classes used by the FW ribbonbar and many (if not most) of the colors are hardcoded into codeblocks. And hardcoded colors exist in each class. All this makes it is not easy to change them.

And there are more issues due to outlines, rounded corners on tabs, height of tabs, height of ribbonbar, etc. that vary by versions. Further there is no documentation in the code. I spent a couple of weeks working on this issue without total success in recreating the newer versions of the ribbonbar.

Oh, and I just read that there are new icon options now too. Whew!

And, of course, we have to keep compatibility with the older ribbonbar look too. Lots of work involved.

James

by **Enrico Maria Giordano** » Wed May 01, 2019 4:14 pm

James Bott wrote:I believe Tim is referring to what they call the "Simplified Ribbon" option. You can still use the standard ribbonbar. See screenshots of each here:

https://support.office.com/en-us/article/the-new-look-of-office-a6cdf19a-b2bd-4be1-9515-d74a37aa59bf

Looks like a step back in appearance…

EMG

by **Massimo Linossi** » Wed May 01, 2019 4:31 pm

Enrico Maria Giordano wrote:
James Bott wrote:I believe Tim is referring to what they call the "Simplified Ribbon" option. You can still use the standard ribbonbar. See screenshots of each here:

https://support.office.com/en-us/article/the-new-look-of-office-a6cdf19a-b2bd-4be1-9515-d74a37aa59bf

Looks like a step back in appearance…

EMG

You're right

by **TimStone** » Wed May 01, 2019 8:12 pm

Richard=service provided screen shots of the latest ribbon bar used in Office 365 apps. These were updated in the past few months.

I was simply commenting that the sample Antonio posted was not at all like the ribbon bar currently used in Office applications ( Word, Excel, Outlook, etc. ).

I'm heading out of town for several days. Maybe when I get back I will have some time to play with this. I currently have an element of my primary application that uses folders, and each has it's own button bar with group titles. I tried the ribbon bar options as a potential replacement but it didn't work for me. ( The look was not something I felt my clients would like ).

Yes, the look does seem to be retro to less attractive options. Perhaps Microsoft's focus groups suggested that was what people want.

by **James Bott** » Wed May 01, 2019 11:24 pm

rhlawek.

However, I typically use a small button bar above the ribbon bar, but when I add the following to the BuildRibbon function, immediately after the local declarations, the layout is no longer correct, apparently because the top of the ribbon bar location gets pushed down.

I would try putting the button bar on the window, then filling the client area with a panel. Finally put the ribbonbar on the panel and any other things you need like a browse.

James

by **Lailton** » Sat May 04, 2019 4:18 am

Wow, Looks nice this "black themes"

Here is a project that I had worked:
https://github.com/lailton/ribbon-bar

I will try to add the themes like this to my project.

Someone can confirm what is version Microsoft Office to see how it looks like?

by **Silvio.Falconi** » Sat May 04, 2019 7:47 am

I not undestood what and where are the modifies of Ribbon. Laiton.... it seem the current fwh ribbon

by **Antonio Linares** » Sat May 04, 2019 8:44 am

function SetRibbonBarTheme() enhanced version:

Code: Select all Expand view RUN: #include "FiveWin.ch" #define RB_THEME_DARK 6 #define COLOR_GRAYTEXT 17 //----------------------------------------------------------------------------// function Main() local oWnd DEFINE WINDOW oWnd oWnd:SetSize( 1200, 800 ) BuildRibbon( oWnd ) ACTIVATE WINDOW oWnd CENTER // MAXIMIZED return nil //----------------------------------------------------------------------------// function BuildRibbon( oWnd ) local oRb := TRibbonBar():New( oWnd ), oGroup, oBtn oRb:SetStyles( .F., .T. ) oGroup = oRb:AddGroup( 185, "First", 1 ) oBtn = oGroup:AddButton( 3, 3, oGroup:nHeight - 19, 90, "One", { || MsgInfo( "One" ) } ) oBtn:LoadBitmaps( "..\bitmaps\32x32\cascade.bmp" ) oBtn = oGroup:AddButton( 3, oBtn:nWidth + 3, oGroup:nHeight - 19, 90, "Two", { || MsgInfo( "Two" ) } ) oBtn:LoadBitmaps( "..\bitmaps\32x32\tiled.bmp" ) oGroup = oRb:AddGroup( 185, "Second", 1 ) oBtn = oGroup:AddButton( 3, 3, oGroup:nHeight - 19, 90, "Three" ) oBtn:LoadBitmaps( "..\bitmaps\32x32\world.bmp" ) oBtn = oGroup:AddButton( 3, oBtn:nWidth + 3, oGroup:nHeight - 19, 90, "Four" ) oBtn:LoadBitmaps( "..\bitmaps\32x32\task.bmp" ) oRb:AddGroup( 185, "Third", 1 ) SetRibbonBarTheme( oRb, RB_THEME_DARK ) return oRb //----------------------------------------------------------------------------// #define CLR_MSBLUE RGB( 43, 87, 154 ) #define CLR_DARKGRAY RGB( 54, 54, 54 ) function SetRibbonBarTheme( oRb, nTheme ) local oDlg, oGroup, oBtn do case case nTheme == RB_THEME_DARK oRb:oFont:End() oRb:SetFont( TFont():New( "Segoe UI", 0, -14 ) ) oRb:nHeight = 130 oRb:nHeightFld = 20 oRb:hSeparation = 4 oRb:nLeftMargin = 20 oRb:nRoundBox = 0 oRb:nClrPaneRB = CLR_BLACK oRb:nClrBoxOut = CLR_DARKGRAY oRb:nClrBoxIn = CLR_DARKGRAY oRb:nClrBoxSelOut = CLR_DARKGRAY oRb:nClrBoxSelIn = CLR_DARKGRAY oRb:aGrad = { { 1, CLR_DARKGRAY, CLR_DARKGRAY } } oRb:aGradFld = { | nOpt | If( nOpt == oRb:nStart, { { 1, CLR_DARKGRAY, CLR_DARKGRAY } },; { { 1, CLR_DARKGRAY, CLR_DARKGRAY } } ) } oRb:aGradHigh = { { 1, CLR_BLACK, CLR_BLACK } } oRb:aGradOver = { { 1, RGB( 0, 114, 198 ), RGB( 0, 114, 198 ) } } AFill( oRb:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_WHITE, CLR_WHITE ) } ) DeleteObject( oRb:hBmpBrushEx ) DeleteObject( oRb:hBrushEx ) oRb:hBmpBrushEx = GradientBmp( oRb, oRb:nRight - oRb:nRightMargin - 3, oRb:nBottom - oRb:nTopMargin + 1, oRb:aGrad ) oRb:hBrushEx = CreatePatternBrush( oRb:hBmpBrushEx ) for each oDlg in oRb:aDialogs oDlg:hBack = oRb:hBrushEx oDlg:Refresh() for each oGroup in oDlg:aControls if oGroup:IsKindOf( "TRBGROUP" ) oGroup:oFont:End() oGroup:SetFont( oRb:oFont ) oGroup:nHeight = 100 oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:aGradCaption = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } oGroup:bClrText = { | lEnable | If( lEnable, CLR_WHITE, CLR_DARKGRAY ) } oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:nClrBoxOut = CLR_LIGHTGRAY DeleteObject( oGroup:hBrushSel ) DeleteObject( oGroup:hBrushUnSel ) DeleteObject( oGroup:hBack ) oGroup:hBrushUnSel = oDlg:hBack oGroup:hBack = oDlg:hBack for each oBtn in oGroup:aControls if oBtn:IsKindOf( "TRBTN" ) oBtn:oFont:End() oBtn:SetFont( oRb:oFont ) oBtn:nHeight = 80 oBtn:bClrText = { || CLR_WHITE } oBtn:bClrGradNormal = { | lPressed | If( lPressed, { { 1, CLR_GRAY, CLR_GRAY } },; { { 1, CLR_GRAY, CLR_GRAY } } ) } oBtn:aClrGradUnder = { || { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } } oBtn:aClrGradBack = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } oBtn:nClrBoxIn = CLR_LIGHTGRAY oBtn:nClrBoxOut = CLR_LIGHTGRAY endif next oGroup:Refresh() endif next next endcase oRb:Default() return nil //----------------------------------------------------------------------------//

Microsoft RibbonBar Dark mode

FiveTech RibbonBar Dark mode

by **Antonio Linares** » Sat May 04, 2019 9:14 am

Modified version for Microsoft RibbonBar different colors. Blue in this example:

Code: Select all Expand view RUN: #include "FiveWin.ch" #define RB_THEME_DARK 6 #define COLOR_GRAYTEXT 17 //----------------------------------------------------------------------------// function Main() local oWnd DEFINE WINDOW oWnd oWnd:SetSize( 1200, 800 ) BuildRibbon( oWnd ) ACTIVATE WINDOW oWnd CENTER // MAXIMIZED return nil //----------------------------------------------------------------------------// function BuildRibbon( oWnd ) local oRb := TRibbonBar():New( oWnd ), oGroup, oBtn oRb:SetStyles( .F., .T. ) oGroup = oRb:AddGroup( 185, "First", 1 ) oBtn = oGroup:AddButton( 3, 3, oGroup:nHeight - 19, 90, "One", { || MsgInfo( "One" ) } ) oBtn:LoadBitmaps( "..\bitmaps\32x32\cascade.bmp" ) oBtn = oGroup:AddButton( 3, oBtn:nWidth + 3, oGroup:nHeight - 19, 90, "Two", { || MsgInfo( "Two" ) } ) oBtn:LoadBitmaps( "..\bitmaps\32x32\tiled.bmp" ) oGroup = oRb:AddGroup( 185, "Second", 1 ) oBtn = oGroup:AddButton( 3, 3, oGroup:nHeight - 19, 90, "Three" ) oBtn:LoadBitmaps( "..\bitmaps\32x32\world.bmp" ) oBtn = oGroup:AddButton( 3, oBtn:nWidth + 3, oGroup:nHeight - 19, 90, "Four" ) oBtn:LoadBitmaps( "..\bitmaps\32x32\task.bmp" ) oRb:AddGroup( 185, "Third", 1 ) SetRibbonBarTheme( oRb, RB_THEME_DARK ) return oRb //----------------------------------------------------------------------------// #define CLR_MSBLUE RGB( 43, 87, 154 ) #define CLR_MSLIGHTGRAY RGB( 243, 243, 243 ) #define CLR_MSGRAY RGB( 198, 198, 198 ) #define CLR_DARKGRAY RGB( 54, 54, 54 ) function SetRibbonBarTheme( oRb, nTheme ) local oDlg, oGroup, oBtn do case case nTheme == RB_THEME_DARK oRb:oFont:End() oRb:SetFont( TFont():New( "Segoe UI", 0, -14 ) ) oRb:nHeight = 130 oRb:nHeightFld = 20 oRb:hSeparation = 4 oRb:nLeftMargin = 20 oRb:nRoundBox = 0 oRb:nClrPaneRB = CLR_MSBLUE oRb:nClrBoxOut = CLR_MSLIGHTGRAY oRb:nClrBoxIn = CLR_MSLIGHTGRAY oRb:nClrBoxSelOut = CLR_MSLIGHTGRAY oRb:nClrBoxSelIn = CLR_MSLIGHTGRAY oRb:aGrad = { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } oRb:aGradFld = { | nOpt | If( nOpt == oRb:nStart, { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } },; { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } ) } oRb:aGradHigh = { { 1, CLR_BLACK, CLR_BLACK } } oRb:aGradOver = { { 1, RGB( 0, 114, 198 ), RGB( 0, 114, 198 ) } } AFill( oRb:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_MSBLUE, CLR_WHITE ) } ) DeleteObject( oRb:hBmpBrushEx ) DeleteObject( oRb:hBrushEx ) oRb:hBmpBrushEx = GradientBmp( oRb, oRb:nRight - oRb:nRightMargin - 3, oRb:nBottom - oRb:nTopMargin + 1, oRb:aGrad ) oRb:hBrushEx = CreatePatternBrush( oRb:hBmpBrushEx ) for each oDlg in oRb:aDialogs oDlg:hBack = oRb:hBrushEx oDlg:Refresh() for each oGroup in oDlg:aControls if oGroup:IsKindOf( "TRBGROUP" ) oGroup:oFont:End() oGroup:SetFont( oRb:oFont ) oGroup:nHeight = 100 oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:aGradCaption = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } oGroup:bClrText = { | lEnable | If( lEnable, CLR_BLACK, CLR_DARKGRAY ) } oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:nClrBoxOut = CLR_LIGHTGRAY DeleteObject( oGroup:hBrushSel ) DeleteObject( oGroup:hBrushUnSel ) DeleteObject( oGroup:hBack ) oGroup:hBrushUnSel = oDlg:hBack oGroup:hBack = oDlg:hBack for each oBtn in oGroup:aControls if oBtn:IsKindOf( "TRBTN" ) oBtn:oFont:End() oBtn:SetFont( oRb:oFont ) oBtn:nHeight = 80 oBtn:bClrText = { || CLR_BLACK } oBtn:bClrGradNormal = { | lPressed | If( lPressed, { { 1, CLR_MSGRAY, CLR_MSGRAY } },; { { 1, CLR_MSGRAY, CLR_MSGRAY } } ) } oBtn:aClrGradUnder = { || { { 1, CLR_MSGRAY, CLR_MSGRAY } } } oBtn:aClrGradBack = { { 1, CLR_MSGRAY, CLR_MSGRAY } } oBtn:nClrBoxIn = CLR_MSGRAY oBtn:nClrBoxOut = CLR_MSGRAY endif next oGroup:Refresh() endif next next endcase oRb:Default() return nil //----------------------------------------------------------------------------//

Microsoft RibbonBar Blue mode

FiveTech RibbonBar Blue mode

by **Antonio Linares** » Sat May 04, 2019 9:30 am

These are the code differences from the Dark and Blue modes:

We need to find a way to combine both styles, and more colors support in the same function.

by **TecniSoftware** » Sat May 04, 2019 3:27 pm

Antonio

La idea es hacer algo asi?

Code: Select all Expand view RUN: #include "FiveWin.ch" #define RB_THEME_DARK 6 #define COLOR_GRAYTEXT 17 #define CLR_MSBLUE RGB( 43, 87, 154 ) #define CLR_MSLIGHTGRAY RGB( 243, 243, 243 ) #define CLR_MSGRAY RGB( 198, 198, 198 ) #define CLR_DARKGRAY RGB( 54, 54, 54 ) #define _nClrPaneRB 1 #define _nClrBoxOut 2 #define _nClrBoxIn 3 #define _nClrBoxSelOut 4 #define _nClrBoxSelIn 5 #define _aGrad 6 #define _aGradFld 7 #define _aClrTabTxt 8 #define _Grp_bClrText 9 #define _Btn_bClrText 10 #define _Btn_bClrGradNormal 11 #define _Btn_aClrGradUnder 12 #define _Btn_aClrGradBack 13 #define _Btn_nClrBoxIn 14 #define _Btn_nClrBoxOut 15 Static oRb //----------------------------------------------------------------------------// function Main() local oWnd DEFINE WINDOW oWnd MENU BuildMenu() oWnd:SetSize( 1200, 800 ) BuildRibbon( oWnd ) ACTIVATE WINDOW oWnd CENTER // MAXIMIZED return nil //----------------------------------------------------------------------------// function BuildRibbon( oWnd ) Local oGroup, oBtn oRb := TRibbonBar():New( oWnd ) oRb:SetStyles( .F., .T. ) oGroup = oRb:AddGroup( 185, "First", 1 ) oBtn = oGroup:AddButton( 3, 3, oGroup:nHeight - 19, 90, "One", { || MsgInfo( "One" ) } ) oBtn:LoadBitmaps( "..\bitmaps\32x32\cascade.bmp" ) oBtn = oGroup:AddButton( 3, oBtn:nWidth + 3, oGroup:nHeight - 19, 90, "Two", { || MsgInfo( "Two" ) } ) oBtn:LoadBitmaps( "..\bitmaps\32x32\tiled.bmp" ) oGroup = oRb:AddGroup( 185, "Second", 1 ) oBtn = oGroup:AddButton( 3, 3, oGroup:nHeight - 19, 90, "Three" ) oBtn:LoadBitmaps( "..\bitmaps\32x32\world.bmp" ) oBtn = oGroup:AddButton( 3, oBtn:nWidth + 3, oGroup:nHeight - 19, 90, "Four" ) oBtn:LoadBitmaps( "..\bitmaps\32x32\task.bmp" ) oRb:AddGroup( 185, "Third", 1 ) SetRibbonBarTheme( 2 ) return oRb //----------------------------------------------------------------------------// function BuildMenu() local oMenu MENU oMenu MENUITEM "Blue" ACTION SetRibbonBarTheme( 1 ) MENUITEM "Dark" ACTION SetRibbonBarTheme( 2 ) ENDMENU return oMenu //----------------------------------------------------------------------------// function SetRibbonBarTheme( n ) local oDlg, oGroup, oBtn local aTheme := {} local aTmp // BLUE aTmp := {} aAdd( aTmp, CLR_MSBLUE ) aAdd( aTmp, CLR_MSLIGHTGRAY ) aAdd( aTmp, CLR_MSLIGHTGRAY ) aAdd( aTmp, CLR_MSLIGHTGRAY ) aAdd( aTmp, CLR_MSLIGHTGRAY ) aAdd( aTmp, { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } ) aAdd( aTmp, { { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } }, { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } } ) aAdd( aTmp, { CLR_MSBLUE, CLR_WHITE } ) aAdd( aTmp, { CLR_BLACK, CLR_DARKGRAY } ) aAdd( aTmp, CLR_BLACK ) aAdd( aTmp, { { { 1, CLR_MSGRAY, CLR_MSGRAY } }, { { 1, CLR_MSGRAY, CLR_MSGRAY } } } ) aAdd( aTmp, { { 1, CLR_MSGRAY, CLR_MSGRAY } } ) aAdd( aTmp, { { 1, CLR_MSGRAY, CLR_MSGRAY } } ) aAdd( aTmp, CLR_MSGRAY ) aAdd( aTmp, CLR_MSGRAY ) aAdd( aTheme, aTmp ) // DARK aTmp := {} aAdd( aTmp, RGB( 68, 68, 68 ) ) aAdd( aTmp, RGB( 178, 178, 178 ) ) aAdd( aTmp, RGB( 178, 178, 178 ) ) aAdd( aTmp, RGB( 178, 178, 178 ) ) aAdd( aTmp, RGB( 178, 178, 178 ) ) aAdd( aTmp, { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } } ) aAdd( aTmp, { { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } }, { { 1, RGB( 178, 178, 178 ), RGB( 178, 178, 178 ) } } } ) aAdd( aTmp, { RGB( 0, 0, 0 ), RGB( 255, 255, 255 ) } ) aAdd( aTmp, { RGB( 0, 0, 0 ), GetSysColor( COLOR_GRAYTEXT ) } ) aAdd( aTmp, CLR_BLACK ) aAdd( aTmp, { { { 1, RGB( 160, 160, 160 ), RGB( 160, 160, 160 ) } }, { { 1, RGB( 160, 160, 160 ), RGB( 160, 160, 160 ) } } } ) aAdd( aTmp, { { 1, RGB( 160, 160, 160 ), RGB( 160, 160, 160 ) } } ) aAdd( aTmp, { { 1, RGB( 160, 160, 160 ), RGB( 160, 160, 160 ) } } ) aAdd( aTmp, RGB( 160, 160, 160 ) ) aAdd( aTmp, RGB( 160, 160, 160 ) ) aAdd( aTheme, aTmp ) oRb:SetFont( TFont():New( "Segoe UI", 0, -14 ) ) oRb:nHeight = 130 oRb:nHeightFld = 20 oRb:hSeparation = 4 oRb:nLeftMargin = 20 oRb:nRoundBox = 0 oRb:nClrPaneRB = aTheme[n][_nClrPaneRB] oRb:nClrBoxOut = aTheme[n][_nClrBoxOut] oRb:nClrBoxIn = aTheme[n][_nClrBoxIn] oRb:nClrBoxSelOut = aTheme[n][_nClrBoxSelOut] oRb:nClrBoxSelIn = aTheme[n][_nClrBoxSelIn] oRb:aGrad = aTheme[n][_aGrad] oRb:aGradFld = { | nOpt | If( nOpt == oRb:nStart, aTheme[n][_aGradFld][1], aTheme[n][_aGradFld][2] ) } oRb:aGradHigh = { { 1, CLR_BLACK, CLR_BLACK } } oRb:aGradOver = { { 1, RGB( 0, 114, 198 ), RGB( 0, 114, 198 ) } } AFill( oRb:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, aTheme[n][_aClrTabTxt][1], aTheme[n][_aClrTabTxt][2] ) } ) DeleteObject( oRb:hBmpBrushEx ) DeleteObject( oRb:hBrushEx ) oRb:hBmpBrushEx = GradientBmp( oRb, oRb:nRight - oRb:nRightMargin - 3, oRb:nBottom - oRb:nTopMargin + 1, oRb:aGrad ) oRb:hBrushEx = CreatePatternBrush( oRb:hBmpBrushEx ) for each oDlg in oRb:aDialogs oDlg:hBack = oRb:hBrushEx oDlg:Refresh() for each oGroup in oDlg:aControls if oGroup:IsKindOf( "TRBGROUP" ) oGroup:SetFont( oRb:oFont ) oGroup:nHeight = 100 oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:aGradCaption = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } oGroup:bClrText = { | lEnable | If( lEnable, aTheme[n][_Grp_bClrText][1], aTheme[n][_Grp_bClrText][2] ) } oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:nClrBoxOut = CLR_LIGHTGRAY DeleteObject( oGroup:hBrushSel ) DeleteObject( oGroup:hBrushUnSel ) DeleteObject( oGroup:hBack ) oGroup:hBrushUnSel = oDlg:hBack oGroup:hBack = oDlg:hBack for each oBtn in oGroup:aControls if oBtn:IsKindOf( "TRBTN" ) oBtn:SetFont( oRb:oFont ) oBtn:nHeight = 80 oBtn:bClrText = { || aTheme[n][_Btn_bClrText] } oBtn:bClrGradNormal = { | lPressed | If( lPressed, aTheme[n][_Btn_bClrGradNormal][1], aTheme[n][_Btn_bClrGradNormal][2] ) } oBtn:aClrGradUnder = { || aTheme[n][_Btn_aClrGradUnder][1], aTheme[n][_Btn_aClrGradUnder][2] } oBtn:aClrGradBack = aTheme[n][_Btn_aClrGradBack] oBtn:nClrBoxIn = aTheme[n][_Btn_nClrBoxIn] oBtn:nClrBoxOut = aTheme[n][_Btn_nClrBoxOut] endif next oGroup:Refresh() endif next next oRb:Default() oRb:Refresh( .T. ) for each oDlg in oRb:aDialogs for each oGroup in oDlg:aControls if oGroup:IsKindOf( "TRBGROUP" ) for each oBtn in oGroup:aControls If oBtn:IsKindOf( "TRBTN" ) oBtn:Refresh(.T.) EndIf next EndIf next next return nil //----------------------------------------------------------------------------//

by **Antonio Linares** » Sun May 05, 2019 3:04 am

#define CLR_MSRED RGB( 164, 55, 58 )
#define CLR_MSORANGE RGB( 184, 72, 43 )
#define CLR_MSPPURPLE RGB( 128, 57, 123 )

#define CLR_MSBLUE1 RGB( 1, 115, 199 )
#define CLR_MSBLUE2 RGB( 57, 85, 163 )
#define CLR_MSBLUE3 RGB( 42, 87, 154 )

#define CLR_MSGREEN1 RGB( 49, 117, 47 )
#define CLR_MSGREEN2 RGB( 7, 117, 104 )
#define CLR_MSGREEN3 RGB( 34, 116, 71 )

I used Windows 10 Snipping Tool and Paint 3D and color selection option

thanks to James

by **Antonio Linares** » Sun May 05, 2019 3:10 am

Alejandro,

Si, algo similar, pero soportando todos estos colores que he indicado en el post anterior además del modo Dark

by **Silvio.Falconi** » Sun May 05, 2019 9:10 am

Antonio,
perhaps I make mistakes but I have microsoft Office 2019 and it is not the same

I make a test with your data ( more easy is copied the case commands with no array )

I insert a menu where we can set the type of ribbonbar

Code: Select all Expand view RUN: #include "FiveWin.ch" #include "ribbon.ch" #define RB_THEME_DARK 6 #define RB_THEME_BLUE 7 #define RB_THEME_RED 8 #define RB_THEME_GREEN 9 #define RB_THEME_ORANGE 10 #define CLR_MSBLUE RGB( 43, 87, 154 ) #define CLR_MSLIGHTGRAY RGB( 243, 243, 243 ) #define CLR_MSGRAY RGB( 198, 198, 198 ) #define CLR_DARKGRAY RGB( 54, 54, 54 ) #define CLR_MSRED RGB( 164, 55, 58 ) #define CLR_MSORANGE RGB( 184, 72, 43 ) #define CLR_MSPPURPLE RGB( 128, 57, 123 ) #define CLR_MSBLUE1 RGB( 1, 115, 199 ) #define CLR_MSBLUE2 RGB( 57, 85, 163 ) #define CLR_MSBLUE3 RGB( 42, 87, 154 ) #define CLR_MSGREEN1 RGB( 49, 117, 47 ) #define CLR_MSGREEN2 RGB( 7, 117, 104 ) #define CLR_MSGREEN3 RGB( 34, 116, 71 ) #define COLOR_GRAYTEXT 17 //----------------------------------------------------------------------------// function Main() local oWnd DEFINE WINDOW oWnd oWnd:SetSize( 1200, 800 ) BuildRibbon( oWnd ) ACTIVATE WINDOW oWnd CENTER // MAXIMIZED return nil //----------------------------------------------------------------------------// function BuildRibbon( oWnd ) local oRb := TRibbonBar():New( oWnd ), oGroup, oBtn local gr1,obtnsetup MENU oMenu POPUP MENUITEM "Dark" ; ACTION (SetRibbonBarTheme( oRb, RB_THEME_DARK ) , oRb:refresh(.f.)) MENUITEM "Blue" ; ACTION (SetRibbonBarTheme( oRb, RB_THEME_BLUE ) , oRb:refresh(.f.)) MENUITEM "Green" ; ACTION (SetRibbonBarTheme( oRb, RB_THEME_GREEN ), oRb:refresh(.f.)) MENUITEM "Red" ; ACTION (SetRibbonBarTheme( oRb, RB_THEME_RED ) , oRb:refresh(.f.)) MENUITEM "Orange" ; ACTION (SetRibbonBarTheme( oRb, RB_THEME_ORANGE ), oRb:refresh(.f.)) MENUITEM "Default" ; ACTION (SetRibbonBarTheme( oRb, RB_THEME_BLUE ) , oRb:refresh(.f.)) ENDMENU oRb:SetStyles( .F., .T. ) oGroup = oRb:AddGroup( 185, "First", 1 ) oBtn = oGroup:AddButton( 3, 3, oGroup:nHeight - 19, 90, "One", { || MsgInfo( "One" ) } ) oBtn:LoadBitmaps( "C:\work\fwh\bitmaps\32x32\cascade.bmp" ) oBtn = oGroup:AddButton( 3, oBtn:nWidth + 3, oGroup:nHeight - 19, 90, "Two", { || MsgInfo( "Two" ) } ) oBtn:LoadBitmaps( "C:\work\fwh\bitmaps\32x32\tiled.bmp" ) oGroup = oRb:AddGroup( 185, "Second", 1 ) oBtn = oGroup:AddButton( 3, 3, oGroup:nHeight - 19, 90, "Three" ) oBtn:LoadBitmaps( "C:\work\fwh\bitmaps\32x32\world.bmp" ) oBtn = oGroup:AddButton( 3, oBtn:nWidth + 3, oGroup:nHeight - 19, 90, "Four" ) oBtn:LoadBitmaps( "C:\work\fwh\bitmaps\32x32\task.bmp" ) ADD GROUP oGr1 RIBBON oRB TO OPTION 1 PROMPT "Styles" WIDTH 75 BITMAP "c:\work\fwh\bitmaps\style16.BMP" @ 3,5 ADD BUTTON oBtnSetup ; PROMPT "Change"+CRLF+"Styles" BITMAP "c:\work\fwh\bitmaps\stylechange32.BMP"; GROUP oGr1 MENU oMenu ; SPLITPOPUP ROUND SIZE 65,75 TOP SetRibbonBarTheme( oRb, RB_THEME_BLUE ) //as default return oRb //----------------------------------------------------------------------------// function SetRibbonBarTheme( oRb, nTheme ) local oDlg, oGroup, oBtn do case case nTheme == RB_THEME_DARK oRb:oFont:End() oRb:SetFont( TFont():New( "Segoe UI", 0, -14 ) ) oRb:nHeight = 130 oRb:nHeightFld = 20 oRb:hSeparation = 4 oRb:nLeftMargin = 20 oRb:nRoundBox = 0 oRb:nClrPaneRB = CLR_BLACK oRb:nClrBoxOut = CLR_DARKGRAY oRb:nClrBoxIn = CLR_DARKGRAY oRb:nClrBoxSelOut = CLR_DARKGRAY oRb:nClrBoxSelIn = CLR_DARKGRAY oRb:aGrad = { { 1, CLR_DARKGRAY, CLR_DARKGRAY } } oRb:aGradFld = { | nOpt | If( nOpt == oRb:nStart, { { 1, CLR_DARKGRAY, CLR_DARKGRAY } },; { { 1, CLR_DARKGRAY, CLR_DARKGRAY } } ) } oRb:aGradHigh = { { 1, CLR_BLACK, CLR_BLACK } } oRb:aGradOver = { { 1, RGB( 0, 114, 198 ), RGB( 0, 114, 198 ) } } AFill( oRb:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_WHITE, CLR_WHITE ) } ) DeleteObject( oRb:hBmpBrushEx ) DeleteObject( oRb:hBrushEx ) oRb:hBmpBrushEx = GradientBmp( oRb, oRb:nRight - oRb:nRightMargin - 3, oRb:nBottom - oRb:nTopMargin + 1, oRb:aGrad ) oRb:hBrushEx = CreatePatternBrush( oRb:hBmpBrushEx ) for each oDlg in oRb:aDialogs oDlg:hBack = oRb:hBrushEx oDlg:Refresh() for each oGroup in oDlg:aControls if oGroup:IsKindOf( "TRBGROUP" ) oGroup:oFont:End() oGroup:SetFont( oRb:oFont ) oGroup:nHeight = 100 oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:aGradCaption = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } oGroup:bClrText = { | lEnable | If( lEnable, CLR_WHITE, CLR_DARKGRAY ) } oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:nClrBoxOut = CLR_LIGHTGRAY DeleteObject( oGroup:hBrushSel ) DeleteObject( oGroup:hBrushUnSel ) DeleteObject( oGroup:hBack ) oGroup:hBrushUnSel = oDlg:hBack oGroup:hBack = oDlg:hBack for each oBtn in oGroup:aControls if oBtn:IsKindOf( "TRBTN" ) oBtn:oFont:End() oBtn:SetFont( oRb:oFont ) oBtn:nHeight = 80 oBtn:bClrText = { || CLR_WHITE } oBtn:bClrGradNormal = { | lPressed | If( lPressed, { { 1, CLR_GRAY, CLR_GRAY } },; { { 1, CLR_GRAY, CLR_GRAY } } ) } oBtn:aClrGradUnder = { || { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } } oBtn:aClrGradBack = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } oBtn:nClrBoxIn = CLR_LIGHTGRAY oBtn:nClrBoxOut = CLR_LIGHTGRAY endif next oGroup:Refresh() endif next next case nTheme == RB_THEME_BLUE oRb:oFont:End() oRb:SetFont( TFont():New( "Segoe UI", 0, -14 ) ) oRb:nHeight = 130 oRb:nHeightFld = 20 oRb:hSeparation = 4 oRb:nLeftMargin = 20 oRb:nRoundBox = 0 oRb:nClrPaneRB = CLR_MSBLUE oRb:nClrBoxOut = CLR_MSLIGHTGRAY oRb:nClrBoxIn = CLR_MSLIGHTGRAY oRb:nClrBoxSelOut = CLR_MSLIGHTGRAY oRb:nClrBoxSelIn = CLR_MSLIGHTGRAY oRb:aGrad = { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } oRb:aGradFld = { | nOpt | If( nOpt == oRb:nStart, { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } },; { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } ) } oRb:aGradHigh = { { 1, CLR_BLACK, CLR_BLACK } } oRb:aGradOver = { { 1, RGB( 0, 114, 198 ), RGB( 0, 114, 198 ) } } AFill( oRb:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_MSBLUE, CLR_WHITE ) } ) DeleteObject( oRb:hBmpBrushEx ) DeleteObject( oRb:hBrushEx ) oRb:hBmpBrushEx = GradientBmp( oRb, oRb:nRight - oRb:nRightMargin - 3, oRb:nBottom - oRb:nTopMargin + 1, oRb:aGrad ) oRb:hBrushEx = CreatePatternBrush( oRb:hBmpBrushEx ) for each oDlg in oRb:aDialogs oDlg:hBack = oRb:hBrushEx oDlg:Refresh() for each oGroup in oDlg:aControls if oGroup:IsKindOf( "TRBGROUP" ) oGroup:oFont:End() oGroup:SetFont( oRb:oFont ) oGroup:nHeight = 100 oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:aGradCaption = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } oGroup:bClrText = { | lEnable | If( lEnable, CLR_BLACK, CLR_DARKGRAY ) } oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:nClrBoxOut = CLR_LIGHTGRAY DeleteObject( oGroup:hBrushSel ) DeleteObject( oGroup:hBrushUnSel ) DeleteObject( oGroup:hBack ) oGroup:hBrushUnSel = oDlg:hBack oGroup:hBack = oDlg:hBack for each oBtn in oGroup:aControls if oBtn:IsKindOf( "TRBTN" ) oBtn:oFont:End() oBtn:SetFont( oRb:oFont ) oBtn:nHeight = 80 oBtn:bClrText = { || CLR_BLACK } oBtn:bClrGradNormal = { | lPressed | If( lPressed, { { 1, CLR_MSGRAY, CLR_MSGRAY } },; { { 1, CLR_MSGRAY, CLR_MSGRAY } } ) } oBtn:aClrGradUnder = { || { { 1, CLR_MSGRAY, CLR_MSGRAY } } } oBtn:aClrGradBack = { { 1, CLR_MSGRAY, CLR_MSGRAY } } oBtn:nClrBoxIn = CLR_MSGRAY oBtn:nClrBoxOut = CLR_MSGRAY endif next oGroup:Refresh() endif next next case nTheme == RB_THEME_RED oRb:oFont:End() oRb:SetFont( TFont():New( "Segoe UI", 0, -14 ) ) oRb:nHeight = 130 oRb:nHeightFld = 20 oRb:hSeparation = 4 oRb:nLeftMargin = 20 oRb:nRoundBox = 0 oRb:nClrPaneRB = CLR_MSRED oRb:nClrBoxOut = CLR_MSLIGHTGRAY oRb:nClrBoxIn = CLR_MSLIGHTGRAY oRb:nClrBoxSelOut = CLR_MSLIGHTGRAY oRb:nClrBoxSelIn = CLR_MSLIGHTGRAY oRb:aGrad = { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } oRb:aGradFld = { | nOpt | If( nOpt == oRb:nStart, { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } },; { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } ) } oRb:aGradHigh = { { 1, CLR_BLACK, CLR_BLACK } } oRb:aGradOver = { { 1, RGB( 0, 114, 198 ), RGB( 0, 114, 198 ) } } AFill( oRb:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_MSRED, CLR_WHITE ) } ) DeleteObject( oRb:hBmpBrushEx ) DeleteObject( oRb:hBrushEx ) oRb:hBmpBrushEx = GradientBmp( oRb, oRb:nRight - oRb:nRightMargin - 3, oRb:nBottom - oRb:nTopMargin + 1, oRb:aGrad ) oRb:hBrushEx = CreatePatternBrush( oRb:hBmpBrushEx ) for each oDlg in oRb:aDialogs oDlg:hBack = oRb:hBrushEx oDlg:Refresh() for each oGroup in oDlg:aControls if oGroup:IsKindOf( "TRBGROUP" ) oGroup:oFont:End() oGroup:SetFont( oRb:oFont ) oGroup:nHeight = 100 oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:aGradCaption = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } oGroup:bClrText = { | lEnable | If( lEnable, CLR_BLACK, CLR_DARKGRAY ) } oGroup:nClrBoxIn = CLR_MSRED oGroup:nClrBoxOut = CLR_MSRED DeleteObject( oGroup:hBrushSel ) DeleteObject( oGroup:hBrushUnSel ) DeleteObject( oGroup:hBack ) oGroup:hBrushUnSel = oDlg:hBack oGroup:hBack = oDlg:hBack for each oBtn in oGroup:aControls if oBtn:IsKindOf( "TRBTN" ) oBtn:oFont:End() oBtn:SetFont( oRb:oFont ) oBtn:nHeight = 80 oBtn:bClrText = { || CLR_BLACK } oBtn:bClrGradNormal = { | lPressed | If( lPressed, { { 1, CLR_MSGRAY, CLR_MSGRAY } },; { { 1, CLR_MSGRAY, CLR_MSGRAY } } ) } oBtn:aClrGradUnder = { || { { 1, CLR_MSGRAY, CLR_MSGRAY } } } oBtn:aClrGradBack = { { 1, CLR_MSGRAY, CLR_MSGRAY } } oBtn:nClrBoxIn = CLR_MSGRAY oBtn:nClrBoxOut = CLR_MSGRAY endif next oGroup:Refresh() endif next next case nTheme == RB_THEME_GREEN oRb:oFont:End() oRb:SetFont( TFont():New( "Segoe UI", 0, -14 ) ) oRb:nHeight = 130 oRb:nHeightFld = 20 oRb:hSeparation = 4 oRb:nLeftMargin = 20 oRb:nRoundBox = 0 oRb:nClrPaneRB = CLR_MSGREEN1 oRb:nClrBoxOut = CLR_MSLIGHTGRAY oRb:nClrBoxIn = CLR_MSLIGHTGRAY oRb:nClrBoxSelOut = CLR_MSLIGHTGRAY oRb:nClrBoxSelIn = CLR_MSLIGHTGRAY oRb:aGrad = { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } oRb:aGradFld = { | nOpt | If( nOpt == oRb:nStart, { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } },; { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } ) } oRb:aGradHigh = { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } oRb:aGradOver = { { 1, RGB( 0, 114, 198 ), RGB( 0, 114, 198 ) } } AFill( oRb:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_MSGREEN2, CLR_WHITE ) } ) DeleteObject( oRb:hBmpBrushEx ) DeleteObject( oRb:hBrushEx ) oRb:hBmpBrushEx = GradientBmp( oRb, oRb:nRight - oRb:nRightMargin - 3, oRb:nBottom - oRb:nTopMargin + 1, oRb:aGrad ) oRb:hBrushEx = CreatePatternBrush( oRb:hBmpBrushEx ) for each oDlg in oRb:aDialogs oDlg:hBack = oRb:hBrushEx oDlg:Refresh() for each oGroup in oDlg:aControls if oGroup:IsKindOf( "TRBGROUP" ) oGroup:oFont:End() oGroup:SetFont( oRb:oFont ) oGroup:nHeight = 100 oGroup:nClrBoxIn = CLR_MSGREEN2 oGroup:aGradCaption = { { 1, CLR_MSGREEN3, CLR_MSGREEN3 } } oGroup:bClrText = { | lEnable | If( lEnable, CLR_BLACK, CLR_MSLIGHTGRAY ) } oGroup:nClrBoxIn = CLR_MSGREEN3 oGroup:nClrBoxOut = CLR_MSGREEN3 DeleteObject( oGroup:hBrushSel ) DeleteObject( oGroup:hBrushUnSel ) DeleteObject( oGroup:hBack ) oGroup:hBrushUnSel = oDlg:hBack oGroup:hBack = oDlg:hBack for each oBtn in oGroup:aControls if oBtn:IsKindOf( "TRBTN" ) oBtn:oFont:End() oBtn:SetFont( oRb:oFont ) oBtn:nHeight = 80 oBtn:bClrText = { || CLR_BLACK } oBtn:bClrGradNormal = { | lPressed | If( lPressed, { { 1, CLR_MSGREEN1, CLR_MSGREEN1 } },; { { 1, CLR_MSGREEN2, CLR_MSGREEN2 } } ) } oBtn:aClrGradUnder = { || { { 1, CLR_MSGREEN3, CLR_MSGREEN3 } } } oBtn:aClrGradBack = { { 1, CLR_MSGREEN1, CLR_MSGREEN1 } } oBtn:nClrBoxIn = CLR_MSGRAY oBtn:nClrBoxOut = CLR_MSGRAY endif next oGroup:Refresh() endif next next case nTheme == RB_THEME_ORANGE oRb:oFont:End() oRb:SetFont( TFont():New( "Segoe UI", 0, -14 ) ) oRb:nHeight = 130 oRb:nHeightFld = 20 oRb:hSeparation = 4 oRb:nLeftMargin = 20 oRb:nRoundBox = 0 oRb:nClrPaneRB = CLR_MSORANGE oRb:nClrBoxOut = CLR_MSLIGHTGRAY oRb:nClrBoxIn = CLR_MSLIGHTGRAY oRb:nClrBoxSelOut = CLR_MSLIGHTGRAY oRb:nClrBoxSelIn = CLR_MSLIGHTGRAY oRb:aGrad = { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } oRb:aGradFld = { | nOpt | If( nOpt == oRb:nStart, { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } },; { { 1, CLR_MSLIGHTGRAY, CLR_MSLIGHTGRAY } } ) } oRb:aGradHigh = { { 1, CLR_BLACK, CLR_BLACK } } oRb:aGradOver = { { 1, RGB( 0, 114, 198 ), RGB( 0, 114, 198 ) } } AFill( oRb:aClrTabTxt, { | oSelf, nPrompt | If( nPrompt == oSelf:nOption, CLR_MSBLUE, CLR_WHITE ) } ) DeleteObject( oRb:hBmpBrushEx ) DeleteObject( oRb:hBrushEx ) oRb:hBmpBrushEx = GradientBmp( oRb, oRb:nRight - oRb:nRightMargin - 3, oRb:nBottom - oRb:nTopMargin + 1, oRb:aGrad ) oRb:hBrushEx = CreatePatternBrush( oRb:hBmpBrushEx ) for each oDlg in oRb:aDialogs oDlg:hBack = oRb:hBrushEx oDlg:Refresh() for each oGroup in oDlg:aControls if oGroup:IsKindOf( "TRBGROUP" ) oGroup:oFont:End() oGroup:SetFont( oRb:oFont ) oGroup:nHeight = 100 oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:aGradCaption = { { 1, CLR_LIGHTGRAY, CLR_LIGHTGRAY } } oGroup:bClrText = { | lEnable | If( lEnable, CLR_BLACK, CLR_DARKGRAY ) } oGroup:nClrBoxIn = CLR_LIGHTGRAY oGroup:nClrBoxOut = CLR_LIGHTGRAY DeleteObject( oGroup:hBrushSel ) DeleteObject( oGroup:hBrushUnSel ) DeleteObject( oGroup:hBack ) oGroup:hBrushUnSel = oDlg:hBack oGroup:hBack = oDlg:hBack for each oBtn in oGroup:aControls if oBtn:IsKindOf( "TRBTN" ) oBtn:oFont:End() oBtn:SetFont( oRb:oFont ) oBtn:nHeight = 80 oBtn:bClrText = { || CLR_BLACK } oBtn:bClrGradNormal = { | lPressed | If( lPressed, { { 1, CLR_MSGRAY, CLR_MSGRAY } },; { { 1, CLR_MSGRAY, CLR_MSGRAY } } ) } oBtn:aClrGradUnder = { || { { 1, CLR_MSGRAY, CLR_MSGRAY } } } oBtn:aClrGradBack = { { 1, CLR_MSGRAY, CLR_MSGRAY } } oBtn:nClrBoxIn = CLR_MSGRAY oBtn:nClrBoxOut = CLR_MSGRAY endif next oGroup:Refresh() endif next next endcase oRb:Default() return nil //----------------------------------------------------------------------------//

by **Antonio Linares** » Sun May 05, 2019 4:34 pm

Silvio,

Very good try :-)

But still there are some MS colors missing and a lot of duplicated code in function SetRibbonBarTheme()

FiveTech Software tech support forums

Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Re: Ribbon Theme

Who is online