Seizing control of TopNav content area (.row.outer-row)?

[Phlawm53]

------
For Flare 11, TopNav Target.

I can't convince Flare's TopNav Target to let me expand the width of the main pages' content area.

As shown in the following screenshot, the width of the blue area is controlled by <div class="row outer-row" data-mc-content-body="True">.

FlareTopNavFormattingChallenge.png

If in Firebug I choose its parent element, section class="main-section", that element occupies the full width of the page as displayed by the browser.
But Flare won't honor my attempt to make the content more fully occupy the width of its container by adding the following to MainStyles.css:

Code: Select all

div.row.outer-row
{
	border: solid 3px violet;
	width: 100% !important;
}

After I gen the Target, the violet border appears around the element. So I believe I've spec'ed the CSS element correctly(?)

But even after I include !important, the width remains the same:

TopNavRowOuterRowViaFirebug.png

Note that I've also tried removing the DIV part and spec'ing only .row.outer-row. No change.

Any ideas? I'm so frustrated at how tough it seems to be to use project CSS to control the appearance of TopNav.

Cheers & thanks for your help,
Riley
SFO

[wclass]

Something similar was discussed a few weeks ago. You can set the widths in the skins.
There are a few traps for new players, though.
The default settings are in "ems" but you can change this to percent.
If you set both the main body and the header to 100% this will show up in the web browser correctly. However, if you resize the browser, the "responsive" settings will kick in. You might need to make sure you have set your sizes for web medium, tablet medium, and mobile as well.

[Phlawm53]

Something similar was discussed a few weeks ago. You can set the widths in the skins.

Thanks for that — I did eventually find it in the Skin Editor.

I remain annoyed that there seems to be no easy way to seize control of certain design elements away from the Skin Editor.

For example, in the Skin Editor the Menu Item area gives me control over the Padding that surrounds a menu item. But those menu items are also links. And if one wants to apply Bold to a link that is hovered over, there's no straightforward way to use the Skin Editor to adjust the Menu Item (hover) item's Padding.

I say "straightforward" because I can probably figure out how to get it done in the CSS file. But the back-and-forth "where is it?" work flow, along with the need to use tools like Firebug to find out what CSS is involved, is getting on my nerves.

Cheers & thanks again,
Riley
SFO