Soft Responsive [Deleted]

Hlchia said:
Use this instead (ie height should be 0px instead of 1px in the original code):
#navigation .navTabs .navTab.selected .navLink:after
{
border-top: 1px solid @primaryMedium;
height: 0px;
right: 0;
}
Click to expand...
I'm trying to get the blue nav-bar as well - the main bar is blue, but the tabs are still white, and the "What's New?" is no longer red. :(

I have tried it with Arty's original code from the last page, as well as the code above, and neither seems quite right. Do I need to include both bits of code in EXTRA.css? Is there a way to re-instate the red highlight for "What's New?"?

Thanks. :)
 
Try this:
Code: 
.navTabs .navTab.selected .tabLinks a
{
    color: @activeColor !important;
    background-color: transparent none !important;
    border-color: transparent !important;
}
That should override all links below tabs.
 
Arty said:
Try this:
Code: 
.navTabs .navTab.selected .tabLinks a
{
    color: @activeColor !important;
    background-color: transparent none !important;
    border-color: transparent !important;
}
That should override all links below tabs.
Click to expand...
So close! The red highlight on hover is back (excellent!), but there is still a 1px horizontal white line under the selected tab ("Forums" in this example):

responsive_blue_navbar.webp

I have tried adding border-top: 0px; inside the curly brackets in the above code, as I thought this might fix it, but of course it did nothing.

Also; shouldn't the selected tab be blue? Or have I misunderstood what this is supposed to do? Regardless, it looks better like this, but I would like to get rid of that little white line, at least.

Thanks. :)

EDIT: Just thought I'd better check; was the above code intended to replace all other code? Or was I supposed to add this as well as your original code? And what about Hlchia's; should I put that in as well?
 
Woah - miracle of miracles - I might have sussed this myself!

I have replaced all of the code relating to this navbar mod with the following:

Code: 
/*  CHANGE RESPONSIVE NAV LINKS TO BLUE & FONT TO WHITE  */
 
#navigation .navTabs .navTab.selected .navLink:after
{
border-top: 0px solid @primaryMedium;
height: 0px;
right: 0;
}
 
.navTabs .navTab.selected .tabLinks a
{
    color: @activeColor !important;
    background-color: transparent none !important;
    border-color: transparent !important;
}
And it now looks fine!

Does the above look OK to you, Arty? Or should I change anything?

Many thanks. :)
 
White line:
Code: 
#navigation .navTabs .navTab.selected .navLink:after { background-color: @primaryMedium; }
Replacing code: it doesn't really matter. That code should override other entries.
 
stewart1champ said:
Someone might know a css trick that could shrink it as it goes. I know images posted inside the forum resize...
Click to expand...
Whilst Arty's more complicated method will work, the easy method in relation to mobile browsers is to simply add: max-width: 100% to the img directly. To also cater IE, add width: 100% as it doesn't recognise max-width in some versions.

It is even better if you add it to the entire style. That way, it will automatically scale the image on mobile devices.

You could also use the filament method: https://github.com/filamentgroup/Responsive-Images
 
Anthony Parsons said:
Whilst Arty's more complicated method will work, the easy method in relation to mobile browsers is to simply add: max-width: 100% to the img directly. To also cater IE, add width: 100% as it doesn't recognise max-width in some versions.

It is even better if you add it to the entire style. That way, it will automatically scale the image on mobile devices.

You could also use the filament method: https://github.com/filamentgroup/Responsive-Images
Click to expand...
Anthony
Please send me a PM when you unveil this style on your site. I'm curious to see how this compare to the Flexile that you are using.
 
Andy.N said:
Please send me a PM when you unveil this style on your site. I'm curious to see how this compare to the Flexile that you are using.
Click to expand...
I am currently considering turning Flexile into a responsive theme... not sure which way I want to go with it yet. The more I play with this theme, the more issues there are. It isn't the responsive aspect, but the way in which the style has been styled away from default XF properties.

Arty has done an excellent job with this one, and it fits this theme, though there is honestly a lot that could be minimised and improved upon, especially within the navigation folding to a mobile menu. Not everything really needs to be displayed when viewing at the mobile level. This style keeps existing content, it doesn't really strip unnecessary pieces when the resolution hits x width, which it should do; e.g. there is no need to display all the user info above posts. The navigation should form its own list menu when it reduces, not just put the existing into a nice container, which upon opening is messy.

