As you can see, the index gets a grey block around it. This is because the div element around the index gets a default class name of well. The well class is styled by Bootstrap, so if you use a template using Bootstrap, you will also see this grey block styling.

However, you are free to give the index any class name you want. You can change this (or add class names) in the Quick Index Plugin Settings. Also many other elements in the index get class names, which you can configure in the settings as well.

Because of these class names, you have full freedom to style the index however you want via CSS. We recommend you place your custom CSS styles in a custom stylesheet loaded by your template.

The container div also always gets a fixed class name of rl_quickindex. So you can use that to base your custom styling on too. For example:

.rl_quickindex:before {
    font-family: IcoMoon;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none;

    content: "\53";
    font-weight: 400;
    font-size: 160px;
    line-height: 160px;

    width: 160px;
    height: 160px;

    display: block;
    position: absolute;
    top: 20px;
    right: 0;
    
    opacity: .05;
}

Note: This specific style example requires your template to already load the IcoMoon font (available in Joomla core).