This is help request rather than an issue. Do you have some quick steps how to go about modifying the colour of the top bar (which is currently this one I guess http://www.colorhexa.com/1d9888)

The SafeRestart Plugin, https://wiki.jenkins-ci.org/display/JENKINS/SafeRestart+Plugin, adds it's own icon, any chance to add a replacement icon for this plugin, similar to what's been done for other plugins?

Here's the img src you'll need to override. /jenkins/static/2985eed1/plugin/saferestart/images/48x48/quick_restart.png

Maybe as a real Jenkins plugin that could be updated using the normal update center?

The problem for me is that our users can't reach fonts.googleapis.com and afonsof.github.io from where they access the Jenkins server.

Also it would be awesome if there were no animated graphics. Our clients have to be accessed using Remote Desktop and Firefox for example uses a ton of CPU to render the gif animations (It uses way less CPU for the CSS based animations) also since you use distinct shapes for yello-anime.gif and yellow.png the animations don't add anything.

I have recently linked jenkins-matherial-theme in our Jenkins, amazing job. But in our home page the weather icons aren't replaced. I've seen that is due to the "Dashboard View Plugin"

https://wiki.jenkins-ci.org/display/JENKINS/Dashboard+View

They have included the images without any 'class' in them.

<img src="/jenkins/static/90efd0f1/images/16x16/health-00to19.png" alt="Build stability: 4 out of the last 5 builds failed." title="Build stability: 4 out of the last 5 builds failed.">

My solution for this is using the same styles used to overwrite the color balls:

[src$='blue.png']

Like this:

[src$='health-80plus.png'] { background-image: url(data:image/svg+xml;base64,PHN... }

If you agree that this is the solution I can send my file with the modifications if it's from any help.

Regards

Hi!

Just wanted to report a possible bug in version 1.2 of the theme.

Sometime between versions 1.1.12 and 1.2 the red delete buttons in the manage-roles section of the role strategy plugin which makes it possible to edit/remove roles have disappeared. See the attached screenshots.

Best regards,

//Jon

Love the new Colors, how ever the progress bar and icons are not in the theme color, they are still in the teal color.

It would be awesome if they matched the theme color.

Eg: I have the blue theme, but the icons are teal

The following two icons appear blank:

• the animated nobuilt icon for a new job that is currently building (which looks identical to the grey blinking icon)
• the animated clock icon for the Build Now icon for a job that is scheduled to build, but is waiting in the queue for the next executor

To reproduce:

• generate a new job which does 'sleep 300'
• go to a list view which shows Build Button and Status for that job
• take Jenkins offline
• click the build button and reload page
• The button has vanished, but should show the animated build button
• take Jenkins online again
• Build button has reappeared, but now the status icon has vanished.

Hi,

It would be nice to easily be able to change the logo. My 2 cents...

Thx

Any idea why? See attachment.

It is hard to read dashboard when you use yellow theme, there is a yellow fond on white background.

Contrast is too low.

On Chrome 47 (Mac) & Jenkins 1.580.3, the body of the Jenkins page is overlaying the header portion of the page when scrolling as per the attached screenshot.

Note that I'm using Stylish at the moment so not sure if that's part of the cause.

When looking at a view of a Project that's in progress I see no icon. I do see the tooltip.

Element: <img src="/static/0027ac25/images/32x32/aborted_anime.gif" alt="In progress" tooltip="In progress" style="width: 32px; height: 32px; " class="icon-aborted-anime icon-lg" title="In progress">

Hey,
Your theme is so awesome, I liked it 💃
But i have the issue with Console input
I am using ANSI Color Plugin for colorful logs.
and the issue is that colored lines have a banner type background which hide the upper line text
here is the screenshot
http://i.imgur.com/i5gelA3.png

full console input here
http://jenkins.legacyserver.in/job/AOSP-CAF-MM_armani_%20deepak/3/console

thank you

I am using Chrome 47 on Windows.
Jenkins version is 1.641, Simple Theme Plugin version is 0.3.

The cancel build button/icon appears as a gray block on both build executor and build history.

It's using the same icon used in history.
Need to use a different selector and replace by a pencil icon.

Looks like the corresponding SVG is missing:

After install the "Last Console" plugin, the list view will be like this:

Consider add "console icon" to list view.
[src$='terminal.gif']{padding-left: 43.2px!important;padding-top: 43.2px!important;height: 0!important;width: 0!important;background-size: 100% 100%!important;font-size: 0!important;background-image:url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22%239E9E9E%22%20d%3D%22M20%2019V7H4v12h16m0-16a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h16m-7%2014v-2h5v2h-5m-3.42-4L5.57%209H8.4l3.3%203.3c.39.39.39%201.03%200%201.42L8.42%2017H5.59l3.99-4z%22%2F%3E%3C%2Fsvg%3E)}

Preview:

Hi!

First of all I want to congratulate you for creating the best looking Jenkins theme available :)

