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

Sweet Princess · October 2014

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

HellShe · October 2014

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;}

hideheader · 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.

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.

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.

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; /*++*/
}

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;
}

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

Color the inside of the search box instead of the outside

/*-.search_form_row-*/#search_query {background-color: #FF7CC4;}

Recolor the new "Compose" button

.l-header > .compose-button {/*++*/
	background-color: #FFB4E0;
	border-color: #FF8EBE;
	opacity: .5;
}
.l-header > .compose-button:hover {/*++*/
	opacity: 1;
}

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;
}

Make the buttons in the right column not-blue on :hover

.controls_section li:hover {/*++*/
	background-color: rgba(255, 142, 190, .5) !important;
}

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

Sweet Princess · October 2014

Omg they worked, thank you so much to the both of you!! ♥ ♥

MissStanwyck · October 2014

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

hideheader · October 2014

Item 2, above

AliensExist · October 2014

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?

hideheader · October 2014

Probably. What theme are you talking about?

AliensExist · October 2014

https://userstyles.org/styles/98771/tumblr-galaxy-nebula-dashboard-custom-background

patty_85 · October 2014

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?

hideheader · 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.

patty_85 · October 2014

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

AliensExist · October 2014

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

patty_85 · 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

History Girl · October 2014

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.

cowboypizazz · October 2014

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

hideheader · 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.

patty_85 · October 2014

Fixed it thank you so much

hideheader · October 2014

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.

xKiYoMiNaTiONx · 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.**

AliensExist · October 2014

The code hid all of the tabs (I was just checking) but not the home button, thanks for trying!

outsiders-void · November 2014

ok so it worked for fixing the overlay problem. but now how to i fix this?

hideheader · November 2014

"5. Fix your own custom tab icons so that every button isn't Home"

outsiders-void · November 2014

that fixed it, thank you :)

Mukario · November 2014

#5 worked for me, but the buttons are moved? how can i fix this?

Mukario · November 2014

^also my followers button is messed up

hideheader · November 2014

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.

Sweet Princess · December 2014

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

hideheader · December 2014

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

Sweet Princess · December 2014

Ah, so there isn't a way to keep the old inbox icon xD Anyway, thank you as always~ :3

hideheader · December 2014

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:

Howdy, Stranger!

Categories

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

Comments

Howdy, Stranger!

Quick Links

Categories

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

Comments