THEME SUBAQUATIC MANUAL

Transcription

1 THEME SUBAQUATIC MANUAL V1.0.0 For Wordpress D O L P H I N S W E B D E S I G N

2 Copyright DOLPHINS WEBDESIGN 1

3 INTRODUCTION 4 PRESENTATION 5 HOMEPAGE 5 POST LIST PAGE 6 POST PAGE 7 ATTACHMENT PAGE 8 WIDGETS 9 SIDEBAR WIDGETS 9 FOOTER WIDGETS 9 RESPONSIVE 11 SUBAQUATIC THEME CUSTOMIZATION 12 GENERAL SETTINGS 13 SIZE OF THE SITE AND RESPONSIVE 13 EXPORT 14 IMPORT 14 HEADER 15 HEADER SETTINGS AND LOGO 15 FOOTER 17 MENU 18 SOCIAL NETWORK ICONS 20 ENABLE SOCIAL NETWORK ICONS 20 ICONS 20 HOMEPAGE SLIDESHOW 21 ENABLE SLIDESHOW 21 SLIDESHOW IMAGE 21 HOMEPAGE TOP CONTENT 22 TITLE AND TEXT 22 BUTTON 22 HOMEPAGE CENTRAL CONTENT 23 ENABLE CENTRAL CONTENT 23 CENTRAL CONTENT COL (1 TO 5) 23 HOMEPAGE BOTTOM CONTENT 26 BOTTOM CONTENT CON (1 TO 3) 26 BOTTOM CONTENT BLOG COL 27 APPEARANCE HEADER 28 HEADER TITLE 28 HEADER SLOGAN 29 FORM AND BACKGROUND 29 APPEARANCE MENU 33 MENU COLOR 33 MENU FONT 34 APPEARANCE BODY 35 Copyright DOLPHINS WEBDESIGN 2

4 BODY APPEARANCE 35 CONTENT FRAME APPEARANCE 40 APPEARANCE FOOTER 45 FORM AND BACKGROUND 45 APPEARANCE HOMEPAGE 48 HOMEPAGE CENTRAL CONTENT BACKGROUND COLOR 48 HOMEPAGE CENTRAL CONTENT TITLE COLOR 48 HOMEPAGE CENTRAL CONTENT TEXT COLOR 48 APPEARANCE GENERAL 49 TITLE AND TEXT COLOR 49 GENERAL TITLES COLOR 49 GENERAL TEXT COLOR 49 GENERAL FOOTER TITLE COLOR 49 GENERAL FOOTER TEXT COLOR 49 FOOTER INFO TEXT COLOR 49 FIELDS AND FRAMES BACKGROUND COLOR 49 GENERAL TEXT FIELDS BACKGROUND COLOR 49 GENERAL FRAMES COLOR 50 FONTS 51 GENERAL FONTS 51 TITLE FONTS 51 FOOTER TITLE FONTS 51 BUTTONS 52 BUTTONS TOP BACKGROUND GRADIENT COLOR 52 BUTTONS BOTTOM BACKGROUND GRADIENT COLOR 52 BUTTONS TEXT COLOR 52 BUTTONS TOP BACKGROUND GRADIENT OVER COLOR 52 BUTTONS BOTTOM BACKGROUND GRADIENT OVER COLOR 52 BUTTONS TEXT OVER COLOR 53 Copyright DOLPHINS WEBDESIGN 3

5 Introduction Subaquatic is a high customisable Wordpress theme. You can change almost all colors and images (backgrounds, texts, over links, etc ) without having to modify the code, everything can be done by the administration interface. You can also edit de homepage at your convenience: Enable or disable content. Add photos and captions to de slideshow. Edit the feature content. Etc The Subaquatic theme is responsive, it adapts to the majority of screen sizes, including mobiles. Copyright DOLPHINS WEBDESIGN 4

6 Presentation Homepage 1) 2) 3) 4) 5) 6) 7) header (with slideshow). Social networks icons. Top homepage content. Central homepage content. Bottom homepage content. Footer. Footer infos. Copyright DOLPHINS WEBDESIGN 5

7 Post list page 1) Social networks icons. 2) Widgets sidebar. 3) Posts area. Copyright DOLPHINS WEBDESIGN 6

8 Post page 1) Post area. 2) Comments list area. 3) Comment form. Copyright DOLPHINS WEBDESIGN 7

9 Attachment page 1) Attachment. 2) Comment form. Copyright DOLPHINS WEBDESIGN 8

