为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

Changing CSS Property With Stylus Addon

  • 7 个回答
  • 0 人有此问题
  • 1 次查看
  • 最后回复者为 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?

由silly于修改

被采纳的解决方案

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!

定位到答案原位置 👍 0

所有回复 (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).

由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;"

由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

选择的解决方案

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.


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

由silly于修改