Add-on [PAID] New option for "Widget Framework"

[imthebest]

Hi,

I need an add-on for the Widget Framework 2.5.9

Each widget have at the bottom the following options:



I need a new option: "Display at the top for mobile" (unchecked by default).

So for example when I tick that checkbox for any new or existing widget, that widget should be displayed at the top instead of the bottom of the page when viewed in reponsive mode.



If you can do this please start a conversation with me and tell me how much are you going to charge for doing this.

Thanks.

 

[rdn]

Simple solution is, don't use sidebar.

 

[Russ]

Not to derail your request... but couldn't you just use position: hook:ad_above_content

Then use CSS to show it only in mobile view?

@media (min-width:@maxResponsiveNarrowWidth) { display: none; }

It'd require additional widgets but depending on what you're trying to achieve it should technically work.

 

[imthebest]

Hi Russ,

That looks like a good idea. May I ask where to place that CSS code? I guess I have to add it to my EXTRA.CSS? If so, how can I apply it to my new widget?

<div class=" widget WidgetFramework_WidgetRenderer_Threads non-sidebar-widget" id="widget-14">
               
                    <h3>
                       
                            New widget (only mobile)
                       
                    </h3>

Thanks!

 

[Russ]

So place it in your extra.css:

@media (min-width:@maxResponsiveNarrowWidth) { #widget-14 { display: none; } }

 

[imthebest]

Thanks Russ, it is working! But now I found a problem:



Is this something that is CSS controllable or is this a bug in the Widget Framework?

 

[Russ]

I'd need a link to see what's causing it. Or you could inspect it and just add that class to the media query.

 

[imthebest]

According to the inspector:

    <div class="section sectionMain widget-group-no-name widget-container">
       
            <div class=" widget WidgetFramework_WidgetRenderer_Threads non-sidebar-widget" id="widget-14">
               
                    <h3>
                       
                            New widget (only mobile)
                       
                    </h3>

 

[Russ]

According to the inspector:

View attachment 119677
View attachment 119678

    <div class="section sectionMain widget-group-no-name widget-container">
      
            <div class=" widget WidgetFramework_WidgetRenderer_Threads non-sidebar-widget" id="widget-14">
              
                    <h3>
                      
                            New widget (only mobile)
                      
                    </h3>

So maybe try:

@media (min-width:@maxResponsiveNarrowWidth)
{ 
.sectionMain.widget-group-no-name.widget-container { display: none; }
}

 

[imthebest]

I added the following to the media query and it is now working fine!

div.section.sectionMain.widget-group-no-name.widget-container { display: none; }

Now just one thing pending that unfortunately I believe isn't fixable with CSS. At the end I have this:



I want to show widget-14 after the AdSense block, not before it. Is this possible with CSS?

 

[Russ]

Open that template and move the hook from the top of the template to the bottom of it (after the Adsense code)

 

[imthebest]

Oh my god you are a genius it is now working perfectly THANK YOU VERY MUCH!!!

You are the best! Again thank you, thank you, thank you!!!

 

[Kintaro]

You are the best! Again thank you, thank you, thank you!!!

no no YOU are the best!

 

[Mr Lucky]

Simple solution is, don't use sidebar.

What is the problem with having a sidebar?

 

[rdn]

What is the problem with having a sidebar?

Cause it will be force to display on the bottom.

 

[Mr Lucky]

Cause it will be force to display on the bottom.

True, but some people like the info you can have in the sidebar (bottombar or whatever). I think my members would revolt if I got rid of it totally.

 

[rdn]

Simple solution is, don't use sidebar.

What I mean here, if you create a widget, do not use sidebar location.

 

[tajhay]

What I mean here, if you create a widget, do not use sidebar location, unless you deactivate it for mobile, or dont mind it being shown at the very bottom of mobile/responsive view

 

[Mr Lucky]

What I mean here, if you create a widget, do not use sidebar location.

I understand the thinking behind this of course. If I put a widget in the sidebar, then I don't put anything there so important that it is bad for it to then be lost at the bottom in mobile view.

However I think this is a good suggestion, that it would be nice to be able to put some crucial thing there that then goes to above content on mobiles.

This can be achieved now with css media queries, but i think the suggestion/request is valid for ease of use in that scenario.