I also wanted to ask if it would be much work for you to make the logo generator also allow the user to enter a custom color for the header and link texts?

Best regards,

//Jon

First of all, thank for this awesome theme, makes Jenkins look so great.

This is only a little suggestion. It would be nice to specify, in Installation section, https protocol in the URL, because, if the site is https, the browser will filter the content since is mixed "active" content. And perhaps someone doesn't realise this and can get desperated trying to get the theme load (actually happened to me, but it's not the first time that I've been fighting with mixed contents and I realised quite soon)!

Thanks again for the nice theme!

When I access the 'context' menu of a build node (i.e. the small down arrow right to it)
the menu is rendered at the top of the page instead of next to the node

This is a bit of a big deal since we can't easily see build numbers in the list here:

The blue (shell variables, and "random" parts of command line arguments) and red (strings) texts are very hard to read...

The editor for Groovy has some more problems, the cursor and and entered text start to separate quickly, colors seem to be unaffected tough.

The Top header is only rarely used. It has just the logo, search bar, username and logout link. Main functionality are all below it, and I find myself always having to scroll down to see useful stuff.

Can we please dedicate lesser area to the header bar, so that people have more visual space for more important stuff? Like bringing it down from 64px to 36px, and making the logo smaller?

When we open Console page the Executed Target has dot before name.

Original jenkins page align the "Executed Targets" table to the border left so

list style is hidden.

Already fix on rackspace repository rackerlabs/canon-jenkins#21

Hello,

If you use "Large" icons, then the global build history view (the one accessed via /view/All/builds, not the sidebar version displayed for individual projects) looks fine

When set to "Medium", the new icons appear tiled behind the old

And in "Small" (the setting I tend to use), you can just see the new icon behind the old, in addition the console icon is the default.

I don't use this view very often, so minor issue as far as I'm concerned but thought I'd better mention it :)

(Screenshots taken from 1.1.9 from the new dist URL)

Pros:

• Easier installation
• Firewall friendly
• Updates that can match Jenkins version (may be interesting for the upcoming 2.0 release of Jenkins)
• ability to choose between multiple color schemes
• could expose options that for example allow to turn off animations (see #22 )

Split off from #22

Hello,

Recently I updated the core plugins for my Jenkins installation, and every since the Credentials icon displayed in the sidebar is double the size it should be:

Not really sure if this is something you can fix or not, as the relevant HTML has conflicting attributes

<a href="/credential-store" class="task-icon-link">
  <img src="/static/12efab6f/plugin/credentials/images/48x48/credentials.png" 
  style="width: 48px; height: 48px; width: 24px; height: 24px; margin: 2px;" 
  class="icon-credentials-credentials icon-xlg"
</a>

Oddly enough if the material theme is disabled, the original credentials icon appears appears at the correct 24x24 size.

I've reported this as a bug with the credentials plugin, but thought I'd also report it here too as there is a different in sizes between native and with the material theme.

The theme is working on mainpage and some subpages of jenkins 2.0 as standalone plugin.. I guess would only take some minor adjustments for Jenknis 2 .. would be great to get this .. Theme is really awesome.

There's a bug where the back button does not totally cover the customized logo. The solution for this is increase the back button canvas size.

Loading regression test HTML cucumber reports which have issue with CSS(obviously trying to call things not in the provided theme). Can you exempt these report pages or somehow manage them?
Only tested on 2.0

Thanks!

Only four of "Manage Jenkins" menu icons matches those one in "Manage Jenkins" page

The CodeMirror editor textarea which is for example used by "Execute Shell script" is using Roboto, but it should rather use a monospaced font ;)