10 Widgets The Subaquatic theme has 7 Widget areas : 2 areas in the Widget sidebar. 5 areas in the footer. These areas are customizable by the administration panel : Appaerance > Widgets. Sidebar Widgets The first Widget area of the sidebar contains 3 Widgets by default : The search form. The archives. The metas. If you insert one or more Widgets in the first Widget area of the sidebar the default Widgets are disabled. The second Widget area of the sidebar is directly bellow the first zone and encompassed in the sidebar. The insertion of Widgets in the second area does not disable the default Widgets of the first area. Footer Widgets The footer contains 5 Widget areas as we have seen above. When we insert one or more Widgets in the footer Widget areas the Widget columns automatically adjust width according to the number of areas containing Widgets (see illustration bellow). Footer 5 Widgets Copyright DOLPHINS WEBDESIGN 9

11 Footer 4 Widgets Footer 3 Widgets Footer 2 Widgets Footer 1 Widget Copyright DOLPHINS WEBDESIGN 10

12 Responsive As we saw in the introduction, the theme is responsive, it adapts to the majority of screen sizes, including mobile. When the display area width reached 768 pixels the site content is organized in column and the classical menu is replaced by a mobile menu. When inserting image in a posts or customized pages, the pixel widths are converted in percentages and are scalable in width according to the display area. Copyright DOLPHINS WEBDESIGN 11

13 Subaquatic theme customization For access to the theme option customizations by the adinistration panel : Appearence > Subaquatic theme options. Subaquatic theme option panel Copyright DOLPHINS WEBDESIGN 12

14 General settings General settings of the theme. Size of the site and responsive Enable the responsive Enable or disable the responsive Web Design. If enabled, the site adapts to all width screen sizes. When the width is less than 780px the site menu converts to mobile menu. Default: Enable. Header and footer appearance Define the appearance of the site, header and footer in column or extended on the site width. 2 valeurs possibles: Extended. Normal. Default: Extended. Copyright DOLPHINS WEBDESIGN 13

15 Site max width Define the max width of the site. 2 values possible 960px and 1240px. Default: 1240px. Export Export code Allow you to export all settings of the theme (only the theme settings, the Wordpress settings are not considered). The Get export button shows the exported code of the current configuration in the text area just above the button. The Download export button allow you to export a file containing the exported code of current configuration. Import Import code Allow you to import a theme configuration previously exported. For import a configuration you must to paste the code of the backup configuration in the text area just above the Import button and click on the Import button. Copyright DOLPHINS WEBDESIGN 14

16 Header Header settings. Header settings and logo Header configuration Define the header configuration. Enable or disable the logo, the title and slogan. 4 values possible: Default: Logo, title and slogan are displayed. Title and slogan only. Title and slogan are displayed only, the logo disappears. Logo only: only the logo is displayed. Logo and slogan: Logo and slogan are displayed, the logo is above the slogan. Default: Default. Copyright DOLPHINS WEBDESIGN 15

17 Header logo Allow you to choose a customized header logo by the media library. Copyright DOLPHINS WEBDESIGN 16

18 Footer Site footer settings. Footer Copyright name text Define the Copyright name text just before the Copyright year text. If is not specified it is replaced by the site name. Footer «powered by» text Define the text just after the text «powered by». If is not specified it is replaced by Wordpress. Footer «powered by» link Define the text url just after the text «powered by». If is not specified it is replaced by wordpress.org. Footer replacement text If is specified, this text replaces the complete text of the footer xxx Copyright year Powered by Wordpress. Copyright DOLPHINS WEBDESIGN 17

19 Menu. Positioning and alignment settings of the header menu. Menu position Define the menu position in the header, 3 values possible in the list: Top of header. Above the slideshow. Copyright DOLPHINS WEBDESIGN 18

20 Bottom of header. Default: Above the slideshow. Menu align Define the alignment of the menu items, 2 values possible: Left. Right. Copyright DOLPHINS WEBDESIGN 19

21 Social network icons Social netwok share icon settings. Enable social network icons Define the display settings of the entirely of the social network icons. 3 values are possible: Home page and sidebar: Enable icons in the homepage and sidebar. Homepage only: Enable icons in the homepage only. Sidebar only: Enable icons in the sidebar only. Disable: icons are disabled in all pages. Default: Homepage and sidebar. Icons 14 social network icons are available: Facebook, Twitter, Google+, Live Journal, MySpace, Linkedin, Blogger, Digg, Pinterest, Tumblr, Orkut, Reddit, Stumbleupon and Rss. Each social network icon has 2 customizable options: Enable icon Enable or disable the social network icon of this option. Default: Only the following icons are enabled by default: Facebook, Twitter, Google, Linkedin and Rss. Share link Each icon has a share url link enabled by default. If you want to put another url as link in the icon of this option you must enter the new url in this text area, the default url will be replaced by the new url. Copyright DOLPHINS WEBDESIGN 20

