API tools faq
paste
Advertisement
alien_fx_fiend

YouTube Shamrock Theme (Dark Maroon)

alien_fx_fiend
Jan 27th, 2025 (edited)
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 20.14 KB | Source Code | 0 0
raw download clone embed print report
  1. // ==UserScript==
  2. // @name         YouTube Shamrock Theme
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Maroon Theme
  6. // @match        https://www.youtube.com/*
  7. // @grant        none
  8. // ==/UserScript==
  9.  
  10. (function() {
  11.     'use strict';
  12.     // [Paste the above script here]
  13. // First, inject the CSS
  14. const style = document.createElement('style');
  15. style.textContent = `
  16. /* Start CodePen Style Here */
  17. :root {
  18.  
  19.    /* Custom colors */
  20.    --primary-white: #DBDBDB;
  21.    --secondary-white: #9e9e9e;
  22.  
  23.  
  24.    /* my colors */
  25.    --test-red: #FF0000;
  26.    --test-green: #00FF00;
  27.    --test-blue: #0000FF;
  28.  
  29.    --main-background: #25100e;
  30.    --accent-background: rgb(10, 26, 28);
  31.  
  32.    --dark1: #cddfe1;
  33.    --light1: #1e4e54;
  34.  
  35.    --light2: #a3a3a3;
  36.    --mid2: #450b06;
  37.    --dark2: #0a1a1c;
  38.  
  39.    /* YouTube variable overrides */
  40.    --yt-spec-text-primary: var(--primary-white) !important;
  41.    --yt-spec-text-secondary: var(--secondary-white) !important;
  42.    --yt-button-color: var(--dark2) !important;
  43.  
  44.    --ytd-comment-text-color: var(--yt-spec-text-secondary) !important;
  45.    --yt-expand-color: var(--yt-button-color) !important;
  46.    --yt-notification-button-bubble_-_background-color: var(--dark2) !important;
  47.    --yt-placeholder-text-color: rgba(230, 230, 230, 150) !important;
  48.    --yt-searchbox-text-color: var(--yt-spec-text-secondary) !important;
  49.    --yt-spec-brand-icon-active: var(--light1) !important;
  50.    --yt-endpoint-hover-color: var(--dark2) !important;
  51.    --yt-live-chat-message-highlight-background-color: var(--accent-background) !important;
  52. }
  53.  
  54. /* Set the background for main UI components */
  55.  
  56. html,
  57. ytd-browse,
  58. ytd-watch,
  59. .ytd-searchbox,
  60. ytd-app,
  61. ytd-watch-flexy,
  62. #columns.ytd-watch-flexy,
  63. ytd-button-renderer.yt-horizontal-list-renderer.arrow,
  64. ytd-multi-page-menu-renderer {
  65.    background-color: var(--main-background) !important;
  66. }
  67.  
  68. /* Buttons */
  69.  
  70. paper-button,
  71. ytd-button-renderer {
  72.    border-color: var(--yt-button-color);
  73.    color: var(--yt-button-color);
  74. }
  75.  
  76. #subscribe-button ytd-button-renderer {
  77.    background: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  78. }
  79.  
  80. .ytd-subscribe-button-renderer,
  81. #submit-button {
  82.    background-color: var(--accent-background) !important;
  83.    border-color: var(--light1) !important;
  84.    border-image: linear-gradient(to right, var(--light1), var(--dark2)) 1 !important;
  85.    border-width: 2px !important;
  86.    color: white !important;
  87.    /* color: var(--light1) !important; */ /* modifications */
  88. }
  89.  
  90. #subscribe-button ytd-button-renderer yt-formatted-string {
  91.    color: white !important;
  92.    /*color: var(--accent-background) !important;*/ /* modifications */
  93. }
  94.  
  95. /* For Like, Share, Clip buttons */ /* modfiications */
  96. ytd-menu-renderer.ytd-video-primary-info-renderer yt-formatted-string,
  97. ytd-menu-renderer.ytd-video-primary-info-renderer button {
  98.     color: white !important;
  99. }
  100.  
  101. /* For the Subscribe button icon */ /* modfiications */
  102. #subscribe-button ytd-button-renderer yt-icon {
  103.     fill: white !important;
  104. }
  105.  
  106. /* For Like, Share, Clip button icons */ /* modfiications */
  107. ytd-menu-renderer.ytd-video-primary-info-renderer yt-icon {
  108.     fill: white !important;
  109. }
  110.  
  111. ytd-button-renderer.ytd-movie-offer-module-renderer,
  112. a.ytd-movie-offer-module-renderer,
  113. ytd-guide-renderer.ytd-app {
  114.    background: var(--accent-background) !important;
  115. }
  116.  
  117. /* Text */
  118.  
  119. a {
  120.    color: var(--light1);
  121. }
  122.  
  123. #video-title {
  124.    color: var(--dark2) !important;
  125.    background: -webkit-linear-gradient(left,var(--dark1),var(--mid2));
  126.    -webkit-background-clip: text;
  127.    -webkit-text-fill-color: transparent;
  128.    font-style: italic;
  129. }
  130.  
  131. .content {
  132.    color: var(--yt-spec-text-primary) !important;
  133. }
  134.  
  135. yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string:hover {
  136.    color: var(--accent-background) !important;
  137.    transition: .2s;
  138. }
  139.  
  140. /* Playlists */
  141.  
  142. ytd-playlist-panel-renderer #container .header,
  143. ytd-playlist-panel-renderer #container #items,
  144. ytd-playlist-sidebar-renderer {
  145.    background: var(--accent-background) !important;
  146. }
  147.  
  148. ytd-two-column-browse-results-renderer {
  149.    background: var(--primary-background) !important;
  150. }
  151.  
  152. ytd-two-column-browse-results-renderer #secondary {
  153.    background: var(--accent-background) !important;
  154. }
  155.  
  156. /* Miniplayer */
  157.  
  158. #card {
  159.    background: var(--accent-background) !important;
  160. }
  161.  
  162. /* Search bar */
  163.  
  164. #container.ytd-searchbox,
  165. #search-icon-legacy {
  166.    box-shadow: var(--primary-background) 0px 1px 2px 0px inset !important;
  167.    border-color: var(--dark1) !important;
  168.    color: var(--test-red) !important;
  169. }
  170.  
  171. ytd-searchbox[has-focus] #container.ytd-searchbox {
  172.    border-color: var(--primary-white) !important;
  173.    -webkit-border-image: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  174.    border-image: linear-gradient(to bottom right, var(--dark1), var(--light1), var(--light2), var(--mid2), var(--dark1)) 1 !important;
  175. }
  176.  
  177. ytd-searchbox[has-focus] #search-icon-legacy {
  178.    border-color: var(--dark1) !important;
  179. }
  180.  
  181. /* Searchbox suggestions */
  182.  
  183. .sbdd_b {
  184.    /* Container */
  185.    border-color: var(--light1) !important;
  186.    -webkit-border-image: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  187.    border-image: linear-gradient(to right, var(--light1), var(--dark2)) 1 !important;
  188. }
  189.  
  190. .sbsb_a {
  191.    /* Main pop-up */
  192.    background: var(--accent-background) !important;
  193. }
  194.  
  195. .sbsb_d {
  196.    /* Hovered selection */
  197.    background: rgba(0, 0, 0, .05) !important;
  198. }
  199.  
  200. .sbsb_c {
  201.    /* Suggested option text */
  202.    color: var(--secondary-white) !important;
  203. }
  204.  
  205. .sbpqs_a {
  206.    /* Previously selected option text */
  207.    color: var(--light1) !important;
  208. }
  209.  
  210. .sbfl_b {
  211.    /* Report search predictions footer */
  212.    background: rgba(0, 0, 0, 0) !important;
  213.    color: var(--secondary-white) !important;
  214. }
  215.  
  216. /* Watch page components */
  217.  
  218. .ytp-scrubber-button.ytp-swatch-background-color:not(.ytp-play-progress) {
  219.    background: var(--dark2) !important;
  220. }
  221.  
  222. .ytp-swatch-background-color:not(.ytp-play-progress),
  223. #header.ytd-movie-offer-module-renderer {
  224.    background: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  225. }
  226.  
  227. ytd-rich-metadata-renderer,
  228. ytd-post-renderer,
  229. ytd-mini-guide-renderer,
  230. ytd-mini-guide-entry-renderer {
  231.    background-color: var(--accent-background) !important;
  232.    color: var(--secondary-white) !important;
  233. }
  234.  
  235. #title.ytd-rich-metadata-renderer,
  236. ytd-mini-guide-entry-renderer[active] a yt-icon,
  237. ytd-mini-guide-entry-renderer[active] a span,
  238. path.ytd-topbar-logo-renderer,
  239. #title {
  240.    color: var(--dark2) !important;
  241.    fill: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  242.    background: -webkit-linear-gradient(top left,var(--light2),var(--mid2));
  243.    -webkit-background-clip: text;
  244.    -webkit-text-fill-color: transparent;
  245. }
  246.  
  247. .date,
  248. yt-icon,
  249. .ytd-mini-channel-renderer,
  250. .ytd-guide-entry-renderer,
  251. .ytp-title-link {
  252.    color: var(--secondary-white) !important;
  253. }
  254.  
  255. #sponsor-button ytd-border-renderer a paper-button {
  256.    border-color: var(--dark2) !important;
  257. }
  258.  
  259. .super-title a,
  260. .badge-style-type-verified yt-icon,
  261. #owner-name a {
  262.    color: var(--dark2) !important;
  263. }
  264.  
  265. /* Live chat */
  266.  
  267. yt-live-chat-header-renderer {
  268.    background: var(--accent-background) !important;
  269. }
  270.  
  271. #chat-messages {
  272.    background: var(--main-background) !important;
  273.    border: 3px solid var(--accent-background) !important;
  274. }
  275.  
  276. .yt-live-chat-text-message-renderer {
  277.    color: var(--primary-white) !important;
  278. }
  279.  
  280. .yt-live-chat-author-chip {
  281.    color: var(--primary-white) !important;
  282. }
  283.  
  284. yt-live-chat-message-input-renderer {
  285.    background: var(--accent-background) !important;
  286.    color: var(--primary-white) !important;
  287. }
  288.  
  289. #container.yt-live-chat-ticker-renderer {
  290.    background: var(--accent-background) !important;
  291. }
  292.  
  293. ytd-toggle-button-renderer.ytd-live-chat-frame {
  294.    background: var(--accent-background) !important;
  295. }
  296.  
  297. /* App drawer */
  298.  
  299. app-drawer #header yt-icon,
  300. app-drawer #header #logo-red-icon-container path,
  301. app-drawer #header .title {
  302.    color: var(--main-background) !important;
  303.    fill: var(--main-background) !important;
  304. }
  305.  
  306. app-drawer g.ytd-topbar-logo-renderer path,
  307. app-drawer #youtube-paths path {
  308.    fill: var(--main-background) !important;
  309. }
  310.  
  311. app-drawer #header,
  312. ytd-active-account-header-renderer,
  313. ytd-simple-menu-header-renderer {
  314.    background: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  315.    color: var(--main-background) !important;
  316. }
  317.  
  318. /* Channel page */
  319.  
  320. #channel-header,
  321. #tabs-inner-container {
  322.    background: var(--accent-background) !important;
  323. }
  324.  
  325. paper-tab.ytd-c4-tabbed-header-renderer:hover {
  326.    color: var(--secondary-white) !important;
  327.    opacity: 0.6 !important;
  328.    transition: opacity .2s;
  329. }
  330.  
  331. paper-tab.iron-selected.ytd-c4-tabbed-header-renderer,
  332. #channel-title,
  333. #label-text {
  334.    color: var(--light1) !important;
  335. }
  336.  
  337. paper-tabs.ytd-c4-tabbed-header-renderer {
  338.    fill: var(--secondary-white) !important;
  339. }
  340.  
  341. /* Account menu */
  342.  
  343. ytd-active-account-header-renderer yt-formatted-string,
  344. ytd-active-account-header-renderer yt-formatted-string a,
  345. #back-button.ytd-simple-menu-header-renderer {
  346.    color: var(--main-background) !important;
  347. }
  348.  
  349. /* Specific UI components */
  350.  
  351. #like-bar {
  352.    background: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  353. }
  354.  
  355. #masthead {
  356.    background: var(--accent-background) !important;
  357.    box-shadow: 0px 3px 2px 0px rgb(13, 16, 25);
  358. }
  359.  
  360. ytd-author-comment-badge-renderer {
  361.    --ytd-author-comment-badge-background-color: var(--dark2) !important;
  362.    --ytd-author-comment-badge-name-color: var(--main-background) !important;
  363.    --ytd-author-comment-badge-icon-color: var(--main-background) !important;
  364.  
  365.    color: var(--ytd-author-comment-badge-name-color) !important;
  366.    fill: var(--ytd-author-comment-badge-icon-color) !important;
  367. }
  368.  
  369.     `; // Close the template literal with backtick here
  370.  
  371.         // Add the style element to the document
  372.     document.head.appendChild(style);
  373. /* End CodePen Style Here */
  374. })();
  375.  
  376. ========================================================== Claude3.5 Sonnet
  377.  
  378. I'm posting a CSS script into a Tampermonkey script, it says "eslint: null - Parsingerror: Unterminated template" (can you fix the error and show me the modification on how to close the backtick block defined under function()?):
  379.  
  380.  
  381. Here's the corrected version with properly closed backticks and function block:
  382.  
  383. ```javascript
  384. // ==UserScript==
  385. // @name         YouTube Shamrock Theme
  386. // @namespace    http://tampermonkey.net/
  387. // @version      1.0
  388. // @description  Maroon Theme
  389. // @match        https://www.youtube.com/*
  390. // @grant        none
  391. // ==/UserScript==
  392.  
  393. (function() {
  394.     'use strict';
  395.     // First, inject the CSS
  396.     const style = document.createElement('style');
  397.     style.textContent = `
  398.     /* Start CodePen Style Here */
  399.     :root {
  400.         /* Your CSS rules here */
  401.     }
  402.    
  403.     /* All your other CSS rules */
  404.    
  405.     ytd-author-comment-badge-renderer {
  406.         --ytd-author-comment-badge-background-color: var(--dark2) !important;
  407.         --ytd-author-comment-badge-name-color: var(--main-background) !important;
  408.         --ytd-author-comment-badge-icon-color: var(--main-background) !important;
  409.    
  410.         color: var(--ytd-author-comment-badge-name-color) !important;
  411.         fill: var(--ytd-author-comment-badge-icon-color) !important;
  412.     }
  413.     `; // Close the template literal with backtick here
  414.    
  415.     // Add the style element to the document
  416.     document.head.appendChild(style);
  417. })(); // Close the function
  418. ```
  419.  
  420. The main issues in your code were:
  421.  
  422. 1. The template literal (backtick string) wasn't properly closed
  423. 2. The style element wasn't being added to the document
  424. 3. The function closure wasn't properly structured
  425.  
  426. The key changes are:
  427. - Added closing backtick (`) after the CSS
  428. - Added `document.head.appendChild(style);` to actually inject the CSS
  429. - Properly structured the function closure
  430.  
  431. Make sure to keep all your CSS rules between the opening and closing backticks, and maintain proper indentation for better readability.
  432.  
  433.  
  434.  
  435. ================================================= Claude
  436.  
  437. And can you make the text color on Subscribed Button + Like, Share, Clip white instead of black and show me the modifications?
  438.  
  439. Here's how to modify the CSS to make those buttons' text white. Add or modify these CSS rules within your existing code:
  440.  
  441. ```css
  442. /* For the Subscribe button when subscribed */
  443. #subscribe-button ytd-button-renderer yt-formatted-string {
  444.    color: white !important;  /* Changed from var(--accent-background) to white */
  445. }
  446.  
  447. /* For Like, Share, Clip buttons */
  448. ytd-menu-renderer.ytd-video-primary-info-renderer yt-formatted-string,
  449. ytd-menu-renderer.ytd-video-primary-info-renderer button {
  450.    color: white !important;
  451. }
  452.  
  453. /* Additional specificity for the Subscribe button text */
  454. .ytd-subscribe-button-renderer {
  455.    color: white !important;  /* Changed from var(--light1) to white */
  456. }
  457.  
  458. /* For the Subscribe button icon */
  459. #subscribe-button ytd-button-renderer yt-icon {
  460.    fill: white !important;
  461. }
  462.  
  463. /* For Like, Share, Clip button icons */
  464. ytd-menu-renderer.ytd-video-primary-info-renderer yt-icon {
  465.    fill: white !important;
  466. }
  467. ```
  468.  
  469. Add these rules within your existing style.textContent template literal (between the backticks). They should override the previous color settings and make the text white on those buttons. If any specific button still isn't white, you might need to add more specific selectors, but these should cover the main cases.
  470.  
  471. The complete modified section would look like this:
  472.  
  473. ```javascript
  474. const style = document.createElement('style');
  475. style.textContent = `
  476. /* Your existing CSS rules */
  477.  
  478. /* New/Modified button styles */
  479. #subscribe-button ytd-button-renderer yt-formatted-string {
  480.     color: white !important;
  481. }
  482.  
  483. ytd-menu-renderer.ytd-video-primary-info-renderer yt-formatted-string,
  484. ytd-menu-renderer.ytd-video-primary-info-renderer button {
  485.     color: white !important;
  486. }
  487.  
  488. .ytd-subscribe-button-renderer {
  489.     color: white !important;
  490. }
  491.  
  492. #subscribe-button ytd-button-renderer yt-icon {
  493.     fill: white !important;
  494. }
  495.  
  496. ytd-menu-renderer.ytd-video-primary-info-renderer yt-icon {
  497.     fill: white !important;
  498. }
  499.  
  500. /* Your remaining CSS rules */
  501. `;
  502. ```
  503.  
  504. This should make all the specified buttons' text appear in white instead of black.
  505.  
  506. ==================================================== Gemini2
  507.  
  508. #I'm porting a CSS script into a Tampermonkey script. Can you make the text color on Subscribed Button + Like, Share, Clip white instead of black and show me the modifications?
  509.  
  510. Certainly! It looks like the script you provided already includes the modifications to make the text color of the "Subscribed Button", "Like", "Share", and "Clip" white.
  511.  
  512. Here are the sections of the code that achieve this, along with explanations:
  513.  
  514. **1. For the "Subscribed Button":**
  515.  
  516. ```css
  517. #subscribe-button ytd-button-renderer yt-formatted-string {
  518.    color: white !important;
  519.    /*color: var(--accent-background) !important;*/ /* modifications */
  520. }
  521. ```
  522.  
  523. *   **Selector:** `#subscribe-button ytd-button-renderer yt-formatted-string`
  524.     *   `#subscribe-button`: Targets the element with the ID "subscribe-button", which is the container for the subscribe button.
  525.     *   `ytd-button-renderer`: Targets the custom element used by YouTube to render buttons.
  526.     *   `yt-formatted-string`: Targets the element that contains the text within the button (like "Subscribe" or "Subscribed").
  527. *   **Property:** `color: white !important;`
  528.     *   Sets the text color to white.
  529.     *   `!important` ensures this style overrides any default styles that might be trying to set the color to black.
  530.  
  531. **2. For "Like", "Share", "Clip" buttons:**
  532.  
  533. ```css
  534. /* For Like, Share, Clip buttons */ /* modfiications */
  535. ytd-menu-renderer.ytd-video-primary-info-renderer yt-formatted-string,
  536. ytd-menu-renderer.ytd-video-primary-info-renderer button {
  537.     color: white !important;
  538. }
  539. ```
  540.  
  541. *   **Selector:**
  542.     *   `ytd-menu-renderer.ytd-video-primary-info-renderer yt-formatted-string`: Targets the text labels ("Like", "Share", "Clip") within the menu that's part of the primary video information (below the video title).
  543.    *   `ytd-menu-renderer.ytd-video-primary-info-renderer button`: Targets the button elements themselves within the same menu. This might be useful for ensuring the text color is white in all button states.
  544. *   **Property:** `color: white !important;`
  545.    *   Sets the text color to white for these buttons and labels.
  546.    *   `!important` ensures this style takes precedence.
  547.  
  548. **3. For the icons of "Subscribe", "Like", "Share", "Clip" buttons (to make them white if needed):**
  549.  
  550. ```css
  551. /* For the Subscribe button icon */ /* modfiications */
  552. #subscribe-button ytd-button-renderer yt-icon {
  553.    fill: white !important;
  554. }
  555.  
  556. /* For Like, Share, Clip button icons */ /* modfiications */
  557. ytd-menu-renderer.ytd-video-primary-info-renderer yt-icon {
  558.    fill: white !important;
  559. }
  560. ```
  561.  
  562. *   **Selectors:** These selectors are similar to the text selectors but target `yt-icon` elements within the respective button areas.
  563. *   **Property:** `fill: white !important;`
  564.    *   `fill` is used for SVG icons to set their color. This makes sure the icons within these buttons are also white.
  565.  
  566. **Modifications Already Present:**
  567.  
  568. As you can see from the comments `/* modifications */` in your code, these lines are already included in your script. You don't need to add anything further to make the text on the "Subscribed Button", "Like", "Share", and "Clip" buttons white.
  569.  
  570. **To ensure it's working:**
  571.  
  572. 1.  **Install Tampermonkey:** If you haven't already, install the Tampermonkey browser extension for your browser (Chrome, Firefox, Safari, Edge, etc.).
  573. 2.  **Create a new script:** In Tampermonkey, create a new userscript.
  574. 3.  **Paste the code:** Copy and paste the entire code you provided into the Tampermonkey script editor.
  575. 4.  **Save the script:** Save the script in Tampermonkey.
  576. 5.  **Visit YouTube:** Open YouTube in your browser.
  577.  
  578. You should now see the "Subscribed Button", "Like", "Share", and "Clip" text and icons in white, along with the other theme changes defined in your CSS.
  579.  
  580. If you are still seeing black text on these buttons after applying the script, there might be a more specific CSS rule overriding these. In that case, you might need to increase the specificity of your selectors further, but based on the provided code, it should already be working.
  581.  
  582. ========================================================== Gemini2
  583.  
  584. #I don't want the icons in white, only the text colors in white of the Subscribed/ Subscribe Button, Like, Share, and Clip texts. Show me the modifications only.
  585.  
  586. Okay, I understand. You only want to modify the text color of the "Subscribed/Subscribe" button, "Like", "Share", and "Clip" buttons to white, and leave the icons as they are.
  587.  
  588. Here are the modifications you need to make to your CSS script.  You need to **remove** the following CSS blocks that are currently setting the icon colors to white:
  589.  
  590. **Remove these lines:**
  591.  
  592. ```css
  593. /* For the Subscribe button icon */ /* modfiications */
  594. #subscribe-button ytd-button-renderer yt-icon {
  595.    fill: white !important;
  596. }
  597.  
  598. /* For Like, Share, Clip button icons */ /* modfiications */
  599. ytd-menu-renderer.ytd-video-primary-info-renderer yt-icon {
  600.    fill: white !important;
  601. }
  602. ```
  603.  
  604. **Keep these lines as they are** (these are responsible for the text color changes):
  605.  
  606. ```css
  607. #subscribe-button ytd-button-renderer yt-formatted-string {
  608.   color: white !important;
  609.   /*color: var(--accent-background) !important;*/ /* modifications */
  610. }
  611.  
  612. /* For Like, Share, Clip buttons */ /* modfiications */
  613. ytd-menu-renderer.ytd-video-primary-info-renderer yt-formatted-string,
  614. ytd-menu-renderer.ytd-video-primary-info-renderer button {
  615.    color: white !important;
  616. }
  617. ```
  618.  
  619. **In summary, the only modification is to DELETE the two blocks of CSS code that target `yt-icon` elements within the buttons.**
  620.  
  621. After removing those lines, your CSS script will only change the text color of the specified buttons to white, leaving the icons with their default colors.
  622. =============================================== End Broken Experiment
Tags: #CSS-in-JS-Code!!
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!