Comment on WordPress Theme Development by SEO Dave.
Converting the Stallion theme to mobile responsive code, for those not familiar with what Mobile Responsive means it’s changing the layout on the fly to match the screen size.
Currently Stallion 7.* lacks responsive code, it’s best viewed in a device with 1000px and above screen sizes (Desktop). When viewed in smaller windows like a tablet or mobile phone you have to zoom in and scroll to the right to view everything. When Stallion goes responsive everything will fit in the screen no matter what the devices screen size (within reason).
What will happen is if you have a mobile phone with a screen size of 480px for example the header area of a Stallion driven site will reduce in size to 480px (the header images will be 480px in size: for the older Stallion header image it will crop (you’ll see the 480px in the middle), for the Stallion 2011 header images they’ll scale down (you’ll see the entire image, but it will be smaller)). Below this will be the content at 480px width (large images will scale to fit), followed by the comments area (480px width), the right sidebar (480px width), the left sidebar (480px width), footer widget areas 1 to 5 (480px width), the Footer area (480px width), below this the entire header navigation window (480px width) will be just the menu links (so no drop down feature).
Currently planning to add responsive settings for these device screen sizes:
1000px+
720px
480px
320px
240px
These are the most commonly used screen sizes for various devices, other sizes include 800, 640, 600, 400, 360 so it might increase in number of device sizes supported.
The basic concept is quite easy to code, but Stallion has so many features and layouts I’m hitting problems with the dropdown navigation menu, Featured slideshow and the Photonavigation menu. Currently going to drop the navigation window to below the footer for screen sizes below 1000px, not sure what to do with the featured slideshow and photonavigation features, might have to hide them on smaller screens.
David
More Comments by SEO Dave
Responsive WordPress Theme Development
WordPress SEO and Google PageSpeed Insights
Have spent a LOT of time in development and have solved most onsite issues.
Currently working on performance issues (the sort you get from Google PageSpeed Insights), have added a new Performance options page to Stallion with advice and tools. For …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
WordPress Theme CSS Color Switcher
Working on a new feature to add CSS color overrides.
Just started on the feature, so far added the ability to change the background colors independent of the Stallion color scheme selection. Using a color selector wheel, so easy to choose …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
WordPress Theme Featured Slider Mobile Responsive
Managed to make the Stallion Featured slider mobile responsive, in Stallion 8 won’t matter which Stallion layout or colour scheme used the Stallion featured slider will scale to fit the smaller mobile and tablet windows.
When viewed in a 480px screen …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
Talian 5 SEO Theme vs Stallion SEO Theme CSS Layouts
If you bought Talian three years ago you were automatically upgraded to Stallion when I was looking for feedback on Stallion 6.0: basically when Stallion 6 was in beta release gave all Talian 5 users Stallion for free. Info about …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
Stallion Theme Staggered 3 Column WordPress Layout
When I first read the comment (via email) thought it was for the Stallion Theme which has a Talian colour scheme and the 3 column layout and answered the question for Stallion, Doh!
As you’ll read below it’s not easy for …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
WordPress SEO : Use a H1 Widget to Replace the H1 Header Code
To add to the above if you wanted to keep it simple you could strip out all the H1 code and add a replacement H1 as a widget.
In the Stallion SEO Theme there’s a lot more options and layouts than …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
SEO Value of Alt Text of a Image Link Within a H1 Header
If you put your code between code tags CODE —- /CODE it should render it correctly without having to edit the code (can be a bit temperamental). I edited your code.
If you look at the Talian 5 code I used …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
Stallion WordPress SEO Theme Support
Got your email you are a Stallion theme user for Stallion support go to the Stallion SEO WordPress Theme Support otherwise it gets confusing.
The Stallion theme style.css file isn’t used like it is with Talian
You’d need to add it to
style-delicate.css
to …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
WordPress Theme CSS Code
Works when I use that type of CSS.
What site you using it on?
David …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
WordPress Recipes Theme
I run a couple of recipe sites and they do quite well traffic wise. I’m lazy and not added photos or videos :-)
Depending on how you organize it, it will probably look a bit like one of my wife’s sites …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
How to Change a WordPress Theme Header Image
It’s difficult to change the header in Talian 5, but easy in Stallion 6.
Stallion has header images (over 20 of them + custom slots for your header images), the search form can be disabled, navigation links moved to the top …
Continue Reading Performance WordPress Theme Development
Responsive WordPress Theme Development
How to Change the Talian 5 Banners into a Clickable Banner Link
Change the Talian 5 banners into a clickable banner link
Edit the landscape-images.php file and replace:
<?php if(bannerson()==1){ ?><div id=”put-image-here” style=”background: url(<?php bloginfo(‘template_url’); ?><?php _e(‘/banners/’ . bannerset() . ‘/landscape-‘); ?><?php echo(rand(1,bannersize())); ?>.jpg)”></div>
With
<?php if(bannerson()==1){ ?><div id=”put-image-here”><a href=”http://www.domain.com/”><img src=”<?php bloginfo(‘template_url’); ?><?php _e(‘/banners/’ . …
Continue Reading Performance WordPress Theme Development