Soft Responsive [Deleted]

Arty said:
Replace sfdirectory_index with attached file.

There is a minor bug in that add-on: contents of div.dirBlock are floating, but those floats aren't cleared properly. In attached file I've fixed it by adding <br clear="both" /> before </div>, but its an ugly fix. Correct fix would be adding this to css:
Code: 
{xen:helper clearfix, '.dirBlock'}
Click to expand...
Arty said:
Replace sfdirectory_index with attached file.

There is a minor bug in that add-on: contents of div.dirBlock are floating, but those floats aren't cleared properly. In attached file I've fixed it by adding <br clear="both" /> before </div>, but its an ugly fix. Correct fix would be adding this to css:
Code: 
{xen:helper clearfix, '.dirBlock'}
Click to expand...
Thanks Arty. Can you just clarify which CSS template I should be adding that extra CSS to, please?

Also, can you help with this:

sforum said:
I want to set a maximum page width, as some of my users with very large monitors are saying it looks a bit daft stretched all the way across their screen. I have changed the 'Width' value under 'Page Width Controller' to 1000px - is that the best way to do it? Should I be adding/changing any other settings?

I would also like to add a background image (i.e. outside the main 1000px width container), that remains static as you scroll down the forum. I have a nice, textured tile image (256px square) which I would like to use for this, but I can't get it to show up. I have ticked the 'Surround content in frame' box under General > Settings, gone to General > Body and set the path of 'Background image' and selected 'Repeat' from the drop-down list, but it doesn't seem to have done anything.

What am I doing wrong? How do I get this 256px tile to show as a seamless background texture, preferably which remains static as you scroll down the forum?

Thanks. :)
Click to expand...
I have tried putting the path to the image in loads of different places within the Style Properties, but I can't get it to show up as the background no matter how hard I try!

Also, a lot of my users who use Android phones/devices are complaining that the style is all messed for them. I suspect that this is because of a 468px Google AdSense banner that I have placed at the top, above the top breadcrumb. It only seems to happen sometimes, though - here is an example from one of my users:
responsive_htc_desire_dolphin.webp
Is there a way to prevent this ad from displaying on Android phones? Or, even better, having it so that it recognises the browser width and serves a small ad for small displays, or the full size one for larger displays?

Many thanks. :)
 
sforum said:
Thanks Arty. Can you just clarify which CSS template I should be adding that extra CSS to, please?

Also, can you help with this:


I have tried putting the path to the image in loads of different places within the Style Properties, but I can't get it to show up as the background no matter how hard I try!

Also, a lot of my users who use Android phones/devices are complaining that the style is all messed for them. I suspect that this is because of a 468px Google AdSense banner that I have placed at the top, above the top breadcrumb. It only seems to happen sometimes, though - here is an example from one of my users:
View attachment 35311
Is there a way to prevent this ad from displaying on Android phones? Or, even better, having it so that it recognises the browser width and serves a small ad for small displays, or the full size one for larger displays?

Many thanks. :)
Click to expand...

I think all css edits go into Extra.css
 
CSS: extra.css or sfdirectory.css

Ad: wrap it in div like this:
Code: 
<div class="adSense">
adsense code here
</div>
and add this to css
Code: 
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
{
  .adSense { display: none; }
}
 
Tried, but the navbar does not show the blue background colour :(

tab.webp

Arty said:
You'll need to replace background images. Use images in attachment.

Also you'll need to change color of links. Add this to CSS:
Code: 
#navigation .navTabs .navTab.selected .tabLinks a { color: @activeColor; background: transparent none !important; border-color: transparent !important; box-shadow: none !important; }
Click to expand...
 
stewart1champ said:
I think all css edits go into Extra.css
Click to expand...
Thanks.

I've changed sfdirectory_index to the one you provided Arty, and added the CSS to EXTRA.CSS, and it definitely looks better - but not quite there!

how it looks at the moment:

xenkingdir_responsive_3.webp

then when you click on a category:

xenkingdir_responsive_sub_3.webp
 
Arty said:
CSS: extra.css or sfdirectory.css

Ad: wrap it in div like this:
Code: 
<div class="adSense">
adsense code here
</div>
and add this to css
Code: 
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
{
  .adSense { display: none; }
}
Click to expand...
Brilliant! That seems to have worked a treat; thanks very much.

I realise I have battered you with questions, so I will leave you to go over them before I hit you with any more. ;)

