Browsing All Posts filed under »Design«

How to build a Custom WordPress Site 3

May 17, 2012

0

Customizing WordPress Child Theme In this tutorial we will create Custom Post Types and add variables and functionality to them. Also we will add some styling for more user-friendly display in the dashboard. Having set up our basic Child Theme structure we will now proceed with the customization. But before that we will do some basic WP configuration and go through the settings. You may be used to building WordPress based sites and therefore you may have some habits in as much as settings and configuration are concerned. Some basic WP Settings Here is what I do in the dashboard: 1. Trash and permanently delete the Hello World Post. 2. Delete the default Links. 3. Set Permalinks to: /%category%/%postname%/ 4. Under Settings General enter Blog Name and Tagline; for the purpose of this exercise I use  as a Title: WordPress TTP and as a Tagline: Tips, Themes and Plugins 5. Add some content to test content display by importing an RSS feed using a plugin such as Feedwordpress. I pulled into a new category called Blog the feed from my author-blog at: http://yorgonestoridis.com/feed Custom Posts and Child Theme We have set up a basic child theme for the purpose of [...] Related posts: How to build a Custom WordPress Site 2 How to build a custom WordPress Site Custom Widgets for WordPress WordPress 3.4 Beta Facebook Strategy with WordPress

How to build a Custom WordPress Site 3

May 17, 2012

0

Customizing WordPress Child Theme In this tutorial we will create Custom Post Types and add variables and functionality to them. Also we will add some styling for more user-friendly display in the dashboard. Having set up our basic Child Theme structure we will now proceed with the customization. But before that we will do some basic WP configuration and go through the settings. You may be used to building WordPress based sites and therefore you may have some habits in as much as settings and configuration are concerned. Some basic WP Settings Here is what I do in the dashboard: 1. Trash and permanently delete the Hello World Post. 2. Delete the default Links. 3. Set Permalinks to: /%category%/%postname%/ 4. Under Settings General enter Blog Name and Tagline; for the purpose of this exercise I use  as a Title: WordPress TTP and as a Tagline: Tips, Themes and Plugins 5. Add some content to test content display by importing an RSS feed using a plugin such as Feedwordpress. I pulled into a new category called Blog the feed from my author-blog at: http://yorgonestoridis.com/feed Custom Posts and Child Theme We have set up a basic child theme for the purpose of [...] Related posts: How to build a Custom WordPress Site 2 How to build a custom WordPress Site Custom Widgets for WordPress WordPress 3.4 Beta Facebook Strategy with WordPress

How to build a Custom WordPress Site 2

May 14, 2012

0

Build a Custom WP with Semiomantics XO This post focuses on setting up our Main Theme and a Child Theme. For the purpose of this exercise we will use Semiomantics XO as the parent theme because it’s flexible, user-friendly and highly optimized. In fact you can use most any decent WP theme to follow this tutorial, namely the TwentyEleven which comes with the WP installation. Adding a Theme Like on any live site, our test site on BitNami allows us to add themes either from the Dashboard (upload the theme’s zip file) or by pasting the theme into the themes folder in wp-contents. Access your BitNami environment using Windows Explorer and surf to the themes folder. You will see the same folders and files structure under htdocs as you are used to when accessing your WordPress folder on a server using an FTP client. In order to add Themes, we just drop theme folders into the ‘themes’ folder as per above. As you can see, I have amongst others) added my Semiomantics XO (the ‘xo’ folder under themes). XO will serve as the parent theme of the new website. Instead however of customizing XO directly, I will create a child [...] Related posts: How to build a custom WordPress Site Semiomantics XO Transparent WordPress Drafts How to make WordPress Themes Responsive WordPress Themes and Development WordPress 3.4 Beta

How to build a custom WordPress Site

May 14, 2012

0

