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

imthebest

Well-known member
Hi,

I need an add-on for the Widget Framework 2.5.9

Each widget have at the bottom the following options:

fdemo.webp

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.

demo.webp

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.
 
Last edited:
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?

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

It'd require additional widgets but depending on what you're trying to achieve it should technically work.
 
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?

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

Thanks!
 
So place it in your extra.css:

Code:
@media (min-width:@maxResponsiveNarrowWidth) { #widget-14 { display: none; } }
 
Thanks Russ, it is working! But now I found a problem:

ddss.webp

Is this something that is CSS controllable or is this a bug in the Widget Framework?
 
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.
 
According to the inspector:

Untitledbsf.webp
ggdgdgd.webp

Code:
    <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>
 
Last edited:
According to the inspector:

View attachment 119677
View attachment 119678

Code:
    <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:

Code:
@media (min-width:@maxResponsiveNarrowWidth)
{ 
.sectionMain.widget-group-no-name.widget-container { display: none; }
}
 
I added the following to the media query and it is now working fine!

Code:
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:

final.webp

I want to show widget-14 after the AdSense block, not before it. Is this possible with CSS?
 
Open that template and move the hook from the top of the template to the bottom of it (after the Adsense code)
 
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!!!

(y)(y)(y)
 
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.
 
Back
Top Bottom