Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

How To: make Atahualpa more responsive/mobile friendly


  #1  
Old Jun 2, 2014, 02:57 PM
bswb97
 
152 posts · Aug 2010
While I've enjoyed tinkering with Montezuma, there's something about Atahualpa's structured menu options that I really just like. So I've been trying to hack ways to make Atahualpa more mobile-friendly with some CSS3 tricks. Here's what I came up with with a setup that uses:

Header: Menu, Logo, Bar 1, Images Bar 2
Body: Left sidebar, content, right sidebar

1) Add WP Responsive Menu as a plugin. There are a few out there but this is the one I liked the best.
2) Add the following to HTML/CSS inserts:

Code:
@media (max-width:632px)  {
#menu1, #left, #horbar1, #horbar2, #imagecontainer { display: none !important;}
#wrapper {width: 100% !important;}
table, thead, tbody, th, td, tr { display: block; }
	}
What this does:
@media calls out this CSS when the browser width is less than 632px.

At that width, the original menu, bars, and rotating image disappear. In addition, so does the left sidebar. In addition, all table cells then become block display. This shoves the right sidebar to the bottom.

It worked pretty well in all the ways I've been able to test so far, so I thought I'd share the knowledge.
  #2  
Old Jun 2, 2014, 03:23 PM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Nice job! if someone wants to use the header image with the blog title overlay, leave out %logo in the 'Configure Header Area' option and remove ', #imagecontainer' from the below line
HTML Code:
#menu1, #left, #horbar1, #horbar2, #imagecontainer { display: none !important;}
so you have
HTML Code:
#menu1, #left, #horbar1, #horbar2 { display: none !important;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jun 2, 2014, 05:01 PM
bswb97
 
152 posts · Aug 2010
I'm not sure how airtight this is (so far it looks good) but Flynn, feel free to incorporate this hack into a new update if you want.
  #4  
Old Aug 18, 2014, 02:48 PM
kdawes01's Avatar
kdawes01
 
95 posts · May 2009
Missoula, MT
Great thread bswb97! I'd like to make a couple additions, one in this post and one in my next (just to keep them separate). I've not yet done extensive testing either, but they've been working well from what I've been able to determine so far.

I have found that I prefer the Responsive Menu by Peter Featherstone.

Don't forget to place...
Code:
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
in the HTML Inserts:Header of the Atahualpa HTML/CSS Inserts page!


Scalable Header Image...

To make your header image scaleable by browser width (viewport) you can try the following.
In the ATA "Header Image" area go to "Header Image: Height" set it to 0 (yes, zero!) and save.

Now go to "HTML/CSS Inserts" area and add the following to "CSS Inserts"

Code:
div#imagecontainer {
background-size:cover !important;
padding-top:23.9%;
}
The percentage to use for the padding value will depend on the aspect ratio of your header image. i.e. If your header image is 980x234 px then 234÷980= .234, so the height of the image is 23.4% of its width.

This works because css figures top and bottom padding percentages relative to the width of the containing block. Background images will display beneath a block's padding, so if the top padding equals the height of the background image, the whole image will be visible. Even though we set the height to zero, the padding still contributes to the height of the container.

Since we have used the CSS3 background-size:cover property, the background image will scale with the width.

Presto! A scalable header image!
__________________
Ken | The Web Mechanic
Many thanks to Flynn for the amazing Atahualpa. Please consider a donation!
  #5  
Old Aug 18, 2014, 02:57 PM
kdawes01's Avatar
kdawes01
 
95 posts · May 2009
Missoula, MT
This took a little more work... ;-))

Scalable Blog Title...

CSS3 brings some new, nifty toys to play with. One of these is the length value "vw". A value of 1vw equals 1% of the viewport (browser) width. So this is a css "length" that will vary with the browser width.

I was playing with this and figured, "Well heck! If I have the Blog Title overlayed on top of the (scaleable) header image (previous post) I just made, this nifty vw value could be used to make the Blog Title scale right along with it! I entered "font-size: 1vw;", it was too small. So I played with the number until I got a Blog Title size that looked just right... I then made the browser smaller and smaller and the Blog Title got smaller and smaller.

Cool Beans!