Custom WordPress Design and Developments This post will start a series of articles about building custom Websites based on WordPress and the Semiomantics XO Theme. We will therefore use most of our remaining daily Ycademy calls this month to go into advanced customization issues. But first we will start at the beginning by planning and formulating a project which will allow us to test code, functions and design. The WordPress Custom Project For the purpose of this exercise, we will build plan and execute a hypothetical customer’s project. The new website will be about WordPress, namely about WordPress Tips, Themes and Plugins. It’s a site for a WordPress developer and web designer. The Architecture of the site The structure of the Website will be based on WordPress and include some static pages such as the About, Contact, Imprint and Privacy pages as well as structured dynamic content.  As the site will focus on 3 main topics, Tips, Themes and Plugins, we will build for each of these topics custom Posts and Taxonomies. The Developer’s environment To build the new website in a test environment, we install BitNami and namely the WordPress stack (free download). BitNami creates an independent (Apache) server [...] Related posts: XO Photo Press WordPress Theme Elegant WordPress by Semiomantics 101 How to Customize your WordPress Typography Semiomantics XO Transparent WordPress Drafts WordPress Personal CMS and Blog

Customizing CSS in WP Mobile Theme

May 1, 2012

0

Common Changes This post lists some CSS snippets to customize WPTouch Pro. Remove the Page Title Area Note: When removing the page title area we recommend using a child theme’s stylesheet and applying the code below to its corresponding stylesheet, per the instructions on applying custom CSS. In the iPhone theme: In the iPad theme: Remove reflection on calendar icons and post-thumbnails Change the size of the Post Thumbnails     Change every instance of 46px to your desired size Remove rounded corners on Post Thumbnails Remove “Comments are closed” text when comments are disabled in WordPress p.nocomments, #respond { display:none !important; } Remove comments completely Remove comment # bubble Remove ‘breadcumb’ text in category and search pages Use custom color for the mobile header where #ffffff can be customized to suit. Remove “HelloBar” Related posts: XO Mobile Theme with WPTouch Pro Customizing WP Shop Theme Customizing Post Editing Best WP Business Theme Hosting South Africa Fun Theme Related posts: XO Mobile Theme with WPTouch Pro Customizing WP Shop Theme Customizing Post Editing Best WP Business Theme Hosting South Africa Fun Theme

Local Website Design

April 25, 2012

0

How to build a Local Website Go Local is the name of the game in 2011/12 and the success of bringing the global web developments back home is a trend of the time. First it was about tagging people, now we tag locations, be it on social networks such as Facebook or on Photo sites, such as Picasa or Flickr. Based on the fact that surfers search for and prefer local business to cross border transactions, social networks namely have built in the local tags and stimulate users to hook media and events to geographically tagged locations. How to dominate the local market? In order to dominate the local market, you need to assess the use of the internet your neighbors make; chances are that they mostly hang out on social media, search Google and use email. This is of course an extremely simplified view but it gives an indication about where we need to build high visibility. You also want to have an idea about how people access the net and websites; you will notice an increased use of mobile deices, which means that your content needs to be formatted and optimized  for desktops as well as for tablets [...] Related posts: How to Optimize your Impact on Social and Mobile Networks Facebook Strategy with WordPress Google Top 10 Dominate your Keyword 3 3 Web Design Trends in 2011 New Facebook Pages Publishing Concept

Ycademy Online Seminar Apri 2012

April 16, 2012

0

Mobile WordPress and Social Media The fast evolution of the mobile web has created new needs for publishers, whereas the objective remains to integrate mobile web targets into an existing workflow and to optimize productivity with the help of automated conversion scripts and tools. What’s New on Mobile WordPress and Social Media At Semiomantics the starting point for our development is the most comprehensive conversion plugin, called WPTouch Pro. WPTouch has released its latest version end of March 2012 with some adjustments for iOS 5.1 and many other fixes and developments: * Added: Custom advertising options for iPad * Added: Simple caching of desktop functions.php * Added: Russian language file * Added: Automatic archiving of previous settings in wptouch-data directory * Added: Compatibility setting for BuddyPress Mobile AJAX support * Fixed: Changing user-agent matching that may have interfered with advertising in certain scenarios * Changed: Replaced include with locate_template in theme files, should allow child overrides of custom WPtouch Pro template files * Changed: Algorithm to reload settings; may have caused settings to be lost in a certain scenario * Updated: All translations based on 2.6 strings * Fixed: An issue with Register and Lost password links in Classic * [...] Related posts: Facebook and Mobile Web Seminar by Ycademy Ycademy Online Seminar January 2012 Ycademy Online Seminar May 2011 Facebook Online Seminar by Ycademy Facebook Strategy with WordPress

WordPress 3.4 Beta

