Stylish-Plus.Top Themes & Styles for Stylist

Description

STYLISH-PLUS.TOP | STYLISH PLUS | THEMES, SKINS AND USER STYLES FOR STYLISTS

Restyle / Beautify the web quickly with "Stylish Plus (Stylist)". Change all the themes and skins for various popular sites instantly with "Stylish Plus (Stylist)".

You can find many different themes from "Stylish Plus (Stylist)" and also customize your own style. Take out irrelevant content, change colors, or completely redesign the entire site. You can do almost anything for your themes of popular sites.

It's also extremely easy to manage all styles at one place. Whether you want to add, delete, enable, disable, and organize, you can do with a few clicks of a mouse, no code to edit, no difficult configuration to work on.

There are 10,000+ styles created by our community that you can choose, available on "stylish-plus.top", the largest collection of user styles anywhere! User styles let you change the way websites look. We've got Facebook themes, Tumblr themes, Google themes, Firefox themes, and more. There are tens of thousands of user styles, I'm sure you'll like at least a few. This is much better than the other similar extensions: Stylist, Stylebot, stylebot.me, Style Me, FreeStyler, ESI Stylish, Fabulous! Customize Popular Websites ...

Let's change your old and boring popular sites that you frequently visit now, be a stylist. :)


★★★ Writing your own user styles

Writing a user style from scratch requires a working knowledge of CSS. There are many CSS tutorials online, most of which are better than anything I could write. For those have limited knowledge of CSS, my recommendation would be to take an existing style that does something similar to what you want, and attempt to understand and modify it to suit your needs.


★★★ Using "stylish-plus.top"

"stylish-plus.top" is the largest collection of user styles.

✔ Style categorization
Styles can be one of three categories: site styles, which affect certain sites; global styles, which affect all sites; or app styles, which affect the interface of Firefox and other Mozilla apps. Site styles are subcategorized based on the site they affect.

✔ Searching
You can use search terms, or URLs, or a combination when searching. URLs will limit the results to styles that affect that URL. For example, searching for "google.com black" will give you all styles that can affect Google that include the word "black" in the description. For advanced searches, you can use these operators. Clicking "Show options" in the search box lets you change various settings for your search results.

✔ Installing styles
Each style page will have a box giving you the options to install for your browser. The recommended way to install styles is with "Stylish Plus (Stylist)".

✔ Leaving feedback
You can leave feedback on a style at the bottom of the style's page. This is the best way for getting heard by the author of the style. You can optionally give the style a rating, which will affect how high the style appears in search results. You need to create an account to leave feedback.


★★★ Posting styles to "stylish-plus.top"

Writing styles requires a working knowledge of CSS. If you don't know CSS, there are many tutorials available online. It may also be helpful to inspect the source of other styles to see how things work. To post new styles on "stylish-plus.top", you will have to create a user account. Once logged in, you'll see a Create new style link on your user home page.

✔ Limits on user styles
Styles are limited in a few ways:
- Maximum size is 100,000 bytes. Exemptions are possible by contacting me, I won't grant exemptions if you're using embedded images.
- No @import directives. If an @import is done to a slow-loading server, it will cause browser hangs.
- No XBL due to potential security issues.
- There are various checks done to determine if the posted code is valid CSS. While the code is not actually validated, it does check that the number of braces match. These checks can sometimes be confused by commented out code.

✔ Sharing user styles
The best way to share user styles is to post them to this site. Doing this makes it easy for others to find and install your styles and lets them easily receive updates should you change your style.
An alternate way is to provide put your code in a CSS file and host it somewhere. This will still allow for updates, but there won't be an easy button for users to click to install, and they will have to provide a name for the style themselves.
A final way is to simply provide the code and make users copy and paste it into "Stylish Plus (Stylist)". No updates are possible this way.

✔ Deleting user styles off of "stylish-plus.top"
To delete a style off the site, go to the edit screen, then click the link for deleting. There is no way to truly delete a style; rather, the style no longer shows up in search results, and a large warning is displayed to anyone accessing it directly. This is so that previous users of the style know what happened to it. Please do not "blank out" the style instead of deleting.

✔ Style settings
Style settings let you give users options for installing your style. The options chosen affect the CSS provided to the user. Uses of settings include:
- Providing alternatives in your style - for example: moving an element versus hiding it.
- Having optional functionality in your style.
- Allowing a user to choose between a number of background images, or provide their own.
- Allowing a user to choose colors.
- Style settings can change a single value in your CSS or change entire blocks of code.

✔ Types of settings
Depending on the type of setting you choose, the user may be presented with pre-defined options of your choosing or be asked to provide a specific kind of value. The types of settings are:
- Drop-down setting: all options are defined by you, the user is presented with a drop-down list of them to choose from. This is suitable for when you want to have different blocks of CSS included based on the option chosen, but should also be used when none of the other options fit.
- Color setting: the user is presented with a color chooser. The color chosen will be inserted in the hex format (e.g. #FFFFFF) by default. You can also have it inserted as RGB values (e.g. 0, 0, 0) by appending -rgb to the install key in the code only.
- Text setting: the user can enter free-form text. The text will have backslashes and quotes escaped. This is suitable inserting CSS string values, for example the "content" attribute.
- Image setting: you can provide options for the user to choose from, but the user can also provide their own URL or upload an image which is transformed into a data URI. This is intended for image options.

✔ Editing settings
On the edit screen, you can add, edit, delete, and move settings and options. The attributes of settings are:
- Label: displayed to the user on your style's page. An example could be "Choose a font".
- Install key: this matches the placeholder in your code (see "Placeholders" below). This is also used when updating your style (see "Updating" below).
- Default: for color and text settings only, this is the initial value entered in the input presented to the user.

The attributes of options are:
- Label: displayed to the user on your style's page. An example could be "Times New Roman".
- Install key: this is used when updating your style (see "Updating" below). This doesn't need to (and shouldn't) match the setting's install key.
- Value: the text to be inserted at the location of the placeholder in your CSS (see "Placeholders" below).
- Default: sets the initial option selected when the user loads the page.
- Setting install keys must be unique. Option install keys must be unique within a setting.

