My Themes’ CSS Structure
WordPress is a powerful CMS program that is capable of turning a complicated graphic design into a web page. You can see a list of 50 stunning template designs that are running on WordPress here. The design of these websites may look complicated but if done in an organized way, they aren’t really hard to code. From the designers’ perspective, a website can be divided into 5 main sections: Background Header Content Sidebar Footer There are several elements found in the main sections where you can define the styles. The styling of each elements can be controlled in the css file. Normally, we name it style.css. Different designers have their own ways of doing it. I’ll show you how I configure my CSS file in an well-organized way. I made it easy to understand so you can modify the styles of each element without much difficulties. Open any of my themes’ style.css file and you’ll see that I grouped them into 9 categories: General Layout Header Menu Content Sidebar RSS and Search Comments Widgets The elements found in each category below are general items and differ from theme to theme. 1 General This section include general elements like body font and link style, image alignment, font size of H1, H2, H3, H4, H5, H6, blockquote style, break line(hr), field input style etc. body{;} img {;} a {;} a:hover {;} h1 {;} h2 {;} h3 {;} h4 {;} h5 {;} h6 {;} p {;} hr {;} del {;} ins {;} blockquote {;} input,select,textarea {;} code{;} .alignleft {;} .alignright {;} .aligncenter,div.aligncenter{;} img.alignleft {;} img.alignright {;} img.centered {;} .clear {;} .spacer {;} 2 Layout This section controls the image and position of the background, header, menu, content, sidebar, RSS and footer. /********** LAYOUT **********/ #base{;} #menu{;} #header{;} #container_btm{;} #container{;} #content{;} #sidebar1{;} #sidebar2{;} [if the theme is 2 column, sidebar2 is not needed] #rss_search{;} #footer{;} #footer a{;} 3 Header This section controls the position and text style for the blog title, blog tagline (subtitle) and the header image position. /********** header *************/ #blogtitle{;} #blogtitle a, #blogtitle a:hover {;} #subtitle {;} #header img.home {;} 4 Menu This section controls the display of the page menu link which can normally be found in the header. /************* MENU ***********/ #menu ul {;} #menu ul li {;} #menu ul li a {;} #menu ul li a:hover{;} #menu ul li.current_page_item a {;} 5 Content This is where the content section is defined. You can change the setting of the normal or the sticky post, post title, post date and the page information. /************* content *************/ .archivetitle {;} .post{;} .sticky{;} .post_title{;} .page_title{;} .post_title a,.post_title a:hover,.page_title a,.page_title a:hover{;} .post_date{;} .post_date_d {;} .post_date_m {;} .post_author{;} .post_author a{;} .entry{;} .info {;} .category {;} .tags {;} .bubble {;} .navigation {;} .navigation {;} .sorry {;} 6 Sidebar Control the everything related to the sidebar which includes the image position, text, links and fields styles etc. /************ sidebar ************/ #sidebar1 {;} #sidebar1 a{;} #sidebar1 a:hover {;} #sidebar1 ul {;} #sidebar1 li {;} #sidebar1 h4 {;} #sidebar1 ul ul li {;} #sidebar1 select{;} #sidebar2 {;} #sidebar2 a{;} #sidebar2 a:hover {;} #sidebar2 ul {;} #sidebar2 li {;} #sidebar2 h4 {;} #sidebar2 ul li{;} #sidebar2 ul ul li {;} #sidebar2 select{;} Note: sidebar2 is not needed if the theme is 2 column. 7 RSS and Search Control the position of RSS icon, position and text style of the RSS as well as the search input area. /*********** RSS and Search ***********/ #rss_search .input {;} #rss_search .submit{;} #rss_search a.rss{;} #rss_search a.rss:hover{;} 8 Comment You can control the comment section that includes...
Read MoreFor Blogger/Blogspot Template Users
My themes are getting popular in the Blogger world 🙂 Since I authorized Bloggerstyles/Falconhive as my official WP-to-Blogger template converter last month, more and more Blogger users are using my templates. Recently, I receive quite a number of requests from the Blogger users who use my themes downloaded from Bloggerstyles/Falconhive asking me to solve some of the Blogger template issues. Since I am not the person doing the conversion, I can’t provide feasible solutions for your Blogger template problems. Here, I would like to clarify to all the Blogger template users that I do not provide support for Blogger related issues. All the Blogger template issues have to be directed to Bloggerstyles.com However, I want both the WordPress and Blogger template users to enjoy problem-free templates (template without functionality issues). To ensure that your issues posted on Bloggerstyles will be addressed, I have contacted Bloggerstyles’ owner and arrived at a solution. Bloggerstyles’ owner has assured me that he will address your Blogger template issue within 5 working days. However, if he fails to address your issue, you can forward to me by posting it on the theme page. I’ll then look into your issue personally and contact Bloggerstyles’ owner to facilitate the process. In this way, I hope I’ll be able to take care of my Blogger template users...
Read MoreCertified Themes by ThemesPreview
I am happy to see that some of my themes have been certified by ThemesPreview.com. To add to my excitement, some of my themes are awarded GOLD status!! Some of you might not have heard about Themes Preview. Let me briefly describe what this site is doing. ThemesPreview is a WordPress theme directory listing some of the best themes with FREE downloads. If it is just a free WordPress theme directory, what is so great about this site when there are so many theme directories around? Let me get into some of the details. Firstly, it is not that easy to get a theme listed on ThemesPreview. A theme must fulfill the following basic criteria to get a free listing: – it must be able to get installed on the latest WordPress version – it must have quality graphic – it must be widget ready Needless to say, my themes fulfill those basic criteria. Secondly, the editor will test each and every theme against several criteria. Most of the tested criteria are code-related. This section is to test how well the designers code the theme. If the theme passes a criteria, points will be given. The editor will then compare the passed score with the tested score to come out with the total score of the theme. Now, to be awarded Bronze status, out of 100%, the theme has to score within 60-74%. To be awarded Silver status, the theme has to score within 75-89%. To get a Gold status, the theme has to score above 90%. I have done some statistic about the number of awarded themes out of all the themes listed on ThemesPreview. As of this writing, there are a total of 296 themes listed on that site. Out of which, 62 themes are awarded Bronze status. 26 themes are awarded Silver status. Only 8 themes are awarded Gold status. In other words, only 32% of all themes listed on ThemesPreview are getting Bronze status at least. Another thing you can tell from the statistic above is that a theme needs to have VERY clean coding to be awarded Gold status. Less than 3% of all themes are good enough to be awarded the status. Out of the 8 Gold themes currently listed on ThemesPreview, 4 of which are designed by Templatelite.com. This shows how much effort I put in to create my “babies” 😛 My principle is: Creating WordPress themes with high standard for FREE...
Read MoreAbout the Footer Script
When you install my theme, you’ll notice that there is a php script in the footer that appears like this: <?php echo templatelite_show_links();?> In this post, I give a list of Q&A explaining what this footer script is all about. What is the function of the footer script? This footer script allows me to track the URLs that have installed my theme.  It also allows me to add links to the footer. Why do you want to include the script to the theme? There are two main reasons why I include the script: 1) I will be able to know which themes interest you more.  Thus, I’ll create more themes that suit your needs. For example, within a certain time frame, if theme #1 (travel related) has been used by 100 domains as compare to 200 domains using theme #2 (also travel related), it is clear that theme #2 is more popular. Hence, I’ll create more themes using the design style of theme #2. 2) I will be able to monetize from the themes by getting advertisers to sponsor my themes. Using this method, my advertisers know exactly which sites link to them so they get what they pay. Without regular income from my advertisers, I won’t be able to offer more quality themes for your free downloads. Can I remove the script? Yes and no. Yes if you pay $20. No if you want to use my themes for free. Is the script safe? Definitely! The function of the script is to get RSS and display. It is similar as normal RSS. My themes’ users are my lifeline and I won’t risk it. I have taken all necessary measures to make sure that you won’t get malicious content brought by the script. If you still don’t feel comfortable, you can study the code (it is not encrypted) and see how I made it. How many links will be displayed in the footer? I will only display a maximum of 4 advertisers’ links in the footer. Will the script slow down my blog? No. You’ll only query my server 4 times a day and each time last less than 10 seconds. The slowdown is negligible. If your link server is down, will it affect my blog? No! Your blog will function as per normal independent of my server. Continue to page 2 for the detail explanation of the script… …continue from page 1 The script is encrypted. However, I show you what is inside the script so you can confirm that it is safe to use. Now I’ll explain the structure of the script: Only your home page will check my server at an interval of about 6 hours. If time out (eg. our server is down), the checking will be extended after 6 hours. This means that the script will check my server maximum 4 times/day The script will send the 5 items below to my server and save them in my database. – blog home url – blog title – theme id – theme version – theme name I am using the WordPress inner function, fetch_rss() to retrieve and parse the RSS feed from my server. The script will calculate the number of text links being displayed and limit the number to maximum of 4 only. Script explanation (to ensure the script is safe): $post_variables = array(… ); Data passes to my server, you can see that it sends only blog url, title, the theme ID, ver and name. No other information are passed. $links=strip_tags($links,”<a>”); This is double confirm to make sure that only text and links are...
Read MoreBloggerStyles/Falconhive – Official WP Theme Converter for Templatelite
I am very selective as to who I want to partner with. A good partner will make my business flourish and a bad partner will affect my business in a negative way. I am a person who puts a lot of emphasis on the quality so I choose only good partners. In my search for the Blogger/Blogspot templates, I found out that many of the good templates are converted from the WordPress themes. This was when I started to think: it will affect my reputation in the Blogger world if my themes have been converted poorly. I need a good coder to convert my themes! I am glad that I found Alvaris Falcon, the owner of Falconhive.com and the co-owner of BloggerStyles.com. Though he has only 9 months experience in converting WordPress theme to the Blogger platform, his converted templates are so Blogger-friendly. Until now, he is still very active in doing the conversion work. You’ll see 1-3 new WordPress themes converted by him to Blogger almost every week. Check out Falconhive and Blogger Styles for more info. I also notice that Alvaris won’t stop there after finishing the theme conversion. He will make sure that his converted Blogger templates work. When the template users reported any problems, he will look into them and try his best to solve them. Each revision being released signify less problems for the template. Take a look at how he handles the support on one of his most popular converted templates, Zinmag Primus and you’ll know what I mean. Due to all his effort being put in the theme conversion, I am sure he will do a fantastic job in converting my WordPress themes to the Blogger platform. In this January, I contacted him about my request of making him the official converter of my WordPress themes. I am glad that he accepted it. In this post, I’d like to announce that BloggerStyles/Falconhive has been given the rights to be the official WordPress theme converter for...
Read MoreLatest Official WordPress Version Supported
Previously, all my themes were tested against all WordPress version from 2.3 onwards. That is doable when I only need to work on less than 10 themes every time WordPress releases a new version officially. Since mid February 2009, I have decided to dedicate myself to releasing at least 4 themes and 10 articles/resources per month. After 3 months, you’ll expect to see a total of about 20 quality WordPress themes on this site and all of the themes are free to download. I foresee that I’ll be super busy in the months ahead so I will have very limited time left to test all the themes against previous as well as the latest WordPress version. However, since you are using my theme (I am honour that you do), it is my responsibility to make sure it works on the latest WordPress version that is released officially. I won’t test against the Beta WordPress version. When WordPress officially releases a new version, I will test my themes against the latest version. It will be an ongoing process so you will have to wait a bit before ALL the themes complete the testing. When I have finished testing a theme, I will update it under the “Change Log” section of the respective theme pages. However, my testing might not be so thorough so if you find that any of my themes that doesn’t work well on the most updated WordPress version, please let me know and I’ll look into that and solve the issues the soonest. Do I provide support for the older WordPress versions? I am afraid not. Though the upgraded theme should work with the older version, I advise you to upgrade your WordPress to the latest version and use my theme that has been tested against that...
Read More