I see this in style.less. Is hiding it intentional? If so, then why?

#breadcrumbBar {
  background-color: transparent;
  visibility: hidden
}

The progressbar inside a job view is not updated during a job run, so it seems the job is running endless.

At the global view of the build processor status on the Jenkins main page the progressbar works flawless.

http://afonsof.github.io/jenkins-material-theme/dist/material-light.css returns 404

Clicking the dropdown (menuSelector) for an individual item in the build history results in the menu being displayed beneath the build history element. I've noticed this behaviour in other places as well when using the menuSelector. Tested in Chrome.

Great theme. Glad to be using it.

When applying this theme it breaks the pipeline(workflow) plugin editor box with its auto completion.

From jenkins/job/jobName/buildTimeTrend:

    <table class="sortable" style="margin-top:1em;" id="trend">
        <tbody>
            <tr><th>...</th></tr>
            <tr>
                <td data="4">
                    <img alt="Success" src="/static/c82d2d81/images/16x16/blue.png" height="16" width="16">
                </td>
                <td data="4">
                    <a class="model-link inside" href="4/">#4</a>
                </td>
                <td data="661214">11 min</td><td></td></tr>
            <tr>
        </tbody>
    </table>

Hi,
there seems to be an issue with the pipeline stage view of jenkins v2 where the first stage overlaps the build info on the left (see attachment)

it only happens when width is over 1600px and some font sizes are updated

@media (min-width:1600px){
  body#jenkins.j-hide-left #main-panel{max-width:75%}
  body, table, form, input, td, th, p, textarea, select, #tasks .task
    {font-size:14px;}  
}
@media (min-width:2000px){
  body#jenkins.j-hide-left #main-panel{max-width:85%}
  body, table, form, input, td, th, p, textarea, select, #tasks .task
    {font-size:15px;}  
}

Thanks!

(I am using Chrome v51.0.2704.84 on Windows 10)

From #31:

The editor for Groovy has some more problems, the cursor and and entered text start to separate quickly, colors seem to be unaffected tough.

    <div id="workflow-editor-wrapper" style="position: relative;">
        <textarea style="display: none;" checkdependson="sandbox" name="_.script" checkmethod="post" rows="5" class="setting-input validated  " checkurl="/job/Workflow_Snippet_Generator_Dummy/descriptorByName/org.jenkinsci.plugins.workflow.cps.CpsFlowDefinition/checkScript"/>
        <div class="jquery-ui-1">
            <div style="position: absolute; right: 1px; z-index: 100; top: 1px;" class="samples">
                <select>
                    <option>try sample Pipeline...</option>
                    <option value="hello">Hello World</option>
                    <option value="github-maven">GitHub + Maven</option>
                </select>
            </div>
            <div id="workflow-editor" class="pane-frame ace_editor ui-resizable ace-tomorrow" style="height: 250px; border-bottom-width: 0.4em;">
                <div style="position: absolute;"/>
                <textarea style="opacity: 0; height: 14px; width: 8px; left: 53px; top: 35px;" spellcheck="false" autocapitalize="off" autocorrect="off" class="ace_text-input" wrap="off"/>
                <div class="ace_gutter">
                    <div style="margin-top: -7px; height: 273px; width: 49px;" class="ace_layer ace_gutter-layer ace_folding-enabled">
                        <div style="height: 14px;" class="ace_gutter-cell ">4<span style="height: 14px;" class="ace_fold-widget ace_start ace_open"/>
                        </div>
                        <div style="height: 14px;" class="ace_gutter-cell ">5</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">6</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">7</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">8</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">9</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">10</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">11</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">12<span style="height: 14px;" class="ace_fold-widget ace_start ace_open"/>
                        </div>
                        <div style="height: 14px;" class="ace_gutter-cell ">13</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">14</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">15<span style="height: 14px;" class="ace_fold-widget ace_start ace_open"/>
                        </div>
                        <div style="height: 14px;" class="ace_gutter-cell ">16</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">17<span style="height: 14px;" class="ace_fold-widget ace_start ace_open"/>
                        </div>
                        <div style="height: 14px;" class="ace_gutter-cell ">18</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">19</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">20</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">21</div>
                        <div style="height: 14px;" class="ace_gutter-cell ">22</div>
                    </div>
                    <div style="top: 35px; height: 14px;" class="ace_gutter-active-line"/>
                </div>
                <div style="left: 49px; right: 17px; bottom: 0px;" class="ace_scroller">
                    <div style="margin-top: -7px; width: 1099px; height: 273px; margin-left: 0px;" class="ace_content">
                        <div class="ace_layer ace_print-margin-layer">
                            <div style="left: 644px; visibility: visible;" class="ace_print-margin"/>
                        </div>
                        <div class="ace_layer ace_marker-layer">
                            <div class="ace_active-line" style="height:14px;top:42px;left:0;right:0;"/>
                        </div>
                        <div style="padding: 0px 4px;" class="ace_layer ace_text-layer">
                            <div class="ace_line" style="height:14px">
                                <span class="ace_keyword">def</span>
                                <span class="ace_identifier">dump</span>(<span class="ace_identifier">obj</span>) {</div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_identifier">println</span>
                                <span class="ace_string">"dump: "</span>
                                <span class="ace_keyword ace_operator">+</span>
                                <span class="ace_keyword">new</span>
                                <span class="ace_identifier">ReflectionToStringBuilder</span>(<span class="ace_identifier">obj</span>).<span class="ace_identifier">toString</span>()</div>
                            <div class="ace_line" style="height:14px">}</div>
                            <div class="ace_line" style="height:14px"/>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_identifier">stage</span>
                                <span class="ace_identifier">concurrency</span>: <span class="ace_constant ace_numeric">1</span>, <span class="ace_identifier">name</span>: <span class="ace_string">'Build'</span>
                            </div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_keyword">def</span>
                                <span class="ace_identifier">allBuildServers</span>
                                <span class="ace_keyword ace_operator">=</span> [<span class="ace_string">'a'</span>, <span class="ace_string">'b'</span>]</div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_keyword">def</span>
                                <span class="ace_identifier">GIT_COMMIT</span>
                                <span class="ace_keyword ace_operator">=</span>
                                <span class="ace_string">''</span>
                            </div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_keyword">def</span>
                                <span class="ace_identifier">buildJobs</span>
                                <span class="ace_keyword ace_operator">=</span> [:]</div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_keyword">for</span> (<span class="ace_keyword">int</span>
                                <span class="ace_identifier">i</span>
                                <span class="ace_keyword ace_operator">=</span>
                                <span class="ace_constant ace_numeric">0</span>; <span class="ace_identifier">i</span>
                                <span class="ace_keyword ace_operator">&lt;</span>
                                <span class="ace_identifier">allBuildServers</span>.<span class="ace_identifier">size</span>(); <span class="ace_identifier">i</span>
                                <span class="ace_keyword ace_operator">++</span>) {</div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_identifier">buildJobs</span>[<span class="ace_identifier">nodeName</span>] <span class="ace_keyword ace_operator">=</span> {}</div>
                            <div class="ace_line" style="height:14px">}</div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_keyword">try</span> {</div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_comment">// need a node to calculate the build number on</span>
                            </div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_identifier">node</span>(<span class="ace_string">'xxxx'</span>) {</div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_comment">/* aaaa */</span>
                            </div>
                            <div class="ace_line" style="height:14px">        [<span class="ace_string">"PATH+ANT=${ant}${pathSeparator}bin"</span>, <span class="ace_string">"ANT_HOME=${ant}"</span>]</div>
                            <div class="ace_line" style="height:14px">    }</div>
                            <div class="ace_line" style="height:14px">}</div>
                            <div class="ace_line" style="height:14px">
                                <span class="ace_keyword">catch</span> (<span class="ace_identifier">ex</span>){}</div>
                        </div>
                        <div class="ace_layer ace_marker-layer"/>
                        <div class="ace_layer ace_cursor-layer ace_hidden-cursors">
                            <div style="left: 4px; top: 42px; width: 8px; height: 14px;" class="ace_cursor"/>
                        </div>
                    </div>
                </div>
                <div style="width: 22px; bottom: 0px;" class="ace_scrollbar ace_scrollbar-v">
                    <div style="width: 22px; height: 308px;" class="ace_scrollbar-inner"/>
                </div>
                <div style="display: none; height: 22px; left: 49px; right: 17px;" class="ace_scrollbar ace_scrollbar-h">
                    <div style="height: 22px; width: 1165px;" class="ace_scrollbar-inner"/>
                </div>
                <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;">
                    <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;"/>
                    <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-family: inherit; font-style: inherit; font-size: inherit; line-height: inherit; font-size-adjust: inherit; font-stretch: inherit; font-feature-settings: inherit; font-language-override: inherit; font-kerning: inherit; font-synthesis: inherit; font-variant: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
                </div>
                <div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"/>
            </div>
        </div>
    </div>