22 Homepage slideshow Homepage slideshow settings. Possibility to add photos, links and captions. Enable slideshow Enable or disable the slideshow of the homepage. Default: Enable. Slideshow image The slideshow can be display up to 5 images. Each image has 3 customizable options: Slideshow image (1 to 5) Choose a picture for the slideshow in the media library. If no image is selected the image is not activated in the slideshow. Image caption (1 to 5) of the slideshow Write a caption for the current image, the caption appears at the bottom of the image in the slideshow. If the caption is not entered, no caption appears at the bottom of the image. Image link (1 to 5) of the slideshow Link url on the current image. If the link is not entered the image will not be linked (the link url will be #). Copyright DOLPHINS WEBDESIGN 21

23 Homepage top content Homepage top content settings : the title, the slogan and the button. Title and text Enable homepage top content Enable or disable the homepage top content: The title. The slogan. The button. Default: ON. Homepage top content title Define the text of the homepage top content title. Homepage top content text Define the text of the homepage top content slogan. Button Homepage top content button text Define the text of the homepage top content button. Copyright DOLPHINS WEBDESIGN 22

24 Homepage central content Homepage central content settings : 5 posts with photo. Enable central content Enable homepage central content Enable or disable the homepage central content. Default: ON. Enable homepage central content animate perspective Enable or disable the homepage central content animated perspective. Enabled / Disabled Default: ON. Central content col (1 to 5) The homepage central content has 5 posts each with 5 options that are as follows: Enable homepage central content (1 to 5) Enable or disable the current post of the homepage central content. Default: ON. Copyright DOLPHINS WEBDESIGN 23

25 Homepage central content image (1 to 5) upload Allow you to choose an image from the media library that will be displayed above the current post. Homepage central content title (1 to 5) Define the title of the current post of the homepage central content. homepage central content text (1 to 5) Define the text of the current post of the homepage central content. Copyright DOLPHINS WEBDESIGN 24

26 Homepage central content image and title link Each post of the homepage central content has a link on its image and its title, this text area allows you to enter the url of the link. This area can be empty. Copyright DOLPHINS WEBDESIGN 25

27 Homepage bottom content Homepage botom content settings : 3 posts customizable and one post with the excerpt of the 2 lasts blog posts. Enable homepage bottom content Enable or disable the homepage bottom content. Default: ON. Bottom content con (1 to 3) The homepage bottom content contains 3 posts customizable each with 4 options that are as follows: Enable homepage bottom content (1 to 3) Enable or disable the homepage bottom content (1 to 3). As the central content, when all items are not enabled, the post columns adapt automatically the width (including the blog post). Default: ON. Homepage bottom content title (1 to 3) Define the title of the homepage bottom current post (1 to 3). Copyright DOLPHINS WEBDESIGN 26

28 Homepage bottom content text (1 to 3) Define the text of the homepage bottom current post (1 to 3). Homepage bottom content title link (1 to 3) Define the title link of the homepage bottom current post (1 to 3). Bottom content blog col Settings of the blog excerpt blog column of the homepage bottom content. Enable homepage bottom blog Enable or disable the column that contains the homepage bottom blog excerpt. Default: ON. Homepage bottom blog title Define the blog excerpt column title of the homepage bottom content. Copyright DOLPHINS WEBDESIGN 27

29 Appearance - Header Define the appearance of the site header: Fonts, form, color and background image. Header title Define the header title Header title font Define the header title font. Default: Default (TeXGyreAdventor Regular). Info: throughout this manual we discuss customizing fonts, the font list it s always the same selectable. Header title color Define the header title color. Default: None (white). Copyright DOLPHINS WEBDESIGN 28

30 Header slogan Define the appearance of the header slogan. Header slogan fonts Define the header slogan fonts. Default: Default (CuprumFFU Regular). Header slogan color Define the header slogan color. Default: None (#eee). Form and background Define the form and the color or / and the image of the background header. header background color Define the header background color of the site. Default: None (#181716). Header background image Define the header background image of the site. The image is superimposed over the header background color. Default: None. Header background image position Define the start position of the header background image. (Only if an image is defined in the previous option header background image ). The possible values are (for a better understanding of this example, the header background repeat option has been set on No repeat so that only one background image is displayed, we will see this option further): For the example we use this image as background: Copyright DOLPHINS WEBDESIGN 29

31 Auto: The background image is automatically positioned relative to the top and left side of the header. Left top: Center top: Right top: Copyright DOLPHINS WEBDESIGN 30

32 Left center: Center: The background image appears behind the slideshow, its position is represented here by the red rectangle. Right center: Left bottom: Copyright DOLPHINS WEBDESIGN 31

33 Center bottom: Right bottom: Default: Auto. Header background repeat Define the header background repetition. The possible values are: Repeat: The background image is duplicated horizontally and vertically. No repeat: The background image appears only one time. Horizontal repeat: the background image is repeated horizontally throughout the width of the header. Vertical repeat: the background image is repeated vertically throughout the height of the header. Default: Repeat. Header background size Define the header background image size. The possible values are: Auto: The background image keeps its original size. Contain: The background image extends over the header height (keeping the original height/width proportions, the original image is not distorted). Cover: the background image extends to the header width (keeping the original height/width proportions, the original image is not distorted). Default: Auto. Copyright DOLPHINS WEBDESIGN 32

34 Appearance - Menu Define the header menu appearance: fonts and color. Menu color Define the menu color. Menu background color Define the menu background color. Default: black. Sub menu background color Define the sub menu background color. Default: # Menu item over background color Define the background color of a menu item Default: #c0ab4d. Copyright DOLPHINS WEBDESIGN 33

35 Menu font color Define the menu and sub menu font color. Default: (#ddd). Menu font color over Define the menu and sub menu font color over. Default: white. Menu item current page background color Define the Menu item current page background color. Default: (#333). Menu font Define the menu font. Default: Default (CuprumFFU Regular). Copyright DOLPHINS WEBDESIGN 34

36 Appearance Body Define the body appearance: Color and background image of the page. Body appearance Define the body appearance: Color and background image of the page. Body background color Define the body background color of the page. Default: None (#1b1b1b). Body background image Define the body background image of the site. The image is superimposed over the body background color. Default: None. Body background image position Define the start position of the body background image. (Only if an image is defined, by the previous option body background image ). The possible values are (for a better understanding of this example, the body background repeat option has been set on No repeat so that only one background image is displayed, we will see this option further): For the example we use this image as background: Copyright DOLPHINS WEBDESIGN 35

37 Auto: The background image is automatically positioned relative to the top and left side of the body. Left top: Center top: Copyright DOLPHINS WEBDESIGN 36

38 Right top: Left center: Center: Copyright DOLPHINS WEBDESIGN 37

39 Right center: Left bottom: Center bottom: Copyright DOLPHINS WEBDESIGN 38

40 Right bottom: Default: Auto. Body background repeat Define the body background repetition. The possible values are: Repeat: The background image is duplicated horizontally and vertically. No repeat: The background image appears only one time. Horizontal repeat: the background image is repeated horizontally throughout the width of the body. Vertical repeat: the background image is repeated vertically throughout the height of the body. Default: Repeat. Body background size Define the body background image size. The possible values are: Auto: The background image keeps its original size. Contain: The background image extends over the body height (keeping the original height/width proportions, the original image is not distorted). Cover: the background image extends to the body width (keeping the original height/width proportions, the original image is not distorted). Default: Auto. Copyright DOLPHINS WEBDESIGN 39

41 Content frame appearance Define the color and background image of the content frame. Content background color Define the content background color. Default: #1b1b1b. Content background image Define the content background image of the site. The image is superimposed over the content background color. Default: None. Content background image position Define the start position of the content background image. (Only if an image is defined, by the previous option content background image ). The possible values are (for a better understanding of this example, the content background repeat option has been set on No repeat so that only one background image is displayed, we will see this option further): For the example we use this image as background: Copyright DOLPHINS WEBDESIGN 40

42 Auto: The background image is automatically positioned relative to the top and left side of the body. Left top: Center top: Copyright DOLPHINS WEBDESIGN 41

43 Right top: Left center: Center: Copyright DOLPHINS WEBDESIGN 42

44 Right center: Left bottom: Center bottom: Copyright DOLPHINS WEBDESIGN 43

45 Right bottom: Default: Auto. Content background repeat Define the content background repetition. The possible values are: Repeat: The background image is duplicated horizontally and vertically. No repeat: The background image appears only one time. Horizontal repeat: the background image is repeated horizontally throughout the width of the content. Vertical repeat: the background image is repeated vertically throughout the height of the content. Default: Repeat. Content background size Define the body background image size. The possible values are: Auto: The background image keeps its original size. Contain: The background image extends over the content height (keeping the original height/width proportions, the original image is not distorted). Cover: the background image extends to the content width (keeping the original height/width proportions, the original image is not distorted). Default: Auto. Enable content frame fixed background Enable or disable the fixed background. When this option is activated, if a background image is defined it remains fixed at the same position even if the vertical scrollbar of the content is moved. Default: OFF. Copyright DOLPHINS WEBDESIGN 44

46 Appearance Footer Define the footer appearance of the site: fonts, form, colors and background image. Form and background Define the form and color or / and background image of the footer. Footer background color Define the footer background color of the site. Default: None (#181716). Footer background image Define the footer background image of the site. The image is superimposed over the content background color. Default: None. Footer background image position Define the start position of the footer background image. (Only if an image is defined, by the previous option footer background image ). The possible values are (for a better understanding of this example, the footer background repeat option has been set on No repeat so that only one background image is displayed, we will see this option further): For the example we use this image as background: Auto: The background image is automatically positioned relative to the top and left side of the footer. Left top: Copyright DOLPHINS WEBDESIGN 45

47 Center top: Right top: Left center: Center: Right center: Left bottom: Copyright DOLPHINS WEBDESIGN 46

48 Center bottom: Right bottom: Default: Auto. Footer background repeat Define the footer background repetition. The possible values are: Repeat: The background image is duplicated horizontally and vertically. No repeat: The background image appears only one time. Horizontal repeat: the background image is repeated horizontally throughout the width of the footer. Vertical repeat: the background image is repeated vertically throughout the height of the footer. Default: Repeat. Footer background size Define the footer background image size. The possible values are: Auto: The background image keeps its original size. Contain: The background image extends over the footer height (keeping the original height/width proportions, the original image is not distorted). Cover: the background image extends to the footer width (keeping the original height/width proportions, the original image is not distorted). Default: Auto. Footer info background color Define the footer info background color of the site. Default: None (black). Copyright DOLPHINS WEBDESIGN 47

49 Appearance Homepage Define the general settings of the homepage. Homepage central content background color Define the posts background color of the homepage central content. Default: #1d1d1d. Homepage central content title color Define the title color of the homepage central content. Default: None (#c0ab4d). Homepage central content text color Define the text color of the homepage central content. Default: None (#bbb). Copyright DOLPHINS WEBDESIGN 48

50 Appearance General Define the general appearance settings of the site : titles color, text color, button color, fonts, Title and text color Define the colors of the titles and texts of the site. General titles color Define the color of all titles of the site but other parts too : The buttons border when hovering the mouse. Hover links. Hover calendar items. Default: None (#c0ab4d). General text color Define the general text color of the site. Default: None (#bbb). General footer title color Define the general title color of the footer. Default: None (#c0ab4d). General footer text color Define the general text color of the footer. Default: None (#bbb). Footer info text color Define the text color of the footer info area. Default: None (#bbb). Fields and frames background color Define the background color of text input fields and frames. General text fields background color Define the background color of text input fields. Text fields of the sidebar (Search) Copyright DOLPHINS WEBDESIGN 49

51 Comments text fields Default: None (#111). General frames color Define the frames color. Complete sidebar Post footer frame Comment frame Copyright DOLPHINS WEBDESIGN 50

52 Comment form frame Attachment header frame Default: None (black). Fonts Define the site fonts. General fonts Define the general fonts of the site. Title fonts Define the font of all titles of the site. Footer title fonts Define the footer title font of the site. Copyright DOLPHINS WEBDESIGN 51

53 Buttons Define the button colors of the site. Buttons top background gradient color Define the top color gradient from the buttons of the site. Default: None (#444). Buttons bottom background gradient color Define the bottom color gradient from the buttons of the site. Default: None (black). Buttons text color Define the button text color. Default: None (#ccc). Buttons top background gradient over color Define the top over color gradient from the buttons of the site. Default: None (#333). Buttons bottom background gradient over color Define the bottom over color gradient from the buttons of the site. Copyright DOLPHINS WEBDESIGN 52

54 Default: None (noir). Buttons text over color Define the button text over color. Default: None (#ccc). Copyright DOLPHINS WEBDESIGN 53