Soft Responsive [Deleted]

[ibaker]

Just purchased...thanks to the great site that Stew has created at xFShowcase.com...great show off example of this theme.

I have never purchased a theme before, have previously donated to Kim at Xenique for one of her great themes early on when XF was first released so this will be interesting.

My thanks go to Stewart1champ at xFShowcase.com, Kim at Xenique and Arty for his theme

 

[Anthony Parsons]

Arty, you missed one minor detail in the navigation template for when using a single nav row:

<!-- extra tabs: home -->
<xen:if is="{$extraTabs.home}">
<xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
<xen:if is="{$extraTab.linksTemplate}">
<li class="navTab {$extraTabId} {xen:if $extraTab.selected, '{$selectedNavClassesPopup}', 'Popup PopupControl PopupClosed'}">

<xen:if is="{$extraTab.selected} && !@showOneNavRow">

It screwed up anything using the home nav hook.

 

[Anthony Parsons]

Arty, how do I get a 10px space between the top of the footer and the bottom of the content container? The way the footer is done, it kind of screws with settings. If I add a margin anywhere to the container element/s, even footer, it pushes that footer background into the space above your repeat footer top line.

 

[Arty]

Arty, you missed one minor detail in the navigation template for when using a single nav row:

Thanks!

Arty, how do I get a 10px space between the top of the footer and the bottom of the content container? The way the footer is done, it kind of screws with settings. If I add a margin anywhere to the container element/s, even footer, it pushes that footer background into the space above your repeat footer top line.

Add padding-bottom to #headerMover

 

[Anthony Parsons]

Beautiful... I was adding margin. I tried padding in other areas, with no avail... but not that one. Thanks heaps.

 

[Hoolio]

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

 

[Hoolio]

How can I force a larger default font size please?

And can users make it smaller / bigger if they want?

I want to replicate an "app experience" when browsing on my iPhone.

(I have the font set to "large" on my old vb iPhone app)

Thanks in advance

 

[Arty]

How can I force a larger default font size please?

To increase font size you need to edit properties that have font size. For example, to change font size of forum names, go to admin control panel -> styles -> style properties -> forum/node list -> node title. To change font size of message text go to style properties -> message elements -> message text.

And can users make it smaller / bigger if they want?

All browsers have zoom function these days, allowing users to zoom in/out.

 

[Hoolio]

Thanks - I hope to abandon forum apps because they are a pain to maintain and update and page views cant be monitzed as fully as browser views.

However, they are nice becuase you can set font size, the page is fixed and doesnt skid around like the in mobile browsers. So perfect for reading in line at Starbucks / on the bus etc.

But IMHO the key to replacing them is to match the font size / readability.

Is there a way I can detect screen size then set a larger font for handset phones?

But I dont want to set a large font globally - then have it be huge on home computers / laptops.

so

Handset phones - iPhone, Android, Blackberry, Nokia - large font - very easy to read - no zooming - scroll up with thumb - perfect (like an app)
Tablets - perhaps a smaller / midsize font
Everything else - normal font size

So whatever it is detecting screen size - influencing the font size paramiters also?

Thanks

Or (shoot me now) does my iPhone Safari browser have font settings?

 

[Arty]

Add something like this to extra.css

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
   /* put here css rules for mobile browsers only */
   .node .nodeTitle  {font-size: 13pt; }
   .message .messageText { font-size: 14px; }
}

 

[Hoolio]

Thanks its working!

We are using 18 pixel sized font for handsets

We are now trying to fix the mobile font if handset it put in landscape mode.. because it becomes just too large

 

[Arty]

On first line of that code change 700px to a smaller number, so it would be more than width of page in portrait mode and less than width of page in landscape mode.

 

[Hoolio]

nearly there..! Just checking on iPad!

 

[Shelley]

On first line of that code change 700px to a smaller number, so it would be more than width of page in portrait mode and less than width of page in landscape mode.

Question for you Arty. Would it be out of the ordinary setting the width to 1024px before the responsive kicks in?

 

[Arty]

nearly there..! Just checking on iPad!

yes

Question for you Arty. Would it be out of the ordinary setting the width to 1024px before the responsive kicks in?

It kicks in in stages. At 960px sidebar becomes smaller, at 860px style hides sidebar, at 700px the rest of page is shown in mobile mode. You can increase those numbers, but it doesn't make sense.

 

[Hoolio]

Thanks very much! Here is what we used,

@media only screen and (max-width: 400px), only screen and (max-device-width: 400px)
{
/* put here css rules for mobile browsers only */
.node .nodeTitle {font-size: 13pt; }
.message .messageText { font-size: 15pt!important; }
}

@media all and (orientation:landscape) {
.message .messageText { font-size: 10pt!important; }
}

This sets a nice 'app like' / easy read font size - and in landscape it doesnt get any larger.

Great!

Is that coode OK? or do you have a refinement?

Thanks v much

 

[Arty]

That code looks good

 

[Hoolio]

Great. Many thanks for the assistance.

 

[Xyphien]

I am planning on buying this today after work. I have one question, this comes with the Artodia theme correct? This is the theme that caught my eye over it all. I'm not liking the banner at the left like the default theme when you click the demo. I like it in the middle with the logo.

 

[Arty]

Do you mean one on my support forum? Its the same style as on demo, but with few customized style properties:

1. admin control panel -> styles -> style properties -> general -> page width controller -> set width to 900px or something like that. That will add left and right borders to content.
2. acp -> styles -> style properties -> header and navigation -> width of header logo -> enter correct width. That will center logo.