The Stallion Responsive Theme fonts can be changed in two ways. Via the Stallion Responsive “Color Scheme CSS Inline Creator” (options page under Appearance for changing fonts colors AND font types inline) or via the “Font Scheme CSS File Creator” (options page under Appearance for creating new font scheme CSS files). The former is inline CSS, for quick minor font type and color modifications, the latter is for changing the entire font selections (creates a new CSS file). Access the Stallion Responsive Colour and Font Scheme features under “Stallion Theme” >> “Color Options” : “Color Scheme CSS Inline/File Creator Selector” “Colour Scheme CSS Inline ON” = Use an inline version for creating font colors AND font types. “Colour Scheme CSS […]
Continue Reading WordPress Theme Fonts
WordPress Theme CSS Switcher?
“Stallion Theme Colour : Choose from one of the 24 Stallion theme colours. You can test the colours back clicking the links under the “Stallion Colour Switcher” menu on the right of this site.”
Did you take it out of the sidebar? I don’t see it.
Testing WordPress Theme Colour Schemes
I was doing an update and testing a new Stallion 7.1 feature and the Chameleon CSS Plugin (used to make the colour switcher) stopped the new feature working correctly, I disabled the plugin for the tests and it deleted the widget I’d built (stupid plugin)!
Stallion 7.1 (which is running on this site to test it) has the ability to set a different layout, colour scheme and other settings on each blog post/static page (the feature I was testing) and I plan to use that feature to show the different Stallion colours etc… that way rather than the plugin (so won’t be rebuilding the widget).
Every page can have a different colour scheme and/or layout.
Anyway, will have a think of how to replace the old colour switcher to show colour schemes.
David
Testing WordPress Theme Colour Schemes
Stallion Responsive Theme Colour Scheme Creation
If anyone is interested in seeing Stallion Responsive Theme colour scheme creation in progress take a look at
These are two test sites running WordPress markup test data for testing themes. First one is a work in progress by my wife and the second one currently the finished Black N Green colour scheme.
Best pages to check are the home pages and
Since we’ll be making more colour schemes they’ll be changing. New colour schemes will be added to Stallion Responsive.
Since I know how it all works it’s taking me about an hour to generate a new colour scheme, though I’m not very adventurous so my designs are much simpler than my wife is attempting. Anyone will be able to generate new Stallion Responsive colour schemes, even if you are running in Demo mode.
David
Stallion Responsive Theme Colour Scheme Creation
Stallion Responsive Theme
Thanks David, excited about the new version of Stallion coming out. Thanks for all your hard work.
Stallion Responsive WordPress Theme Fonts
The Stallion Responsive Theme Fonts feature has been a really difficult feature to create, you’d think because adding fonts in a CSS file is easy and flexible (there’s so many ways to achieve a particular look) to create a feature would be easy, but the exact opposite was true!
I started with the premise whatever you could add directly into a CSS file should also work in an options page feature that adds CSS to a CSS file (it’s the same as adding it to a CSS file manually). So if I wanted to only change a font from say normal to bold it should be a simple case of add font: bold; (which is one way to make a font bold using CSS) to an option box and it will work. Unfortunately I found in practice it didn’t always work as expected because when you mix different CSS formats they won’t always override one another.
The solution was to ALWAYS use the same format and since I wanted each font controlled by one option each it had to be
Example:
So if you find yourself wanting to take shortcuts creating a new Stallion Responsive Colour Scheme CSS File I strongly recommend not changing the above format (it works). I’m sure there are plenty of other ways to achieve the same styling, but the above definitely works :-)
Really looking forward to releasing Stallion Responsive 8.0, it’s New Years Eve now and I keep finding little things to fix, like wasn’t happy with the social media like buttons, so changed them all and in the process added two new placements for the buttons (fixed at the top or bottom of page) and a way to like the home page and categories etc… plus now Stallion Super Comments pages are liked rather than the comments original post.
David
Stallion Responsive WordPress Theme Fonts
Stallion Responsive Golden Ratio Fonts CSS
Hi David,
Thanks for replies on the other two questions.
I will go and post back to you in a couple of
mins.
With the CSS code I want to change the space between the paragraphs to give more white space to 40px which is the css name that I change for that please?
I have another theme I use called thesis classic and the settings have something called the Golden ratio and the text that it turns out is extremely more readable than any sites I have seen so I want to change all the css in stallion to the golden ratio.
Good link here to read about it and also it has a calculator to work out optimal font size, line height, and content width and characters per line.
This is what I worked out:
Main
Font Size: 16 Line Height: 26 Content Width: 660 Approx. CPL: 94 Font:
Sidebar
Font Size: 16 Line Height: 23 Content Width: 310 Approx. CPL: 44 Font:
I have the css code if youd like to take a glance and make any suggestions as I think I have to change the space between a few other instance of css code
Many thanks and blessings!
Carl :-)
Stallion Responsive Golden Ratio Fonts CSS
Golden Ratio CSS Design
I’m familiar with the Maths behind the golden ratio and some web designers use the precise ratio (1.618) to break the design layout into parts.
The golden ratio concept won’t work with a theme package like Stallion Responsive.
If you’ve looked under Stallion Layouts you’ll find 12 layouts ranging from no sidebars to two sidebars in various configurations.
To use the golden ratio you’d be limited to only two layout.
Left sidebar : Content
or
Content : Right Sidebar
There’s not a lot else you could do with the golden ratio for main layouts.
With a fixed width of 1000px your desktop layouts would be roughly:
Left sidebar 380px : Content 620px
or
Content 620px : Right Sidebar 380px
I’ve not taken any margin/padding into account, you’ll loose around 40px on margins/padding depending on design.
By sticking to this ratio you are limited to two basic designs. I’ve built 2 layouts that come close to the above ratio after taking into account padding/margins.
Stallion Layouts 3 and 4
3 – Main Content 660px : Left Sidebar 310px
4 – Main Content 660px : Right Sidebar 310px
I use those two layouts on most of my sites, they are aesthetically pleasing.
After taking padding and margins into account the main content shows around 640px of content and sidebars 300px.
They are not the golden ratio, they are those widths to fit what webmasters need.
640px wide main content means you can add 640px wide images and videos that won’t resize when on a desktop PC. I’ve also added image support for automatically creating 640px wide images for these layouts.
300px wide sidebars means you can add 300px wide widgets like 300px wide AdSense ads that fit perfectly. A widget area that’s 350px wide would have a lot of padding if you added a 300px wide AdSense ad, would look awful.
I wouldn’t change those widths just to hit a specific ratio, they work in the real world.
Also since the world is moving towards mobile devices and Stallion Responsive is responsive to mobile devices, the smaller the device screen harder it would be to maintain a specific ratio.
Wasn’t aware some designers where going as far as to use the golden ratio on font sizes. I used Google PageSpeed Insights Tool http://developers.google.com/speed/pagespeed/insights/ to find font and line heights acceptable to Google (check mobile usability results).
Before making any font size changes based on a ratio I suggest looking at what the output might look like to Google via their PageSpeed Insights Tool. I assume your sources are running the golden ratio fonts, run their websites through PageSpeed Insights and check their usability ratings.
Run my site through the insights tool and you’ll see only usability issues related to offsite content
The button code is Facebook like button code (not on my site) if I recall correctly.
If you decide to change fonts there’s a Stallion options page for it you probably haven’t played with yet. To activate:
“Stallion Theme” >> “Colour Options” : “Colour Scheme CSS Inline/File Creator Selector”
See changing CSS Fonts.
You can either work with the fonts inline (makes no changes to the CSS files, good for small changes or testing) or File Creator On which creates new CSS files in the Stallion Responsive child Theme folder.
With the latter option you load the default options for a colour scheme and change them on another options page under “Appearance” >> “Colour Scheme CSS File Creator”. What you change on that page is wrote to a CSS file and used like it’s one of the default Stallion Responsive colour schemes. I suggest reading the information on the pages as you go along as if you mess up you’ll need to log in using FTP to delete two files that were saved to your child theme folder.
Anyway, you will see on the CSS editor page all fonts can be changed, so if you want a specific ratio should be possible. I wouldn’t change the fonts just to hit a specific ratio, but if that’s what you want it should be possible.
David
Golden Ratio CSS Design
Font Size
I am having a REALLY hard time trying to figure out how to change the font size for the main content. Can you please provide step by step instructions?
Changing Font Sizes
Have you followed the instructions within the post you commented on?
If not that’s the step by step instructions, go through it if you get stuck ask for help.
If so what you having problems with?
Please be specific, I’m not going to explain the entire process when the entire process is already explained above.
David