Search
Search titles only
By:
Search titles only
By:
Log in
Register
Search
Search titles only
By:
Search titles only
By:
Menu
Install the app
Install
Forums
New posts
All threads
Latest threads
New posts
Trending threads
Trending
Search forums
What's new
New posts
New ads
New profile posts
Latest activity
Free Ads
Latest reviews
Search ads
Members
Current visitors
New profile posts
Search profile posts
Contact us
Latest ads
Colombo
Red Hat Certified System Administrator (RHCSA) - RHEL 10
Sanjeewani95
Updated:
Friday at 7:43 PM
NURSING , CAREGIVER , HOTEL & BEAUTY COURSES
IVA Para Medical Campus
Updated:
Thursday at 9:24 AM
Handmade Character Soft Toys Peppa Pig Family
anil1961
Updated:
Wednesday at 9:58 PM
Ad icon
Video Content Creator
pramukag
Updated:
Jun 28, 2026
Ad icon
QA Engineer Intern
pramukag
Updated:
Jun 28, 2026
Electronics
Vehicles
Property
Search
Reply to thread
Forums
Computers & Internet
Software Development
📄 Change theme-colors for smartphone browsers
Get the App
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Message
<blockquote data-quote="The_Killer" data-source="post: 20254046" data-attributes="member: 497820"><p style="text-align: center"><img src="http://i.imgur.com/MYvY5zM.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p></p><p><span style="font-size: 12px">ගොඩ කාලයකින් අපි බහුතරයකට වැදගත්වන thread එකක් දන්නා බැරි උනා. ඒ නිසා ඔන්න අද මම අපේ Web Development කරන අයියලා, මල්ලිලා, අක්කලා, නංගිලාට පොඩි trick එකක් කියලා දෙන්න හදන්නේ.</span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px">Web development කරද්දී ගොඩක් අය ලස්සන ලස්සන themes පාවිච්චි කරනවා ඔය මලානික background color එක යවන්න. සමහර අය පොඩි png sprite පාවිච්චි කරනවා, සමහර අය background color එකක් දෙනවා. ඔය මොක දුන්නත් අපි smartphone එකේ තියෙන browser එකෙන් මේ වෙබ් අඩවි වලට පිවිසෙද්දී ඒ වෙබ් අඩවියේම background color එක වගේ color එකක් ඔයාලාගේ smartphone එකේ browser එකේ tab එකෙත් පෙන්නන විදියක් මම අද කියලා දෙන්නයි යන්නේ.</span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px">සාමාන්යයෙන් අපි මේ meta tag එක දාලා තිබ්බේ නැත්නම් අපිට පෙන්නේ default ash/grey color tab එකක්. මේ meta tag එක මගින් අපිට ඒක වෙනස් කරන්න අවස්ථාව ලබා දීලා තියෙනවා. එහෙනම් පහත තියෙන විදියට තමා codes ටික අපේ හැම වෙබ් පිටුවකම(index.html,contact.html,about.html etc..) HEAD tag එක ඇතුලට දාන්න ඕනා.</span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px">[CODE]</span></p><p><span style="font-size: 12px"><head></span></p><p><span style="font-size: 12px"> ...</span></p><p><span style="font-size: 12px"> <meta name="theme-color" content="Your Hexa Decimal Code"></span></p><p><span style="font-size: 12px"> ...</span></p><p><span style="font-size: 12px"></head></span></p><p><span style="font-size: 12px">[/CODE]</span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px"><strong>Example:</strong></span></p><p><span style="font-size: 12px">[CODE]</span></p><p><span style="font-size: 12px"><head></span></p><p><span style="font-size: 12px"> ...</span></p><p><span style="font-size: 12px"> <meta name="theme-color" content="#5b144b"></span></p><p><span style="font-size: 12px"> ...</span></p><p><span style="font-size: 12px"></head></span></p><p><span style="font-size: 12px">[/CODE]</span></p><p><span style="font-size: 12px"></span></p><p style="text-align: center"><span style="font-size: 12px"><img src="https://developers.google.com/web/updates/images/2014/11/theme-color-ss.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></span></p><p><span style="font-size: 12px">මේ meta tag එක මගින් Chrome, Firefox, Opera browser on Android OS වල background tab color එක වෙනස් කරලා පෙන්වයි. පහළ තියෙනවා ඔක්කොම Mobile phone OS supported web browser meta tags list එක.</span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px"><strong>Full Code: </strong></span></p><p><span style="font-size: 12px">[CODE]</span></p><p><span style="font-size: 12px">[COLOR="Gray"]<!-- Chrome, Firefox, Opera and Vivaldi -->[/COLOR]</span></p><p><span style="font-size: 12px"><meta name="theme-color" content="#da0000"></span></p><p><span style="font-size: 12px">[COLOR="Gray"]<!-- Windows Phone -->[/COLOR]</span></p><p><span style="font-size: 12px"><meta name="msapplication-navbutton-color" content="#da0000"></span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px">[COLOR="Gray"]<!-- iOS Safari --></span></p><p><span style="font-size: 12px"><!-- Hiding Safari User Interface Components -->[/COLOR]</span></p><p><span style="font-size: 12px"><meta name="apple-mobile-web-app-capable" content="yes"></span></p><p><span style="font-size: 12px">[COLOR="Gray"]<!-- Changing the Status Bar Appearance -->[/COLOR]</span></p><p><span style="font-size: 12px"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></span></p><p><span style="font-size: 12px">[/CODE]</span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px">අපි <a href="https://www.youtube.com/watch?v=O6FCD4ve61c" target="_blank">Merge tabs and apps</a> option එක enable කරලා තිබ්බොත් අපේ Chrome browser එක opened chrome tabs අපේ අනෙකුත් දැනට running apps එක්ක overview screen එකේ පෙන්වනු ලබයි.</span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px">If you have Merge tabs and apps option enabled in your Chrome app you will see the opened tabs along with other recent apps in the Overview screen. Here, in the place of the app icon, Chrome will show our website’s favicon if provided</span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px">දැනට මේ විදියට හැඩ වැඩ දාලා තියෙන website ටිකක්.</span></p><p><span style="font-size: 12px"></span></p><p style="text-align: center"><span style="font-size: 12px"><img src="http://goo.gl/vri8mM" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px"><strong>සැ.යු: </strong></span></p><ol> <li data-xf-list-type="ol"><span style="font-size: 12px">මෙය android 5.0 lollipop වල සිට ඉහළ සංස්කරණ සදහා දායකත්වය ලැබේ.</span></li> <li data-xf-list-type="ol"><span style="font-size: 12px">Apple safari browser එකේ දැනට දායකත්වය දෙන්නේ black or black-translucent පමණි.</span></li> <li data-xf-list-type="ol"><span style="font-size: 12px">Apple device එකක් ඇති බැවින් මට පවුද්ගලිකව මෙය Android, Windows phone වල අත්හදා බැලීමට නොහැකි විය.</span></li> </ol><p></p><p><span style="font-size: 12px">තවත් පොඩි දෙයක් කියලා දෙන්නම් යන්න කලින්. ඔය බහුතරයක් වෙබ් අඩව වල දැකලා ඇති browser tab එකේ පොඩි icon එකක් තියෙනවා page title එකට කලින්. එකට කියන්නේ favicon කියලා. දැන් Chrome මගින් High-res Icon වලට support කරනවාලු. එහෙනම් ඒකත් ඔය free online favicon generator website වලින් හදලා <head> tag එක ඇතුලට දාන්න.</span></p><p><span style="font-size: 12px"></span></p><p><span style="font-size: 12px"><a href="http://www.favicon-generator.org/" target="_blank">Click here to open Favicon online generator</a></span></p><p><span style="font-size: 12px"></span></p><p style="text-align: center"><span style="font-size: 12px"><img src="http://arjunu.com/wp-content/uploads/2015/04/Screenshot_2015-04-26-13-55-20.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p></span></p><p style="text-align: center"><span style="font-size: 12px"></p></span></p><p style="text-align: center"><span style="font-size: 12px"></p></span></p><p style="text-align: center"><span style="font-size: 12px"></p></span></p><p style="text-align: center"><span style="font-size: 12px"><img src="http://i.stack.imgur.com/ZzbOC.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><img src="http://i.stack.imgur.com/cXXnb.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p></span></p><p style="text-align: center"><span style="font-size: 12px"></p></span></p><p style="text-align: center"><span style="font-size: 12px"></p></span></p><p style="text-align: center"><span style="font-size: 12px"><strong><span style="font-size: 15px">එහෙනම් අනික් අයටත් දැනගන්න share කරමු, bump කරමු..!! </span></strong></p></span></p><p style="text-align: center"><span style="font-size: 12px"><strong><span style="font-size: 15px">ජය වේවා!!!</span></strong></p></span></p><p style="text-align: center"><span style="font-size: 12px"></p></span></p><p style="text-align: center"><span style="font-size: 12px"></p></span></p><p style="text-align: center"><span style="font-size: 12px"><span style="color: DarkRed">රෙපක් ගහන් යමු..!! <img src="/styles/default/xenforo/smilies/default/wink.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /></span></p></span></p><p style="text-align: center"><span style="font-size: 12px"><a href="http://www.elakiri.com/forum/reputation.php?p=20254046" target="_blank"><img src="http://i.imgur.com/4tAdIuW.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a></p></span></p><p style="text-align: center"><span style="font-size: 12px"></p></span></p><p style="text-align: center"><span style="font-size: 12px"></p><p></span></p></blockquote><p></p>
[QUOTE="The_Killer, post: 20254046, member: 497820"] [CENTER][IMG]http://i.imgur.com/MYvY5zM.png[/IMG][/CENTER] [SIZE="3"]ගොඩ කාලයකින් අපි බහුතරයකට වැදගත්වන thread එකක් දන්නා බැරි උනා. ඒ නිසා ඔන්න අද මම අපේ Web Development කරන අයියලා, මල්ලිලා, අක්කලා, නංගිලාට පොඩි trick එකක් කියලා දෙන්න හදන්නේ. Web development කරද්දී ගොඩක් අය ලස්සන ලස්සන themes පාවිච්චි කරනවා ඔය මලානික background color එක යවන්න. සමහර අය පොඩි png sprite පාවිච්චි කරනවා, සමහර අය background color එකක් දෙනවා. ඔය මොක දුන්නත් අපි smartphone එකේ තියෙන browser එකෙන් මේ වෙබ් අඩවි වලට පිවිසෙද්දී ඒ වෙබ් අඩවියේම background color එක වගේ color එකක් ඔයාලාගේ smartphone එකේ browser එකේ tab එකෙත් පෙන්නන විදියක් මම අද කියලා දෙන්නයි යන්නේ. සාමාන්යයෙන් අපි මේ meta tag එක දාලා තිබ්බේ නැත්නම් අපිට පෙන්නේ default ash/grey color tab එකක්. මේ meta tag එක මගින් අපිට ඒක වෙනස් කරන්න අවස්ථාව ලබා දීලා තියෙනවා. එහෙනම් පහත තියෙන විදියට තමා codes ටික අපේ හැම වෙබ් පිටුවකම(index.html,contact.html,about.html etc..) HEAD tag එක ඇතුලට දාන්න ඕනා. [CODE] <head> ... <meta name="theme-color" content="Your Hexa Decimal Code"> ... </head> [/CODE] [B]Example:[/B] [CODE] <head> ... <meta name="theme-color" content="#5b144b"> ... </head> [/CODE] [CENTER][IMG]https://developers.google.com/web/updates/images/2014/11/theme-color-ss.png[/IMG][/CENTER] මේ meta tag එක මගින් Chrome, Firefox, Opera browser on Android OS වල background tab color එක වෙනස් කරලා පෙන්වයි. පහළ තියෙනවා ඔක්කොම Mobile phone OS supported web browser meta tags list එක. [B]Full Code: [/B] [CODE] [COLOR="Gray"]<!-- Chrome, Firefox, Opera and Vivaldi -->[/COLOR] <meta name="theme-color" content="#da0000"> [COLOR="Gray"]<!-- Windows Phone -->[/COLOR] <meta name="msapplication-navbutton-color" content="#da0000"> [COLOR="Gray"]<!-- iOS Safari --> <!-- Hiding Safari User Interface Components -->[/COLOR] <meta name="apple-mobile-web-app-capable" content="yes"> [COLOR="Gray"]<!-- Changing the Status Bar Appearance -->[/COLOR] <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> [/CODE] අපි [URL="https://www.youtube.com/watch?v=O6FCD4ve61c"]Merge tabs and apps[/URL] option එක enable කරලා තිබ්බොත් අපේ Chrome browser එක opened chrome tabs අපේ අනෙකුත් දැනට running apps එක්ක overview screen එකේ පෙන්වනු ලබයි. If you have Merge tabs and apps option enabled in your Chrome app you will see the opened tabs along with other recent apps in the Overview screen. Here, in the place of the app icon, Chrome will show our website’s favicon if provided දැනට මේ විදියට හැඩ වැඩ දාලා තියෙන website ටිකක්. [CENTER][IMG]http://goo.gl/vri8mM[/IMG][/CENTER] [B]සැ.යු: [/B] [LIST=1] [*]මෙය android 5.0 lollipop වල සිට ඉහළ සංස්කරණ සදහා දායකත්වය ලැබේ. [*]Apple safari browser එකේ දැනට දායකත්වය දෙන්නේ black or black-translucent පමණි. [*]Apple device එකක් ඇති බැවින් මට පවුද්ගලිකව මෙය Android, Windows phone වල අත්හදා බැලීමට නොහැකි විය. [/LIST] තවත් පොඩි දෙයක් කියලා දෙන්නම් යන්න කලින්. ඔය බහුතරයක් වෙබ් අඩව වල දැකලා ඇති browser tab එකේ පොඩි icon එකක් තියෙනවා page title එකට කලින්. එකට කියන්නේ favicon කියලා. දැන් Chrome මගින් High-res Icon වලට support කරනවාලු. එහෙනම් ඒකත් ඔය free online favicon generator website වලින් හදලා <head> tag එක ඇතුලට දාන්න. [URL="http://www.favicon-generator.org/"]Click here to open Favicon online generator[/URL] [CENTER][IMG]http://arjunu.com/wp-content/uploads/2015/04/Screenshot_2015-04-26-13-55-20.png[/IMG] [IMG]http://i.stack.imgur.com/ZzbOC.png[/IMG][IMG]http://i.stack.imgur.com/cXXnb.png[/IMG] [B][SIZE="4"]එහෙනම් අනික් අයටත් දැනගන්න share කරමු, bump කරමු..!! ජය වේවා!!![/SIZE][/B] [COLOR="DarkRed"]රෙපක් ගහන් යමු..!! ;)[/COLOR] [URL="http://www.elakiri.com/forum/reputation.php?p=20254046"][IMG]http://i.imgur.com/4tAdIuW.jpg[/IMG][/URL] [/CENTER] [/SIZE] [/QUOTE]
Insert quotes…
Verification
Haya warak paha keeyada? (haya wadi kireema paha)
Post reply
Top
Bottom