Complete guidance of CSS:nth-child Works

The :nth-child() CSS pseudo-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; }

Example: nth-child(4n):

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12

:nth-child() is compatible in Chrome, Firefox, and IE9+

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13
4 9 17 20 16 18
5 11 21 24 20 23

For More Guidance, Please check below:

https://css-tricks.com/useful-nth-child-recipies/ (width Examples)

https://css-tricks.com/how-nth-child-works/

http://nthmaster.com/ (Mater in nth Child pseudo-class )

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

https://css-tricks.com/almanac/selectors/n/nth-child/

Advertisements

Customize the Office 365 theme for your organization

Article From : https://support.office.com/en-us/article/Customize-the-Office-365-theme-for-your-organization-8275da91-7a48-4591-94ab-3123a3f79530

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).

Example Office 365 theme change

Customize your theme in the Office 365 admin center

  1. Sign in to Office 365 with your work or school account.
  2. Navigate to Settings Settings: update your profile, install software and connect it to the cloud > Organization profile.
  3. Next to Manage custom themes for your organization, click or tap Edit.

    Tap or click Edit to change your theme

  4. 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.
  5. 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.

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.

Count Based Interval:

var _timesRun = 0;
var _interval = setInterval(function(){
    _timesRun += 1;
    if(_timesRun === 60){
        clearInterval(_interval);
    }
    //do whatever here..
}, 2000); 

Time Based Interval:
(e.g. 1 minute) you can do:

var _startTime = new Date().getTime();
var _interval = setInterval(function(){
    if(new Date().getTime() - _startTime > 60000){
        clearInterval(_interval);
        return;
    }
    //do whatever here..
}, 2000);

Office 365 Icons

Complete Office 365 Icons

Thomas Daly's SharePoint Blog

Introduction

I recently came across an interesting blog – http://www.n8d.at/blog/office-365-icon-font-documentation/ which mentions O365 icons. This was back in February so when I attempted to locate these fonts so I could use them in some of my work. I could not located the file on the CDN that was mentioned. I kind of shrugged it off for a while but recently needed the icons again. So I went digging inside O365 and I found them. They are there if you want to use them. I’ll show you what classes to use. I also pulled the files which I’ll provide a link to at the end of the blog so you can download them and use them and not have to worry about CDN’s.

I found all the O365 icon inside my O365 Portal.  I downloaded the web fonts and a portion of the css file that has the code for the…

View original post 354 more words