Soft Responsive [Deleted]

[Robyn Unc Privette]

I totally take back my "$40 is steep" comment! It's definitely worth it!

 

[Arty]

Per Shelley's suggestion (thanks a lot for that), coffee/brown color variation is available!

Demo: click here
Download: on style download page.
Installation: upload files, install it as child style of Soft Responsive style.

 

[cmeinck]

Having a few minor issues. When the Navigation is open, the lines cut through the alerts.


One other issue is the 'new' icon overlapping quoted posts.

 

[Sheldon]

Having a few minor issues. When the Navigation is open, the lines cut through the alerts.
View attachment 35178

One other issue is the 'new' icon overlapping quoted posts.

View attachment 35179

I had the second for sure, try these:

.bbCodeQuote, .bbCodeBlock {
    margin-right: 50px !important;
    position: relative;
}
 
.message .newIndicator {
    top: 8px !important;
}

*credit Shelley

 

[cmeinck]

I had the second for sure, try these:

.bbCodeQuote, .bbCodeBlock {
    margin-right: 50px !important;
    position: relative;
}
 
.message .newIndicator {
    top: 8px !important;
}

*credit Shelley

Thanks. Works on the quote issue, but now the New is overlaying text.

 

[Sheldon]

Thanks. Works on the quote issue, but now the New is overlaying text.

.message .messageText {
    margin-top: 15px !important;
}

Again, credit Shelley.

 

[Shelley]

Suggestion for you Arty. If you could replace the current XF .jumpMenuTrigger Icon for something custom. I just don't think it suits this awesome style.

 

[Arty]

Thanks for finding those bugs. Fix for first bug:

.navTabs .navLink .itemCount { z-index: 2; }

 

[Arty]

Minor changes for "new" indicator:

.message .newIndicator { font-size: 10px; padding: 0 4px; }

That will make it smaller, preventing it from overlapping text.

 

[Arty]

Suggestion for you Arty. If you could replace the current XF .jumpMenuTrigger Icon for something custom. I just don't think it suits this awesome style.

Good idea, I'll think of something.

 

[cmeinck]

Is there a relatively easy way to push the navigation below the header?

 

[Arty]

In mobile or full layout?

 

[kkm323]

I have some suggestion:

• The login slide doesn't look good in the mobile version
• can you make the thread and forum box clickable instead of just the title in the mobile

thank you for this amazing style?

 

[cmeinck]

In mobile or full layout?

Ideally, both. In mobile, I think it might look cleaner and I also have been unable to create a transparent button.

 

[Arty]

I have some suggestion:

• The login slide doesn't look good in the mobile version
• can you make the thread and forum box clickable instead of just the title in the mobile

thank you for this amazing style?

Login handle: it could be bigger, but then it would cover part of logo. I think I'll add it, but only as option, not as standard.

Clickable rows: it does sound like a good idea, but in reality it won't work. There is more than one link in each node - forum/topic link, poster's profile link, possible links in forum description, rss feed link, pagination. I have made it clickable in mobile style for phpBB, users complained that they couldn't click other links, so I had to revert it for blocks that have more than one link. In XenForo all those blocks have more than one link.

Ideally, both. In mobile, I think it might look cleaner and I also have been unable to create a transparent button.

Increase logo height in header and navigation section of style properties.

 

[cmeinck]

Increase logo height in header and navigation section of style properties.

That doesn't push the rest of the page down. It'll move the navigation down, but it overlays the page content, breadcrumbs.

I tried adjusting the padding top and bottom, but then it overlaps the breadcrumbs.

 

[Arty]

The login slide doesn't look good in the mobile version

Add this to extra.css:

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
    #loginBar #loginBarHandle
    {
        bottom: -30px;
    }
    
    #loginBar #loginBarHandle label
    {
        background: @primaryMedium url('@imagePath/xenforo/gradients/category-23px-light-r.png') 0 0 repeat-x;
        background-size: 100% 100%;
        padding: 0 15px;
        line-height: 29px;
        border: 1px solid @primaryMedium;
        border-top-width: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    
        #loginBar #loginBarHandle label:before,
        #loginBar #loginBarHandle label:after
        {
            display: none;
        }
        
        #loginBar #loginBarHandle label a
        {
            font-size: 13px;
        }
}

It will be in next version of style as option.

That doesn't push the rest of the page down. It'll move the navigation down, but it overlays the page content, breadcrumbs.

I tried adjusting the padding top and bottom, but then it overlaps the breadcrumbs.

It shouldn't. Navigation height is calculated from logo height + navigation tabs + line below tabs, so content should be pushed down. Can you check again?

 

[cmeinck]

It shouldn't. Navigation height is calculated from logo height + navigation tabs + line below tabs, so content should be pushed down. Can you check again?

I've adjusted the Header Logo Height from 70 to 100. In Navigation Tabs Container, I added the following additional CSS.

padding-top: 60px;

This is what I'm seeing.

 

[Arty]

Ah, you've added padding. Whole header is absolutely positioned, its height matches padding for content area. Adding padding to header will make header bigger than content padding. To compensate for that you should add similar padding-bottom (bottom, not top!) to #headerProxy

 

[cmeinck]

Ah, you've added padding. Whole header is absolutely positioned, its height matches padding for content area. Adding padding to header will make header bigger than content padding. To compensate for that you should add similar padding-bottom (bottom, not top!) to #headerProxy

Excellent. Thanks! That did the trick!