• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

imthebest

Formerly Super120
#1
Hi,

I need an add-on for the Widget Framework 2.5.9

Each widget have at the bottom the following options:

fdemo.png

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.jpg

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:

Russ

Well-known member
#3
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.
 

imthebest

Formerly Super120
#4
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!
 

imthebest

Formerly Super120
#6
Thanks Russ, it is working! But now I found a problem:

ddss.png

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

imthebest

Formerly Super120
#8
According to the inspector:

Untitledbsf.png
ggdgdgd.png

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:

Russ

Well-known member
#9
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; }
}
 

imthebest

Formerly Super120
#10
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.png

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

imthebest

Formerly Super120
#12
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)
 

Mr Lucky

Well-known member
#19
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.