Stallion Responsive Theme Recent Comments

SEO Dave

Comment on IPhone Responsive Mobile Menu

IPhone Responsive Mobile Menu

View this website in your iPhone and you’ll see my Desktop menu disappears in any mobile device with a device width of under 800px.

You’ll see a grey bar where the menu used to be with a three lines image to the left, that’s the Stallion Responsive mobile menu (the three lines is standard responsive menu image to indicate there’s a mobile menu).

Click anywhere on the grey bar or the responsive menu image and my mobile menu will dropdown.

Because there’s so little space on a mobile device having a dropdown menu rather than all the links in a line takes up less space: the Desktop menu would fill an iPhones entire screen!

Your website has the same mobile menu when on you iPhone, but when the Stallion colour creator mode is active (while you are making a new colour scheme) the responsive mobile menu image temporarily doesn’t work, when you turn the creator feature off and use whatever colour scheme you’ve made the image returns (there’s info about this on the colour creator options page).

There’s a yellow version of the mobile menu image that’s for the Celebrate colour scheme which might work with your colours. If you change “Theme Image Folder” to “images/celebrate/” it might work better with your green colours: the three lines will be a yellow/mustard colour.

There’s a dozen or so mobile images for different colour schemes which by changing the “Theme Image Folder” option can set any colour scheme to use them.

“images/black-n-blue/”
“images/black-n-green/”
“images/black-n-red/”
“images/celebrate/”
“images/charcoal-n-orange/”
“images/coffee-cup/”
“images/dark/”
“images/dazzling-blue-cayenne/”
“images/fresh-n-green/”
“images/light/”
“images/midnight-slate/”
“images/night-sky/”
“images/radiant-orchard/”
“images/white-n-blue/”
“images/white-n-red/”

The “images/black-n-red/” option loads a mobile image with red horizontal line to the left and three while lines to the right, when clicked the white lines go red.

You can also make your own by editing one on the mobile.png image files (under “/stallion-responsive/colors/images/”) and putting it in one of the custom folders. If you added your modified mobile.png file in /custom-01/ use “images/custom-01/”.

Or you could create your own folder: “/stallion-responsive/colors/images/leaf/” and use “images/leaf/”. You’d put your modified mobile.png file into the /leaf/ folder.

Clicking the grey bar (your is a green bar) still works, but looks like you didn’t realise there are different colours for the mobile menu when you made your colour scheme and messed the colours up under the “Navigation Menu Mobile” section: about half a dozen colours to check/fix.

So you don’t have to use your iPhone for mobile testing, use a browser (FireFox, Google Chrome…) window and and reduce the width of the window to below 800px wide and you’ll see the responsive menu activates. You’ll be able to fix your colours without having to use your iPhone for testing (a lot faster testing on a PC).

The mobile responsive menu colours are near the bottom of the colour creator options pages, they are all under one section.

To see the end result with the mobile menu image you have to turn the colour creator off and use whatever colour scheme you saved. Good news is when I created Stallion Responsive I made sure it only used one image (mobile.png), so creating new colour schemes with unique images requires modifying one image. In Stallion 7.* there was around half a dozen images to modify/create for a truly unique colour scheme.

Be careful when turning the colour creator feature on and off, if you set the “Colour Scheme CSS File Creator Defaults” to anything other than “Use Current” when turning back on you can wipe your custom changes.

You should make offline backups using FTP.

Looks like your starting point was the “Basic Defaults” colour scheme which means if you didn’t change “Theme Filename” and “Theme filename Backup” during the saving process your colour scheme is saved as

“/stallion-responsive-child/colors/style-basic-defaults.css”

That’s the actual CSS file your site would use.

“/stallion-responsive-child/mydefaults/css/stallion_color_css_basic-defaults.php”

This is a backup of your CSS changes.

I strongly recommend before doing anything else change:

“Theme Name” to “Leaf Your Love Custom”
“Theme Filename” to “custom-01.css”
“Theme filename Backup” to “stallion_color_css_custom-01.php”

You can change the author name and URL as well.

Save Settings

Login to your site via FTP and download the files:

