Some options not working

About: Gmail: Select "links" restored
edited August 2010 in Style Reviews
Nice style. Some of the options aren't working for me though like "hide Mail/Contacts*/Tasks" and "make the Compose mail button look like a "link" again"

Also, do you know how to turn the options on or off if you're using this style as a greasemonkey script?

Comments

  • Those two (and most other) options are turned off by default. You have to edit the source code in order to turn on the options (uncomment them), which is easy to do in Stylish. When the site creates the user scripts (for Greasemonkey and Chrome), the comments are stripped out; but you can grab the source from the site to find the code for the option you want and just insert it into the script using your editor of choice (Edit in the GM manager window)--you may have special characters to deal with though (as in, escape '\').

    However, Stylish is always better for straight CSS than packaging it in a script simply because of the way user style sheets work (not just because of the ability to edit the code natively). A script has to wait for the page to load; CSS code in user style sheets is applied before scripts even get to do anything (which means better performance). You also don't have to refresh the page to enable/disable user style sheets. If you're going to use styles from this site, you're much better off using Stylish.
  • edited August 2010
    I did try to turn the options on. It didn't work. You're supposed to just edit *[off]/ to [on]*/ right? I did that but it didn't work. Do those two options work for you?


    I like Stylish but I find Greasemonkey is easier to use for a noob like me. I can allow or disallow websites from using the scripts instantly and the userscripts site is much more organized and easier to navigate. But there isn't a script on there that is as functional as your style so I'm forced to use both greasemonkey and stylish.
  • edited August 2010
    Yes, that's what you do to close the comment on the line before the code for the option(s) you want to use--just remove the '[off]' from between the asterisk and the slash. And, yes, those options work for me just fine. How about posting the code here that you're working on and let me see if I notice anything that's not right. If you'd prefer, then you could just tell me which options you want to be on, and I'll create a style for you with those options turned on that you can simply install [as a script in GM if that's what you want] without having to edit it.

    I've been using both Stylish and Greasemonkey [together] for about as many years as each has been around. Each serves its purpose well. As far as CSS goes, though, I'd use either Stylish or userContent/userChrome before using javascript with Greasemonkey. Installing a style as a script just adds an unnecessary layer to the mix. There's really no correlation between the scripts that sites use and Greasemonkey scripts--web sites don't use the GM scripts.
  • I don't understand why those particular options don't work. I am able to change the color of the buttons by doing the same, changing *[off]/ to [on]*/ but not these options. Anyways here's the code. I have to split it in half because it said the message is too long.

    @namespace url(http://www.w3.org/1999/xhtml);
    /*
    Gmail: Select "links" restored
    */
    @-moz-document domain("mail.google.com") {/*s*/
    /* >>>> ==== ---- top ---- ==== <<<< */
    .A1.D.E > .nH > .nH.Cq {
    position: relative !important;
    padding-bottom: 19px !important;
    }
    .A1.D.E > .nH > .nH.Cq .J-M.AW:nth-child(6) {
    position: absolute !important;
    top: 21px !important;
    left: -6px !important; /* line up with 'Search ...' */
    display: inline !important;
    }
    /* >>>> ==== ---- bottom ---- ==== <<<< */
    .AY.D.E > .nH > .nH.Cq {
    position: relative !important;
    padding-top: 19px !important;
    }
    .AY.D.E > .nH > .nH.Cq .J-M.AW:nth-child(6) {
    position: absolute !important;
    top: -9px !important;
    left: -6px !important;
    display: inline !important;
    }
    /* >>>> ==== ---- both ---- ==== <<<< */
    .A1.D.E > .nH > .nH.Cq .J-M.AW:nth-child(6) > .SK:before,
    .AY.D.E > .nH > .nH.Cq .J-M.AW:nth-child(6) > .SK:before {
    content: "Select: " ; font-family: Arial ; color: #000000 ; cursor: text ; font-weight: bold !important;
    }
    .A1.D.E > .nH > .nH.Cq .J-M.AW:nth-child(6) > .SK,
    .AY.D.E > .nH > .nH.Cq .J-M.AW:nth-child(6) > .SK {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background-color: transparent !important;
    /* text color - light or dark, depends on your theme
    (or pick any color you like); default is light (White) */
    color: Blue !important;
    font-family: Verdana !important;
    }
    .A1.D.E > .nH > .nH.Cq .J-M.AW:nth-child(6) > .SK.AX > .J-N,
    .AY.D.E > .nH > .nH.Cq .J-M.AW:nth-child(6) > .SK.AX > .J-N {
    display: inline-block !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    -moz-border-radius: 3px !important;
    border-radius: 3px !important; /* WebKit */
    cursor: pointer !important;
    }

    /* >>>> ==== ---- optional stuff ---- ==== <<<< */
    /* move Search Mail button back over to the right (enabled) [on]*/
    .bN.bM .J-Zh-I-Js-Zq {
    -moz-border-radius: 3px !important;
    -moz-border-radius-bottomleft: 3px !important;
    -moz-border-radius-topleft: 3px !important;
    border-radius: 3px !important; /* WebKit */
    border-radius-bottomleft: 3px !important; /* " */
    border-radius-topleft: 3px !important; /* " */
    border-left-width: 1px !important;
    margin-left: 8px !important;
    padding-left: 8px !important;
    } /**/
    /*----*/
    /* hide, either or both (both if you simply turn this on),
    Mail/Contacts , Tasks [on]*/
    td.Bu .nH .nH .nH.CX.pp, td.Bu .nH .nH .nH.T4.pp
    { display: none !important; } /**/
    /* line up 'Compose mail' button with Archive et al if hiding both *[off]/
    td.Bu > .nH > .nH > .nH.pp { padding-top: 9px !important; } /**/
    /*----*/
  • /*
    color buttons (all buttons, everywhere) [light blue]
    if enabled, you may want to disable a color used below (see "turn off click effect")
    [on]*/
    .J-Zh-I {
    background: -moz-linear-gradient(top, #e3e9ff, #D1EBFF) !important;
    background: -webkit-gradient(linear, center top, center bottom, from(#e3e9ff), to(#D1EBFF)) !important;
    color: black !important;
    } /**/
    /*----*/
    /* checkbox: centered, w/pointer [on]*/
    .A1.D.E .Pl.J-J5-Ji .J-Pm-Jo,
    .AY.D.E .Pl.J-J5-Ji .J-Pm-Jo
    {
    vertical-align: -2px !important;
    cursor: pointer !important;
    }
    /**/
    /* hide drop-marker [on]*/
    .A1.D.E .Pl.J-J5-Ji .J-Zh-I.J-Pm-I .AZ.J-J5-Ji,
    .AY.D.E .Pl.J-J5-Ji .J-Zh-I.J-Pm-I .AZ.J-J5-Ji
    { display: none !important; }
    /**/
    /* drop-down button: smaller, square (w/drop-marker removed) */
    .A1.D.E .Pl.J-J5-Ji .J-Zh-I.J-Pm-I,
    .AY.D.E .Pl.J-J5-Ji .J-Zh-I.J-Pm-I
    {
    /*
    turn off click effect - match other buttons (pick one)
    only needed if you want a color different from other buttons (see "color buttons" above)
    */
    /*Gmail default*[off]/
    background: -moz-linear-gradient(top, #f9f9f9, #e3e3e3) !important;
    background: -webkit-gradient(linear, center top, center bottom, from(#f9f9f9), to(#e3e3e3)) !important;
    /**/
    /*light blue*[off]/ background: -moz-linear-gradient(top, #e3e9ff, #bcf) !important; /**/
    /*----*/
    /* hide the button part entirely (show just the check box) *[off]/
    background: transparent !important;
    border-color: transparent !important;
    /**/
    /* no focus outline, default cursor, square(?) [on]*/
    outline: none !important;
    cursor: default !important;
    /**/
    /* almost square *[off]/
    padding-right: 6px !important;
    /*or completely square [on]*/
    padding-left: 4px !important; margin-left: 2px !important;
    padding-right: 4px !important; margin-right: 10px !important;
    /**/
    }
    /*----*/
    /*
    make the 'Compose mail' button look like it used to (a link)
    you'll probably need to change the color to match your theme (if you're not using Planets)
    [on]*/
    .n3 .z0 .J-Zh-I {
    color: #C4DDE8 !important;
    background: transparent !important;
    border-color: transparent !important;
    font-weight: bold !important;
    font-size: 13px !important;
    } /**/

    /*e*/}
  • OK, first of all, sorry--I thought you were still looking at sticking something into Greasemonkey (so I thought it would just be a few lines--and it's still not many, really, so I would have thought the site could handle such a [still] small bit of code in one post).

    Secondly, I took the code as posted and put it into Stylish, and it works fine for me--I've tried the same code in a half dozen accounts, and it works the same in all of them. Those elements are all fairly near each other parent-/child-wise, so I'm wondering if there's something unique about your account or about your environment that's giving you a problem with one of those divs or a parent div. So, a couple questions: (1) which version of Firefox are you using, and (2) have you used Firebug before?
  • Just for grins, try this: change the selectors for Mail/Contacts/Tasks to this:
    td.Bu .CX.pp, td.Bu .T4.pp from 'td.Bu .nH .nH .nH.CX.pp, td.Bu .nH .nH .nH.T4.pp' (so, basically, just take out the '.nH' class). I just want to see what happens differently (if anything).
  • Also, try this for 'Compose mail': .nM .z0 > .J-Zh-I instead of '.n3 .z0 .J-Zh-I'. Thanks.
  • edited August 2010
    I'm using FF 3.6.7 and I've never used firebug before.

    I installed a backup of my current profile I made (which is relatively new itself) and then installed this style. Strangely the Compose Mail link works now with the original code but the Mail/Contacts/Tasks still does not work with the original or new code you posted here. I do have the Gmail Manager add-on installed I don't know if that has anything to do with it.

    Edit: Actually I don't think it had anything to do with installing the backup profile. I switched back to my current profile and saw there was an update for this style. I installed it and changed the options and got the same results as the backup profile.
  • The update only added a statement to make the cursor change on hover to a pointer for 'Compose mail', so it wouldn't affect whether the other selector code* for 'Compose mail' works or not. (*Actually, I'd expect either to work.)

    The other selector code I'd like you to try for Mail/Contacts/Tasks is: .nH > .nH > .CX.pp, .nH > .nH > .T4.pp
    Gmail Manager shouldn't have anything to do with the style working or not.

    Using Firebug is the best/easiest/quickest way to look at the Gmail page structure and see what it looks like for you ('cause it's not the same for everyone--it can vary between different accounts and different [versions of] browsers). You can just right-click on an element and select 'Inspect...' to see the structure. (If you'd rather not install Firebug in your existing [local] install of Firefox, then you could easily create a test instance by installing Firefox Portable. It only takes a few minutes to get a clean, vanilla install of Firefox that doesn't affect your "production" Firefox at all. It helps pinpoint whether an issue is due to a browser config or something else in the browser environment; plus, you can run several instances of Firefox at the same time--which I do all the time.)
  • Yes this new code '.nH > .nH > .CX.pp, .nH > .nH > .T4.pp' worked.

    If you still want me to use firebug to see why the other codes didn't work I'd be happy to do that. Just tell me what to look for since I've never used it before.

    Also, is there a way for Stylish to remember your personal settings like colors or which options you turned on so we don't have to reconfigure the style each time there's a new update? Or is saving a copy of the style basically the only thing we can do?

    Anyways thanks for the support!
  • Coolness. :D

    So, one of your elements has a different class than what I've seen yet in any of my accounts (which isn't all that unusual... just the way Google does things).

    Nope, no real way to save anything auto-magically in Stylish; it's just your basic, everyday source code. What I'd typically do is make a copy of a style, update the copy, then save it, and use the copy instead of the installed-from-the-site one, which I'd just leave alone and disabled (call it a backup if you will). After that it depends on whether future updates involve minor or major changes; updates are usually minor, but I mostly would keep track of my changes and then re-apply them [manually] to a new copy of the updated style to make that the one I'll use (so I've got that whole Dev, QA, Prod cycle going).

    As far as installing Firebug to track down the diffs, there's no real need. You might want to install it at some point just out of curiosity to see what's "under the covers"--for Gmail and other sites/pages. (Hmmm, you might start writing styles yourself.) You could well need it when Google starts rolling out the next update to Gmail, you know--the one that breaks everything else.

    You're welcome. Glad it's working now. Let me know if you run into any more problems with it.
Sign In or Register to comment.