# XML style for custom layout
**URL:** https://discourse.slicer.org/t/xml-style-for-custom-layout/5831
**Category:** Support
**Created:** [February 19, 2019, 4:10pm UTC](https://discourse.slicer.org/t/xml-style-for-custom-layout/5831 "2019-02-19T16:10:19Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@ghnguyen](https://discourse.slicer.org/u/ghnguyen)
#### Post date: [February 19, 2019, 4:10pm UTC](https://discourse.slicer.org/t/xml-style-for-custom-layout/5831/1 "2019-02-19T16:10:19Z")
Hi,
I want to make a custom layout and right now I just have a long XML string. Can I specify an XML stylesheet or is there any easier way to change the background color (for the space between the items or the layouts)? Using style=“background-color:#000000” directly in the item does not work. Right now it’s #EEEEEE I believe and I’d like to make it black. Thanks!
---
### Author:  [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)
#### Post date: [February 19, 2019, 11:19pm UTC](https://discourse.slicer.org/t/xml-style-for-custom-layout/5831/2 "2019-02-19T23:19:10Z")
For regular Qt layouts, you change change background color of a widget using xml or python
```xml
background-color:#000000
```
```python
widget=qt.QWidget()
widget.setStyleSheet("background-color:#000000") # background set to black
```
I generally use Qt Designer to generate UI files which is the XML code. That application is actually bundled in Slicer 4.10.1 which you can access by going to …/Slicer 4.10.1/bin/SlicerDesigner.exe or you can use it if you download Qt5 from the web.
Slicer does technically have a “Dark Mode” if you are attempting to set layouts to some dark color. You can switch to it by going to Edit-\>Application Settings-\>Appearance-\>Style-\>Dark Slicer
---
### Author:  [@ghnguyen](https://discourse.slicer.org/u/ghnguyen)
#### Post date: [March 6, 2019, 5:10pm UTC](https://discourse.slicer.org/t/xml-style-for-custom-layout/5831/3 "2019-03-06T17:10:06Z")
Continuing the discussion from [XML style for custom layout](https://discourse.slicer.org/t/xml-style-for-custom-layout/5831/2):
Hi James, thanks for the suggestion. I think there is a misunderstanding here, I can set the styleSheet of the regular Qt layouts like you mentioned. What I am looking for is how to change that of the layoutnode. Specifically the one that handles all viewports when you call slicer.app.layoutManager().layoutLogic().GetLayoutNode(). I can set the custom XML layout for this, but when screen size changes, there would be gaps between my XML items and those gaps are currently gray. I’m adding 2 screenshots for easier comparison.
---
### Author:  [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)
#### Post date: [March 6, 2019, 7:50pm UTC](https://discourse.slicer.org/t/xml-style-for-custom-layout/5831/4 "2019-03-06T19:50:48Z")
Instead of addressing the issue of making the grey color black, I think you actually need to be addressing why the slice widgets don’t have the correct horizontal size policy. If you are changing window size and the objects are not changing size, then you have incorrect size policy set for the widgets.
I don’t think I’ve ever had to set size policy when customizing layouts. See [https://www.slicer.org/wiki/Documentation/Nightly/ScriptRepository#Customize\_viewer\_layout](https://www.slicer.org/wiki/Documentation/Nightly/ScriptRepository#Customize_viewer_layout) as an example for customizing layouts. Otherwise you might need to explicitly state another property for sizepolicy.
---
### Author:  [@ghnguyen](https://discourse.slicer.org/u/ghnguyen)
#### Post date: [March 6, 2019, 8:10pm UTC](https://discourse.slicer.org/t/xml-style-for-custom-layout/5831/5 "2019-03-06T20:10:51Z")
Good point, I did in fact fix the maximum height/width of the slice widgets to match with the size of some images that I need to do mapping on. I was just wondering if I could change the background as well.
---
### Author:  [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)
#### Post date: [March 6, 2019, 8:39pm UTC](https://discourse.slicer.org/t/xml-style-for-custom-layout/5831/6 "2019-03-06T20:39:22Z")
> [@ghnguyen](#):
>
> fix the maximum height/width of the slice widgets to match with the size of some images that I need to do mapping on
This is quite unusual. I would suggest updating the field of view of the slice window instead. Then the black color from inside the slice viewers will be used.
Look into slice logic for doing things like:
```python
width = 10 # mm
slice_logic = slicer.app.layoutManager().sliceWidget("Green").sliceLogic()
slice_logic.FitFOVToBackground(width))
```
or the basic centering:
```python
layout_manager = slicer.app.layoutManager()
for slice_name in layout_manager.sliceViewNames():
layout_manager.sliceWidget(slice_name).sliceLogic().FitSliceToAll()
```
[https://www.slicer.org/wiki/Documentation/Nightly/ScriptRepository#Reset\_field\_of\_view\_to\_show\_background\_volume\_maximized](https://www.slicer.org/wiki/Documentation/Nightly/ScriptRepository#Reset_field_of_view_to_show_background_volume_maximized)