]]>https://ravinthranath.wordpress.com/2018/05/08/clearing-a-file-input/feed/0ravinthranathForcing Browser to Print Background Graphicshttps://ravinthranath.wordpress.com/2018/05/02/forcing-browser-to-print-background-graphics/
https://ravinthranath.wordpress.com/2018/05/02/forcing-browser-to-print-background-graphics/#respondWed, 02 May 2018 09:09:31 +0000http://ravinthranath.wordpress.com/?p=611Continue reading Forcing Browser to Print Background Graphics]]>The Most browser doesn’t have an option to print the background graphics through via CSS but –webkit– browser have the option.

The Webkit-Only Solution

The simplest solution is using the -webkit-print-color-adjust style. it works for both background colors and background images. All you need to do is add this style to the element that has the background that you want to print:

The downside here is that this will only work in Chrome 26+ and Safari 6+ and it will never work on the body tag.

]]>https://ravinthranath.wordpress.com/2018/05/02/forcing-browser-to-print-background-graphics/feed/0ravinthranathMake a user friendly data tables for enterprise applications viewhttps://ravinthranath.wordpress.com/2018/02/13/make-a-user-friendly-data-tables-for-enterprise-applications-view/
https://ravinthranath.wordpress.com/2018/02/13/make-a-user-friendly-data-tables-for-enterprise-applications-view/#respondTue, 13 Feb 2018 18:21:21 +0000http://ravinthranath.wordpress.com/?p=600Continue reading Make a user friendly data tables for enterprise applications view]]>Data is useless without the ability to visualize and act on it. The success of future industries will couple advanced data collection with a better user experience, and the data table comprises much of this user experience.

Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.

]]>https://ravinthranath.wordpress.com/2017/12/17/how-to-view-svg-files-in-windows-explorer-instead-of-internet-explorer-icon/feed/0ravinthranathComplete guidance of CSS:nth-child Workshttps://ravinthranath.wordpress.com/2017/11/28/complete-guidance-of-cssnth-child-works/
https://ravinthranath.wordpress.com/2017/11/28/complete-guidance-of-cssnth-child-works/#respondTue, 28 Nov 2017 15:54:40 +0000http://ravinthranath.wordpress.com/?p=586Continue reading Complete guidance of CSS:nth-child Works]]>The :nth-child()CSSpseudo-class matches one or more elements based on their position among a group of siblings.

/* Selects every fourth element among any group of siblings */:nth-child(4n){color: Red;}
// Select ODD element like 1,3,5,...
:nth-child(odd) { background: red;}
// Select Even element like 0,2,4,...
:nth-child(even) { background: blue;}
// Select 7th child
:nth-child(7) { background: blue;}
// Select All But The First Five
:nth-child(n+6){ background: green; }
//Select Only The First Five
:nth-child(-n+5){ color: green; }
//Select Every Fourth, Starting At The First
:nth-child(4n-7){ /* or 4n+1 */color: green; }
// Select the Second to Last Element
:nth-last-child(2){ color: green; }

]]>https://ravinthranath.wordpress.com/2017/11/28/complete-guidance-of-cssnth-child-works/feed/0content-boxes-simple-business-professional-corporate-colorful-squares-prezi-template-presentationravinthranath“white-space: nowrap” affects width of display:tablehttps://ravinthranath.wordpress.com/2017/11/22/white-space-nowrap-affects-width-of-displaytable/
https://ravinthranath.wordpress.com/2017/11/22/white-space-nowrap-affects-width-of-displaytable/#respondWed, 22 Nov 2017 12:51:45 +0000http://ravinthranath.wordpress.com/?p=551Continue reading “white-space: nowrap” affects width of display:table]]>I have a Display:table for the search page. File names might be long, so only the part of the name is displayed with the help of:

Learn how to customize your theme in the Office 365 admin center. As the admin of your Office 365 for business subscription, you can change the default theme that appears in the top navigation bar for everyone in the organization. You can add your company logo and colors to match your brand as shown here (where 1 is the default theme and 2 is the customized theme).

Customize your theme in the Office 365 admin center

Next to Manage custom themes for your organization, click or tap Edit.

Change the theme elements you want for your organization:

Custom logo: Select the image and upload your own JPG, PNG, or GIF with a resolution of 200 x 50 pixels, no larger than 10 KB. This appears in the top navigation bar on every page.

URL for a clickable logo: Enter the URL for the logo, starting with http:// or https://. This is optional.

Background image: Select the image and upload your own JPG, PNG, or GIF with a resolution of 1366 x 50 pixels, no larger than 15 KB. The background image appears in the top navigation bar on every page.

NOTE: Images that contain text may not display as expected. Built-in elements that appear on the right and left sides of the navigation bar can vary across services, and your text may be obscured by those elements. Due to the dynamic nature of the navigation bar, at this time we are unable to provide guidance for image padding that would result in a consistent experience.

Prevent users from overriding theme: Check this box to disable theming at the user level so that everyone in the organization sees the theme you create. The exception to this is a high contrast theme used for accessibility purposes.

Accent color: Select a color to use for the app launcher icon, mouse over color, and other accents.

Nav bar background color: Select a color to use for the background of the navigation bar. The appears at the top on every page.

Text and icons: Select a color to use for the text and icons on the top navigation bar.

App launcher icon: Select a color to use for the app launcher icon in the upper left.

Click or tap Save.

You’ll see your new theme on the Office 365 admin center right away and after a short delay, you’ll see it throughout Office 365, including Outlook and SharePoint pages. You can remove your custom icon or custom colors at any time. Just return to the theme page and choose Remove custom theming.

]]>https://ravinthranath.wordpress.com/2017/11/15/customize-the-office-365-theme-for-your-organization/feed/0twitter-01ravinthranathExample Office 365 theme changeSettings: update your profile, install software and connect it to the cloudTap or click Edit to change your themeJavaScript: setInterval stop after a number of actions (Count) or after some time ?https://ravinthranath.wordpress.com/2017/11/10/javascript-setinterval-stop-after-a-number-of-actions-count-or-after-some-time/
https://ravinthranath.wordpress.com/2017/11/10/javascript-setinterval-stop-after-a-number-of-actions-count-or-after-some-time/#respondFri, 10 Nov 2017 15:27:55 +0000http://ravinthranath.wordpress.com/?p=463Continue reading JavaScript: setInterval stop after a number of actions (Count) or after some time ?]]>To stop it after running a set number of times, just add a counter to the interval, then when it reached that number clear it.