<img title="Not built" src="/static/c82d2d81/images/16x16/nobuilt.png" alt="Not built" tooltip="Not built" style="width: 16px; height: 16px; " class="icon-nobuilt icon-sm">

Windows 10, tested with Firefox and Edge.

Hi,

Thanks for the beautiful theme. i just made a fresh install of jenkins then install the theme following the recommended way in the doc (Using the github page Url ). everything went smoothly, but as you can see in the image below there is a messing icon in the menu en the left for the "manage jenkins" section. Do you have any idea of how or what i might check on my side to fix this ?
My setup is :

• MacOSX El Capitan
• Safari Version 9.0.3 (11601.4.4)
• Jenkins 2.0-beta-1

Some SVG is missing for this plugin and some glitches about it with this new thema:

Also the promotion page has strange background:

and also badges in the build history has abnormal red ball as background:

• Jenkins 1.625.3
• Firefox

Hi,
sorry if this is a dupe, tried to find an issue for this but couldn't find anything.

Tables have no hover effect on rows, so it's hard to see, for example, which build I'm starting (workaround for this is to wait for the tooltip)

I see in the legend that the disabled icon is there however, when a project is disabled I don't see that icon. Mousing over the space does show 'disabled'.

Jenkins: 1.642.1

Element:
<img src="/static/0027ac25/images/32x32/disabled.png" alt="Disabled" tooltip="Disabled" style="width: 32px; height: 32px; " class="icon-disabled icon-lg" title="Disabled">

Hello,

it seems that Gitlab Logo plugin doesn't work correctly with material design theme.

Default theme - http://i.imgur.com/U8McAu2.png
Material design theme - http://i.imgur.com/pecUE8t.png

I really love this theme, so much nicer than the default.

So this is really nitpicking, but we have these two bars on top of the screen, the one with the Jenkins logo, and the menu bar below. In original Jenkins layout, when you scroll down, the Jenkins logo bar disappears, and the menu bar stays at the top. Here, the (quite useledd) big green Jenkins bar stays, and the (very useful) menu bar scrolls away.

Can this be reversed?