Mokio User`s Manual
Contents
1. 2 Content management In Content management tab you can add edit delete all available site content types These are e articles e photo galleries e movie galleries e contact pages 2 1 All After clicking Content management All list of all contents regardless of their types 1s displayed To display only particular content types select Content management Articles Photo Galleries etc Content Management Q Prev 1 2 Next t Picture 10 All contents list Table contains following information e Title e Status whether given content 1s displayed on site or not e Type content type e Last updated at e Language you can choose a language so the content was available only on site with this language active or you can choose all then content will be available as assigned through menu 2 2 Add article After clicking on plus sign beside content type Article Photo Gallery Movie Gallery Contact Page new form for creation of given content type is displayed 10 New article pp Main pic Wybierz plik Nie wybrano pliku Lang All y Active Home page Title Intro lili lili lili E i sore B I U RE A B OH Content G sowce gd BI B I U amp x x IL kee Eo Styles Format Font Sze A B UH a Display from Display to Menus en top Home Articles Save Save and new Cancel Picture 11 New article form Fields please note that some2. Lay Lay o i Haloween 2013 w Good One Group gt Picture 36 Movie data part 2 User can edit all the data choose one of the thumbnails provided by the service or upload own thumbnail for the movie using Add your own thumb button 2 5 2 Edit Movie properties To open Edit Movie properties dialog hover over the movie thumbnail on the list of movies in the gallery pic 37 and click Edit icon pic 38 21 Gallery Picture 37 Hovered movie thumbnail E Picture 38 Edit movie properties Open edit movie properties dialog Move the movie to change the order of photos on the Picture 39 Move list Picture 40 Delete the movie Delete the movie 2 5 3 Change the order of movies in a gallery Order change in movie gallery works similar to order change in photo gallery chapter 2 4 7 To change order of movies in a gallery hover a photo pic 37 grab Move icon pic 39 with mouse and move a movie to a different position on the list 2 5 4 Delete a movie To delete a movie hover its thumbnail on the list of movies in the gallery pic 37 and choose Delete icon pic 40 The movie will be immediately removed from the server 2 6 Contact page CMS allows creating own contact page It is possible to create unlimited number of contact pages Contact page similarly to all other content types needs to be assigned to menu to be available on the site 2 6 1 Adding Contact Page To add
3. English User can define other languages Adding new language results in generation of proper menu structure for given language Language settings Search Q Name Short name Active Actions english en polski pl vit Records from 1 to 3 all 3 Picture 54 Languages 7 1 Adding a language To add language click click Add language button located above the list rys 54 New language Name Shortname Active Picture 55 Adding new language Fields Name language name e Shortname language short name 1 e en or pl e Active specify whether given language should be available in your site or not Please remember that you will still need to create language menu for your site After creating new language and setting Active to true language becomes available in Lang fields of forms for adding and editing content 32 CMS users Only users with active account can access CMS To manage users choose Admins tab from the sidebar Users Search Q Email Roles Actions test mokio org Administrator Records from 1 to 1 all 1 Picture 56 Users 8 1 Adding new CMS user To add new CMS user click Add new user button located above the list New CMS user form will be displayed pic 57 New user Email Password Password confirmation Administrator Content management Menu management HTML block management Users management Reader Save efe ana Cancel Picture 57 Adding C
4. number of reusable blocks More details in chapters 4 and 5 27 W zak adach na rysunku poni ej wy wietlone s nazwy pozycji blok w statycznych kt re sa mo liwe do wy wietlenia na stronie slider footer default bottom default top Picture 46 Adding menu element positions of reusable blocks After clicking a position a tab it 1s possible to assign given reusable block that should be included on given page slider footer default bottom default top footer About Us Information Other Information Address Picture 47 Adding menu element Reusable blocks on position footer In above case four reusable blocks were assigned to footer position Their definitions can be found in Reusable Blocks tab Reusable blocks that are currently not displayed inactive or outside of displayed from displayed to range are marked The ones that are Always displayed are always in the right box and cannot be moved to the left box 4 Reusable blocks After choosing Reusable blocks from sidebar list of Reusable blocks is displayed Reusable blocks can be any piece of HTML code that can be put on various positions on the page on only one some or on all pages of your site Page positions are defined in Positions section 28 HTML block Searct Q Title ive Position Updated at Language Actions Picture 48 Reusable blocks 4 1 Adding a reusable block To add Reusable block click Add Reusable block button loca
5. s actions Edit forms are usually identical with create forms so the description applies to both types of forms Deleting the element occurs after clicking Trash icon Confirm box will be displayed Form actions o Save saves given element e Save and new given elements is saved and user is redirected to creation form of new element of same type e Cancel cancel all the changes and get back to the list of elements 1 6 WYSIWYG editor Mokio system has been supplied with advanced editor that allows text formatting inserting pictures tables links and many other functions useful during page view creation 1 6 1 CKEditor toolbar kA source 8 9 ug B IU S x x amp Da m Il 1I EJ ll o ji lili lili lili Styles M Format M Font Sie A B ie al Picture 8 CKEditor toolbar On picture 8 you can see editor toolbar Below is a description of each buttons Paste previously cut copied part of the text or element Paste text without formatting E Paste text from Word m Allows fast move among points in text 5 Allows deleting hyperlink from selected text s je Adds a hyperlink on selected text Justify text B Align text to the right Js Center text DECEM NN 5o seme mos emm 00000000 s a em o e qa Visual representation of paragraphs and headers in the text 1 Make text bold Format chosen font 21 Make text it
6. template for given position every element displayed on this position will be surrounded with given template Positions Search Q Name Id Actions default bottom default top footer slider Records from 1 to 4 all 4 Picture 50 Positions 5 1 Adding a position To add a position click Add position button located above the list pic 50 30 New position Name Tpl Picture 51 Adding a position Fields e Name position name Tpl path to the template 1 e templates travels templates footer elements html slim available formats HTML erb haml slim 6 External scripts In Mokio CMS it is possible to include Javascript on your site In front end layout you need to include all of them in desired place however it 1s comfortable to manage their content using CMS External script EEE Name Id Script Actions GA UID window load function joyRideTipContent joyride autoStart true modal true expose true Jy y Records from 1 to 1 all 1 Picture 52 External scripts 6 1 Adding external script To add an external script click Add external script button located above the list pic 52 New external script Name Script E Save Save and new Cancel Picture 53 Adding an external script Fields e Name name of the script Script content of the script 31 7 Language In Language tab you can manage languages available for your site Default language is
7. Contact Page in sidebar choose Plus icon beside Contact Pages pic 5 Following form will 22 be displayed New contact page Lang Al T Active Home page Title Content Source 8 i B I U S x x L j5 ln lS EJ e m Styles Normal Font Size A G 2 a body p a Recipient emails Menus Home Articles Contact Message template Form data k Source i m ff B I U amp x x Ri l5 E m names Imie E i nazwisko lub Ga B Styles Normal hi Font size A B ie al nazwa firmy email Adres e mail Trite Tytut content Tresc body p A Picture 41 Adding Contact Page Fields Lang choose language of your Contact Page can be shared through all canguages doesn t matter in one language sites Active whether given contact page should be displayed on site or not Home page whether this contact page should be included on Home Page Title contact page title Content contact page content 23 e Recipient emails email addresses that will receive e mails sent from contact form on the contact page Menus assign contact page to menu element Message templates Following e mail message will be sent when someone decides to use contact form Following variables are available in message content O name first and last name or company name O email e mail address O title title O content content These variables will be replaced with d
8. MS user 33 Fields e email which is also a login e password user password 8 and more characters e password confirmation repeat the same password so to avoid mistake during account creation 8 2 Access rights Each user can have access do particular parts of Mokio CMS You can set it during account creation or when editing pic 58 Administrator Content management Menu management HTML block management Users management Reader Picture 58 User access rights There are following options Administrator has edit access to every part of Mokio CMS Content management can manage content of the site articles photo galleries movie galleries and contact pages Menu management can manage menu structure e Reusable blocks management can manage reusable blocks e Users management can manage users create accounts for new users change passwords e Reader read access to every part of the system If more than one option is selected the sum of all access rights is granted to given CMS user In case Reader option is selected CMS user has read access to all CMS functions His access can be extended with right access to some modules like content or menu management 9 Skins not available in basic Mokio system Skins specify an appearance of your site In CMS only one skin can be active Activating one skin deactivates previous one 34 Skins Search Q Name Ac
9. Mokio CMS User s Manual Table of contents I Viet CVE CLC 0S seei eE E E E E E 2 Cone an CIC a E E E EE S I N o E E E E EE E E E ae RODE DIO Se E a sucus E EE A tuneiouation ations sosegatieneladaccucuestouss J POSON eepe E E E EE E E E E E O EEE E REE Q Ea a E E E E E E E I SEU UT CERE BG 1 e a E E E E A 8 CMS users 9 Skins not available in basic Mokio system 1 Main CMS elements 1 1 Welcome screen The application can be accessed only after providing correct data in login form Email Password Picture 1 Welcome screen login to the system Access data can be created and passed to user by system Administrator 1 2 Application main screen After successful login user is redirected to Dashboard screen Here he can find last created and edited content as well as content without menu and menu without content incorrect situation Here user can also check the date of last action in each section pic 2 E IERI UE Dashboard Recently updated content Recently created content Name Actions Name Actions Picture 2 Dashboard screen 1 3 Administration panel After logging in user has access to various tools which were grouped in side bar pic 3 Picture 3 Add content C Picture 4 Show hide menu button Picture 5 Side bar 3 Side bar contains following elements pic 4 e Dashboard starting page e Menu menu management e Content management site content management p
10. alics k Source Allows HTML code view and edit Choose font style 1 6 2 Pictures management in editor To add picture in editor you need t click insert picture icon from the toolbar point 7 in above table Image Properties dialog will be displayed pic 9 Image Properties X Image Info Link Upload Advanced URL Browse Server Alternative Text Width Preview m Lorem ipsum dolor sit amet consectetuer adipiscing Gi e elit Maecenas feugiat consequat diam Maecenas Height metus Vivamus diam purus Cursus a commodo nan facilisis vitae nulla Aenean dictum lacinia tortor Nunc iaculis nibh non iaculis aliquam orci felis euismod neque sed ornare massa mauris sed velit Nulla pretium mi et risus Fusce mi pede Border tempor id cursus ac ullamcorper nec enim Sed tortor Curabitur molestie Duis velit augue condimentum at ultrices a luctus ut orci Donec HSpace pellentesque egestas eros Integer cursus augue in cursus faucibus eros pede bibendum sem in tempus tellus justo quis ligula Etiam eget tortor VSpace Alignment notset Y OK Cancel Picture 9 Image properties In URL field you can put server path to your picture or external link Field will be automatically filled in when we use drop down in document edit mode In Alternative Text field you need to put text that will be displayed instead of your picture when browser is in non graphic mode Width and Height
11. are for font size in px Closed padlock means that ratio will be maintained Hspace and Vspace specify space between the picture and flowing text Last important field is Alignment Apart from left or right picture align it allows text flowing beside the picture If not set gt is chosen then text will start next line after the picture Link in this tab we can add link that will be displayed after clicking on the picture In URL field you need to provide full url of the page that should be displayed after clicking on the picture In Target field you can choose one of five options e not set default user s browser s behavior will be used for this link e New window blank link will be opened in new browser window Topmost window _top link will be opened in the browser window which was opened by the user as first Self window _self link will be opened in same window in new tab e Parent window parent link will be opened in the window that opened current window Upload upload a picture from your drive To edit properties of the picture that was included in editor content you can 1 Click the picture with right mouse button and choose Picture properties option 2 Click the picture with left mouse button to select it and the click insert edit picture icon from the toolbar table 1 point 7 More information about CKEditor can be found here http docs ckeditor com
12. ata provided by a user when filling in contact form on the site Additionally it is possible to define more variables as fields on contact form on the site and use them here 3 Menu To manage menu structure choose Menu from the sidebar Structure of a menu tree depends on the languages you enabled for your site First level are languages Then we have site positions to which menu can be assigned Only starting from third level your real menu begins Only after assigning content articles photo galleries movie galleries etc with given menu element they will be available on the site 24 Menu management wen wv top tralalala Article 15 10 2014 o B dfgdisgdigdt Article 21 10 2014 cg 1 idfgdfsedfgdf Article 23 10 2014 v asdasdas List 20 10 2014 wen v en wtop Legend B Active menu element url works gi inactive menu element url doesn t work wv Visible menu element Invisible menu element l Menu element without content or with content that is non active or non displayed blank page appears when this menu element is clicked Picture 42 Sample menu structure Active menu element d Inactive menu element v Visible menu element please note that url can be active but not displayed in main menu Invisible menu element If you want to create a page that is available from any different place on your site for instance from the content of a different article but no
13. d photo in gallery Move photo to change the order of photos on the list Picture 23 Move picture Gi Picture 24 Photo properties o Picture 25 Delete the photo Edit photo properties Removes photo from the gallery Choose Edit photo icon following form appears Edit photo Name photo name Subtitle Intro Edit thumbnail External link Active Picture 26 Photo properties form On the right current photo thumbnail is displayed Show photo button displays full photo in original 17 size Edit thumbnail button opens Edit thumbnail screen pic 27 2 4 5 Delete a photo To delete a photo hover its thumbnail on the list of photos in the gallery pic 22 and choose Delete icon Photo will be immediately removed from the server 2 4 6 Photo thumbnail Photo thumbnail is created automatically when a photo is uploaded to the server However CMS allows creation of a thumbnail from any photo we want This option is available from Photo properties form Edit thumbnail button Picture 27 Edit photo thumbnail You can here crop a picture see below 18 Picture 28 Create photo thumbnail On the left preview of resulting thumbnail is displayed To perform selected crop use Scissors icon pic 31 Crop a photo to create your own thumbnail Picture 29 Crop photo Picture 30 Rotate photo Picture 31 Cancel thumbnail changes Picture 32 Perform crop Rotate a p
14. e 18 Add photo button 2 4 2 Uploading photos on server To add photos click Add files button and choose photos File upload Add files Start upload Cancel upload Jesien Autumn Krajobraz 1 jpg 120 70 KB i Jesien Autumn Krajobraz 2 jpg 12 9KB Jesien Autumn Krajobraz 3 jpg 101 59 KB Close Picture 19 Add new photos The list of photos ready to upload there are thumbnails of photos names size and progress bar After clicking Start button upload starts Cancel button stops upload of given photo Button at the top pic 20 apply to all photos on the list 15 Add files Start upload Cancel upload Picture 20 Top buttons in Upload Photos Form Start upload button starts upload of all photos from the list Cancel upload button finishes upload of all photos immediately 2 4 3 Adding photos from external server To add photos from external server you need to provide one or a few urls to the photos incuding http prefix File uploadLinks Upload Info Remote data http www goodonegroup com images logos main bloomnet new png file url Picture 21 Adding external photo form Add button saves provided link together with photo thumbnail 2 4 4 Photo properties Each picture can have name title short description external link and status active or inactive To open Photo properties hover photo thumbnail on the list of photos in gallery Three options appear pic 22 16 Picture 22 Hovere
15. endable tree with whole skin structure After clicking selected file its content appears on the right and can be changed Edition doesn t require any tools can be performed directly in CMS Below the source of the file there 1s list of possible actions that can be performed on currently opened file Actions e Save file e Restore restores content of the file from previously saved version e Remove file Change name New file create new file 37
16. fields may not be available for given content type e Main pic main picture representing given content Language choose language of your content is used on pages with more than one language activated Active specify if content should be displayed on page or not can be used for temporal removal of given content from your site Home page specify if content should be displayed on Home Page Title content s title Intro introduction of the article Content article s content Display from date starting from given content should be displayed Display to date till when given content should be displayed Menus assign your content directly to available menu element To make article visible on page it needs to be assigned to Menu Connection between menu and content 1s described in more details in Chapter 3 2 Social meta tags In Content Management tab elements can have meta tags for social network sites Google and Facebook These tags affect search results positioning and sharing in social network sites i Google meta tags f Facebook meta tags Picture 12 G and Facebook buttons 2 3 1 Adding social meta tags Google After clicking Google meta tags button following form is displayed pic 13 12 Google meta tagSmeta tags influence Google search re G title G desc G keywords G author G copyright G application name Pic 13 Google meta tags form Fie
17. hoto 90 deg clockwise Close thumbnail editor and resign from all the changes Perform crop and save thumbnail 2 4 7 Change the order of photos in gallery To change order of photos in the gallery hover a photo pic 22 grab Move icon with mouse and move a photo to different position on the list See picture below 19 Gallery Pictire 33 Change order of photos in the gallery 2 5 Add Movie gallery Adding a Movie Gallery is similar to adding Articles In sidebar choose Plus icon beside Movie Gallery pic 3 After filling in and saving the form pic 11 user can add movies to the gallery 2 5 1 Add a movie to the gallery To add a movie click Add movies button Following form will be displayed pic 34 Paste link to the movie located in one on the three services e YouTube e Vimeo e DailyMotion Add movie Search Movie Url Url for a movie from Youtube Vimeo or DailyMotion Picture 34 Add movie form After pasting a link information about movie is automatically downloaded and displayed available for edition Movie data include e name subtitle description 20 9 thumbnails Search https www youtube com watch v 3SVCG68mgU8 Movie Url duc Url for a movie from Youtube Vimeo or DailyMotion Name Haloween 2013 w Good One Group Subtitle Intro Mormal text Bold talir Underline Small Thumb BEEN E acc your own thumb Picture 35 Movie data part 1 Thumb
18. ic 3 o All manage all types of contents o Articles manage articles Plus sign beside this element creates an Article o Photo Galleries manage photo galleries Plus sign beside this element creates a Photo Gallery o Movie Galleries manage movie galleries Plus sign beside this element creates a Movie Gallery o Contact Pages manage contact pages Plus sign beside this element creates a Contact Page e Site elements o Positions manager positions on site useful when putting site elements on the site o Reusable Blocks manages Reusable HTML blocks so pieces of HTML code that can represent anything o External script manage Javascript code included on your site e Settings o Admins administrator accounts creation access rights management o Languages manage languages of your site e Skins manage site appereance not available in base Mokio 1 4 Navigation panel Navigation panels is located at the top of the page Here you have a link to your site you can easily change your password Also information about your current position in administration panel breadcrumbs is displayed Apart from that there is a search box and logout button Picture 6 Navigation panel 1 5 Basic CMS actions CMS has a set of basic actions applicable to all blocks These are e add new element e edit copy e delete There are available on the list of elements pic 7 Actions Picture 7 Element
19. layed not active or outside of display from display to range are marked Type Content Y Content te Q Article Home 2 Article Home 1 Article Home 3 Article Home 4 Article Home 5 Article Home 6 Article 1 Article2 Article3 Article4 Contact Gallery Article Home 7 Article Home 8 Picture 44 Adding menu element Content type content o Url instead of content menu can point to external url Additionaly is is possible to set follow nofollow attribute of the link It informs browsers whether given link should be indexed or not Type Url T Url Follow Follow T Picture 45 Adding menu element Content type Url Parent parent menu element to which given menu element is assigned Path after choosing menu element s parent path through all the parents of this element is displayed e Target specifies the way given page should be opened There are following options available O current window menu content url will be opened in current window with current layout O new window menu content url will be opened in new window without any special layout O current window whole screen menu content url will be opened in current window without any special layout as a whole screen page e Reusable blocks reusable blocks assigned to See detailed description below and in chapter 4 and 5 3 2 Reusable blocks For every menu element and every site position it is possible to assign a
20. lds e G title meta tag page title G desc meta tag page description e G keywords meta tag page keywords e G author meta tag page author G copyright meta tag page copyright e G application name meta tag site name Facebook Facebook meta tags button leads to the following form with Facebook meta data Facebook meta tagsme s tags a F title Ftype Fimage F url F desc Picture 14 Facebook meta tags form Fields 13 F title title displayed on Facebooku F type shared site type F image path to picture representing shared site F url url of shared site F desc description of shared site 2 4 Photo Gallery 2 4 1 Add photos To add photos to gallery it needs to be created first In Content Management menu you need to choose plus sign beside Photo Galleries pic 5 After filling in and saving the form pic 11 user is redirected to edit view with possibility to add edit pictures to the gallery pic 15 Edit photo gallery Gallery Gallery Add external photo Galleryassie Picture 15 Gallery edit photos 14 Displays form for gallery data editoon pic 11 Picture 16 Edit gallery content Add external photo Displays form for adding a photo from external server only url is provided Picture 17 Add external photo button Displays form for adding photos from user s hard drive pic 19 Pictur
21. t from menu assign this page to menu element and set this menu element as invisible 3 1 Adding menu element To add new menu element click Add menu button above the list pic 42 25 Fields mode New menu element S Google meta tags Link to menu a link to the menu will be visible after saving the menu Lang english T Active Visible Name Type Content T content filter Q Article Home 1 Article Home 2 Article Home 3 Article Home 4 Article Home 5 Article Home 6 Article Anicle Article3 Artcle4 Contact Gallery Aviiala liama T ka Parent top 7 Path Target current window Y static slider footer default_bottom default_top modules slider Top Content Save Save and new Cancel Picture 43 Adding menu element Link to menu direct link to this menu element and its content available only in edit Active whether link will be available and will be pointing to assigned contents Visible whether given menu element should be displayed in given menu Name menu element name Type type of assigned content There are to options 26 O Content the list of all the contents not assigned to this menu element is displayed in the left box To assign contents to given menu element select and move given contents to right box Like Aricle Home 1 on picture 44 You can assign more that one content to given menu element all will be displayed Contents that are currently not disp
22. ted above the list pic 48 Active Title nro oo OOOO OO r l Source B I U EE e A M ze body p F Content k Source fe m B ZI U amp x x RE E Im Styles Normal Font li TR body p A Module slider footer default bottom default top positions Always displayed Display from Display to Save Save and new Cancel Picture 49 Adding Reusable block Fields 29 Active specify whether given elements should be displayed on the site or not Title element s title Intro introduction of the element e Content content of the element can be any HTML Module positions choose on which site positions given element should be displayed more than one can be chosen it means that for these positions the element will be available for choosing to be displayed in given menu Only if you choose Always displayed then the element doesn t need to be assigned anywhere Always displayed 1f set to true the element will be displayed on given position on each page of your site e Display from date starting from when the element should be displayed on the site e Display to date till when the element should be displayed on the site 5 Positions Reusable blocks are connected with positions on the page It is possible to specify any position and use it later in frontend layout Apart from that it is possible to specify separate
23. tive Last modified Actions computers x 22 09 2014 construction_company E3 08 10 2014 kindergarten E3 09 10 2014 restaurant vn 22 09 2014 travels 09 10 2014 Records from 1 to 5 all 5 Picture 59 Skins 9 1 Adding a skin Skin has defined structure see pic 61 below To create own skin click Add new skin button located above the list Following form is displayed pic 59 New skin File zip Wybierz plik Nie wybrano pliku Picture 60 Adding new skin 35 Valid zip structure Skin name templates default html erb layout html erb home html erb article html erb pic gallery html erb mov gallery html erb contact html erb list html erb javascript js javascript2 js picture jpg picture2 gif picture3 png Picture 61 Required skin structure Folders templates application views for each type of the content Available formats erb haml slim js JavaScript Required file extension js e css stylesheets Required file extension css e images pictures Available formats jpg png gif 9 2 Editing skin files You can edit every part of the skin 36 cont address bar 1 J cont brand un Go C LA fe lu RJ IS 1 J 18 portfolio item 1 une 37 13 active j 16 address 17 2 g 44 31 images 24 whitecolor Save file Restore Remove file Change name New file Picture 62 Edit skin main css file On the left there 1s a ext
Download Pdf Manuals
Related Search