X
Tap here to go to the mobile version of the site.

Support Forum

What CSS code do i insert to increase tile size?

Posted

I'd like to insert some CSS code to increase the size of my tiles. My current setup is attached. I'd like to keep the 5x3 grid, but increase each tile so that it covers up more of the margin, and also so that the scrollbar is no longer necessary.

What code can I insert to do this?

I'd like to insert some CSS code to increase the size of my tiles. My current setup is attached. I'd like to keep the 5x3 grid, but increase each tile so that it covers up more of the margin, and also so that the scrollbar is no longer necessary. What code can I insert to do this?
Attached screenshots

Chosen solution

This will help shrink the side and bottom margins:

  .newtab-side-margin, #newtab-margin-bottom {
    -moz-box-flex:unset !important;
  }

Not sure whether that will completely solve the problem, it depends on your display, zoom level, etc.

Read this answer in context 1

Additional System Details

Installed Plug-ins

  • IE Tab 2 Plug-in for Mozilla/Firefox
  • Shockwave Flash 16.0 r0
  • 5.1.30514.0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:37.0) Gecko/20100101 Firefox/37.0

More Information

jscher2000
  • Top 10 Contributor
8767 solutions 71704 answers

Chosen Solution

This will help shrink the side and bottom margins:

  .newtab-side-margin, #newtab-margin-bottom {
    -moz-box-flex:unset !important;
  }

Not sure whether that will completely solve the problem, it depends on your display, zoom level, etc.

This will help shrink the side and bottom margins: .newtab-side-margin, #newtab-margin-bottom { -moz-box-flex:unset !important; } Not sure whether that will completely solve the problem, it depends on your display, zoom level, etc.

Question owner

Thanks. That is an improvement. My zoom is 100%; my screen is 1366x768 (recommended).

The scrollbar is gone, and the tiles are bigger.

There is absolutely no margin on the bottom, and a good 1.5-2 inches along the top. Is there a code for centering the tiles vertically (so as to take away some of the top margin, and increase the bottom margin a bit)?

Thanks. That is an improvement. My zoom is 100%; my screen is 1366x768 (recommended). The scrollbar is gone, and the tiles are bigger. There is absolutely no margin on the bottom, and a good 1.5-2 inches along the top. Is there a code for centering the tiles vertically (so as to take away some of the top margin, and increase the bottom margin a bit)?

Question owner

By the way--how do you learn about css code? Is there a css site, like htmlgoodies, that walks you through what you want to do?

By the way--how do you learn about css code? Is there a css site, like htmlgoodies, that walks you through what you want to do?
cor-el
  • Top 10 Contributor
  • Moderator
17534 solutions 158559 answers

Helpful Reply

You can also inspect this file via the location/address bar to see some CSS rules.

  • chrome://browser/content/newtab/newTab.css

You can find this URL in the page source.

  • Firefox > Web Developer > Page Source
  • Tools > Web Developer > Page Source (Ctrl+U)
  • right-click on a web page and select View Page Source in the context menu

You can also use the built-in Inspector on the DOM Inspector to inspect elements.

You can also inspect this file via the location/address bar to see some CSS rules. *chrome://browser/content/newtab/newTab.css You can find this URL in the page source. *Firefox > Web Developer > Page Source *Tools > Web Developer > Page Source (Ctrl+U) *right-click on a web page and select View Page Source in the context menu You can also use the built-in Inspector on the DOM Inspector to inspect elements. *https://developer.mozilla.org/Tools/Page_Inspector *DOM Inspector: https://addons.mozilla.org/firefox/addon/dom-inspector-6622/ *https://developer.mozilla.org/DOM_Inspector *https://developer.mozilla.org/Introduction_to_DOM_Inspector
jscher2000
  • Top 10 Contributor
8767 solutions 71704 answers

You can discover the selectors for the margin areas by using right-click > Inspect Element(Q) but knowing what to do about the proprietary -moz-box-flex property that sizes the margin is harder to figure out. MDN is a good resource:

https://developer.mozilla.org/docs/Web/CSS/-moz-box-flex

In this case, I was playing with the rule in Stylish and it suggested "unset" on its drop-down of options. I think 0 would work just as well.

You can discover the selectors for the margin areas by using right-click > Inspect Element(Q) but knowing what to do about the proprietary -moz-box-flex property that sizes the margin is harder to figure out. MDN is a good resource: https://developer.mozilla.org/docs/Web/CSS/-moz-box-flex In this case, I was playing with the rule in Stylish and it suggested "unset" on its drop-down of options. I think 0 would work just as well.

Question owner

that chrome://browser/content/newtab/newTab.css link looks rather helpful. That gives me quite a bit to play around with.

I'll tinker with the code samples there and report back with any questions/problems.

Thanks a lot to you both.

that chrome://browser/content/newtab/newTab.css link looks rather helpful. That gives me quite a bit to play around with. I'll tinker with the code samples there and report back with any questions/problems. Thanks a lot to you both.