April 9, 2012

0

WordPress 3.4 Beta Custom Headers and Backgrounds The release of WordPress 3.4 Beta raises a number of problemsquestions for theme designers in as much as Custom Headers and Custom Backgrounds are concerned. The implementation methods via add_custom_background() and add_custom_image_header() will be depreciated and replaced by a more powerful method via add_theme_support(). The impact for Semiomantics XO and EVO Due to the depreciation of the old calls, we will need to update the themes and make the modifications needed to take advantage of the new features provided by WordPress 3.4. The new theme versions will work with WP 3.4 minimum and must not be used with previous WP versions. Custom developments and child themes may need a special treatment, depending on the degree of customization. I will arrange for some developers calls or set up some tutorials in due course. For the time being I am testing WP 3.4 Beta to check backwards compatibility using our themes. I will keep you posted on results and updates.   Incoming search terms:wordpress 3 4custom backgrounds wordpress 3 4 backward compatiblewordpress 3 4 betawp beta 3 4Related posts: Semiomantics XO Transparent WordPress Drafts How to Customize your WordPress Typography WordPress Themes and Development Showcase [...] Related posts: Semiomantics XO Transparent WordPress Drafts How to Customize your WordPress Typography WordPress Themes and Development Showcase Portfolio Photo Theme for WordPress YORGOO Blaster YB271 Beta

New Photoshop CS6 Beta

April 8, 2012

0

Photoshop CS6 Today let’s have a look at Photoshop CS6 Beta which is available for free download from Adobe. The version is called ‘Superstition’ and it is the first significant update to Photoshop since CS5 ( in the Suite CS5.5 Adobe delivered the same Photoshop as in CS5). Who is Photoshop CS6 for? Having thoroughly tested the new Photoshop CS6 Beta, it seems to me that this version is addressing namely people who are working with digital photos and videos; also the 3D features have been significantly improved. In other words, if you are not using Photoshop to edit your images, needing content aware patching and selective blurring, there is no real need to upgrade your CS5. If however you are a photo freak and if you are shooting short videos, then Photoshop CS6 is a smashing program, allowing you to go beyond what photography can do (such as multiple shallow depth of field areas on a single image). What is new on Photoshop CS6? This is what’s new on Photoshop CS6:     UI redesign (all new icons and optional dark UI) OK, they copied (sorry, got inspired by (big companies don’t copy, huh)) Apple’s Aperture; you can switch back [...] Related posts: 3D Photoshop Exercise Photoshop Ycademy Resizing Pictures in Photoshop Book covers and Jewel Cases with Photoshop Photoshop Borders Ycademy

Showcase Portfolio Photo Theme for WordPress

February 22, 2012

0

Media Focused Development for Professionals and Amateurs, The new Semiomantics EVO for WordPress sets new standards for beauty and excellent publishing paired with eCommerce. Related posts: XO Photo Press WordPress Theme The 1001 Faces of Semiomantics XO Glossy WordPress Theme Development Ycademy Online Seminar Photo Publishing with Evo for WordPress Best Car Dealer Theme for WordPress

Image Styling on Semiomantics XO

February 16, 2012

0

Image Borders, Padding, Captions  on XO Theme Thumbnails on WordPress There are two kinds of thumbnails produced on your XO site: the native WordPress thumbnails and the thumbnails generated by XO for the purpose of display throughout the theme where the WordPress thumbnails don’t fit. WordPress Thumbnails Thumbnail sizes are set in your dashboard under Settings > Media.  When we change the thumbs’ sizes, the change will apply only to new content. These thumbnails are used by default in the XO Basic Home Page Layout. In order to modify thumbnails created previously to a change in WordPress settings, we use the “Regenerate Thumbnails” plugin; install from your dashboard and then just run it: this will create thumbnails corresponding to the new WP Media settings for all images in the library and galleries. The Regenerate Thumbnails plugin will have no impact on syndicated posts unless you also pull in the images to your library when syndicating. XO Theme Thumbnails When we upload an image from our dashboard in XO, XO creates 12 thumbnails adapted to the needs of the site and stores them in the default uploads folder for faster loading. If we change the layout settings in XO advanced home [...] Related posts: WordPress Date Styling Meta Tag Styling on WordPress Related posts: Meta Tag Styling on WordPress XO Theme Typography The Image Caption Style Happy Valentine Transparent WordPress Semiomantics XO

