Flatter (1.2 responsive) 1.01

[wdb]

wdb submitted a new resource:

Flatter Default (1.2 responsive) - A flatter variation on the default style.

A flatter variation on the default style.

I've only been working on this for a couple of days so there might be the odd bug to fix

Installation:
No files to upload, just import the xml file with the XenForo default style as parent.

View attachment 50107

Read more about this resource...

 

[rdn]

Flatter meaning no gradient?

 

[wdb]

Flatter meaning no gradient?

Yeah, there are shadows so it's not flat but it's flatter.

 

[Rho Delta]

Add some color options and it will look very appealing!

 

[Sheratan]

Looks promising. Simple and light.

 

[wdb]

Add some color options and it will look very appealing!

It's not too hard to make your own color variations with the color palette and the style options.

 

[hawonnguyen135]

Very nice!

 

[wdb]

wdb updated Flatter (1.2 responsive) with a new update entry:

1.0.1

A few small updates to the styling, better responsive layout, fixed the new posts indicator floating in the wrong place.

Read the rest of this update entry...

 

[Case]

Is the responsive side of things still working on the latest beta?

When I view on a smaller screen, my forum and thread titles are all trying to squeeze into a thin column so it stretches all down the page.

 

[wdb]

Is the responsive side of things still working on the latest beta?

When I view on a smaller screen, my forum and thread titles are all trying to squeeze into a thin column so it stretches all down the page.

I've only tested it on 1.2 beta 3 so far so it's possible that it doesn't work on the latest version, when I upgrade I'll investigate.

 

[principia]

very nice.
i will try it when i update from 1.15 to RC1

 

[Robert F Schmitz]

It seems that the category bar color is hard-coded as it doesn't change when I adjust the color mix with the sliders.

 

[Nathan]

Nice style. In 1.2 Gold I'm having some responsive design issues. This is on a stock / new install.

Any updates planned?

Thanks!

 

[wdb]

Nice style. In 1.2 Gold I'm having some responsive design issues. This is on a stock / new install.

Any updates planned?

Thanks!

Yes I've just upgraded my test site to 1.2 so I'll do an update soon. What have you spotted that needs fixing ?

 

[wdb]

wdb updated Flatter (1.2 responsive) with a new update entry:

1.01

Fixed some responsive bugs
Made the category bars a palette color

Read the rest of this update entry...

 

[kingston]

this is a fantastic style.

 

[kingston]

@wdb any idea why my site is having a small black line on the nav bar?

http://forum.spiritcompany.com/forums/

 

[wdb]

@wdb any idea why my site is having a small black line on the nav bar?

http://forum.spiritcompany.com/forums/

I'm not sure why that is happening but I might be able to help fix it. Try this: in the template navigation.css find this section.

    .navTabs
    {
        @property "navTabs";
        font-size: 11px;
        background-color: @primaryDark;
        padding: 0 25px;
        border-color: @primaryLightish;
        border-bottom-color: @primaryDarker;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        @property "/navTabs";
        height: {xen:calc '@headerTabHeight + 1'}px;
    }

Change the +1 in the last line to +3


*edit
If that works you'll want to do the same thing in this section

.navTabs .navLink,
.navTabs .SplitCtrl
{
    @property "navLink";
    font-weight: bold;
    display: block;
    float: left;
    vertical-align: text-bottom;
    text-align: center;
    outline: 0 none;
    @property "/navLink";
   
    <xen:if is="{$pageIsRtl}">*float: none; *display: inline; *zoom: 1;</xen:if>
   
    height: {xen:calc '@headerTabHeight + 1'}px;
    line-height: @headerTabHeight;
}

 

[kingston]

I'm not sure why that is happening but I might be able to help fix it. Try this: in the template navigation.css find this section.

    .navTabs
    {
        @property "navTabs";
        font-size: 11px;
        background-color: @primaryDark;
        padding: 0 25px;
        border-color: @primaryLightish;
        border-bottom-color: @primaryDarker;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        @property "/navTabs";
        height: {xen:calc '@headerTabHeight + 1'}px;
    }

Change the +1 in the last line to +3

That got it. Thanks!

Any idea what color is used for the font of the tab that a user is currently on?

 

[wdb]

That got it. Thanks!

Any idea what color is used for the font of the tab that a user is currently on?

I think that is in
Style Properties: Header and Navigation > Selected Tab