Support Forums for LiveMesh Themes & Plugins › Forums › Appdev Theme Support › QA/Best Practices For AppDev
- This topic has 13 replies, 3 voices, and was last updated 9 years, 8 months ago by
Veena.
-
AuthorPosts
-
August 4, 2015 at 7:52 am #15678
vocotrans
MemberHi,
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?
August 4, 2015 at 11:51 am #15679Veena
Moderator1. 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; }
August 5, 2015 at 3:35 am #15685vocotrans
MemberHi.
August 5, 2015 at 6:47 am #15686Veena
Moderator1. 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; }
August 6, 2015 at 2:33 am #15687vocotrans
MemberHi,
Another question below.
Looking to scale down the height of #slogan image (top and bottom).
Would this be correct css?
#slogan {
height: 50%;
}August 6, 2015 at 6:54 am #15688Veena
ModeratorPls share a link to the specific pagesection.
August 8, 2015 at 8:21 pm #15715vocotrans
MemberHi,
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
August 9, 2015 at 12:29 am #15718vocotrans
MemberAlso;
5) Stacking the footer menu vertical instead of horizontal
6) Any way to increase text size on mobile by a % or fixed ratio?
August 9, 2015 at 11:34 pm #15726vocotrans
MemberHi,
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:
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,
WAugust 10, 2015 at 11:50 am #15739Veena
Moderator2.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.
August 10, 2015 at 12:20 pm #15740Veena
Moderator5. 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.
August 10, 2015 at 12:55 pm #15743Raghavendra
ModeratorDoes 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%; }
August 11, 2015 at 6:10 am #15749vocotrans
MemberHi,
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?)
August 11, 2015 at 11:43 am #15755Veena
Moderator4. 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; } }
-
AuthorPosts
- The forum ‘Appdev Theme Support’ is closed to new topics and replies.