Gantry have done this the best IMHO, with establishing a few rulesets for display, then wrapping conditionals around existing template content on what to show for which maximum resolution value. That keeps template additions minimal, though allowing full custom template inserts for say navigation, very easy with mobile styling.

I'm going to start playing around with bringing the default XF style over to a responsive style, then adapt it for Flexile and add some other pieces for my site. I want to change my style, though I'm also pretty fussy about what I will change as my users love clean. This style is a little confusing and not as clean as how Flexile presents the content. Again, everything can be changed though.

I think this style is a really excellent starting place for bringing responsive to Xenforo. Multiple styles aren't the future. Responsive styles are the only real viable solution due to the ever increasing screen resolutions coming into the market. The jury is still out at this point on what I will implement. I really like the way Flexile is presented, though responsive is the end goal in todays web.

Scream here!
 
Anthony. 100% agree. You hit this issue in the head with a nail.
I love my Flexile (there is a reason it's the most popular style on XF, aside from the stock). I like what Arty did with his excellent style but the more I read the questions from users who bought this style, the more hesitant I'm about changing my current Flexile. There are so many simple things that should be done via XF style properties but instead resolved by adding more code to the extra.css. I just don't like going down that road at all.

By any means, if someone use a default style or some temp style, they should go to Arty style. But if someone who get their current style to an optimal state (such as Flexile), it is extremely hard to convince them to redo all to get to responsive style.

Which is why I'm really looking forward to the addon that he promises and see what can be done.

Sooner or later, I would have to get rid of my mobile style and make the main style responsive so that I only have to maintain one single style and not having to worry about automatic switching and what not.

When you mention that you purchased this, I'm very curious to hear your thought process and see how to transform your Flexile to responsive.

Do let me know the progress.
 
I purchase a lot of themes, just to look at them in more depth. I haven't used any of them, other than Flexile.

I will give you a yell when I start working on changing default / Flexile over to responsive. I will be starting it in a couple of weeks, and it will likely take until early next year to perfect it.
 
stewart1champ said:
Best thing ever about this theme.

CSS

display: none;

for anything you don't want viewed in mobile.
Click to expand...
Actually not quite... because that means the item is still being loaded via the code, it just isn't shown. When you do this with images... that is counter productive to the point of mobile styling. Being minimalistic, fast, loading. You don't want things loading that aren't being shown due to display: none. You don't want them loaded, period.
 
I am addressing issue of having to edit CSS for most stuff, it will be in next upgrade today or tomorrow :)

Also I've decided to use CSS3 instead of images for section wrappers. There are too many issues with images causing problems with third party add-ons. As a result style will look a bit different in IE8, but still perfectly usable.
 
Arty said:
If you have installed xenPorta style, you should disable parent style and set xenPorta style as default. Otherwise you will not see changes for portal.

Ideally styles structure should be like this:

Master Style (shown only if debug is enabled)
- Soft Responsive <-- style, not selectable by users
- - Soft Responsive - xenPorta <-- portal style, not selectable by users
- - - My Forum Style <-- child style where you should do your changes. you should set it as default and rename to whatever you want

View attachment 35246
Click to expand...
Hi Arty,

Just a little confused with the structure when using XenPorta because i have the branding free option also.

Can you please advise the structure that we should have to install soft responsive with the branding free option & the XenPorta style support and lastly a child style for making template edits(not sure which xml to import for the final selectable child style)

thanks
 
Those styles don't override each other templates, so you can install them in any order. For example:

Master Style
- Soft Responsive
- - branding free
- - - xenporta (edit: removed. now xenporta module is integrated in style)
- - - - custom changes
 
Arty said:
Those styles don't override each other templates, so you can install them in any order. For example:

Master Style
- Soft Responsive
- - branding free
- - - xenporta
- - - - custom changes
Click to expand...

For the last child under xenporta, should that be also the xenporta.xml?

thanks
 
You must log in or register to reply here.

Similar threads

AndyB
Ad manager responsive [Deleted]
Replies
9
Views
747
AndyB
AndyB
CyberAP
Making your logo responsive [Deleted]
Replies
10
Views
1K
CyberAP
CyberAP
Top Bottom