{"id":900,"date":"2013-12-04T11:19:30","date_gmt":"2013-12-04T16:19:30","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=900"},"modified":"2013-12-04T11:27:35","modified_gmt":"2013-12-04T16:27:35","slug":"more-custom-css-tricks","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2013\/12\/04\/more-custom-css-tricks\/","title":{"rendered":"More custom CSS tricks"},"content":{"rendered":"<p>These CSS snippets are designed to be pasted to Custom CSS section on Style Editor in PHPRunner\/ASPRunnerPro.<\/p>\n<h2>Making page background fully transparent<\/h2>\n<pre lang=\"css\">.function-list .rnr-c &gt; *,\r\n.function-list .rnr-s-undermenu &gt; *,\r\n.function-list .rnr-b-vmenu &gt; *,\r\n.function-list .rnr-s-2 &gt; *,\r\n.function-list .rnr-row &gt; *,\r\n.function-list .rnr-toprow &gt; *\r\n{\r\nbackground-color : transparent !important;\r\nbackground : transparent !important;\r\n}<\/pre>\n<p>Sample screenshot:<\/p>\n<p><a href=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_trans_background.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-907 aligncenter\" title=\"css_tricks_trans_background\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_trans_background-300x199.png\" alt=\"\" width=\"300\" height=\"199\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_trans_background-300x199.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_trans_background-150x99.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_trans_background-400x266.png 400w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_trans_background.png 961w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><!--more--><\/p>\n<h2>Changing Inline Add\/Edit checkmark color<\/h2>\n<p>Save\/Cancel icons in Inline Add\/Edit are grey by default. Here is how you can assign colors to those icons.<\/p>\n<pre lang=\"css\">.saveEditing {\r\ncolor:green;\r\n}\r\n.revertEditing {\r\ncolor: red;\r\n}<\/pre>\n<p>Sample screenshot:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-905\" title=\"css_tricks_checkmark_color\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_checkmark_color.png\" alt=\"\" width=\"632\" height=\"155\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_checkmark_color.png 632w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_checkmark_color-300x73.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_checkmark_color-150x36.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_checkmark_color-400x98.png 400w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/p>\n<h2>Adding images to buttons<\/h2>\n<p>Make all or some buttons more distinctive adding images. This sample code assumes your icons are 16x16px.<\/p>\n<pre lang=\"css\">#addButton1:before\r\n{\r\n   content:' ';\r\n   background-image: url('http:\/\/yourwebsite.com\/images\/image.gif');\r\n   display: inline-block;\r\n   width: 16px;\r\n   height:16px;\r\n   margin-right: 7px;\r\n   vertical-align: -20%;\r\n}<\/pre>\n<p>Sample screenshot:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-904\" title=\"css_tricks_buttons_icons\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_buttons_icons.png\" alt=\"\" width=\"743\" height=\"277\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_buttons_icons.png 743w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_buttons_icons-300x111.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_buttons_icons-150x55.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_buttons_icons-400x149.png 400w\" sizes=\"auto, (max-width: 743px) 100vw, 743px\" \/><\/p>\n<p>Here is the List of button IDs you can use<\/p>\n<p>#addButton1:before &#8211; &#8216;Add&#8217; button on the List page<br \/>\n#saveButton1:before &#8211; &#8216;Save&#8217; button on Add\/Edit pages<br \/>\n.function-login a.main:before &#8211; &#8216;Submit&#8217; button on the login page<br \/>\n.function-remind a.main:before &#8211; &#8216;Submit&#8217; button on Password reminder page<br \/>\n.function-change a.main:before &#8211; &#8216;Submit&#8217; button on Change password page<br \/>\n#resetButton1:before &#8211; &#8216;Reset&#8217; button on Add\/Edit pages<br \/>\n#viewPageButton1:before &#8211; &#8216;View&#8217; button on the Edit page<br \/>\n#backButton1:before &#8211; &#8216;Back to List&#8217; button on Add\/Edit\/View pages<br \/>\n#editPageButton1:before &#8211; &#8216;Edit&#8217; button on View page<br \/>\n#inlineAdd1:before &#8211; &#8216;Inline Add&#8217; button on the List page<br \/>\n#extraButtonsToggler1:before &#8211; &#8216;More&#8217; button on the List page<br \/>\n#selectButtonsToggler1:before &#8211; &#8216;With selected&#8217; button on the List page<\/p>\n<h2>Changing tooltip properties<\/h2>\n<p>Here is how you can make edit form tooltips more prominent.<\/p>\n<pre lang=\"css\">div.shiny_box_body.rnr-list {\r\nmargin: 0 5px;\r\nfont-family: Tahoma;\r\nfont-size: 14px;\r\nfont-weight: bold;\r\ncolor: red;\r\n}<\/pre>\n<p>Sample screenshot:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-906\" title=\"css_tricks_tooltip_properties\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_tooltip_properties.png\" alt=\"\" width=\"479\" height=\"234\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_tooltip_properties.png 479w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_tooltip_properties-300x146.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_tooltip_properties-150x73.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/12\/css_tricks_tooltip_properties-400x195.png 400w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>These CSS snippets are designed to be pasted to Custom CSS section on Style Editor in PHPRunner\/ASPRunnerPro. Making page background fully transparent .function-list .rnr-c &gt; *, .function-list .rnr-s-undermenu &gt; *, .function-list .rnr-b-vmenu &gt; *, .function-list .rnr-s-2 &gt; *, .function-list .rnr-row &gt; *, .function-list .rnr-toprow &gt; * { background-color : transparent !important; background : transparent !important; } Sample screenshot:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-900","post","type-post","status-publish","format-standard","hentry","category-php-category"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":8,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/900\/revisions"}],"predecessor-version":[{"id":909,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/900\/revisions\/909"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}