That is until I realized that the Blog title was getting too small relative to the header image, and it was also losing its positioning vertically... Not my desired outcome.

So... With a bunch of playing around, I've been able to achieve an acceptable scaling and positioning. If you try this, you'll likely need to play with the numbers some depending on the font you choose.

Besides the new "vw" length measurement I mentioned, CSS3 also allows you to do some calculating within the css stylesheet by using the "calc()" function. Unfortunately, browser support for this is still buggy, so while at some point in the future there might be a more elegant solution, this works in Atahualpa now.

You'll need to realize that Atahualpa has two areas where you can add css that will affect the Blog Title.

In the "Header Image" area, the "Overlayed Blog Title/Tagline Style" is used to add css to the container that holds the Blog Title. Here is the css I used...

Code:
position:absolute;
height:100%;
top:0;
left:2vw;
font-size:1vw;
This positions the Blog Title container. The left:vw positions the container a little to the right and because it scales with browser witdth, that distance stays consistent.

The font-size is set here because in the next section (h2 tag) the buggy calc() function doesn't play nicely with vw in all browsers, however using em works. Because this container is the parent of the h2 tag, 1em will equal 1vw. As they say... "Its the same thing, only different!" LOL.

In the "Style & Edit HEADER AREA", "Blog Title" is css for the h2 tag for the Blog Title. Here is what I used to position and scale the Blog Title.

Code:
position:absolute;
bottom:10px;
width:20em;
padding: 0;
font-size:calc(18px + 1.6em);
The positioning and width are to ensure the correct placement of the h2 tag in its container. The width of 20em references the 1vw and so scales with the browser width.

Remember I mentioned that just scaling the Blog Title vs. the browser width made for the title being too small when the viewport (browser) was small? This is how I compensated for that. With the browser set to being small, I determined that 18px was a good size. I then expanded my browser to full desktop monitor size and then tweaked the em setting (which effectively changes as the browser gets smaller) for the largest that I wanted the font to appear.

The Blog Title now scales the way I want it to!
__________________
Ken | The Web Mechanic
Many thanks to Flynn for the amazing Atahualpa. Please consider a donation!
  #6  
Old Aug 19, 2014, 04:08 PM
bswb97
 
152 posts · Aug 2010
Nice! We're still finding plenty of muscle in this old engine!
  #7  
Old Dec 26, 2014, 01:20 AM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Hi Ken,

I tried to follow this suggestion.
Quote:
Originally Posted by kdawes01
Scalable Header Image...

To make your header image scaleable by browser width (viewport) you can try the following.
In the ATA "Header Image" area go to "Header Image: Height" set it to 0 (yes, zero!) and save.

Now go to "HTML/CSS Inserts" area and add the following to "CSS Inserts"

Code:
div#imagecontainer {
background-size:cover !important;
padding-top:23.9%;
}
The percentage to use for the padding value will depend on the aspect ratio of your header image. i.e. If your header image is 980x234 px then 234÷980= .234, so the height of the image is 23.4% of its width.

This works because css figures top and bottom padding percentages relative to the width of the containing block. Background images will display beneath a block's padding, so if the top padding equals the height of the background image, the whole image will be visible. Even though we set the height to zero, the padding still contributes to the height of the container.
My header images are 1210 x 200 px, and so I figured the aspect ratio of 16.53%. I set the height at 0, and then went to look for a good spot to add this code:
Code:
div#imagecontainer {
background-size:cover !important;
padding-top:16.53%;
}
At first, I went to ATO>Various Content Items>add HTML/CSS inserts. That didn't work, and so I went looking for other places, but really, they only affect overlay. Please let me know where I should add this.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #8  
Old Dec 26, 2014, 03:50 AM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
For me, the
HTML Code:
div#imagecontainer {
background-size:cover !important;
padding-top:16.53%;
}
(which goes in the 'CSS Inserts' option) ends up causing the image to overlay the sidebars and content UNLESS I set ATO->Header Image->Header Image: Height to no value - i.e. blank out the option
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Dec 26, 2014, 06:26 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by juggledad
For me, the
HTML Code:
div#imagecontainer {
background-size:cover !important;
padding-top:16.53%;
}
(which goes in the 'CSS Inserts' option) ends up causing the image to overlay the sidebars and content UNLESS I set ATO->Header Image->Header Image: Height to no value - i.e. blank out the option
I tried that both today and yesterday, and what happened is this: The header image showed up for about 1/10 of a second when I refreshed and promptly disappeared.

