Request for prettier widget IDs and sticky header scroll offset

Asked on May 28, 2015 in Feature Requests.

I’m really enjoying Layers, thanks for all the work people. A few requests:

For a single page design, the IDs of the various rows/widgets show up in the address bar looking a bit clunky. Could we have the option to edit the IDs in the Advanced > Widget Anchor ID field?

Also could we get an offset for the scroll to accommodate a sticky menu (much loage the Page Scroll to ID plugin on wordpress.org – where you can either specify a height in pixels or a element class/ID)? Currently if the menu is set to sticky it obscures the top of the relevant section.

headjog Layers User
Reply
  • Possible Answers to Your Question:

  • 2 Answer(s)
    Answered on August 21, 2015.

    It might not be the right way, but you can use the jQuery for this:

    
    jQuery(document).ready(function($) {
    
    $("#layers-widget-column-1").attr('id','services');
    
    $("#layers-widget-column-2").attr('id','portfolio');
    
    $("#layers-widget-column-3").attr('id','team');
    
    $("#layers-widget-column-4").attr('id','contact');
    
    });
    
    

    This can go into the header script area in the Header panel of the customizer.

    Or it can be added to your own js file through a child theme. Do not modify the Layers theme.js, as it is overwritten in every update.

    Doc: Child Themes: Including Scripts

    on August 21, 2015.
    Reply
    Answered on August 21, 2015.

    Hello,

    From a framework perspective, the IDs need to be generated dynamically to be user friendly and to ensure they are unique – this is the same method WordPress uses with the post class – there will always be a number on the end, unfortunately.

    The above Javascript workaround is appropriate when you want to customize those ids on a specific site.

    The header will only overlap the top of the first widget if you have overlay enabled (by design). Check out our smooth scrolling snippet if you need to set an offset.

    A plugin that cloaks links would probably be best, like https://wordpress.org/plugins/simple-link-cloaker/
    Your host may also provide a config in your cpanel that allows you to mask any url on your site so your main url always shows in the address bar.

    We are looking into replacing this with a way to add your own

    <a name=""></a>
    

    Reply