{"id":778,"date":"2019-09-12T08:11:54","date_gmt":"2019-09-12T08:11:54","guid":{"rendered":"https:\/\/blog.ngocha.biz\/?p=778"},"modified":"2019-09-12T08:11:54","modified_gmt":"2019-09-12T08:11:54","slug":"setup-custom-materialized-ui-theme-jenkins","status":"publish","type":"post","link":"https:\/\/blog.ngocha.biz\/?p=778","title":{"rendered":"How to Setup Custom UI Theme For Jenkins – Custom Materialized CSS"},"content":{"rendered":"

If you are bored with the old Jenkins UI, its font, and icons, you can give your Jenkins a makeover using custom CSS styling with a custom logo.<\/p>\n

Custom CSS Main Features:<\/p>\n

    \n
  1. Flat UI Fonts<\/li>\n
  2. Better Syntax highlighting for Shell blocks<\/li>\n
  3. Better highlighted console output<\/code><\/li>\n<\/ol>\n

    Modifying Jenkins UI<\/h2>\n

    Follow this tutorial for changing the look and feel of default Jenkins UI.<\/p>\n

    Step 1:<\/strong> Go to Manage Jenkins<\/code> –> Manage Plugins<\/code>. Click available<\/code> tab and search for simple theme<\/code> plugin.<\/p>\n

    Step 2:<\/strong> Install the theme and restart Jenkins.<\/p>\n

    Step 3: <\/strong>Go to Manage Jenkins<\/code> –> Configure<\/code> and search for Theme<\/code> configuration and in the CSS field enter the following URL and save it.<\/p>\n

    https:\/\/cdn.rawgit.com\/afonsof\/jenkins-material-theme\/gh-pages\/dist\/material-cyan.css<\/code><\/pre>\n
    \"\"
    Click to view in HD<\/span><\/figcaption><\/figure>\n
    Once it is saved, the UI will be changed to a materialized flat UI based on cyan color.<\/p>\n
    \"\"
    Click to view in HD<\/span><\/figcaption><\/figure>\n
    Uploading Custom CSS TO Jenkins Server<\/h3>\n
    In the above example, we are referring to a CSS file hosted in third party website. You can also host this CSS on your Jenkins server. Follow the steps given below.<\/p>\n
    \n
    You Might Like<\/strong><\/b>: Jenkins 2 Tutorial For Beginners \u2013 Getting Started Guide<\/a><\/div>\n<\/div>\n
    Step 1:<\/strong> Login to your jenkins server, and cd into your Jenkins home directory.<\/p>\n
    Step 2<\/strong>: Create a folder named layout inside the userContent directory.<\/p>\n
    cd userContent\nmkdir layout<\/code><\/pre>\n
    Step 3<\/strong>: cd into the layout directory and create a style.css file.<\/p>\n
    cd layout\nvi style.css<\/code><\/pre>\n
    Step 4:<\/strong> Now, visit the following URL in the browser and copy the whole CSS content and paste it in the style.css file and save it.<\/p>\n
    https:\/\/cdn.rawgit.com\/afonsof\/jenkins-material-theme\/gh-pages\/dist\/material-cyan.css<\/code><\/pre>\n
    The following are the colors supported. You can replace the color name at the end in the above URL to have the desired color<\/p>\n
    \"jenkins
    Click to view in HD<\/span><\/figcaption><\/figure>\n
    Step 4:<\/strong> Now, under Manage Jenkins<\/code> –> Configure<\/code>, under the theme section, replace the full URL with the following.<\/p>\n
    \/userContent\/layout\/style.css<\/code><\/pre>\n
    More Customization<\/h3>\n
    You can customize the looks more by changing the logo. If you want more customizations and colors, you can follow the office Jenkins materialize CSS site from here<\/a>.<\/p>\n
    You can check out the video tutorial for this article.<\/p>\n