{"id":367,"date":"2009-09-17T11:55:49","date_gmt":"2009-09-17T17:55:49","guid":{"rendered":"http:\/\/thesmithfam.org\/blog\/?p=367"},"modified":"2019-08-12T07:15:46","modified_gmt":"2019-08-12T13:15:46","slug":"qt-stylesheets-button-bar-tutorial","status":"publish","type":"post","link":"https:\/\/thesmithfam.org\/blog\/2009\/09\/17\/qt-stylesheets-button-bar-tutorial\/","title":{"rendered":"Qt Stylesheets Button Bar Tutorial"},"content":{"rendered":"<style>\nimg.foo {\nmax-width: 900px;\n}\n<\/style>\n<p>To demonstrate the awesomeness of Qt&#8217;s stylesheets, we&#8217;ll make a modern looking button bar (inspired by Qt Creator) that looks like this:<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-11.png\" \/><\/p>\n<p><b>Let&#8217;s get started<\/b><\/p>\n<p><b>Step 1<\/b> Open Designer and create a new empty widget:<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-1.png\" \/><\/p>\n<p><b>Step 2<\/b> Toss a couple QFrames on the widget, one above the other. Name them <b>topFrame<\/b> and <b>bottomFrame<\/b>, like this:<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-2.png\" \/><\/p>\n<p><b>Step 3<\/b> Apply a vertical layout to your widget (just click on the background area and then click the vertical layout button in Designer&#8217;s toolbar. It should look like this now:<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-3.png\" \/><\/p>\n<p><b>Step 4<\/b> Drag and drop a few buttons and a horizontal spacer onto the frame you called &#8220;topFrame&#8221; (don&#8217;t forget to name it if you haven&#8217;t already)<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-4.png\" \/><\/p>\n<p><b>Step 5<\/b> Apply a horizontal layout to the &#8220;topFrame&#8221;<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-5.png\" \/><\/p>\n<p><b>Step 6<\/b> Set the vertical size policy for the &#8220;topFrame&#8221; to &#8220;Fixed&#8221;. This makes it shrink to a minimum size and lets the bottom frame grow to fill the rest of the widget.<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-6.png\" \/><\/p>\n<p><b>Step 7<\/b> Set your margins and spacings to 0 (do this by clicking on the background and at the bottom of Property editor you&#8217;ll find the &#8220;Layout&#8221; section which lets you specify this stuff).<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-7.png\" \/><\/p>\n<p><b>Step 8<\/b> Add a style sheet to your widget (right click on the top-most entry in the Object Inspector and select &#8220;Change styleSheet&#8230;&#8221;). Put this style in there for now:<\/p>\n<p><code>#topFrame {<br \/>\nborder: none;<br \/>\nbackground: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,<br \/>\n         stop: 0 #a6a6a6, stop: 0.08 #7f7f7f,<br \/>\n         stop: 0.39999 #717171, stop: 0.4 #626262,<br \/>\n         stop: 0.9 #4c4c4c, stop: 1 #333333);<br \/>\n}<\/p>\n<p>#bottomFrame {<br \/>\nborder: none;<br \/>\nbackground: white;<br \/>\n}<\/code><\/p>\n<p>That will give the topFrame a nice modern background that looks like this:<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-8.png\" \/><\/p>\n<p><b>Step 9<\/b> Now stylize the buttons. Add this to your stylesheet:<\/p>\n<p><code>#topFrame QPushButton {<br \/>\ncolor: #333;<br \/>\nborder: 2px solid #555;<br \/>\nborder-radius: 11px;<br \/>\npadding: 5px;<br \/>\nbackground: qradialgradient(cx: 0.3, cy: -0.4,<br \/>\nfx: 0.3, fy: -0.4,<br \/>\nradius: 1.35, stop: 0 #fff, stop: 1 #888);<br \/>\nmin-width: 80px;<br \/>\n}<\/p>\n<p>#topFrame QPushButton:hover {<br \/>\nbackground: qradialgradient(cx: 0.3, cy: -0.4,<br \/>\nfx: 0.3, fy: -0.4,<br \/>\nradius: 1.35, stop: 0 #fff, stop: 1 #bbb);<br \/>\n}<\/p>\n<p>#topFrame QPushButton:pressed {<br \/>\nbackground: qradialgradient(cx: 0.4, cy: -0.1,<br \/>\nfx: 0.4, fy: -0.1,<br \/>\nradius: 1.35, stop: 0 #fff, stop: 1 #ddd);<br \/>\n}<\/code><\/p>\n<p>That style sheet makes the buttons have rounded corners, a nifty radial gradient background, and modern hover and click effects, like this:<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-9.png\" \/><\/p>\n<p>Now press Ctrl+R and view the finished product:<\/p>\n<p><img decoding=\"async\" class=\"foo\" src=\"\/images\/qt-stylesheets-buttonbar-11.png\" \/><\/p>\n<p>Aren&#8217;t Qt stylesheets awesome?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To demonstrate the awesomeness of Qt&#8217;s stylesheets, we&#8217;ll make a modern looking button bar (inspired by Qt Creator) that looks like this: Let&#8217;s get started Step 1 Open Designer and create a new empty widget: Step 2 Toss a couple QFrames on the widget, one above the other. Name them topFrame and bottomFrame, like this: [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-367","post","type-post","status-publish","format-standard","hentry","category-code-and-cruft"],"_links":{"self":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/comments?post=367"}],"version-history":[{"count":26,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/367\/revisions"}],"predecessor-version":[{"id":1535,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/367\/revisions\/1535"}],"wp:attachment":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/media?parent=367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/categories?post=367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/tags?post=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}