Custom full screen CSS that overwrites SolarWinds default page styling for the NOC views - workaround to allow Maps to go full screen in NOC mode (press F11 in browser to go full-screen).

SEE FILE ATTACHED TO POST FOR CSS

 

This CSS only provides styling for NOC views that only have a "Map" & "Custom HTML" component. Copy this CSS (including the <style> tags) into the "Custom HTML" component to put into effect.

 

  1. Create a new NOC view add only the "Map" & "Custom HTML" components
    • Remove the second column, you only need 1 column for this
    • Only add the "Map" and  "Custom HTML" components (order shouldn't matter)

     Image of the NOC view page settings during creation

    • Should have only these visible:

     layout with just the unconfigured map and html components

  1. Configure your Map component
    • Do not update the Title - just keep it as "Map"
      • We'll be hiding the title anyway so it won't matter.
    • Choose your map
    • Click "Submit"

    

    • It will look like a hot mess to start - the map will be cut off and not all of it will be visible.
      • Don't worry about this - Step 3 fixes this when we overwrite SolarWinds default CSS

    

  1. Configure your Custom HTML component
    • Do not update the title - keep it as "Custom HTML". Same deal as with the Map component
    • Paste ALL of the CSS into the main text area
    • Click "Submit"

    

  1. Map should be large now, and you should see the "Edit" buttons for the components in the top left corner

    

  1. Show in NOC Mode to get rid of the edit buttons and press F11 to have your browser go fullscreen
    • Press F11 to exit full screen
    • Exit NOC mode if you need to access the edit buttons

    

 

Some notes:

  • This CSS by default targets the default component names "Map" & "Custom HTML". If you change these, you'll have to update the CSS, i.e.:

If you update the Map components title from "Map" to "Local Server Farm Map", you have to update all instances of:

sw-widget-title='Map'    ---->    sw-widget-title='Local Server Farm MapCustom'    (nothing a little find & replace can't fix)

  • This CSS is just a quick working concept we're putting into production; it isn't perfect by any means but it gets the job done for us. Feel free to revise as you see fit.
    • If you know CSS, or at least the general concepts and workings of CSS, you should be able to easily update this to how you want it.
  • This relies on the custom tag attributes SolarWinds provides with the components: sw-widget-title
    • This means that it can break easy. If SolarWinds decides to push an update that changes the components HTML attributes, and the "sw-widget-title" attribute no longer exists, the view will no longer work as intended. You will need to update the CSS accordingly.
  • This CSS **SHOULD** work with most maps, however, to get full screen coverage, it stretches to fill. We custom made our maps to our monitor's resolution so stretching would not be an issue.
    • Feel free to update the CSS to work with your specific maps.
  • If you can't find the "Edit" links for components, please note that they are not provided while in NOC view mode. Exit NOC view mode, and if you have permissions to edit components, the Edit links for the "Map" & "Custom HTML" components should be visible in the top left.

 

 

CUSTOM CSS

<style>


/*******************************************
Custom full screen CSS that overwrites SolarWinds default page styling for the NOC views.
Workaround to allow Maps to go full screen in NOC mode (press F11 in browser to go full-screen).
This CSS only provides styling for NOC views that only have a "Map" & "Custom HTML" component. Copy this CSS (including the <style> tags) into the "Custom HTML" component to put into effect.




Some notes:
- This CSS by default targets the default component names "Map" & "Custom HTML". If you change these, you'll have to update the CSS, i.e.:
If you update the Map components title from "Map" to "Local Server Farm Map", you have to update all instances of:
sw-widget-title='Map'    ---->    sw-widget-title='Local Server Farm MapCustom'    (nothing a little find & replace can't fix)


- This CSS is just a quick working concept we're putting into production; it isn't perfect by any means but it gets the job done for us. Feel free to revise as you see fit.
---- If you know CSS, or at least the general concepts and workings of CSS, you should be able to easily update this to how you want it.


- This relies on the custom tag attributes SolarWinds provides with the components: sw-widget-title
---- This means that it can break easy. If SolarWinds decides to push an update that changes the components HTML attributes, and the "sw-widget-title" attribute no longer exists, the view will no longer work as intended. You will need to update the CSS accordingly.


- This CSS **SHOULD** work with most maps, however, to get full screen coverage, it stretches to fill. We custom made our maps to our monitor's resolution so stretching would not be an issue.
---- Feel free to update the CSS to work with your specific maps.


- If you can't find the "Edit" links for components, please note that they are not provided while in NOC view mode. Exit NOC view mode, and if you have permissions to edit components, the Edit links for the "Map" & "Custom HTML" components should be visible in the top left.




If there are any additional bits of information you would like me to include with this, just add to the comments of the post: 
*******************************************/


/*******************************************
Map styling


- Allows map element to go full screen
- positions it relative to the top left corner by overwriting SolarWinds default styling


*******************************************/


.networkMapContainer {
width: 100vw !important;
height: -webkit-calc(100vh - 40px) !important;
height: -moz-calc(100vh - 40px) !important;
height: calc(100vh - 40px) !important;
height: 100vh !important;
position: fixed !important;
top: -15px !important;
left: -5px !important;
}


.networkMapContainer img {
width: 100vw !important;
height: 100vh !important;
}




/*******************************************
Edit link styling for the page components


- Turns the edit links into larger buttons
- Styles the link's hover state


*******************************************/


/*Button styling for the "Map" & "Custom HTML" edit links*/
div[sw-widget-title='Map'] a.EditResourceButton,
div[sw-widget-title='Custom HTML'] a.EditResourceButton {
background-color: #008CBA !important;
    border: none !important;
    padding: 15px 32px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 4px 2px !important;
    cursor: pointer !important;
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;

}


/*Button hover state styling for the "Map" & "Custom HTML" edit links*/
div[sw-widget-title='Map'] a.EditResourceButton:hover,
div[sw-widget-title='Custom HTML'] a.EditResourceButton:hover {
-webkit-box-shadow: 0 0 16px 0 rgba(207,235,245,0.10), 0 0 50px 0 rgba(207,235,245,0.05) !important;
-moz-box-shadow: 0 0 16px 0 rgba(207,235,245,0.10), 0 0 50px 0 rgba(207,235,245,0.05) !important;
box-shadow: 0 0 16px 0 rgba(207,235,245,0.10), 0 0 50px 0 rgba(207,235,245,0.05) !important;
background-color: #06a4d8 !important;
text-decoration: none !important;
}


/*Edit style of link text*/
div[sw-widget-title='Map'] .sw-btn-resource span,
div[sw-widget-title='Custom HTML'] .sw-btn-resource span {
font-size: 1.25em !important;
font-weight: bold !important;
color: white !important;
line-height: 1.25em !important;
}


div[sw-widget-title='Map'] .sw-btn-resource .sw-btn-t:hover,
div[sw-widget-title='Custom HTML'] .sw-btn-resource .sw-btn-t:hover {
text-decoration: none !important;
}




/*******************************************
CSS targeting the edit link for the Map Component


- Raises the edit link we styled above for the "Custom HTML" component over top of the map so it is accessible
- Removes component panel, header, etc. Basically, it hides everything except the edit link


*******************************************/


/* Moves link to top of all elements and to the top left of screen */
div[sw-widget-title='Map'] a.EditResourceButton {
z-index: 999;
position: fixed !important;
top: 60px !important;
}


/* adds text to end of edit link for readability */
div[sw-widget-title='Map'] .sw-btn-resource .sw-btn-t:after{
content: " THE MAP" !important;
}




/*******************************************
CSS targeting the Custom HTML Component


- Raises the edit link we styled above for the "Custom HTML" component over top of the map so it is accessible
- Removes component panel, header, etc. Basically, it hides everything except the edit link


*******************************************/


/* overwrites SolarWinds styling and moves link to top of all elements and to the top left of screen */
div[sw-widget-title='Custom HTML'] {
z-index: 500 !important;
position: fixed !important;
width: 20vh !important;
height: 10vh !important;
background: transparent !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 0 0 20px !important;
border: 0 !important;
}


div[sw-widget-title='Custom HTML'] > .HeaderBar {
border: 0 !important;
padding: 0 !important;
}


/* hides everything other than the edit link */
div[sw-widget-title='Custom HTML'] a.HelpButton,
div[sw-widget-title='Custom HTML'] a.sw-widget__title,
div[sw-widget-title='Custom HTML'] > .ResourceContent {
display: none !important;
}


/* adds text to end of edit link for readability */
div[sw-widget-title='Custom HTML'] .sw-btn-resource .sw-btn-t:after {
content: " THE PAGE CSS" !important;
}


</style>

SolarWinds uses cookies on its websites to make your online experience easier and better. By using our website, you consent to our use of cookies. For more information on cookies, see our cookie policy.