This discussion has been locked. The information referenced herein may be inaccurate due to age, software updates, or external references.

You can no longer post new replies to this discussion. If you have a similar question you can start a new discussion in this forum.

Full Screen NOC View - Adding your own Custom Styling

hollanjs over 5 years ago

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.

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)

FULL SCREEN NOC TEST PAGE SETUP.PNG

- Should have only these visible:

FULL SCREEN NOC TEST PAGE unedited layout.PNG

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"

FULL SCREEN NOC TEST PAGE map setup.PNG

- 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

FULL SCREEN NOC TEST PAGE edit custom html.PNG

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"

FULL SCREEN NOC TEST PAGE copy in css.PNG

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

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

FULL SCREEN NOC TEST PAGE final full screen view.PNG

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>

0 caparja over 5 years ago

thanks for the info hollanjs
do you happen to know the css element that controls the overall width of a noc view page? i tried editing the .header-top in NOCPageHeader CSS sheet within the styles directory, but it did not have the desired effect.
appreciate any suggestions...
Cancel
Vote Up 0 Vote Down

Cancel

0 hollanjs over 5 years ago

caparja - Sorry for the late reply! If you're looking to target the whole banner across the top, you could try editing the .sw-mainnav-branding class. That is the class applied to the #pageHeader div that contains the whole top banner. I found I had to use a lot of !Important rules next to certain CSS to force it to overwrite CSS that might have been impleneted farther down the chain.

<link rel="stylesheet" type="text/css" href="">thwack.solarwinds.com/.../>
<div id="pageHeader" class="sw-mainnav-branding">
    <div id="CustomBanner"></div>
    <div id="swNavScroll" class="header-top">
        <div id="swNav" class="NOCSiteLogoImgMenu">
            
        </div>
        <div class="NOCSiteMenu">
          <div id="NOCMenu">
             <div id = "menuImgHover" class="imgHover">
                <i class="menuImg"></i>
             </div>
             <ul id="NOCMunuItems">
             
                   <li class="NOCMenuDivider"></li>
                   <li><a id="ExitNOCItem" href="#">Exit NOC mode</a></li>
             </ul>
            </div>
           <div class="noc-slides-navigation"></div>
        </div>
        
        <div class="NOCSiteLogo">
          <span>NOC View</span>
        </div>
    </div>
</div>

0 vicky.sandifer over 4 years ago

This code works great for full screening the map, but we lose the hover over ability on nodes once we add the code. So before we can hover over a node, interface or group and get the utilization, etc. But after applying the code, it basically makes an image of the map and you cannot select any nodes or anything.
Is this by design?
Cancel
Vote Up 0 Vote Down

Cancel
0 pgaryga over 4 years ago

Can the NOC view be configured to refresh the content in iframes when switching? It seems that once loaded the content doesn't update on the next rotation.
Cancel
Vote Up 0 Vote Down

Cancel
0 jwusm over 4 years ago

I built a revised version of this CSS that utilizes the zoom feature instead of stretching the image. You have to modify the zoom factor to handle the various resolutions that you'll be using, but it does keep the mouse-over functions intact.
Full Screen NOC View Map for 1080p or 1440p
Cancel
Vote Up 0 Vote Down

Cancel