Thursday, February 16, 2012 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
Filed in Blogging News, Semiomantics, Uncategorized, Yorgo Nestoridis | Also tagged Blog Master Class, Blogging News, CSS3, Custom, Development, Image, on, Semiomantics Design, Semiomantics XO, Semiomantics XO for WordPress, Styling, Typography, Web Design, Web Design Workshop, WordPress, WP, WP Best, XO, XO Theme, yorgo Design, Yorgo Nestoridis | Monday, February 13, 2012 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
Filed in Blogging News, Semiomantics, Uncategorized, Yorgo Nestoridis | Also tagged Author, Blog Master Class, Blogging News, CSS3, Custom, Development, Meta, Name, on, Semiomantics Design, Semiomantics XO, Semiomantics XO for WordPress, Style, Styles, Tag, Typography, Web Design, Web Design Workshop, WordPress, WP, WP Best, XO, XO Theme, yorgo Design, Yorgo Nestoridis | Wednesday, January 25, 2012 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
Wednesday, August 24, 2011 Original Article at Own Domain on Tumblr.
Own Domain on Tumblr from cPanel – This post will show you how to point the A record of a sub-domain to Tumblr from cPanel.
Copyright © Yorgo Nestoridis – Original Article at Own Domain on Tumblr.
Related posts:
- How to add an Own Custom Domain to Tumblr
- How to Move your WordPress Blog
- Facebook Graffiti
- YORGOO Blaster YB271 Beta
- Google Wave Seminar by Ycademy
Filed in Blogging News, Uncategorized, Yorgo Nestoridis | Also tagged Blog Master Class, Blogging News, Custom Domain A Record, Custom Domain for Tumblr, Customize Tumblr, Own Domain on Tumblr, Set A Record from cPanel, Tumblr, Tumblr Custom Domain, Yorgo Nestoridis | Wednesday, August 17, 2011 Original Article at Photo Sprites Menu Tutorial.
Photo CSS Sprites for WordPress — Free PSD Contents Photo CSS Sprites for WordPress — Free PSD 1. Create the Image file in Photoshop Download the PSD File Open the PSD file in Photoshop and inspect it Edit the Lower folder How to Insert your own Photos Mask layer and Spocket Holes Text Layers Edit the Upper Folder How to create the Dimming Effect 2. How to Edit the Text 3. How to Embed your new menu in the WordPress header.php Insert your Menu into XO for WordPress 4. How to style your CSS Sprites Menu This Tutorial will show you step by step how to build an attractive menu using sprites for your WordPress Photo website. I have used this feature on the below demo site: The menu is placed in the header.php of the WordPress theme (here its Semiomantics XO) in replacement of the navigation. 1. Create the Image file in Photoshop The image file consists roughly of a Filmstrip serving as mask and then the images which are inserted into the film strip. In the normal position, the images are dimmed by a black fill layer at about 75% opacity. The final image looks as follows: [...]
Copyright © Yorgo Nestoridis – Original Article at Photo Sprites Menu Tutorial.
Related posts:
- Evo 2 Home Page Tutorial
- Evo2 Gallery Tutorial
- Simple Sprites Menu
- Thesis Tutorial Header Banner Rotator
- Apple Touch Icon Tutorial
Filed in Blogging News, Yorgo Nestoridis | Also tagged Blog Master Class, Blogging News, CSS Sprites Menu for WordPress, Free Photoshop Tutorial, Free PSD Sprites Menu, How to Edit Sprites, Photo Shop Tutorial, Photo Sprites Menu Tutorial, Semiomantics XO, WordPress Tutorial, Yorgo Nestoridis | Original Article at How to Style the WordPress Menu.
WP Custom Menu with Rollover Effect This tutorial is based on a recent Custom Photo Blog Theme Development for WordPress on the base of Semiomantics XO. The Solutions apply to most any clean WordPress theme whereas some of the style sheet syntax may vary from theme to theme. The WP Photo Theme — XO Photo The Goal of the exercise was to build a site which will display on mobile platforms as well without the use of WPTouch Pro for example and which offers the possibility to navigate without zooming on mobile phones. This gave us the opportunity to style the Main Navigation (horizontal menu on top of the site. As we are on a photo site we thought about using Menu tabs with images and rollover effects which can be achieved either with sprites or as individual images. We opted for a solution without sprites in this case considering that the difference will not be material on this site. The screenshot shows the rollover effect as it has been taken while the mouse was hovering over the CONTACT tab. The Menu Normal View and the Hover View show the same picture, whereas we put a transparent black layer (85% [...]
Copyright © Yorgo Nestoridis – Original Article at How to Style the WordPress Menu.
Related posts:
- Transparent WordPress Semiomantics XO
- Transparent WordPress Theme Design
- How to Customize WordPress 2
- How to Create an Ad with Rollover Effect
- Web Design Workshop 4 – Navigation
Filed in Blogging News, Yorgo Nestoridis | Also tagged Best WordPress Photo Theme, Blog Master Class, Blogging News, Custom Menu, Menu with Images, Rollover Effects, Web Design, WordPress, WordPress Tutorial, Yorgo Nestoridis | Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/facebook-marketing/how-to-add-a-facebook-iframe-application-to-your-fans-page/.6 Steps to Add a Facebook iFrame Application to your Fans Page This Tutorial will show how to set up a Facebook iFrame Application in 6 Steps. Since Facebook changed once more the rules Fan Page content is to be added via iFrame Applications. There are some App providers out there who offer quick solutions namely for people who do not have own hosting; these external solutions have the disadvantage that you are not in full control of your frame and that you promote rather the App provider than yourself. For our customers we use a more professional approach. Here below you will find the basic 10 steps to create your own iFrame Application. What are Facebook iFrame Applications As of February 2011 facebook allows iFrames on Page Tabs as well as on Canvas Pages. The corresponding Applications don’t need to be activated (using the app submission procedure). In short an iFrame Application allows to load external content to your Fan or Business Page. The advantage of Facebook iFrame Applications As your content is hosted on your own host, you may edit in standard HTML, CSS and JavaScript like on [...]
Related posts:
- Best RSS Facebook Page
- Facebook Drawing Board Live
- YORGOO on Facebook
- Best Facebook Pages
- Facebook Online Seminar by Ycademy
Filed in Blogging News, Uncategorized, Yorgo Nestoridis | Also tagged Best Facebook Page, Best Facebook Pages, Blog Master Class, Blogging News, Facebook Advertising, Facebook iFrame Application Tutorial, Facebook MArketing, Facebook YORGOO, How to Facebook iFrame, X 6 steps to Facebook iFrame Appllication, Yorgo Nestoridis | Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis/how-to-create-an-ad-with-rollover-effect/.Add Rollover Effects to your Ads The principle is simple: the ad consists of a styled link, the style consisting of positioning a background image with a rollover effect when the mouse passes over the image (hover). When clicking on the image the target page opens. A few years ago the rollover effect could only be achieved using JavaScript. The same effect can now be achieved using CSS and namely the pseudo-class :hover. 1. Create your Image The rollover effect can be achieved using two separate small images which alternatively load as a background or by creating one big image containing multiple small images and by shifting the background position. (CSS Sprite). For the purpose of this exercise we will use the CSS Sprite version. The example shows the rollover effect as used on the homepage. For our image we need the normal view as well as the hover view of the ad united on one image created in Photoshop: the image here below is 250 pixels wide and 250 pixels high. In stead of creating two images we create only one and leave a vertical space between the two [...]
Related posts:
- Create 125 x 125 pixels Ads
- How to create a Favicon with Photoshop
- Simple Sprites Menu
- Create a Favicon with Photoshop
- Create Apple Touch Icons and Startup Images
Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/how-to-build-your-sd-skin-for-xo/.Full with Skin for SlideDeck Pro Our Tuesday session was a bit rough on some 
. For this reason we will build tonight a custom full width and full height SlideDeck Pro Skin, similar to the one in use in the header of this blog. As you know, I like it minimalist and bold — so, we will build a very simple but eye-catching slider skin. To anticipate the session and for those who cannot assist, here is a tutorial: 1. Create a style sheet While Dreamweaver may be the default editor for css files, we will just use our text editor, PSPad in my case. Go File and select New — Cascading Style Sheet Now save this empty file into a new folder called whatever the name of your skin is: in my case ‘semiomantics’ and name the file: skin.css 2. Add a header comment to skin.css Now we start by entering the header information in form of a comment: /* Skin Name: Semiomantics 1024 Skin URI: http://shop.yorgonestoridis.com/wordpress/slidedeck-skin-1024-px/ Skin Type: fixed Description: The skin is used at http://sd.xo2011.com – full width and height, no borders, no padding adapted for [...]
Related posts:
- Ycademy Online Seminar March 2011
- Christmas Skin for XO 2011 WP Theme
- SlideDeck Pro on XO
- Semiomantics XO Media Slider goes Mobile
- Build your Flash Website with Gene
Filed in Blogging News, Semiomantics, Uncategorized, Yorgo Nestoridis | Also tagged Blog Master Class, Blogging News, Custom Skin SD for Semiomantics XO, Plugins, Semiomantics XO, SlideDeck, SlideDeck Skins, WordPress, Yorgo Nestoridis | Wednesday, February 2, 2011 Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/web-design/apple-touch-icon-tutorial/.How to create an Apple Touch Icon – Tutorial Subsequent to yesterday’s call and post, this article shows how to design an Apple Touch Icon following Apple Developers Guidelines. For the purpose of this tutorial we are focusing on Icons for iPhone, iPod and iPad; [...]Related posts:
- Create Apple Touch Icons and Startup Images
- Apple Peel for WordPress
- Apple Look for XO 2011
- Cu3er Tutorial
- Best WordPress and Semiomantics