Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Learn More

Changing CSS Property With Stylus Addon

  • 7 Antworten
  • 0 haben dieses Problem
  • 188 Aufrufe
  • Letzte Antwort von silly

more options

After removing elements from a website with another add-on, I'm left with a considerable white gap at the top.

I can manually change (pointless) the margin-top property to -100px, but how do I do this with the Stylus add-on?

Stylus doesn't like negative values:

margin-top -100px

10:20 Expected "{" but found "-100px".

Is there a lighter/simpler alternative to Stylus?

After removing elements from a website with another add-on, I'm left with a considerable white gap at the top. I can manually change (pointless) the '''margin-top''' property to -100px, but how do I do this with the Stylus add-on? Stylus doesn't like negative values: ''margin-top -100px'' ''10:20 Expected "{" but found "-100px".'' Is there a lighter/simpler alternative to Stylus?

Geändert am von silly

Ausgewählte Lösung

Selected "URLs on the domain", which is not the default.

Used .page and it worked: .page { margin-top: -175px }

Then read your message and tried .content, which required a smaller value (-75px): .content { margin-top: -75px }

Also noticed that the add-on inserted the margin-top property for class page in another line, not the original line where page is defined.

It seems that Stylus is more about defining/specifying a property and using !important to supersede any previous definition, rather than finding its original definition (if any) and modifying it directly.

The element .content seems a good choice to try first with other websites.

There are no warnings or errors this time about expecting "{", but found "-175px".

Thanks for the help!

Diese Antwort im Kontext lesen 👍 0

Alle Antworten (7)

more options

Are you using the built-in Inspector to discover what needs modification? Right-click > Inspect will get you in there, and then you can figure out which element needs the space reduction.

Once you find the element with the unwanted margin or padding, you can use Stylus to counteract it. Style rules need to start with a selector that Firefox will use to apply the rule, using this format:

selector { property: value !important; }

For example:

body { padding-top: 0px !important; }

or

article { margin-top: -100px !important; }

The best selector to use for a rule will vary. If you have a tag like this:

<section id="main" class="2-column-left">

The best selector probably is #main (the ID, prefaced with #) because an ID is unique and should not have unexpected effects on other elements.

Sometimes an element doesn't have an ID so you need to work either with the tag itself (section) or the class (.2-column-left -- the class, prefaced with .).

If you share the details of the problem element, we may be able to suggest the best solution.

more options

The first time I used the Inspector the class name was page, but the next time it was a long and complicated name with dots, I searched for the same property "margin-top".

It is possible the owner is making changes because can't access the page at this moment.

Will post screenshot of the inspector when I get access to the page.

Stylus doesn't like the negative number (check attachment).

Geändert am von silly

more options

After changing the top margin using the Box Model of the Inspector, searched for the negative value and found the responsible element. Both properties can change the margin size.

div class="content col-lg-9 col-md-9 col-sm-12 col-xs-12" style="top: -100px;margin-top: -75px;"

Geändert am von silly

more options

The way the class attribute works, each word (separated by a space) is a different class. Possibly the content class only exists once in the page (I have no idea what site we're talking about), so you could try:

.content { top: -100px; margin-top: -75px; }
more options

Ausgewählte Lösung

Selected "URLs on the domain", which is not the default.

Used .page and it worked: .page { margin-top: -175px }

Then read your message and tried .content, which required a smaller value (-75px): .content { margin-top: -75px }

Also noticed that the add-on inserted the margin-top property for class page in another line, not the original line where page is defined.

It seems that Stylus is more about defining/specifying a property and using !important to supersede any previous definition, rather than finding its original definition (if any) and modifying it directly.

The element .content seems a good choice to try first with other websites.

There are no warnings or errors this time about expecting "{", but found "-175px".

Thanks for the help!

more options

Note that in the question you wrote margin-top -100px with a missing colon (margin-top:) what wouldn't work anyway even if the !important flag would be required to override an existing rule.


Geändert am von cor-el

more options

Yes, searched for Stylus examples and saw different syntax/formatting, including one where there were no "{}" or ":", only indentation:

element [Tab]property value

Having something that works helps to understand the basics, even if it is one line.

Geändert am von silly