Below you will find the latest 40 comments posted to the site. This discussion page is also an example of the Stallion Widgets Anywhere Feature: what you see in the “Latest Comments” box is a Stallion Responsive Widget that was added to a dynamic widget area and added to this post using a shortcode that is as simple as pasting: <div class="sidebar-box">[stallion_widget_any id=swa3]</div> Into a Post: The above is exactly what I pasted to generate the Latest Comments widget below. The div with class sidebar-box is to use the same styling (same CSS) formatting as a widget on the side menus. You can also use the Google Custom Search Box below to quickly find articles AND comments on a subject: […]
Continue Reading Stallion Responsive Theme Recent Comments
WordPress Transparent Background Image
Hi Dave
Do any of your layouts have a transparent background, so that my background image can be the backdrop to all the posts on my website?
I was able to kind of get Stallion Responsive to do this by selecting the “Empty” layout, but unfortunately, now my menu is a shocking purple color and the tags are shocking blue and can’t figure out how to control those items without knowing CSS, which I do not unfortunately.
If you go to my current website leafyourlove.com/thumbprint-tree, you’ll see what I am trying to do.
Thanks alot,
Terri
WordPress Transparent Background Image
Transparent Background-Color CSS Code
Short answer no. The background colors aren’t added by the layout CSS file, they are added by the color CSS file. You have your color scheme set to empty, the empty color scheme isn’t a color scheme, it’s literally an empty CSS file which is why your colors are broken.
Unless you are building a color scheme as described at Stallion Responsive Colour Scheme Creator you shouldn’t set the color scheme to empty, if you do you will have to build an ENTIRE color scheme manually, just not a good idea when there’s a colour scheme creator (see link above) that doesn’t require understanding CSS.
The background image is loaded within the body tag and I’ve set lots of Stallion CSS ID’s and classes (CSS rules) to have a non-transparent background-color because otherwise it tends to look awful. IMO this sort of design (seeing a background image directly behind text) looks out of date and tends to make it hard to read the body text, it’s a dated design (1990’s design).
Probably the easiest solution is some custom CSS code like this.
<style type="text/css"> #wrap_stallion, #header_stallion2, #header_stallion_2011, #footer_stallion, .src_field, .src_field:focus, .post-meta, .commenthead { background-color: transparent; } </style>Switch color schemes to one that’s closest to what you want, you’ll need to set a colour scheme (not empty) for this to work.
For testing under “Appearance” >> “Widgets” add a Text Widget to “Above Header Area” widget area (will work with any of the widget areas that are loaded sitewide) and paste the above code in the text widget.
You’ll find some of the background image is now transparent. The code above isn’t complete, but will point you in the right direction.
To complete the code you need to add more CSS ID’s and classes (it’s not hard to build the list).
Load one of the colour scheme CSS files like “/stallion-responsive/colors/style-basic-defaults.css” in a text editor (any will do to create the list).
Find instances of
And find the CSS ID (ID’s start #) and Class (Classes start with a .) list for this rule and copy the ID/Class bit.
What this means is find a CSS rule that includes background-color: like here:
#wrap_stallion { background-color: #FFFFFF; }Look for the line above background-color: which starts with a . or a # and copy it minus the { part. So for the above you would copy:
Find the next instance of background-color:
#header_stallion2, #header_stallion_2011 { background-color: #FFFFFF; background-repeat: repeat-x; background-position: top; border-top: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; }And again copy the ID/Class list minus the end { part. So for the above you would copy:
Add this to the last ID/Class line you copied, but first add a , and a space so the list looks like this:
We are building a list of CSS ID’s and classes to have a transparent background color rather than the current not transparent output. Above we have three CSS ID’s.
Repeat until you’ve added all ID’s and classes that have a background-color which you want to be transparent (some you’ll not want to be transparent like the menu code near the bottom). In my test code I got as far as the line “.post-meta, .commenthead”.
I would suggest each time you add a new line of ID’s and classes you test the output (why we used a Text widget, quick way to test), if changing a background color to transparent isn’t the output you wanted remove those ID’s/classes and move on.
Using the above code you can set exactly which parts of the site will let your background image show through.
When you have your list of Id’s/classes you can either keep them in the text widget or add the CSS to a CSS file.
Have you tried the Colour Scheme Creator? You can build your own colour schemes without editing CSS files etc… my wife built some of the more colourful Stallion colour schemes (the ones “by Marie”) and my wife is not tech savvy (doesn’t know what CSS is). You could use the code I listed above (after you’ve built your ID/Class list) with a minor modification directly into the color scheme creator so your transparent CSS code is added to the CSS file.
If you add it to the custom CSS form it’s this format:
#wrap_stallion, #header_stallion2, #header_stallion_2011, #footer_stallion, .src_field, .src_field:focus, .post-meta, .commenthead { background-color: transparent; }You have some custom CSS already added, your other custom CSS like the H1, H2, H3 CSS code can either be added to the CSS box as well or you could modify the header (H1 etc…) fonts for your colour scheme, that sort of option to change the header fonts is part of Stallion.
BTW You should deactivate the Stallion SEO Plugin, those features are built into Stallion Responsive under the SEO Advanced Options page, so you don’t need the plugin.
David
Transparent Background-Color CSS Code
Child Layout that has transparent background
Dave
Thank you so much for the ‘long answer’! I really appreciate the time you took to write that all out – I know that was time consuming! I will study it and will implement it on my website. It is quite obvious from all the detailed answers that you give on this tech support page, that you really care about the product you are putting out there.
Terri
Child Layout that has transparent background
Color Scheme Creator - Pretty Awesome
The Color Scheme Creator is just the coolest thing. Love how you automatically analyze my header image for all the colors present and give me the corresponding color code. That is just too sweet! . Now I don’t have to guess what colors look best with my header. I HIGHLY recommend anyone who hasn’t played with the Color Scheme Editor to give that a try. No CSS knowledge needed!
Color Scheme Creator - Pretty Awesome
Mobile Menu on Iphone and Comment Website
Hey Dave
Two Questions:
1. The menu on my website doesn’t seem to show up when I look at my website from my iphone. Any tips on that? But I do see a menu on the desktop version.
2. How do I take off the “website” field on my blog comments?
Terri
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