Jump to content

Responsive Framework


Ajouz ♞
 Share

Recommended Posts

%7Boption%7D


File Name: Responsive Framework

File Submitter: Ajouz ♞

File Submitted: 19 Jan 2013

File Category: Look and Feel

news: License update

this is a package with (Skin/Hook)
1-Default Skin :
a- convert ipslayout to be fluid
b- add a 12 column Grid
c-responsive skin layout

2-Responsive Hook:
A Hook can make your custom skin responsive.
to do this : install the hook and in your custom skin open the template global-templates -->responsive_js and find

$this->settings['enable-responsive-in-this-skin']=0

replace it by

$this->settings['enable-responsive-in-this-skin']=1

%7Boption%7DDemo :http://www.ips-skins.com/skinchange.php?id=116%7Boption%7DSome information regarding the package /**************************/ 12 column ipsLayout Grid : 1-we convert current ipsLayout to be fluid ( percentage not by PX ) 2- includes extended 12 column ipsLayout 3- includes media queries to make default skin responsive as possible without any html edit 4-includes one mini js to make the nav tiny in small browserswhat is the benefit ? 1-you still can use the default ipsLayout html structure ,so no confilct with the ips addon's or third-party apps , moreover fluid layout is better for large screens . 2-you can use the extended ipsLayout grid and create many many different layouts basic HTML Markup

<div class="ipsLayout">
<div class="one block">
<div class="ipsBox">
<div class="ipsBox_container ipsPad">
one block
</div>
</div>
</div>
<div class="three block">
<div class="ipsBox">
<div class="ipsBox_container ipsPad">
three block
</div>
</div>
</div>
<div class="eight block">
<div class="ipsBox">
<div class="ipsBox_container ipsPad">
eight block
</div>
</div>
</div>
</div>

you can also use the classes margin-left-x or margin-right-x to add margin to each col in right or left

<div class="ipsLayout">
<div class="two block">
<div class="ipsBox">
<div class="ipsBox_container ipsPad">
two block
</div>
</div>
</div>
<div class="four block margin-left-two">
<div class="ipsBox">
<div class="ipsBox_container ipsPad">
four block margin-left-two
</div>
</div>
</div>
<div class="three block margin-right-one">
<div class="ipsBox">
<div class="ipsBox_container ipsPad">
three block margin-right-one
</div>
</div>
</div>
</div>

%7Boption%7D you can still use default IPS Layout Html Markup like

<div class="ipsLayout ipsLayout_withleft ipsLayout_withright ipsLayout_largeleft ipsLayout_largeright clearfix" >
    
    <div class="ipsLayout_left">
        <div class="general_box">
left
        </div>
    </div>
    
    <div class="ipsLayout_right">
        
            <div class="general_box">
right
            </div>
</div>
    
    <div class="ipsLayout_content" id="main-content">
        <div class="ipsBox">
            <div class="ipsBox_container ipsPad">
                content
            </div>
                
                
        </div>
    </div>
</div> 


where in this case
tiny = one block
small=two block
large=three block
big= four block
huge=five block


License :
you can use this for Free/Paid projects only in IPS MarketPlace under these condition:
1-please do not remove my copyright in my css
2- please add in your file description a link to this file

We Support You Using:
The support topic .

You Support Us Using:
every magic comes with a price !


Enjoy !

here to download this file

Link to comment
Share on other sites

  • 3 weeks later...
  • 1 month later...
  • 3 weeks later...

Really good! (w00t)

Thanks for doing this -- it looks great! :smile:

One thing I did notice. The menu / navigation bar shrinks correctly when the browser is minimized, but it doesn't expand again once the browser window is expanded. The last menu item is first, followed by a menu that says "Navigation."

Many Thanks.

the skin use the build-in shrank/minimize by the default skin . I tried to keep things simple as possible .My target is to make it with zero edits , just by adding extra css file . the shrank/ minimize function is by loading the page not by re-size the browser .

anther possibility to do this as you like is to use custom nav js like this one

http://tinynav.viljamis.com/ .

Thanks for your feedback and bug report .

Link to comment
Share on other sites

I tried to keep things simple as possible .My target is to make it with zero edits , just by adding extra css file . the shrank/ minimize function is by loading the page not by re-size the browser .

anther possibility to do this as you like is to use custom nav js like this one

http://tinynav.viljamis.com/ .

Thanks for your feedback and bug report .

The idea of doing this without file edits is brilliant. Thanks also for the menu idea -- I'll look into it! :)

Link to comment
Share on other sites

  • 1 month later...
I've sent you PMs 3 weeks ago to let you know that you need to make your skin compatible to 3.4 - because I've been having some issues with it on my board. I've even left you a post on your board regarding the problem, but you haven't gotten back to me yet. I've contacted IPS about the issues I've been having on my board, and they said that you need to make the skin compatible with their 3.4 version. How long more do you plan to have me waiting around for you to do something about the skin?
Link to comment
Share on other sites

  • 3 weeks later...

It's just me or there is a scaling issue in osx + chrome (see screenshot)? Please note that browser scaling is 100% (I've double checked). Everything looks bigger.

[edit] first screenshot is with the responsive theme and the second one with the default skin

post-113568-0-39600700-1370087798_thumb.

post-113568-0-04547600-1370087883_thumb.

Link to comment
Share on other sites

It's just me or there is a scaling issue in osx + chrome (see screenshot)? Please note that browser scaling is 100% (I've double checked). Everything looks bigger.

[edit] first screenshot is with the responsive theme and the second one with the default skin

the skin is powered by percentage layout grid. if the screen is big the skin try to scale to fit it .

if you want only the responsive css without percentage layout.grid then use the responsive hook in the package.

Best regards.

Link to comment
Share on other sites

Is is also possible to have a responsive theme with a maximum width size e.g 1000px?

This way we could use the responsive theme adjustments when users browse the site with a tablet or a mobile device and also have better ad conversions having a max. width size for users who have 21.5 to 30 inch monitors.

Or should the ads then also be responsive?

Link to comment
Share on other sites

responsive also for large screens, not only for small tablets. this is why I added a percentage layout .
you can generally choose responsive breakpoints to be suitable for your site.
for responsive ads: ads can be changed to be responsive, but you should be carefull since some ads company do not accept modifying ads.
recently google accept modifying it
http://adsense.blogspot.de/2013/05/updates-to-our-modifying-ad-code-policy.html

Link to comment
Share on other sites

  • 4 weeks later...

Hi,

How can I do to automatically set this skin only for the mobile skin ?

not sure if I understand the question?

if you mean using it instead of the mobile skin then you can use

Manage User Agent Mapping from skin settings.

also this can be also done with a small hook (two php lines hook), any coder can do this for you .

Link to comment
Share on other sites

not sure if I understand the question?
if you mean using it instead of the mobile skin then you can use
Manage User Agent Mapping from skin settings.
also this can be also done with a small hook (two php lines hook), any coder can do this for you .


Yes, I mean using it instead of the mobile skin :smile:

I've changed the user agents, even on the IPB default mobile skin, but it's still the IPB default mobile skin that is displayed on a mobile... :/

If someone can help me with this hook, that will be nice !...

Edit : It seems to work, thanks !

Edited by sunnmagic
Link to comment
Share on other sites

There is a small problem. When you are on a mobile device, watching a topic, each posts keep a margin left to 185px, and I can't find where I can change this settings... in the css files, nothing :/


I did not noticed this , what is the mobile device you use?
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...