Create responsive, resizing, centered DockedCell

Question

I was trying to define the same decorative toolbar as it is pictured here in stylesheet. I succeed to do so. Now, I want to define custom decorative toolbar in the Default stylesheet using the same approach.

I used this code in cell expression form

Cell[BoxData[ToBoxes[image] /. {(ImageSize -> {___, ___}) -> (ImageSize -> \{1399, 24})}], "DockedCell", Background -> White, ImageMargins -> 0, CellMargins -> {{0, 0}, {0, 0}}, CellFrameMargins -> {{0, 0}, {0, 0}}] // CellPrint

Please note that instead of "image" in the code I used actual image.
I copied this part from code above

RasterBox[CompressedData["1:eJ....SPo="], {{0, 232}, {1833, 0}}, {0, 255},
      ColorFunction->RGBColor] (*"1:eJ....SPo=" - too long to show*)

to

Cell[StyleData[All, "Working"], Editable->True, 
CellInsertionPointCell->FEPrivate`FrontEndResource[
"FEExpressions", "CellInsertionMenu"],
DockedCells->{Cell[BoxData[GraphicsBox[TagBox[place for code above,
BoxForm`ImageTag["Byte", Interleaving -> True, ColorSpace -> "RGB"], 
Selectable -> False], BaseStyle -> "ImageGraphics", 
ImageSize -> {1399, 250}, 
ImageSizeRaw -> {1399, 250}, 
PlotRange -> {{0, 1399}, {0, 250}}]]]}]

placed in the custom stylesheet notebook in the section Style Enviroment Names, Working.

The problem is that the docked decorative toolbar is not scalable in contrast to created decorative toolbar in notebook.

I put the corresponding notebook file and stylesheet notebook here
I will be grateful for any advice.

Answer 1

Here's a way to do it. First we'll use this as our DockedCell expression:

newDockedCell =
  Cell[
   BoxData@ToBoxes@
     Pane[
      Import["https://i.imgur.com/LUIaEdC.png"],
      ImageSize ->
       {
        FEPrivate`Part[
         FrontEnd`AbsoluteCurrentValue[FrontEnd`EvaluationNotebook[], 
          WindowSize],
         1],
        Automatic
        },
      ImageSizeAction -> "ShrinkToFit",
      Alignment -> Center
      ]
   ];

Then just add these style edits to the stylesheet however you like. This is my preferred short-hand (using custom package-level functions), but the easiest thing is just to do it manually as you have done:

StyleSheetEdit[
 "Notebook",
 DockedCells ->
  newDockedCell,
 "MakeCell" -> True
 ]

StyleSheetEdit[
 "DockedCell",
 {
  CellFrameMargins -> 0,
  Background -> White
  },
 "MakeCell" -> True
 ]

The key here is this:

FEPrivate`Part[
 FrontEnd`AbsoluteCurrentValue[FrontEnd`EvaluationNotebook[], 
  WindowSize],
 1]

That will be computed by the front-end directly and give the notebook width.

By setting these:

ImageSizeAction -> "ShrinkToFit",
Alignment -> Center

The Pane will force the content to be centered and take on that size and shrink if constrained.

You can see from these that it works:

Getting this into the stylesheet:

This can be a little annoying to add to the stylesheet, so here's an effective way to do this:

• Go to the stylesheet
• Find the style CellObject for "Notebook". This can be most easily gotten via PreviousCell or NextCell.
• Run this:

SetOptions[thatCell, DockedCells->newDockedCell]

• Select that cell and toggle Show Expression on and off

It should work after that