Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

The dashboard theme isn't working due to tumblr update... Help?

edited October 2014 in Stylish [?]
Hi, everyone~ Basically, the problem is that when I refreshed my dashboard, the theme suddenly started to have problems... Do you know how to fix it? I use Pink Overload theme and this is how it looks like right now...
1259 x 677 - 570K
«1

Comments

  • Copy this underneath the existing code.
    It should solve most of your problems:

    .identity-refresh .l-container.l-container--two-column .l-content, .identity-refresh .l-container.l-container--two-column-dashboard .l-content, .identity-refresh .l-container.l-container--two-column .right_column, .identity-refresh .l-container.l-container--two-column-dashboard .right_column, .identity-refresh .l-container.l-container--two-column-dashboard .left_column { background: transparent !important; } .l-header-container--refresh {background: #fff !important;} .l-header-container--refresh .tab_bar .tab .tab_anchor:before {display: none !important;} .search_form_row {background: transparent !important;} .ui_search .search_query {background-color: #FF7CC4;} .controls_section li:hover {-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;background: #ff8ebe !important;margin-top:8px;} .identity-refresh .controls_section li.section_header, .identity-refresh .controls_section li.section_header:hover {color: #ff8ebe !important; border: none !important; background: transparent !important;} .compose-button {background: #ff8ebe !important;border-color: #ff8ebe !important;} .tab_bar .iconic .tab_anchor {background-image: url('http://static.tumblr.com/nyr6guj/ftymvi9l9/navbar_sprite.png');} .tab_inbox .tab_anchor {background-position: -34px 0px !important;} .tab_help .tab_anchor {background-position: -70px 0px !important;} .tab_settings .tab_anchor {background-position: -105px 0px !important;} .tab_log_out .tab_anchor {background-position: -140px 0px !important;} .l-header-container--refresh .tab_notice {border-color: #fff !important;} .identity-refresh .tab_notice .tab_notice_value {color: #fff !important;}
  • edited October 2014 [?]
    OK, several things have changed here. I forgot which issues you've already fixed, so I'll reinstall the theme and fix whatever I find wrong.
    1. Replace Tumblr's background on body
      body {
      background:not(.mceContentBody): url(...) fixed !important;
      ...
      }
      The :not(.mceContentBody) bit keeps the background image out of the editor. Omit it if you like, but !important is important.
    2. Recolor Tumblr's new header, and let it scroll with the page.
      DIV.l-header-container { /*++*/
      background-color: transparent; /* or maybe pink */
      box-shadow: none; /* else there will be a faint line at the bottom */
      position: absolute; /* let the header move with the page */
      }
      If you want it to stick to the top of the display, omit the position: line and choose a better color than transparent.
    3. Fix the logo.
      /*
      #logo.no_period a {
      ...
      }

      #logo a {background:url('[logo-url]');}
      */

      #logo {/*++*/
      width: 187px;
      height: 40px;
      }
      #logo > .logo_anchor { /*++*/
      background-image: url('[logo-url]');
      background-size: auto; /*++*/
      }
    4. Remove Tumblr's tab icons so you can see your custom icons
      .tab.iconic > .tab_anchor::before { /*++*/
      content: none !important;
      }
      To remove only some of Tumblr's tab icons, do this instead
      .tab.iconic:nth-child(1) > .tab_anchor::before,
      .tab.iconic:nth-child(2) > .tab_anchor::before,
      .tab.iconic:nth-child(3) > .tab_anchor::before {/*++*/
      content: none !important;
      }
    5. Fix your own custom tab icons so that every button isn't Home
      /*++*/
      .tab_bar .tab_discover .tab_anchor {background-position: -175px 0}
      .tab_bar .tab_log_out .tab_anchor {background-position: -140px 0}
      .tab_bar .tab_settings .tab_anchor {background-position: -105px 0}
      .tab_bar .tab_help .tab_anchor {background-position: -70px 0}
      .tab_bar .tab_inbox .tab_anchor {background-position: -35px 0}
      .tab_bar .tab_home .tab_anchor {background-position: 0 0}
      .tab_bar .tab.iconic:hover .tab_anchor,.tab_bar .tab.iconic:active .tab_anchor {
      opacity: .7;
      }
      /*++*/
      (I think there used to be a transition so they didn't snap on and off so sharply on :hover - I'll look into it.)

    6. Color the inside of the search box instead of the outside
      /*-.search_form_row-*/#search_query {background-color: #FF7CC4;}
    7. Recolor the new "Compose" button
      .l-header > .compose-button {/*++*/
      background-color: #FFB4E0;
      border-color: #FF8EBE;
      opacity: .5;
      }
      .l-header > .compose-button:hover {/*++*/
      opacity: 1;
      }
    8. Remove the blue from the center panel, and restore the padding at the top
      /*--div.l-content.l-content.l-content {background: #FFB4E0;}--*/
      .l-content {/*++*/
      background-color: #FFB4E0 !important;
      padding: 20px !important;
      }
    9. Make the buttons in the right column not-blue on :hover
      .controls_section li:hover {/*++*/
      background-color: rgba(255, 142, 190, .5) !important;
      }
    10. Oh, and remove the fuzzy blue stuff from those buttons
      .follow_list_item_blog:before,
      .radar_avatar:before,
      #right_column:after {/*++*/
      display: none !important;
      }
    That's a lot, so here's my working copy:
    https://userstyles.org/styles/101559/pink-overload-tumblr-dash-theme
  • Omg they worked, thank you so much to the both of you!! ♥ ♥
  • Hi
    Could someone help me out with how to get rid of the blue bar on this theme? https://userstyles.org/styles/39360/lovely-light-purple

    I got help with this theme before so as of right now the code is like this:
    http://pastebin.com/7cP0NxDa

    Thank you in advance :)

  • My theme is fine for the most part, I managed to get the top bar transparent, is there any way to get rid of the wee line below the icons and have my own home button visible?
    1342 x 198 - 314K
  • Probably. What theme are you talking about?
  • The settings and the log out icons don't show and also any of those codes help the right side bar so the custom ones don't get overlay with the tumblr ones?
  • edited October 2014 [?]
    @AlienSexist: There are no tab icons in that style. Maybe #4 & #5 above will be of help; otherwise, a link to the icons, please.

    The line is a box-shadow; try this:
      div.l-header-container {
    box-shadow: none;
    background-color: transparent;
    }
    @Patty_85: For the icons, try #4 & #5 above.

    There are several ways to make oh so clever button names; I don't know which style you're using, so I don't know how it broke. Probably they do something like this
      .controls_section_item > .followers {
    font-size: 0 !important;
    }
    .controls_section_item > .followers:before {
    content: "Teeming masses"; /* of Followers, of course */
    font-size:14px;
    }
    so it could be that the identifiers have changed. A link to the buttons style, please.
  • I tried the 4 and 5 and while the custom inbox and home show the tumblr settings and log out icons don't show at all.

    As for the right side ones I use this: https://userstyles.org/styles/75881/tumblr-multiple-text-changes-i-like-etc and https://userstyles.org/styles/94479/tumblr-sexual-activity and https://userstyles.org/styles/82845/bitches-like-me-followers-button
  • Cheers, the shaddow is gone! It was just the home button, I changed the image, but I believe it was this one I used as a base: https://userstyles.org/styles/99405/tumblr-home-button-psych
  • edited October 2014 [?]
    The tumblr icons are fixed thanks for that, I will be on the look out for the right side bar buttons fix if you find a way, but thank you for all the help provided
  • This worked GREAT for me! Thank you! Any way to fix the right column icons, though? As you can see, the words are right over top of them and I can't make sense of the code to try to fix it.
    1348 x 576 - 1M
  • Can anyone help me fix this theme? I re-installed it and all that's wrong with it is the new top bar, but I can't seem to get it to work with the fix above for some reason.
    https://userstyles.org/styles/60719/klaine-dashboard-theme
  • edited October 2014 [?]
    OK, tab icons - if you're not replacing all of the tab icons, you can selectively disable Tumblr's tab icons like so
    .tab.iconic:nth-child(1) > .tab_anchor::before,
    .tab.iconic:nth-child(2) > .tab_anchor::before,
    .tab.iconic:nth-child(3) > .tab_anchor::before {/*++*/
    content: none !important;
    } /* hide the leftmost three default icons */
    If you're only replacing the Home button, all you need is that first selector.

    You can keep the default tab icons but change their color like so
    .tab_bar DIV.tab.iconic .tab_anchor:before { color: purple; /* all of them */ }
    .tab_bar DIV.tab.iconic:nth-child(4) .tab_anchor:before { color: green; /* one of them */}
    (So it's not all bad.)

    oh so clever buttons - replacing them with new code is the path of least resistance
    .controls_section_item > .posts > .hide_overflow {width:0}
    .controls_section_item > .posts > .hide_overflow:before {
    content: "dog-eared paper";
    position: absolute;
    }
    .controls_section_item > .followers > .hide_overflow {width:0}
    .controls_section_item > .followers > .hide_overflow:before {
    content: "two people";
    position: absolute;
    }
    .controls_section_item > .activity > .hide_overflow {width:0}
    .controls_section_item > .activity > .hide_overflow:before {
    content: "lightning bolt";
    position: absolute;
    }
    .controls_section_item > .drafts > .hide_overflow {width:0}
    .controls_section_item > .drafts > .hide_overflow:before {
    content: "dotted line";
    position: absolute;
    }
    .controls_section_item > .processing > .hide_overflow {width:0}
    .controls_section_item > .processing > .hide_overflow:before {
    content: "movie reel";
    position: absolute;
    }
    .controls_section_item > .queue > .hide_overflow {width:0}
    .controls_section_item > .queue > .hide_overflow:before {
    content: "clock and paper";
    position: absolute;
    }
    .controls_section_item > .customize > .hide_overflow {width:0}
    .controls_section_item > .customize > .hide_overflow:before {
    content: "alien eyeball";
    position: absolute;
    }
    .controls_section_item > .likes > .hide_overflow {width:0}
    .controls_section_item > .likes > .hide_overflow:before {
    content: "heart";
    position: absolute;
    }
    .controls_section_item > .following > .hide_overflow {width:0}
    .controls_section_item > .following > .hide_overflow:before {
    content: "portrait, plus";
    position: absolute;
    }
    .controls_section_item > .spotlight > .hide_overflow {width:0}
    .controls_section_item > .spotlight > .hide_overflow:before {
    content: "radiant plus-sign";
    position: absolute;
    }
    You see the pattern here, yeah? Each is independent of the others; remove the old buttons code and replace it with the corresponding bits above.
    https://userstyles.org/styles/92046/oh-so-clever-button-example-tumblr-dashboard

    @patty_85: All three of those styles appear to work in Firefox 33.
    @History Girl: The icons are in the right place, but the clever text is badly positioned. I'll look at the code if you link me to the style, but maybe best to replace the old code.
    @cowboypizazz: Add the code in items 2 & 10, above.
  • edited October 2014 [?]
    Fixed it thank you so much
  • Yes, for the right side. The link that I posted is an example; it works in Firefox, but I haven't tried it in Chrome. The button themes you posted do work in Firefox, but I haven't tried them in Chrome. If my example doesn't work in Chrome, then fixing your buttons will require a bit more work. Apologies; please be patient.
  • edited October 2014 [?]
    Can someone help me figure out how to get my top button back? It doesn't show up at all in any of my dash themes I made. Here is how the link looks right now:

    .return_to_top_icon{background: url('http://simplysweet.shukuya.com/tumblr_dash/mikorin/top_butt.png')!important;
    width:63px!important;
    height:47px !important;
    position:absolute!important;
    margin-top: -15px !important;
    margin-left: -50px !important;}

    Yet, it doesn't show up in my theme.

    **nevermind, found out the top button is now on the bottom.**
  • The code hid all of the tabs (I was just checking) but not the home button, thanks for trying!
    88 x 66 - 7K
  • ok so it worked for fixing the overlay problem. but now how to i fix this?
    290 x 51 - 2K
  • that fixed it, thank you :)
  • edited November 2014 [?]
    #5 worked for me, but the buttons are moved? how can i fix this?
  • ^also my followers button is messed up
    228 x 56 - 5K
  • my followers button is messed up
    https://forum.userstyles.org/discussion/44155/please-update
    #5 worked for me, but the buttons are moved? how can i fix this?
    Dunno. You provide too little information.
  • Hi, it's me again~ I have another little problem: since Tumblr modified few things and added the compass, now my tab icons are messy... How can I fix it? This is how they look like
    281 x 45 - 3K
  • edited December 2014 Chrome
    Yes, and a little person next to the compass, too. (Maybe it's her compass?)

    If all you need is colored tab icons, the best thing to do is remove (or comment out, /* ... */) all of the existing tab icon rules (those with .tab or .tab_anchor in the selector) and simply change the color of Tumblr's icons like so:
    .tab.iconic > .tab_anchor > I::before,
    .tab.iconic > .tab_anchor::before {/*++*/
    color: rgb(255,110, 190) !important;
    }
    In particular, the style rule added in step 4 of my instructions above must go.

    That done, this is what my Pink Overload looks like now:
    /*--div.l-header .tab.iconic > a {
    background-image: url('http://static.tumblr.com/nyr6guj/ftymvi9l9/navbar_sprite.png');}
    .tab.iconic > .tab_anchor::before {
    content: none !important;
    }

    .tab_bar .tab_discover .tab_anchor {background-position: -175px 0}
    .tab_bar .tab_log_out .tab_anchor {background-position: -140px 0}
    .tab_bar .tab_settings .tab_anchor {background-position: -105px 0}
    .tab_bar .tab_help .tab_anchor {background-position: -70px 0}
    .tab_bar .tab_inbox .tab_anchor {background-position: -35px 0}
    .tab_bar .tab_home .tab_anchor {background-position: 0 0}
    .tab_bar .tab.iconic:hover .tab_anchor,.tab_bar .tab.iconic:active .tab_anchor {
    opacity: .7;
    }
    --*/
    .tab.iconic > .tab_anchor > I::before,
    .tab.iconic > .tab_anchor::before {/*++*/
    color: rgb(255,110, 190) !important;
    }
    https://userstyles.org/styles/101559/pink-overload-tumblr-dash-theme

    Tumblr's tab icons are now really characters in a special Tumblr font, so everyone can match their tab icons to their theme this way. (Change isn't all bad.)
  • edited December 2014 Chrome
    Ah, so there isn't a way to keep the old inbox icon xD Anyway, thank you as always~ :3
  • You can keep all of your old icons, Princess, but do you mean the XKit icon? For that, find the #xkit-control rule and make it look like this:
    #xkit-control.tab.iconic > a {
    background: url('http://static.tumblr.com/nyr6guj/ESQmvi9q3/download.png') 50% 50% no-repeat !important;}
    (XKit updated last night; I swear it was all still working when I posted.)

    If you mean some other inbox icon, then I'll need a link to the style. The original tab icons for Pink Overload are just Tumblr's stock icons, but pinkified: image
Sign In or Register to comment.