Thanks so much for your excellent support.
 
Hmm, I might have spoken too soon! The above code works great, and makes the Ad disappear for small screen widths (so I will definitely be keeping it), but it doesn't seem to have fixed the problem:

responsive_htc_desire_dolphin_no_ad.webp

Note that this only happens sometimes - if you refresh the browser a few times, sometimes it looks OK, sometimes it looks like the above. Very strange!

I have had users confirm the above on several different HTC and Samsung Android devices.

This is just FYI though, in case it's something you need/want to look at when you have time. As I say, a few refreshes and it seems to work, so it's low priority. I'd rather get the background image & XenKingDir mentioned above sorted!

Many thanks. :)
 
Look at bottom of your page, there is RSS widget that adds that extra width. It doesn't have id or class that could be used to target it, so you'll need to find code from that add-on and add id or class name to wrapper div. Then use css I posted for adsense to block it (change #adSense to id or class name of widget).
 
Arty said:
Look at bottom of your page, there is RSS widget that adds that extra width. It doesn't have id or class that could be used to target it, so you'll need to find code from that add-on and add id or class name to wrapper div. Then use css I posted for adsense to block it (change #adSense to id or class name of widget).
Click to expand...
Ah, of course! Thanks very much. I think I can just about work out how to define my own CSS class to wrap it in, thanks to your excellently simple AdSense example, so I will have a crack at that.

The final thing for the time being (and I only ask again because I suspect it's a very simple thing for you to answer, so won't take up any of your time) is the background image. I have a 256px square image that I would like to use as a tiled background (i.e. it appears as the main page background, behind everything else and outside the main page boundry) that remains static as you scroll down the page. I have tried inserting the path to the image in various "Background" fields throughout the style properties, but can't get it to appear. Can you help?

As I say, that will be the last one for today - I will worry about XenKingDir another time, when the author of that Add-on can help. :)

If it's any consolation, I've been singing your praises to anyone who will listen, so hopefully that will translate to even more interest in your styles/projects. ;)
 
About directory add-on: there are quite a lot of issues with it. Some of those issues could have been avoided if I had coded some parts of style differently. I'll change code in style a bit and will release update in next few days. It should help with some other add-ons too.

Background image: there aren't properties for that. Your question gave an idea: to add those properties, so thanks for that :) I'll add them in next version. Can you wait few days? If not, I can explain how to change it by editing templates.
 
Arty said:
About directory add-on: there are quite a lot of issues with it. Some of those issues could have been avoided if I had coded some parts of style differently. I'll change code in style a bit and will release update in next few days. It should help with some other add-ons too.

Background image: there aren't properties for that. Your question gave an idea: to add those properties, so thanks for that :) I'll add them in next version. Can you wait few days? If not, I can explain how to change it by editing templates.
Click to expand...
Yeah, a few days is fine - thanks. :)

That's strange about there being no properties for the background image. I'm sure I've done it in the past, with the default style! It was ACP > Style Properties > General > Body > Background, I think, but if I put it in there it doesn't seem to do anything.

Or do you mean that, because of the way your style is coded, it renders the above Property inoperable?

Either way, if it could be an option, that would be great. I basically want a nice, dark, tiled texture in the background, to provide some contrast against the pale theme.

Thanks; I look forward to the update. :)
 
Its a different element, not body. Areas on left and right side of content area are part of #headerMover, added via pseudo selectors :before and :after
 
Shelley said:
I made the comment this is possibly the best style submitted on xenforo and I still stand by that.
Click to expand...
Agreed...

A little tedious in places to modify due to not using some normal XF styling properties, though manageable nonetheless. The overall winner is that a single style caters all viewing aspects.

I think the grey against grey is diminishing of the theme... though again, a little playing around and all the content areas can be changed to white, putting it white on grey, making it much more pleasant to view.

I bought this the moment I seen it. Truly amazing. Currently combining this with a few other customisations, and it may make it to be my new theme... finally a replacement for Flexile.
 
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