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.

How do I change the design of this part (a class)?

edited January 2018 in Style Requests Firefox
Hey.

If I check the code of an element on a website (examinate element option via firefox), there is this part:

http://i.epvpimg.com/jNaseab.png

I want to change max-height at the end from 50px to 150px but how do I save this option via Stylish?

There is an error if I copy this part when I want to save it.

Or is Stylish only working with CSS-stuff which is included in { }

I can also see this part:

Element {
max-height: 50px;
}

But the change will only be applied to the currently selected element. But it should happen everywhere, which works via the class.

Thanks.

Comments

  • gf-shortened-block { max-height: 150px!important; }

    .ContentBody { max-height: 150px!important; }

    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 150px!important; }

    [style="max-height: 50px;"] { max-height: 150px!important; }
  • Pabli said:

    gf-shortened-block { max-height: 150px!important; }

    .ContentBody { max-height: 150px!important; }

    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 150px!important; }

    [style="max-height: 50px;"] { max-height: 150px!important; }

    Thanks mate, it works.
  • Oh, there is sadly a problem now :/

    Another page is (destroyed) now due to the change. The URL where I want this change is https://www.gutefrage.net

    Is it possible to configure that you won't see that change at https://www.gutefrage.net/frage/

    ?

    Thanks.
  • edited January 2018 Chrome
    @-moz-document url("https://www.gutefrage.net/") {
    gf-shortened-block {
    max-height: 150px!important;
    }
    }
  • edited January 2018 Firefox
    Pabli said:

    @-moz-document url("https://www.gutefrage.net/") {
    gf-shortened-block {
    max-height: 150px!important;
    }
    }
    Thanks again.

    Is it possible for me to create multiple sections, or can I just specify a single website?

    For example: The above code is for https://www.gutefrage.net/

    Another code, for example

    .UserProfileHeader-gradient {
    height: 200px;
    }

    shall work for every site containing gutefrage.net

    I think any changes I make now will only work for the exact URL https://www.gutefrage.net/ now, or?

    The above code is the only one causing problems. Theoretically, therefore, only for this one section all other URLs have to be ignored.

    So summarized: The code with 150px should apply ONLY for https://www.gutefrage.net/

    All other changes that I have made, inserting it for example below should apply to all URLs that start with https://www.gutefrage.net/

    Or must / should I create two files?

    Thanks.
  • You can use multiple @-moz-document blocks within your user style. However, it's going to be simpler later on if you create different user styles for different sites or all sites, and then if you ever need to disable one it won't affect all the others.
  • edited January 2018 Firefox
    But @-moz-document url("https://www.gutefrage.net/") { is only for the mentioned url now, right?

    As I said, I would like to have all other changes for every url

    gutefrage.net/adwerwe

    gutefrage.net/234234

    gutefrage.net/ewrwer

    ...

    This is what I mean so all the other changes shall appear not important what is there behind the slash /

    I guess it must be something different then than @-moz-document or not? Because I thought that this code is only for a specific single url.
  • In this case just stay with a single style.
    Something like this (I'm not sure what exactly you want, but you hopefully get the point):

    @-moz-document url("https://www.gutefrage.net/") {
        gf-shortened-block { max-height: 150px !important; }
    }
    
    @-moz-document url-prefix("https://www.gutefrage.net/") {
        .ContentBody { max-height: 150px !important; }
        .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 150px !important; }
        [style="max-height: 50px;"] { max-height: 150px !important; } 
    }
    

    Also see the article in help wiki.

  • edited January 2018 Firefox
    I will try to explain it again. At first I would like that the code with the 150px stuff works for 5 specific sites. I already tried it but it doesn't work properly. It's kinda strange. Sometimes it works, sometimes not.

    @-moz-document url("https://www.gutefrage.net/"){
    gf-shortened-block { max-height: 100px!important; }

    .ContentBody { max-height: 100px!important; }

    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 100px!important; }

    [style="max-height: 50px;"] { max-height: 100px!important; }}

    @-moz-document url("https://www.gutefrage.net/home/neue/alle"){
    gf-shortened-block { max-height: 100px!important; }

    .ContentBody { max-height: 100px!important; }

    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 100px!important; }

    [style="max-height: 50px;"] { max-height: 100px!important; }}

    @-moz-document url("https://www.gutefrage.net/home/neue/unbeantwortet"){
    gf-shortened-block { max-height: 100px!important; }

    .ContentBody { max-height: 100px!important; }

    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 100px!important; }

    [style="max-height: 50px;"] { max-height: 100px!important; }}

    @-moz-document url("https://www.gutefrage.net/home/meine/unbeantwortet"){
    gf-shortened-block { max-height: 100px!important; }

    .ContentBody { max-height: 100px!important; }

    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 100px!important; }

    [style="max-height: 50px;"] { max-height: 100px!important; }}

    @-moz-document url("https://www.gutefrage.net/home/meine/alle"){
    gf-shortened-block { max-height: 100px!important; }

    .ContentBody { max-height: 100px!important; }

    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 100px!important; }

    [style="max-height: 50px;"] { max-height: 100px!important; }}


    ----------------------------

    Then I have the following stuff:

    .UserProfileHeader-userDescriptionContainer {
    color: orange;
    }

    .NewsTicker {
    display: none;
    }

    .UserProfileHeader-userImage {
    width: 84px;
    height: 84px;
    border-radius: 2px;
    display: block;
    border: 2px solid white;
    box-shadow: 0 0 5px black;
    }

    These 3 codes shall work on every page which inclused https://www.gutefrage.net - not important what is behind the slash.
  • edited January 2018 Firefox
    If the first part is too confusing:

    gf-shortened-block { max-height: 100px!important; }

    .ContentBody { max-height: 100px!important; }

    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 100px!important; }

    [style="max-height: 50px;"] { max-height: 100px!important; }}

    shall work for the following 5 URLs.

    https://www.gutefrage.net/
    https://www.gutefrage.net/home/neue/alle
    https://www.gutefrage.net/home/neue/unbeantwortet
    https://www.gutefrage.net/home/meine/unbeantwortet
    https://www.gutefrage.net/home/meine/alle

    and the other 3 code snippets shall work for every URL that contains gutefrage.net
  • edited January 2018 Firefox

    Did you read the help file I linked? It explains the differences between url, url-prefix, domain and regexp.
    If you use @-moz-document url("https://www.gutefrage.net/home/neue/alle") {} it only works with exactly that url, nothing more.

    @-moz-document url-prefix("https://www.gutefrage.net/") {
        .UserProfileHeader-userDescriptionContainer { color: orange; }
    
        .NewsTicker { display: none; }
    
        .UserProfileHeader-userImage {
            width: 84px;
            height: 84px;
            border-radius: 2px;
            display: block;
            border: 2px solid white;
            box-shadow: 0 0 5px black;
        }
    }
    
    @-moz-document url("https://www.gutefrage.net/"),
        url("https://www.gutefrage.net/home/neue/alle"),
        url("https://www.gutefrage.net/home/neue/unbeantwortet"),
        url("https://www.gutefrage.net/home/meine/unbeantwortet"),
        url("https://www.gutefrage.net/home/meine/alle") {
    
        gf-shortened-block { max-height: 100px !important; }
        .ContentBody { max-height: 100px !important; }
        .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 100px !important; }
        [style="max-height: 50px;"] { max-height: 100px !important; }
    }
    
  • edited January 2018 Chrome
    btw its no need to use that all 4 selectors. I just gave examples how its possible to do in in several ways
  • xLukas123 said:

    But @-moz-document url("https://www.gutefrage.net/") { is only for the mentioned url now, right?

    Yes, exactly.

    Please look at all the different ways you can use @-moz-document rules:

    https://github.com/stylish-userstyles/stylish/wiki/Valid-@-moz-document-rules

    With that in mind, if you want one rule for the entire domain but you need a different rule for one specific page or a part of the site, you can use
    @-moz-document domain(example.com), domain(www.example.com) {
    /* Most site pages */
    }
    @-moz-document url-prefix(https://forum.example.com/) {
    /* One section of site */
    }
    @-moz-document url(https://www.example.com/page.html) {
    /* One page */
    }
    In the case of a conflict between style rules, the later one usually governs.
  • edited January 2018 Firefox
    Thank you very much guys. I have a last question.

    Is it needed to use @namespace url(http://www.w3.org/1999/xhtml); at the beginning? I don't remember why I have added it. I guess I saw it somewhere once.

    Looks correct now after I have installed it via userstyles - 3 parts, normally 2 I guess but 1 more due to the 1999/xhtml stuff

    https://puu.sh/z5uNI/de41e8e81f.png

    I also have checked that document now, it's really useful. Just a bit confusing for me in English.
  • xLukas123 said:


    Is it needed to use @namespace url(http://www.w3.org/1999/xhtml); at the beginning? I don't remember why I have added it. I guess I saw it somewhere once.

    I don't think it's necessary.
  • edited January 2018 Firefox
    Thanks again.

    Aren't there placeholders like at google oder database with * or % so when random values appears?

    Because I have another URL which is always different at the end, three examples:

    1) https://www.gutefrage.net/?category=my&before=1516541570000::76049762
    2) https://www.gutefrage.net/?category=my&before=1516539419000::76317132
    3) https://www.gutefrage.net/?category=my&before=1516531612000::76327297

    So I thought that I can add a placeholder behind "before=" so that it's not important what stands behind the URL.

    Or do I have to work again with that @-moz-document stuff in this case?

    I guess I have to combine

    @-moz-document url-prefix

    and

    @-moz-document url

    I was thinking about something like that:

    @-moz-document url("https://www.gutefrage.net/"),
    url("https://www.gutefrage.net/home/neue/alle"),
    url("https://www.gutefrage.net/home/neue/unbeantwortet"),
    url("https://www.gutefrage.net/home/meine/unbeantwortet"),
    url("https://www.gutefrage.net/home/meine/alle") {

    gf-shortened-block { max-height: 100px !important; }
    .ContentBody { max-height: 100px !important; }
    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 100px !important; }
    [style="max-height: 50px;"] { max-height: 100px !important; }
    }

    @-moz-document url-prefix("https://www.gutefrage.net/?category=my&before=") {

    gf-shortened-block { max-height: 100px !important; }
    .ContentBody { max-height: 100px !important; }
    .ContentBody.ListingElement-body.is-expandable.u-mbm.is-short { max-height: 100px !important; }
    [style="max-height: 50px;"] { max-height: 100px !important; }
    }


    Looks like it's working. Was it the correct solution or would you have done it different?
  • I think using url-prefix() is easiest. There is a feature to use regular expressions (regex) but I've never learned the details.
  • Okay, so I will keep it like that.

    Thanks!
Sign In or Register to comment.