{"id":4234,"date":"2011-06-24T13:17:34","date_gmt":"2011-06-24T11:17:34","guid":{"rendered":"http:\/\/flaven.fr\/?p=4234"},"modified":"2011-06-24T13:17:34","modified_gmt":"2011-06-24T11:17:34","slug":"comment-personnaliser-les-boutons-ui-play-stop-fwd-etc","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2011\/06\/comment-personnaliser-les-boutons-ui-play-stop-fwd-etc\/","title":{"rendered":"Comment personnaliser les boutons UI (play, stop, fwd, etc.) ?"},"content":{"rendered":"<p><\/head><br \/>\n<body><\/p>\n<p>Les boutons (UI) interface utilisateur sont des boutons de contr\u00f4le tels que STOP, PLAY, FWD, etc. Vous pouvez enti\u00e8rement les personnaliser avec l&#8217;\u00e9diteur de style dans les onglets suivants.<\/p>\n<div class=\"line\">\n<h5 class=\"title\"><em>Put your mouse over them!<\/em> <\/h5>\n<p>&nbsp;<\/p>\n<div class=\"pbox ui\">\n<style>\n\t\t\t.pbox .test-button.ui-state-default {\n\t\t\t\tborder-width: 1px;\n\t\t\t\tborder-style: Solid;\n\t\t\t\tborder-color: #81795f;\n\t\t\t\tbackground-color: #b6ac91;\n\t\t\t\tbackground-image: url('[[ui.ui-state-default.background-image]]');\n\t\t\t\tbackground-position: left top;\n\t\t\t\tbackground-repeat: repeat;\n\t\t\t\tfont-weight: Normal;\n\t\t\t\tcolor: #ffffff;\n\t\t\t}\n\t\t\t.pbox .test-button.ui-state-hover, .pbox .test-button.ui-state-focus {\n\t\t\t\tborder-width: 1px;\n\t\t\t\tborder-style: Solid;\n\t\t\t\tborder-color: #ded7c4; \n\t\t\t\tbackground-color: #f5f3ea;\n\t\t\t\tbackground-image: url('[[ui.ui-state-hover.background-image]]');\n\t\t\t\tbackground-position: left top;\n\t\t\t\tbackground-repeat: repeat;\n\t\t\t\tfont-weight: Normal;\n\t\t\t\tcolor: #39382d;\n\t\t\t}\n\t\t\t.pbox .test-button.ui-state-active {\n\t\t\t\tborder-width: 1px;\n\t\t\t\tborder-style: Solid;\n\t\t\t\tborder-color: #97948c;\n\t\t\t\tbackground-color: #dcd3bc;\n\t\t\t\tbackground-image: url('[[ui.ui-state-active.background-image]]');\n\t\t\t\tbackground-position: left top;\n\t\t\t\tbackground-repeat: repeat;\n\t\t\t\tfont-weight: Normal;\n\t\t\t\tcolor: #ffffff;\n\t\t\t}\n\t\t\t.pbox .test-button.ui-corner-all {\n\t\t\t\t-moz-border-radius: 3px;\n\t\t\t\t-webkit-border-radius: 3px;\n\t\t\t\tborder-radius: 3px;\n\t\t\t}<\/p>\n<\/style>\n<p>\t\t<button class=\"uirwd test-button\">&nbsp;<\/button><button class=\"uistop test-button\">&nbsp;<\/button><button class=\"uiplay test-button\">&nbsp;<\/button><button class=\"uifwd test-button\">&nbsp;<\/button><button class=\"uimute test-button\">&nbsp;<\/button><button class=\"uiscreenSize test-button\">&nbsp;<\/button><br \/>\n\t\t\t<script language=\"javascript\" type=\"text\/javascript\">\n\t\t\t\t$(document).ready(function () {\n\t\t\t\t\t$(\".uifwd\").button({\n\t\t\t\t\t\tdisabled: false,\n\t\t\t\t\t\ttext: false,\n\t\t\t\t\t\tlabel: 'fwd',\n\t\t\t\t\t\ticons: {\n\t\t\t\t\t\t\tprimary: 'ui-icon-seek-next'\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\t$(\".uirwd\").button({\n\t\t\t\t\t\tdisabled: false,\n\t\t\t\t\t\ttext: false,\n\t\t\t\t\t\tlabel: 'rwd',\n\t\t\t\t\t\ticons: {\n\t\t\t\t\t\t\tprimary: 'ui-icon-seek-prev'\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\t$(\".uiplay\").button({\n\t\t\t\t\t\tdisabled: false,\n\t\t\t\t\t\ttext: false,\n\t\t\t\t\t\tlabel: 'play',\n\t\t\t\t\t\ticons: {\n\t\t\t\t\t\t\tprimary: 'ui-icon-play'\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\t$(\".uistop\").button({\n\t\t\t\t\t\tdisabled: false,\n\t\t\t\t\t\ttext: false,\n\t\t\t\t\t\tlabel: 'stop',\n\t\t\t\t\t\ticons: {\n\t\t\t\t\t\t\tprimary: 'ui-icon-stop'\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\t$(\".uimute\").button({\n\t\t\t\t\t\tdisabled: false,\n\t\t\t\t\t\ttext: false,\n\t\t\t\t\t\tlabel: 'mute',\n\t\t\t\t\t\ticons: {\n\t\t\t\t\t\t\tprimary: 'ui-icon-volume-off'\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\t$(\".uiscreenSize\").button({\n\t\t\t\t\t\tdisabled: false,\n\t\t\t\t\t\ttext: false,\n\t\t\t\t\t\tlabel: 'screenSize',\n\t\t\t\t\t\ticons: {\n\t\t\t\t\t\t\tprimary: 'ui-icon-arrow-4-diag'\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t});\n\t\t\t<\/script>\n\t<\/div>\n<p><\/p>\n<p>Les boutons UI ont 3 \u00e9tats, ils peuvent \u00eatre : <\/p>\n<ul>\n<li><strong>by default :<\/strong> sans aucune action de l&#8217;utilisateur ;<\/li>\n<li><strong>hover :<\/strong> au survol de la souris ;<\/li>\n<li><strong>active :<\/strong> lorsqu&#8217;il est s\u00e9lectionn\u00e9.<\/li>\n<\/ul>\n<p>\tIl est possible de changer d&#8217;apparence suivant chaque \u00e9tat. Le dernier param\u00e8tre, <code>corner all<\/code> permet de d\u00e9finir leur arrondi.<\/p>\n<p>\t<a href=\"http:\/\/blog.3wdoc.com\/en\/wp-content\/uploads\/2011\/07\/ui_button1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.3wdoc.com\/en\/wp-content\/uploads\/2011\/07\/ui_button1.png\" alt=\"\" title=\"ui_button\" width=\"800\" height=\"485\" class=\"aligncenter size-full wp-image-2969\" \/><\/a><\/p>\n<ul>\n\t<!-- MAIN --><\/p>\n<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" width=\"100%\">\n<tr>\n<td valign=\"top\"><code>background-repeat:<\/code>D\u00e9finit comment l&#8217;image d&#8217;arri\u00e8re plan se r\u00e9p\u00e8te<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>background-position:<\/code>D\u00e9finit la position de d\u00e9part de l&#8217;image d&#8217;arri\u00e8re plan<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>background-image:<\/code> Copier et coller l&#8217;URL de l&#8217;image d&#8217;arri\u00e8re plan<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>background-color: <\/code>D\u00e9finit la couleur d&#8217;arri\u00e8re plan<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>border-color: <\/code>D\u00e9finit la couleur de la bordure<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>border-style:<\/code> D\u00e9finit le style de la bordure<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>border-width:<\/code> D\u00e9finit la largeur de la bordure en pixels<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>color:<\/code> D\u00e9finit la couleur du texte<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>font-weight:<\/code> D\u00e9finit la largeur du texte<\/td>\n<\/tr>\n<\/table>\n<p>\t<!-- \/\/ MAIN -->\n\t<\/ul>\n<p>Dans cet onglet, vous pouvez changer la couleur du bouton UI en fonction de son \u00e9tat.<\/p>\n<p>\t<a href=\"http:\/\/blog.3wdoc.com\/en\/wp-content\/uploads\/2011\/07\/ui_color1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.3wdoc.com\/en\/wp-content\/uploads\/2011\/07\/ui_color1.png\" alt=\"\" title=\"ui_color\" width=\"800\" height=\"171\" class=\"aligncenter size-full wp-image-2971\" \/><\/a><\/p>\n<ul>\n\t<!-- MAIN --><\/p>\n<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" width=\"100%\">\n<tr>\n<td valign=\"top\"><code>state-default:<\/code> D\u00e9finit la couleur du bouton par d\u00e9faut <\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>state-hover:<\/code> D\u00e9finit la couleur du bouton au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>state-active: <\/code>D\u00e9finit la couleur du bouton lorsque le bouton est actif<\/td>\n<\/tr>\n<\/table>\n<p>\t<!-- \/\/ MAIN -->\n\t<\/ul>\n<h2>Pour plus d&#8217;informations<\/h2>\n<ul>\n<li>Tutorial interactif <br \/><a href=\"https:\/\/flaven.fr\/2011\/06\/23\/appliquer-un-style-aux-boutons-dinterface-utilisateur-ui-buttons\/\" target=\"_blank\">Appliquer un style aux boutons d\u2019interface utilisateur (UI buttons)<\/a><\/li>\n<li>Tutorial<br \/><a href=\"https:\/\/flaven.fr\/2011\/07\/08\/comment-utiliser-lediteur-de-style-de-3wdoc-studio\/\" target=\"_blank\">Comment utiliser l\u2019\u00e9diteur de style ?<\/a><\/li>\n<li>Tutorial<br \/><a href=\"https:\/\/flaven.fr\/2011\/07\/06\/comment-personnaliser-les-articles-les-boutons-et-les-images\/\" target=\"_blank\">Comment personnaliser les articles, les boutons et les images ?<\/a><\/li>\n<li>Tutorial<br \/><a href=\"https:\/\/flaven.fr\/2011\/07\/04\/comment-personnaliser-le-player\/\" target=\"_blank\">Comment personnaliser le player ?<\/a><\/li>\n<\/ul>\n<p><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les boutons (UI) interface utilisateur sont des boutons de contr\u00f4le tels que STOP, PLAY, FWD, etc. Vous pouvez enti\u00e8rement les personnaliser avec l&#8217;\u00e9diteur de style&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2011\/06\/comment-personnaliser-les-boutons-ui-play-stop-fwd-etc\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Comment personnaliser les boutons UI (play, stop, fwd, etc.) ?<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Personnalisez les boutons UI comme PLAY, STOP, FWD avec l\u2019\u00e9diteur de style. Modifiez apparence, couleur, bordure et arrondi pour chaque \u00e9tat.","bf_ai_og_title":"Personnaliser les boutons UI","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3433],"tags":[],"class_list":["post-4234","post","type-post","status-publish","format-standard","hentry","category-3wdoc-tutorials"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-16i","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/4234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=4234"}],"version-history":[{"count":0,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/4234\/revisions"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=4234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=4234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=4234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}