“/wp-content/themes/stallion-responsive-child/colors/custom-01.css”
“/wp-content/themes/stallion-responsive-child/mydefaults/css/stallion_color_css_custom-01.php”

To your computer. You now have a backup of your current colour scheme CSS file and the backup file on your PC, if something goes wrong you can use stallion_color_css_custom-01.php (this holds all the colour options) to restore where you are now.

I strongly recommend while working on a new colour scheme to make regular backups on your PC. What I do is create a folder on my PC something like

/backups/

And create a new folder for each backup with the date:

/backup/2014-10-05/

If you use the format year-month-day (2014 October 5th) the folders order in the date you create them alphabetically, easier to manage than other formats like day-month-year.

and download to the dated folder using FTP.

The important file is stallion_color_css_custom-01.php we can recreate custom-01.css from it so I wouldn’t bother downloading custom-01.css each time (takes a few clicks of the mouse to recreate).

If over the course of a week or so I worked on the colour scheme three times, each day I’d save my end result in a separate dated folder:

/backup/2014-10-05/stallion_color_css_custom-01.php
/backup/2014-10-07/stallion_color_css_custom-01.php
/backup/2014-10-14/stallion_color_css_custom-01.php

I now have backups of each days modifications by creating three folders with that days date and downloading (via FTP) the current stallion_color_css_custom-01.php into it.

Means I always have the latest version of my modifications AND if I made a mess on my last edit, but didn’t realise until later, I’ve got older backups to restore what I messed up.

By doing the above you will never loose your new colour scheme, right now if something goes wrong it could be lost for good and you’d have to start from scratch, by following the above backup advice worse case scenario is you loose 24hrs worth of work. I use this technique with everything I edit, I have hundreds of backups of Stallion Responsive as I work on updates I make backups.

Now you have a backup you can turn the feature off to test.

Under “Stallion Theme” >> “Child Theme Options” set

“Stallion Theme Colour Scheme” to “Custom 01”

The above is how you use your new colour scheme.

Under “Stallion Theme” >> “Colour Options” set

“Colour Scheme CSS Inline/File Creator Selector” to “Colour Scheme CSS OFF”
And make sure (next option REALLY important)
“Colour Scheme CSS File Creator Defaults” to “Use Current”

This will turn the colour scheme creator off and use your custom colour scheme.

Check what it looks like in a mobile device to see the responsive mobile image.

To work further on your colour scheme, we turn the colour creator back on.

Under “Stallion Theme” >> “Colour Options” set

“Colour Scheme CSS Inline/File Creator Selector” to “Colour Scheme CSS File Creator ON”
And make sure (next option REALLY important)
“Colour Scheme CSS File Creator Defaults” to “Use Current”

You can again work on more colour changes etc…

While turning the feature on and off etc… really important NOT to change “Colour Scheme CSS File Creator Defaults” from “Use Current”. If you change this option new default colours will be added to the colour creator page and you’d have to use your latest stallion_color_css_custom-01.php file (on your PC) to restore the mistake.

When you are happy with your custom colour scheme under “Stallion Theme” >> “Colour Options” set

“Colour Scheme CSS Inline/File Creator Selector” to “Colour Scheme CSS OFF”

And you are done.

You can even share your stallion_color_css_custom-01.php file with others so they can use and modify your colour scheme for their use.

Because I built the feature I can run a new colour scheme off in under half an hour, my wife built the ones named “by Marie” and she takes a couple of days, though they tend to be far more colourful than the colour schemes I create :-) I built the feature so my wife could create her own colour schemes (she didn’t like the colours I made), she’ll go looking for dozens of colour palettes etc… on Pinterest for ideas.

The website field for adding an author URL to comments can be disabled under “Stallion Theme” >> “SEO Advanced Options”, set

“Author Links OFF**”
and
“Show Author Links OFF**”

The above removes the Website field and stops any comments that already have an author URL associated with them generating a link as the comments author name.

The above setting doesn’t affect your comments, I have those two setting as above here and you’ll see my author name has a clickable link to home. Only my comments have this, the URL is set under your profile. Go to any WordPress Dashboard page, look to the top right corner where it says “Howdy your name”, hover and click “Edit my Profile”.

David

IPhone Responsive Mobile Menu