Giter Club home page Giter Club logo

atahualpa's People

Contributors

extremecarver avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

atahualpa's Issues

Instruction/Discussion Sticky floating Menu1

Actually with the plugin Sticky Menu or Anything on scroll: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
It's possible to stick the menu to the top of the page. I have not tried if you can do this with several items using the pro version.

The selector is:
div#Menu1 (identical to div#menu1 ul.rMenu )

or alternatively (slightly different container - I need to use Legacy Mode for this to work correctly - else it will distort)
ul.rMenu

I have not succeeded manually adding this via CSS inserts.

Search widget not responsive/missing headers

The search widget which is supplied by atahualpa as I see - is neither responsive (too small input field) - nor does it have the right labels so it costs a lot of points in googles pagespeed test.
I'm not really sure how to solve this but it should not be hard. It*s possible to score 100/100 on pagespeed with atahualpa with the instructions I have provided in the other issue, and then likely adding some CSS depending on your plugins/widgets.
However if you want the standard wordpress search field as a widget - you will lose 10-20 points. So this is quite a serious issue as well as atahualpa can be optimized with some css inserts.

The problems with the search wirdge are:

  1. When an image is being used as an button, providing alternative text can help screen reader users understand the purpose of the button.

  2. Labels ensure that form controls are announced properly by assistive technologies, like screen readers

Instruction to pass google mobile friendly test and make the theme responsive

This is the most important help topic in the forum - and should the bytesforall.com forum go down - here is a backup:
http://forum.bytesforall.com/showthread.php?t=23158
Originally posted by Juggledad.

To get your Atahualpa site pass the Google 'Mobile-Friendly Test' do the following. This will make your site mobile friendly. If you don't pass the test after doing this - disable ALL your plugins and test again to see if a plugin is causing the issue.

  1. go to ATO->Style & configure LAYOUT->Layout WIDTH and type (FLUID or FIXED) and set it to a percentage (as opposed to a 'fixed' width) then set the 'Layout MIN width' option to 320 (iPhone 4 size) or remove it altogether.

  2. add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header

<meta name=viewport content="width=device-width, initial-scale=1",  user-scalable=yes>
  1. add the following to ATO->HTML Inserts: Body Tag
<body onresize="OnResizeDocument()" >
  1. Add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Bottom
<script>
jQuery(document).ready(function($) {
    if( $(window).width() < 768 ) {
        // If any left sidebar exists
        if ( $('#left').length || $('#left-inner').length ) {   
            $("#middle").detach().prependTo('#bodyrow'); 
        }
    }
});
</script>

<script type="text/javascript">

  function OnResizeDocument () {
    if( window.innerWidth < 767 ) {
  //    jQuery(function($) {$("#middle").detach().prependTo('#bodyrow'); } );
    }
    if( window.innerWidth > 767 ) {
      jQuery(function($) {$("#left").detach().prependTo('#bodyrow');   } );
    }
  }
</script>
  1. add the following to ATO->Add HTML/CSS Inserts->CSS Inserts
@media only screen and (max-width: 767px) {
    table#layout,
    table#layout > tbody,
    table#layout > tbody > tr,
    table#layout > tbody > tr > td,
    table#layout > tr,
    table#layout > tr > td,
    table#layout td#header,
    table#layout td#left,
    table#layout td#left-inner,
    table#layout td#middle,
    table#layout td#right,
    table#layout td#right-inner,
    table#layout td#footer {
        display: block;
    }
    table#layout > colgroup {
        display: none;
    }
    div#wrapper,
    td#middle {
        width: auto;
    }
}
.hentry img { 
    max-width: 99%;    
    height: auto !important; 
    display: block !important; 
}

Note: in steps 4 and 5 you can adjust the number (767) to suit your choice.

Thanks to Flynn, sawyerjw, yukoner, kayphoonstar and extremecarver for their contributions.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.