{"id":290,"date":"2013-03-04T09:44:47","date_gmt":"2013-03-04T09:44:47","guid":{"rendered":"http:\/\/pixert.com\/blog\/?p=290"},"modified":"2013-03-04T09:47:27","modified_gmt":"2013-03-04T09:47:27","slug":"override-css-property-right-to-left","status":"publish","type":"post","link":"https:\/\/pixert.com\/blog\/override-css-property-right-to-left\/","title":{"rendered":"Override CSS property right to left"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>This case is an example on how to override CSS property right to left<\/p>\n<p>We have this AdSense banner floating on the right side of the screen. What if you want to change it to the left<br \/>\nRecently, I installed <a title=\"Floating AdSense for WordPress\" href=\"http:\/\/wordpress.org\/extend\/plugins\/floating-adsense-bar\/\">Floating AdSense plugin for WordPress<\/a>. It&#8217;s very helpful to add AdSense banner floating on the site.<br \/>\nHowever, this plugin floats the banner automatically on the right. Somehow, when the float option changed to left, it doesn&#8217;t work<\/p>\n<p>The original code is look alike this one<\/p>\n<pre class=\"brush: plain; title: Code Block; notranslate\" title=\"Code Block\">\r\n#ad_divRight\u00a0{\r\noverflow:\u00a0hidden;\r\nborder:\u00a02px solid\u00a0#3c95d9;\r\nbackground-color:\u00a0#fff;\r\nright:\u00a00px;\r\nposition:\u00a0fixed;\r\ntop:\u00a05%;\r\nmargin-left:\u00a00px;\r\nfloat:\u00a0right;\r\n-moz-border-radius:\u00a05px;\r\n-webkit-border-radius:\u00a05px;\r\nbackground-color:\u00a0#ffffff;\r\npadding:\u00a00 0 2px 0;\r\nz-index:\u00a010;\r\n}\r\n<\/pre>\n<p>See right:0 , this forces banner ad to the right corner of the screen\/site. We can override this alignment to the left with CSS with this code<\/p>\n<pre class=\"brush: plain; title: Code Block; notranslate\" title=\"Code Block\">#ad_divRight { left: 0 !important; right: auto !important; }<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; This case is an example on how to override CSS property right to left We have this AdSense banner floating on the right side of the screen. What if you want to change it to the left Recently, I installed Floating AdSense plugin for WordPress. It&#8217;s very helpful to add AdSense banner floating on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[54,5],"tags":[55,70,6,122],"class_list":["post-290","post","type-post","status-publish","format-standard","hentry","category-code-snippet","category-wordpress","tag-code-snippet-2","tag-css","tag-wordpress-2","tag-xhmtl"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1pvi1-4G","jetpack-related-posts":[{"id":366,"url":"https:\/\/pixert.com\/blog\/responsive-ads-google-adsense\/","url_meta":{"origin":290,"position":0},"title":"Responsive Ads with Google AdSense","author":"Pixel Insert \/ Pixert","date":"May 20, 2014","format":false,"excerpt":"We could show Google AdSense responsively in our website with Responsive Ad Unit, this means we\u00a0can control the size of the ads on our\u00a0page corresponding to screen resolution of the visitor's device.\u00a0The code of Responsive Ad Unit detects the size of the screen and serve the appropriate ad unit that\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"GAResponsiveAd1","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/05\/GAResponsiveAd1.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/05\/GAResponsiveAd1.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/05\/GAResponsiveAd1.jpg?resize=525%2C300 1.5x"},"classes":[]},{"id":300,"url":"https:\/\/pixert.com\/blog\/how-to-add-widgetized-custom-sidebars-wordpress-theme\/","url_meta":{"origin":290,"position":1},"title":"How to add widgetized and custom sidebars on WordPress theme","author":"Pixel Insert \/ Pixert","date":"April 13, 2013","format":false,"excerpt":"WordPress themes are usually come with Widgetized sidebars where you can drag and drop widgets. It's okay when we don't need more widgetized sidebars to the theme, but we probably think to add more when we think widgetized sidebar solution to your customization problem, for instance you want to add\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":206,"url":"https:\/\/pixert.com\/blog\/how-to-make-ie-to-display-iframes-with-transparent-background\/","url_meta":{"origin":290,"position":2},"title":"How to make IE to display iframes with transparent background?","author":"Pixel Insert \/ Pixert","date":"February 28, 2012","format":false,"excerpt":"1. Add allowTransparency=\"true\" property to the iframe [php]<iframe id=\"frame_one\" src=\"iframe.php\" allowTransparency=\"true\">Browser not compatible<\/iframe>[\/php] 2. Add background:transparent to it's body tag or internal styles in the head section of an HTML page [php]<body style=\"background:transparent\"><\/body>[\/php] or [php] <style type=\"text\/css\"> html,body { background: transparent; } <\/style> [\/php]","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":179,"url":"https:\/\/pixert.com\/blog\/how-to-change-the-bullet-size-and-color-css\/","url_meta":{"origin":290,"position":3},"title":"How to change the bullet size and color with CSS","author":"Pixel Insert \/ Pixert","date":"December 20, 2011","format":false,"excerpt":"The following code snippet help you change the bullet size and color of your unordered lists. We are using simple CSS code to do that 1. Create your bullet list image via Adobe Photoshop or you can use another image editor to do that (e.g Pixelmator). Save the image as\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/12\/csslogo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":207,"url":"https:\/\/pixert.com\/blog\/remove-border-from-iframe\/","url_meta":{"origin":290,"position":4},"title":"Remove border from iframe","author":"Pixel Insert \/ Pixert","date":"February 28, 2012","format":false,"excerpt":"Add the frameBorder attribute. It's case-sensitive [php]<iframe src=\"iframe.php\" width=\"300\" height=\"300\" frameBorder=\"0\" scrolling=\"no\">Browser not compatible<\/iframe>[\/php]","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":289,"url":"https:\/\/pixert.com\/blog\/full-screen-background-on-wp-login-page\/","url_meta":{"origin":290,"position":5},"title":"Full Screen Background on WP Login Page","author":"Pixel Insert \/ Pixert","date":"March 5, 2013","format":false,"excerpt":"The following function add full screen background on WP Login page 1. Open functions.php in your theme directory 2. Add this function to functions.php [text] \/\/ LOGIN - full background function my_login_style() { ?> <style type=\"text\/css\"> body.login { background:url('http:\/\/yourwebsiteaddress.com\/wp-content\/uploads\/wploginbg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size:\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"WordPress - the logo","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/03\/wordpresslogo-300x68.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":0,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"wp:attachment":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}