The Frame of Mirador

Hello all. I have a problem with the frame of Mirador on Omeka-s.

I use the Cozy theme for my site, but I found the upper border of the Mirador viewer is wider than usual, and the color is always black even I choose the light theme.

As the screenshot shows, the upper border of the viewer is too wide and also not responsive when I play full screen. The title of the manifest seems to be smaller than normal. Is this relevant with the cozy theme? Do I need to modify the CSS of Mirador? or customize the CSS of the theme?

I hope someone could help me to figure out this issue, thanks!!

Hello Phyllis,

Do you have the CSS Editor module (it takes priority over the CSS of the theme) ? That way, you can add a rule straight from the admin interface.
Depending on your internet browser, you will have different kinds of developer tools to inspect the code of a page (on Firefox it is the Inspector). Try examining the black box and observe which part of the mirador viewer produces this black background. I think it might be the element (it inherits the same characteristics as the nav in the header). So copy the path to that element from your browser tool to CSS Editor and change the settings so it has a relative position and a transparent background.
Then, you can try and enlarge the toolbar (it has mirador33 and mirador34 as classes) to its full width with this in CSS Editor :

div header.MuiPaper-root.MuiAppBar-root.MuiAppBar-positionRelative.MuiAppBar-colorDefault.MuiPaper-elevation4 nav{
position;relative;
width:auto;
background-color:transparent;
}
.mirador34.mirador33{
width:100%;
}

I am not sure of what I am telling you but you might want to try and experiment with your browser tool to see if any change in the CSS on these specific elements work and then apply those changes in the CSS.