PNP very small font - how can I get it bigger?


#1

Hello,

have a problem with PNP. Had installed it on SLES12SP3 from Suse Monitoring Repo
http://download.opensuse.org/repositories/server:/monitoring/SLE_12_SP3/

Only if I click on the PNP-Module the fonts are very small, if i click on director or overview or any other then these are back to normal.

Here is a screenshot with the problem:

So it looks normal if I´m not in PNP:

Who can help me please?
Thx and Regards
pulsar


(Michael Friedrich) #2

That looks like a modified theme, can you share its CSS content?


#3

Hello dnsmichi,

There are many css Files. Do not know where is the right:

icinga2:/usr/share/icingaweb2/modules # find /usr/share/pnp4nagios/ -iname "*css"
/usr/share/pnp4nagios/kohana/system/views/kohana_errors.css
/usr/share/pnp4nagios/kohana/system/views/kohana_profiler_table.css
/usr/share/pnp4nagios/media/css
/usr/share/pnp4nagios/media/css/autocomplete.css
/usr/share/pnp4nagios/media/css/imgareaselect-default.css
/usr/share/pnp4nagios/media/css/jquery.mobile.min.css
/usr/share/pnp4nagios/media/css/mobile.css
/usr/share/pnp4nagios/media/css/ui-lightness/jquery-ui.css
/usr/share/pnp4nagios/media/css/ui-multisite/jquery-ui.css
/usr/share/pnp4nagios/media/css/ui-redmond/jquery-ui.css
/usr/share/pnp4nagios/media/css/ui-smoothness/jquery-ui.css
/usr/share/pnp4nagios/media/css/common.css

Here is the content from /usr/share/pnp4nagios/media/css/common.css

body {
        font-family: sans-serif;
        font-size: 11px;
        margin: 0px;
        background-color: #ffffff;
        color: #000000;
        height: 100%;
}

table.body {
        border-spacing:  0px;
}

a {
        color: #0000cc;
}

a:hover, a:visited, a:active {
        color: #880000;
}

a.active { color: #88cc00; }

.gh {
        min-height: 150px;
}


img.icon {
    width: 32px;
    height: 32px;
}

div.graph {
        background: url(../images/1x1.gif);
}

div.right {
        width: 260px;
        margin-top: 4px;
        padding: 4px;
}

div.left {
        padding: 4px 4px 4px 4px;
        margin: 4px 4px 4px 0px; 
}

.cb {
        clear: both;
}

.cl {
        clear: left;
}

.cr {
        clear: right;
}

img {
        border: none;
}

input.textbox {
        width: 97%;
}

.b1 {
        border: solid #FE880F;
        border-width: 1px;
}
.b0 {
        border-width: 0px;
}
.w32 {
        width: 32%;
}
.w66 {
        width: 66%;
}
.w90 {
        width: 90%;
}
.w99 {
        width: 99%;
}
.w98 {
        width: 98%;
}
.w100 {
        width: 100%;
}

.p2 {
        padding: 2px;
}
.p4 {
        padding: 4px;
}
.multi0 {
        padding-left:14px;
        background: url(../images/int.gif) no-repeat left;
}
.multi1 {
        padding-left:14px;
}
.multi2 {
        padding-left:14px;
        margin-left:8px;
}
a.active {
        background: url(../images/int.gif) no-repeat left;
}
a.inactive {
        background: url(../images/int2.gif) no-repeat left;
}
div.header {
        margin-top: 2px;
        padding: 2px;
        background-color: #c5d8d1;
}

div.pagebody {
        display: block;
        float: left;
        padding: 4px;
}

div.logo {
        padding: 6px;
        text-align: center;
        vertical-align: center;
}

ul {
    line-height:1.5em;
    list-style-type:square;
    margin:0 0 0.5em 1.5em;
    padding:0;
}

img.medialeft {
    border: 0;
    float: left;
    margin: 0 1.5em 0 0;
}

img.mediaright {
    border: 0;
    float: right;
    margin: 0 0 0 1.5em;
}

h1,h2,h3,h4,h5 {
    border-bottom: 1px solid;
    clear: left;
    margin: 0 0 1em 0;
    padding: 0.5em 0 0 0;
}

/* code blocks by indention */
pre.code, pre.file {
    width: auto !important;
    width: 98%;
    padding: 0.5em;
    border: 1px dashed;
    border-left: 3px solid;
    overflow: auto;
}

#basket_items { 
    list-style-type: none; margin: 0; padding: 0; 
}

#basket_items li { 
    margin: 0px 2px 2px 2px; height: 16px; 
}

img.ui-datepicker-trigger {
  position:relative;
  bottom:-6px; 
}

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; }
.ui-timepicker-div dl dd { margin: -25px 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

ul.colorscheme{
    list-style: none;
    padding: 2px;
    /*margin: 2px auto;*/
}

li.colorscheme {
    float: left;
}
span.colorscheme {
    border: 1px solid #C0C0C0;
    display:inline-block;
    width: 30px;
    height: 30px;
}

Can I change the theme? I dont know where.

pulsar


(Michael Friedrich) #4

Sorry, I was referring to Icinga Web 2. The first screenshot with the menu items in red looks strange.


#5

In Icinga Web2 I have only set the Icinga (Standard) Theme. But I dont know, if I press the PNP button on the left menu the Theme switch to this strange thing with really little fonts. And also too if I go in Configuration --> Module --> PNP --> Konfiguration(PNP)


(Michael Friedrich) #6

Hmm, ok. Does this happen in a different Browser too? Blind guess, you’re using IE?


#7

This is on all Browsers. I had test Firefox 60.1 ESR, Chromium, Qupzilla on Linux and IE on another PC.


(Michael Friedrich) #8

What happens if you just open /pnp4nagios in a separate tab?


#9

This looks normal. Ok I had forgot to say that the graph looks okay but only the icingaweb2 menu with his fonts is small if I click on PNP. Then this is probably not a direct PNP problem but a icingaweb2 problem?


(Michael Friedrich) #10

Is this the case with other modules too?


#11

No, it is only with the PNP Module. Had test two different PNP Module

  1. From http://download.opensuse.org/repositories/server:/monitoring/SLE_12_SP3/

and after that I have uninstall it and installed:

  1. https://github.com/Icinga/icingaweb2-module-pnp

But it all looks the same