Do you have any suggestions on how I can make this work or perhaps an alternative approach?

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #10  
Old Dec 26, 2014, 06:30 PM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Do you have rotating header images by any chance?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Dec 27, 2014, 04:32 AM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Yup!

Is that a no-no?

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #12  
Old Dec 27, 2014, 04:58 AM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Well shut it off and see if it works

I assume @kdawes01 set this up using a static image. The rotating headers is a jscript that overrides the css. It changes the css to display the new file in the headerimage element. Since you have changed it's height to 0, there is no where to display it...well acrtually there is a place to display it, it's just that the place has a height of 0px so it is very very hard to see it

it might be possible to change the script to fix this. If you want to give it a go and are successful, post it here for others to try.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Dec 27, 2014, 08:40 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Thanks JD,

I'll give that a try. I was actually thinking of not rotating the header image to make the design of the site a little more elegant. I'll let you know if that works. I'm not sharp enough (yet) on CSS to be able to write such a script.

I'm developing the website on a locally-installed WAMP, and when I upload it to the www, I can post a link here if that's appropriate. (I'm not familiar enough with the way this site runs to know)

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #14  
Old Dec 28, 2014, 04:49 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Hello JD,

It works! I just have one header picture. Thank you so much for the help!

I set the ATO->Header Image->Header Image: Height to blank, at you suggestion to another poster.

I'm going to assume it's okay to post the link to my page, but if it isn't, please take it out. Click here to see the site.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #15  
Old Dec 30, 2014, 01:51 PM
dabeed
 
28 posts · Nov 2012
Thanks so much for this, bswb97! This is working for me, and I'm expanding the code to make a few other changes when the "switch" happens.

I successfully got rid of the layout's drop shadow by adding
Code:
#container {
box-shadow: 0 0 0 0 !important;
-moz-box-shadow 0 0 0 0 !important;
}
But I can't figure out how to change the layout's left and right padding.

In ATO > Style & Configure LAYOUT > Layout Container Padding Left/Right, I have a value of 100px, and I want this to go to zero on a mobile. So I tried
Code:
#container {
padding-left 20px !important;
padding-right 20px !important;
}
But that had no effect. Any ideas? Thanks much!

Edit: Sorry, took another hard look at this with Firebug, and figured it out: It needed to be
Code:
div#container {
padding-left 20px !important;
padding-right 20px !important;
}
This is one mobile-friendly theme now! : )

Last edited by dabeed; Dec 30, 2014 at 03:29 PM. Reason: Answered my own question.
  #16  
Old Jan 9, 2015, 08:07 AM
WebHeer
 
20 posts · Jul 2010
Is it please possible to place the complete code to make Atahualpa responsive?

thanks in advance.
WebHeer
  #17  
Old Jan 10, 2015, 11:22 AM
mrsp31wannabe
 
53 posts · May 2011
I tried this (but changed the ratio to 11.50%) and my header on my phone (or tablet) is still not as wide as the screen.

Quote:
Originally Posted by juggledad
For me, the
HTML Code:
div#imagecontainer {
background-size:cover !important;
padding-top:16.53%;
}
(which goes in the 'CSS Inserts' option) ends up causing the image to overlay the sidebars and content UNLESS I set ATO->Header Image->Header Image: Height to no value - i.e. blank out the option

Bookmarks

Tags
atahualpa, mobile, responsive

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Trying to use CCS to make Atahualpa Smart Phone Friendly Megan1967 Atahualpa 3 Wordpress theme 7 Jul 31, 2014 02:28 PM
plugin that shows a mobile-friendly version Atahualpa site Carme Plugins & Atahualpa 11 May 3, 2014 07:17 PM
What's your take: responsive theme vs. mobile plugin ymf Montezuma Theme 2 Nov 26, 2012 06:53 PM
Possible to make category plugin friendly araneum Page & Category Menu Bars 1 Feb 9, 2009 04:56 PM


All times are GMT -6. The time now is 08:54 AM.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.