QA/Best Practices For AppDev

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #15678
    vocotrans
    Member

    Hi,

    I was looking for assistance in regards to best practices to 3 modifications to the AppDev theme.

    1) Centering Banner Logo

    We are using the ‘single static page’ that removes the page links from the header (leaving just the logo). How would we center the logo?

    2) Centering The Footer Menu

    We are using the ‘single static page’ that adds page links to the footer (leaving just the logo). How would we center the footer?

    3) Page Section Height

    Is there a best practice in order to minimize the height of the page sections on an absolute basis?

    #15679
    Veena
    Moderator

    1. You can use the below custom CSS in themeoptions –

    #site-logo {
        position: relative;
        display: block;
        float: none;
        text-align: center;
        margin: 0 auto;
    }
    #site-logo a, #sticky-site-logo a {
        display: inline-block;
        }
    #header.sticky #site-logo{
        float: none;
        display: block;
    }
    

    2.Can you pls share a link to the site?
    3.You can minimize the pagesection height by adjusting the segment padding.Currently it is 70px, try the below custom CSS –

    .segment {
        padding: 20px 0;
    }
    
    #15685
    vocotrans
    Member
    #15686
    Veena
    Moderator

    1. Instead of this CSS –

    #header.sticky #site-logo{
        float: none;
        display: block;
    }
    

    pls add it like below-

    #header.sticky #site-logo {
        float: none !important;
        display: block !important;
    }
    

    2.Pls use the below custom CSS –

    #menu-footer {
        text-align: center;
    }
    #footer-bottom-text {
        display: block;
        margin: 0 auto;
        text-align: center;
        float: none;
    }
    
    #15687
    vocotrans
    Member

    Hi,

    Another question below.

    Looking to scale down the height of #slogan image (top and bottom).

    Would this be correct css?

    #slogan {
    height: 50%;
    }

    #15688
    Veena
    Moderator

    Pls share a link to the specific pagesection.

    #15715
    vocotrans
    Member

    Hi,

    AluviApp.Com

    1) Decreasing the height of the background image (not padding or margin)

    2) Disabling of hamburger menu on web and mobile (or all menus)

    3) Does the theme come with different iPhone designs for the image gallery? (flat designed iPhone). If not, how do you change the iPhone design?

    4) Move social icons from the top right to the footer

    #15718
    vocotrans
    Member

    Also;

    5) Stacking the footer menu vertical instead of horizontal

    6) Any way to increase text size on mobile by a % or fixed ratio?

    #15726
    vocotrans
    Member

    Hi,

    It seems as the edit function was disabled or I’d edit a previous post. Apologize for the all the questions; hence I summarized them here:

    http://www.AluviApp.com

    1) Does the theme come with different iPhone designs for the image gallery? (flat designed iphone). If not, how do you change the iPhone design?
    2) Disabling of hamburger menu on mobile, tablet, and web
    3) Decreasing the height of the background image on the homepage (not padding or margin)
    4) The logo image (header) is not appearing on mobile devices or tablets
    5) Moving social icons from header to footer
    6) Stacking the footer menu vertical instead of horizontal on mobile
    Instead of: Page #1 | Page #2 | Page #3
    Change to:
    Page #1
    Page #2
    Page #3
    7) Changing the header color of pages
    8) Decrease margins/padding between page sections
    9) Move the columns of text into a more precise format for mobile. This would consist of having the iPhone slider as the first content viewed verse column 1.

    Thank you,
    W

    #15739
    Veena
    Moderator

    2.Pls use the below custom CSS in themeoptions –

    #mobile-menu-toggle {
        display: none !important;
    }
    

    3.You can include the below background size in the segment shortcode –

    background-size: 100% 80%;
    

    And also use the below custom CSS in themeoptions –

    #features .segment {
        top: -50px;
    }
    

    4.Pls set retina site logo image in Themeoptions > Site logo tab and also specify the width and height for the same.

    #15740
    Veena
    Moderator

    5. Pls go to “widgets” and drag social networks widget to Footer area and save it.
    6.

    #menu-footer ul li {
        display: block;
    }
    

    7. You can find options to change the same in page edit window.

    8.

    #home-alternate.segment {
        padding: 40px 0;
    }
    

    Negative values will not work for padding.

    #15743
    Raghavendra
    Moderator

    Does the theme come with different iPhone designs for the image gallery? (flat designed iphone). If not, how do you change the iPhone design?

    You can change it by replacing the image in the folder images/sliders/iphone-slider-stage.png with your own. Plenty of images available online. Once you replace with your own, you can change or adjust the images to fit the iPhone image. The newer iPhones may require you to provide a larger screenshot. You can also have a look at our later themes Fusion and Agile and see how we do it and find some new iPhones too. You may need to adjust this particular CSS –

    .iphone-slider-container .flex-slider-container {
        top: 19%;
        left: 14%;
        width: 71.8%;
        height: 65%;
    }
    
    #15749
    vocotrans
    Member

    Hi,

    Thank you for the info.

    #4) I changed the pixel heigh/width, yet the logo on mobile is still not showing. Is there any way to QA this?

    #6) Is there custom css that is theme specific to the @media inquiry in regards to having the footer horizontal on web, but vertical on mobile? (also removing the ” | ” character on mobile?)

    #15755
    Veena
    Moderator

    4. It is visible, Hope you have managed.

    5.For mobile you need to modify the custom CSS like below –

    @media only screen and (max-width: 767px){
    #menu-footer ul li {
        display: block;
    }
    #menu-footer ul li:before {
    display:none;
    }
    }
    
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘Appdev Theme Support’ is closed to new topics and replies.