Font Size of Jquery Dialog RRS feed

  • Question

  • User-1499457942 posted


      Can we change Font Size/Color of Jquery Dialog Title only.


    Monday, June 25, 2018 6:24 AM

All replies

  • User-369506445 posted


    yes, you can do it, for example, you can define a CSS class below like :

            .ui-dialog > .ui-widget-header {
                background: red;
                font-size: 26px;


    and your complete code 

    <!DOCTYPE html>
    <html runat="server" xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            $(function() {
                $( "#dialog" ).dialog();
            .ui-dialog > .ui-widget-header {
                background: red;
                font-size: 26px;
    <body runat="server">
        <div id="dialog" title="Basic dialog">
            <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>

    Monday, June 25, 2018 6:36 AM
  • User36583972 posted

    Hi JagjitSingh,

    Can we change Font Size/Color of Jquery Dialog Title only.

    vahid has given you a solution.

    You can try to use the F12 developer tool and look at the style definition of the title element, then change it by yourself.

    Best Regards,

    Yong Lu

    Tuesday, June 26, 2018 3:08 AM