✔ Placeholders
The placeholder is the location in your CSS where the option's value is inserted. It is defined with a specially-formatted comment containing the associated setting's install key.
For a setting with an install key of "font" with two options with values "Times New Roman" and "Helvetica", the CSS you provide would look like this:
div {
font-face: "/*[[font]]*/" !important;
}
Which, depending on the user's selection, will result in either:
div {
font-face: "Times New Roman" !important;
}
Or:
div {
font-face: "Helvetica" !important;
}
Placeholders can be include inside other options, effectively nesting options. Only two levels of nesting is supported.

✔ Updating
("Stylish Plus (Stylist)" does not yet support updating styles with settings, but will soon...)
When the user installs your style, "Stylish Plus (Stylist)" will record the install keys of the settings and options the user chose. If you subsequently delete or rename install keys, anyone who chose the options with those install keys will not be update the style. Changing labels or values, reordering settings and options, and adding new options will still allow users to update.
In other words, try to maintain your install keys when you change your style, if possible.

✔ Format of style descriptions
Some HTML is allowed in style descriptions. You can use these tags, with allowed attributes in parentheses: a (href), abbr (title), b, blockquote (cite), br, cite, code, dd, dfn (title), dl, dt, em, i, kbd, li, mark, ol, p, pre, q (cite), s, samp, small, strike, strong, sub, sup, time (datetime, pubdate), u, ul, var.
Additionally, you can create links automatically by:
- Writing "style 1" (without quotes) - will create a link to the style with ID 1.
- Writing "user 1" (without quotes) - will create a link to the user with ID 1.
- Writing a URL - will create a link to that URL.

✔ Screenshots
Screenshots are an important way to show to others what your style does. There are two ways to specify a screenshot.
- Automatic screenshots: Automatically generating screenshots is recommended for styles that affect webpages in a way that is very obvious visually. The screenshot will consist of the first screenful of the page. Generating the screenshot will take a few days. The screenshot will be periodically updated by the site.
- Manual screenshots: Providing your own screenshot is recommended for cases where automatic screenshots are not suitable. These include subtle changes, changes to sites that require logins, changes to sites that are not visible in the first screenful, and changes to the Firefox UI.


★★★ FAQ

✔ Are there alternate ways of installing user styles ?
"Stylish Plus (Stylist)" is the recommended way to install user styles. There are other ways of using styles.
- Some styles are available as user scripts for use in browsers that support user scripts, or browsers that have extensions like Greasemonkey.
- In Mozilla programs, the style code can be placed in userChrome.css (for app styles) or userContent.css (for everything else).
- Some browsers let you apply specify site-specific stylesheets through their UI. You can take a user styles, strip out the @-moz-document parts, and use it here.
All methods of installing user styles depend on the browser supporting the CSS used in the style.

✔ How user styles are different than user scripts ?
- User styles exist mainly to change the way things look. They are written with CSS, the same language that web sites use to control their appearance. Most browsers allow for user styles out of the box (with varying degrees of ease).
- User scripts exist mainly to change the way things act. They are written with JavaScript, the same languages that web sites use to create certain dynamic behaviours. Most browsers do not allow for user scripts out of the box. Greasemonkey is a well-known extension that adds user script support to programs.
- There exists a fair bit of overlap between user scripts and user styles. Some things can be accomplished with either method. User styles can change the user interface in Mozilla-based programs such as Firefox and Thunderbird, while user scripts cannot. User scripts can add behaviour to web sites, while user styles cannot. In general, it is recommended that if something can be done with user styles instead of user scripts, it should be done with user styles instead of user scripts. This is because user scripts can cause a site to flicker, as they have to wait for sites to load completely before firing, while user styles are not under this restriction. User styles are also generally easier to write.

✔ What are user style security concerns ?
- User styles can cause security problems because they can contain XBL bindings, which can contain executable code. Styles posted on "stylish-plus.top" are not allowed to define XBL bindings.
- User styles can cause hangs at application startup if they contain @imports to servers that are slow to respond. Styles posted on "stylish-plus.top" are not allowed to use @import statements.
- User styles can change websites so much that what you do on them may be misleading. For example, they could move another field on top of a login field, which could potentially lead you to submit your login details to another place. Generally, this is unlikely to lead to a security issue, but it is possible.


★★★ Terms and Conditions

Use the extension at your own risk, it comes with no warranty or guarantee, neither explicit or implicit towards functionality or usability. The author shall not be held liable for any damage or loss of data caused by its use. By downloading and installing the extension, you agree to these terms.