Yoko-Theme Documentation - Elmastudio · Yoko-Theme Documentation 1. Theme features and...
Transcript of Yoko-Theme Documentation - Elmastudio · Yoko-Theme Documentation 1. Theme features and...
Yoko-Theme Documentation
1. Theme features and requirements• forWordPress3.1+
• responsivelayoutwithCSS3MediaQueries:Thebloglayoutadjuststodifferentscreensizesandistherefore
optimizedformobiledevicessuchastabletpcsandsmartphones.
• HTM5(fallbackforIE<9)ansCSS3
• customlinkcolor,headerimage,backgroundandlogoimage
• optionaladditionalnavigationmenu(SubMenu)belowtheheaderimage
• simplethemeoptionspage
• Yokosociallinkswidgetwithminiicons(forRSS,twitter,facebook,flickr,vimeo,linkedinanddelicious)
• postformatsforstandard,aside,gallery,link,video,imageandquote
• threadedcommentswithgravatarsupport
• postthumbnails
• customCSSStylesfortheContact7formWordPressplugin
• Googlewebfonts(DroidSansandDroidSerif)
• translation-ready(currentlyEnglish,GermanandFrenchtranslationsavailable)
• cross-browsercompatible(testedinChrome,Firefox,Safari,InternetExplorer9and8)
• Shortcodesformultiblecolumns,infoboxesandtexthightlight
2. The theme installationYoucaninstalltheYokothemerightfromyourWordPressinstallationadminpanel.JustgotoAppearance/Themes
andclickonthetabInstall Themesandsearchfor„Yoko“.NowyoucanseetheYokothemepreviewandclickon
Install.
AfterinstallingYokoyoujusthavetoactivateitbyclickingtheActivatelinkinthe„Managaethemes“page.
3. Custom link color and logo imageTouseacustomlinkcolororlogoimageclickonAppearance / theme options.
Hereyoucantypeinyourownlinkcolorusingthehextermlike#009BC2(don’tforgetthesymbol#)oracolorterm
likered,blueorgreen.
Yourlogo imagecanhaveanindividualpixelsize.Justuploadyourlogoimage(jpgorpng)totheWordPressmedia
library,copytheimageURLandpaste the URL into the theme options page.
4. Custom Header ImageTouseanindividualheaderimagegotoAppearance / Header.
Hereyoucanuploadyourownheaderimage(size1102×350 Pixel),pickoneoftheotherheaderimagesthatcome
withtheYokothemeorchoosenottouseanheaderimageatall.
5. Custom BackgroundIntheadminpanelchooseAppearance / Backgroundtopickyourownbackgroundcolororuploadacustomback-
groundimage.
Yourbackgroundimagedoesn’thavetobeverybig,youcanprepareasmallimage(like100x100px)andchooseto
repeattheimagehorizontallyandvertically.Thiswayyourwebsiteloadsfasterintothebrowserbecauseyou
decreasedthebackgroundimagefilesize.
6. Customize the main navigationIfyouwanttocustomizetheapperanceofthemainmenu(atthetoprightsideofthethemelayout)youcanusethe
WordPresscustommenuoption.Justsetupyourindividualnavigationmenu(Appereance / Menus)andmarkitas
thePrimary NavigationintheThemeLocationsoptionfield(atthetopleftsideofthemenuadminpanel).
7. Additional navi ga tion menu (Sub Menu)OnemoreYokothemefeatureistheadditionalnavigationmenurightbelowtheheaderimage.
Tousethisadditionalmenuoptionsetupancustommenuwiththename»Sub Menu«underApperance/Menues.
Youcanuseuptosevenmainmenulinksandmultiplesubmenulinks.Justdrag’n’dropthesubmenulinksalittle
bittotherighttomarkthemassublevel.Afteryousaveyour»SubMenu«navigationmenuyouwillseeitinyour
bloglayout.
8. Use WordPress Post Formats
Yokoalsosupportsthenewpostformatsfeature(sinceWP3.1).Rightnowyoucanchooseyourpoststobe
stan dardposts,aside(ashortnote),gal lery,link,video,imageorquoteposts.
Thedifferentpostformatswillthenhavedifferentstylinginyourblogdesign.
9. Post ThumbnailsIntheYokothemeyoucanincludepostthumbnailsforstandardposts.
TheThumbnailimagesizeis140×140 Pixel.Toaddathumbnailtoapostjustuploaditusingtheoptionfield
»Featured image«inthe»EditPost«adminwindow.
TosetupyourdefaultimagesizesfortheWordPressmedialibrarygotoSettings / MediaintheAdminpanel.
Hereyoucansetyourthumbnailsizeto140x140pixel.
10. The Yoko Social Links widgetYokohasacustomwidgetwithminiiconstolinktoyoursocialprofilesiteslikeTwitter,Facebook,Flickr,Vimeo,
LinkedIn,DeliciousortoyourRSSFeed.
TousethewidgetschooseAppearance / Widgetsintheadminpanelanddrag’n’droptheYoko Social Links Wid-
getintooneofthetwosidebars.NowyoujusthavetochooseawidgettitleandfillinyourlinktextsandtheURLsto
yourprofilepages.
11. Author Info fieldToshowanauthordescriptiontextwithgravatarimagebeloweverysinglepostjustfilloutthe»Biographical Info«
inyourUser profile.
Afterupdatingtheinfotheauthorsbiographicalinfotheauthorfieldwillshowupautomaticallyattheendofeverysinglepostpage.
12. Threaded CommentsYokoalsosupportstheWordPressthreadedcommentsfeature.Therewillbeanreplybuttonaftereverycommenttoreplydirectlytoanindividualcomment.IfthebuttondoesnotshowupautomaticallyyoumighthavetoenablethethreadedcommentsoptionunderSettings / Discus-sion / Other com ments optionsfirst.
13. Shortcodes for multiple columns, info boxes and text highlight
Tosettextintotwo columnsusetheshortcodesinyourpostsorpages:[two_columns_one]putyourleftcolumntexthere...[/two_columns_one][two_columns_one_last]putyourrightcolumntexthere...[/two_columns_one_last][divider]
Tosetyourtextintothree columnsusetheshortcodeslikethis:[three_columns_one]putyourleftcolumntexthere...[/three_columns_one][three_columns_one]putyourmiddlecolumntexthere...[/three_columns_one][three_columns_one_last]putyourrightcolumntexthere...[/three_columns_one_last][divider]
Tosetyourtextintofour columnsusetheshortcodeslikethis:[four_columns_one]putyourfirstcolumntexthere...[/four_columns_one][four_columns_one]putyoursecondcolumntexthere...[/four_columns_one][four_columns_one]putyourthirdcolumntexthere...[/four_columns_one][four_columns_one_last]putfourthcolumntexthere...[/four_columns_one_last][divider]
The[divider]shortcodewillclearyourdivssothecolumnswillnotcollapseintoeachother.
Forinfo boxes (yellow, red or green)youcanusetheshortcodes:[yellow_box]yourinfotexthere...[/yellow_box][red_box]yourinfotexthere...[/red_box][green_box]yourinfotexthere...[/green_box]
Andtohighlight textwithalightyellowcolorjustputyourtextintotheshortcodes:[highlight]yourhightlightedtexthere...[/highlight]
14. Theme translationsYokoisreadyforthemetranslation.RightnowthereisthedefaultEnglish, a German and a FrenchtranslationforYokoavailable.YoucanaddyourowntranslationorcustomizeanexistingtranslationveryeasilybyusingtheWordPressplugin»CodestylingLocalization«.Atthepluginshomepageyoucanalsofindadetailedplugindescription.
IfyoutranslatedtheYokothemeinyourownlanguageitwouldbegreatifyoumakeyourworkalsoavailableforotherusers.Justcontactusatkontakt@elmastudio.desowecanaddyourtranslationtotheYokothemefolder.
15. Customizing Yoko by crea ting a child themeIncaseyouwanttocustomizetheYokothemealittlefurtherandyouthereforewanttochangethecodeinthethemesStyleeheetoranyofthethemetemplatefilespleaseconsidercreatingachildthemeforyourchanges.
Creatingachildthemeisveryeasyanditsavesallyourindividualchangesfrombeingover-writtenbyafutureupdateoftheYokotheme.YoucanfindmoreinformationoncreatingachildthemeintheWordPressCodex.
WehopeyouliketheYokoWordPresstheme.Ifyouhavefeedback,suggestionsorproblemswiththethemejustwriteusacommentontheYokothemepage:http://www.elmastudio.de/wordpress-themes/yoko/