The Image Caption Style

February 14, 2012

0

Enjoy your Valentine! No related posts. No related posts. Related posts: Happy Valentine Meta Tag Styling on WordPress XO Theme Typography Happy Valentine Gals and Guys Web Design Workshop 17 Resizing Large Background Image

Happy Valentine

February 14, 2012

0

Enjoy your Valentine! Related posts: Happy New Year After Effects How to Customize your WordPress Typography 12 Principles of Animation with After Effects Related posts: Happy Valentine Gals and Guys Happy New Year After Effects How to Customize your WordPress Typography Happy New Year 12 Principles of Animation with After Effects

Meta Tag Styling on WordPress

February 13, 2012

0

XO Theme for WordPress Styling After each post, we display Tag, Category and RSS references. They are not part of the actual post; they are of a rather technical nature and may help visitors to find contextual content on the site. The SEO impact of publishing such Meta Information is discussable. Styling the Author Name We want to display the author’s name underneath the main title in small but remarkable fonts: .post .meta, .hentry .meta,.post .meta a, .hentry .meta a { color:#111111;letter-spacing:5px; } Note: we just use letter-spacing to gain visibility.   Bottom Tags Usually these meta tags are printed in small print, often difficult to read. For the purpose of this exercise we have switched to a serif font (Times) and increased letter spacing for better readability: .storycontent .postmetadata, .storycontent .tags { font-family: Times, "Times New Roman",serif; font-variant:small-caps; font-size:16px; line-height:1.1em;color:#101010; letter-spacing:2.5px; } .storycontent .postmetadata a, .storycontent .tags a{ color:#000000; } Nothing really exciting here: we are using small-caps (alternatively upper-cases) and letter-spacing of 2.5px.Note that letter-spacing can take decimal values. The fun is in experimenting with font, colors and styles!   Related posts: WordPress Date Styling Custom Typography on Semiomantics XO Theme for WordPress Related posts: WordPress Date Styling Custom Typography on Semiomantics XO Theme for WordPress Related posts: XO Theme Typography WP Author Blog by Semiomantics WordPress Seminar by Ycademy WordPress for Authors Seminar Semiomantics WordPress based Frameworks

XO Theme Typography

February 13, 2012

0

Font Styling on WordPress   Related posts: Custom Typography on Semiomantics XO Theme for WordPress Related posts: Custom Typography on Semiomantics XO Theme for WordPress Related posts: How to Customize your WordPress Typography XO Mobile Theme with WPTouch Pro Christmas Skin for XO 2011 WP Theme XO Photo Press WordPress Theme Transparent WordPress Theme Design

How to Customize your WordPress Typography

February 8, 2012

0

Basic CSS3 to Customize your WordPress Theme With the increasing browser compatibility of CSS3, additional customization of websites is in the reach of most anyone (Even a Monkey can do it, according to Nikos Advertizopoulos …). Tonight we will start with a series of calls to become familiar with the possibilities arising from the use of CSS3 on WordPress to improve typography and font styles. You may follow the progress of the work at the Ycademy Demo Site which features the Semiomantics XO Theme. Looking forward to seeing you on YorgoLive tonight. Incoming search terms:wordpress Typographycustom typography wordpresshow to customize typographyhow to customize your wordpress teamtypography customization wordpresstypography wordpress 2012Related posts: How to Customize WordPress 2 How to Customize WordPress Semiomantics XO Transparent WordPress Drafts Customize WordPress with Semiomantics XO XO Photo Press WordPress Theme Related posts: How to Customize WordPress 2 How to Customize WordPress Semiomantics XO Transparent WordPress Drafts Customize WordPress with Semiomantics XO XO Photo Press WordPress Theme

Semiomantics XO Transparent WordPress Drafts

February 8, 2012

0

Transparent WordPress Custom Theme Playing with the XO Theme Version 3.3.x from Semiomantics and CSS3, I notice how easy it is for most anyone to customize the XO Theme by adding transparencies and other CSS3 elements. Here below you find some drafts. You may visit the test site from : http://globalthebrand.com. Transparent WordPress Gallery Scripts and Plug-ins On the test site we use the Semiomantics Widgets and Theme Handler plug-in as well as a modified Supersized plug-in; the latter needs some more work to make it more responsive. Also we use TubePress which behaves fine also on mobile. The Theme is Semiomantics XO with 3 custom child-themes; any theme can be associated with any page, post, category, tag or sidebar.       Incoming search terms:xo theme wordpresstheme blogtheme wordpress typographyxo wordpress themewordpress semiomanticswindows 8 theme for wordpresswordpress transpert themewordpress transparent responsive themewordpress theme windows 8transparent wordpress theme cssRelated posts: Transparent WordPress Semiomantics XO Transparent WordPress Theme Design Semiomantics XO Blog The 1001 Faces of Semiomantics XO Semiomantics XO 2011 for WordPress Related posts: Transparent WordPress Semiomantics XO Transparent WordPress Theme Design Semiomantics XO Blog The 1001 Faces of Semiomantics XO Semiomantics XO 2011 for WordPress

The 1001 Faces of Semiomantics XO

January 30, 2012

0

XO for WordPress is a responsive, flexible and highly customizable Theme for high performance and excellence in publishing. Developed by Semiomantics since 2007, the XO is mainly used for custom High End sites. A DIY version is available since 2011 at http://semiomantics.com. News are published to Facebook at http://facebook.com/semiomantics. Related posts: Semiomantics XO Blog Facebook Strategy with WordPress Ycademy Online Seminar January 2012 Semiomantics XO 2010 Edition WordPress Shop Version 3 by Semiomantics

How to make WordPress Themes Responsive

January 25, 2012

0

Responsive Themes for WordPress Responsive Websites become a must in 2012. This tutorial demonstrates how to make your WordPress Theme Responsive. What is Responsive Web Design? In very simple terms: Responsive Web Design aims to display content adapted to the visitors screen size. This means namely that the layout width must be fluid, i.e. expressed as a percentage of the width of the screen, typefaces expressed in em and images must be scalable. Practically speaking: a responsive designs can be viewed on a smart-phone or on a large PC screen, the display will always be the same and adapted to the size of the screen or browser window. n stead of using multiple style-sheets for different screen sizes, designers use Media Queries which allow to create multiple layouts using the same content. To achieve scalability, CSS media queries, such as min-width or orientation are used. Make your WordPress Theme responsive using a Child Theme A quick and easy way consists in creating a child theme; this allows you to upgrade your theme as the case may be without altering your customizations. How to create a responsive child theme? 1. Create a new folder in your wp-content/themes folder and name it [...] Related posts: WordPress Christmas Themes WordPress Themes and Development Best WordPress Business Themes How to Style the WordPress Menu New XO53 Theme for WordPress

Ycademy Online Seminar January 2012

January 24, 2012

0

Ycademy Online Seminar January 2012 - The XO Theme for WordPress remains the most flexible theme for custom development, accessible to most anyone Related posts: Ycademy Online Seminar January 2010 Ycademy Online Seminar May 2011 Ycademy Online Seminar Ycademy Online Seminar April 2011 Ycademy Online Publishing Seminar

12 Principles of Animation with After Effects

December 15, 2011

0

Animation for Beginners with After Effects Since Disney’s hand-drawn animation, nothing has changed when it comes to the basic principles of animation. The success of Disney was not just in the design of Mickey and friends but in the way the characters were put into motion. At Saturday’s Ycademy Seminar we will explain the 12 Principles of Animation and see, how to apply them with After Effects. 1. Slow in — slow out Acceleration and deceleration is created with Easy Ease in and out functions is AE. The effect creates fluid motion. 2. Anticipation Anticipation designs the action leading to the actual movement, like the backwards swing before hitting a ball with a golf club. Anticipation prepares the viewer for the action which will occur. Surprise actions can be more effective without anticipation. 3. Squash and Stretch Squashing and stretching blows life into a volume. The rule is, not to change the volume while designing the effect: a vertical squash goes with a horizontal stretch. 4. Arc Objects tend to move along an arc, rather than along straight lines. In After Effects we animate along a path. 5. Straight Ahead Action vs. Pose to Pose Straight Ahead Action refers to [...] Related posts: Best Auto Parts by GenesBiz Auto Parts Website for WP