Template Sunset warc : INSTALLATION

Line 1Open WebAcappella Responsive and import a project : Sauvegarde warc template sunset.waprj

Line 2Upload the plugins file on your server via your FTP client.In this folder you can find the menuhide, AnimEffect, animatedHeadline and pricingTable folders.You can replace all images in the img folder with yours. Be careful to keep the same file names.

Note :

rgba code corresponds to rgb + opacity. To get your rgb code, enter your hexa color code in Google’s search bar.The last value corresponds to opacity. 0 = transparent, 1 = Opaque. 0.5 = half transparent 


Line 3.1Personnalisation du menu

HTML code is placed in a subpage. This way you can apply your modifications to all your pages

Here is the part of menu html code that you can change:

Line 3.2Customization of the menu css

- Line 30 : menu banner color*- Line 80 : menu tabs font in mobile version - Line 81 : menu tabs color in mobile version- Line 98 : closing icons color appearing on the menu for small screens - Line 164 : background color for rectangle under menu links for small screens - Line 174 : menu tabs font - Line 175 : menu tabs color- Line 178 : menu separators color in mobile mode- Line 181 : menu tabs color when overview

ACCUEILPHOTOGRAPHIESSERVICESBLOGCONTACT

Replace pages names with yours.Be careful, you must name your pages in the « Nom du fichier HTML » part of the page properties.

Tab name (apparent on the site)

Line 4.1Customization of the Animated sentence

You will find the following code in the HTML elements placed in the page:

Line 4.2Customization of the Animated sentence CSS

To customize the animated sentence even more, open the style.css file (Plugins => animatedHeadline =>css)

- Line 23 : text font - Line 24 : text color- Line 25 : text size- Line 26 : text weight- Line 31 : text position- Line 37 : space between the lines (if your text is long, it may be displayed on two lines, according to the screen)- Line 48 : scrolling words weight- Line 586 : loading trait color for loading-bar effect

Template WebAcappella Responsive

SOLEILPLAGESUNSET

Change effect by changing name (see effects list in pdf)

Change unmovable part of sentence

Change scrolling words

Line 5Customization of the Anim Effect titles

You will find the following code in the HTML elements placed in the page:

The list of effects that you can use is in the file : Liste des effets du plugin Anim Effect.pdf

EFFET ANIMATION WEBACAPPELLA

- In red : effect’s name. Open the effects list and copy it replacing this one.

- In yellow : change title font- In green : choose text alignment, among left,

center, or right.- In blue : title size- In purple : title color- In turquoise : your title (capital or lowercase

letters)

Line 6.1Customization of the pricing table

In the HTML element placed on the services, each pricing block is delimited by the following marks :

Basic 100€ 10 photos

2 heures de shooting 10 photos au format numérique 10 photos imprimées A6 1 photo imprimée A4 1 photo imprimée A4

Commander

Change pricing block header information

Change pricing block information line per line

If you want to add a line of information you just have to duplicate the line placed abov.

Change page link when clicking on the button

Change button text

Line 6.2

Customization of the pricing table CSS

To customize even more the Pricing Table plugin, open the style.css file (Plugins => pricingTable => css)

You have css code for each princing block. You can easily know where you are thanks to this mark: /*--bloc prix 1--*/We then indicate you what you can change on block 1 (yellow one), and you will just have to do the same for the two other princing blocks.

- Line 79 : pricing block title font - Line 80 : pricing block title size- Line 81 : pricing block title weight- Line 82 : pricing block title color- Line 83 : padding is the spac around an element. First value is for bottom-top title space (don’t change the second value) - Line 84 : pricing block background color- Line 85 : corner curve

- Line 88 : price part background color- Line 93 : price font- Line 95 : price size- Line 96 : price color- Line 99 : font for small text under price - Line 100 : size for small text under price - Line 101 : color for small text under price

- Line 105 : button color- Line 107 : button text color- Line 112 : background color for button space- Line 113 : corners for button space

This code is common to the three pricing blocks :

- Line 196 : list part background color - Line 197 : list text position- Line 201 : list font- Line 203 : list size- Line 204 : list color

Line 7.1Customization of the Follow Mouse gallery

Here’s what you can change in the html code. You have the following code for each image :

Mosaique Follow Mouse WARCnon suscipit leo fringilla non suscipit leo fringilla

molestie

In red : image name appearing in big when clicking on the thumbnail

In green : thumbnail image name

In yellow : image title appearing when overview

In purple : small descriptif text appearing when overview

Line 7.2Customization of the css

In the style.css file (FollowMouseHover => css => style.css) you can change colors for the filter appearing when overview.

- Line 61 : change filter color when overview* (rgba code corresponds to rvb code, the last value being for opacity, 0 = transparent. 0,9 = very opaque)

- Line 71 : change descriptive text color- Line 72 : change descriptive text alignment (center, left, right)- Line 73 : text alignment font size (“em“ value is more precise, but you can choose to use a “px“ value)- Line 76 : title color- Line 77 : title font size (“em“ value is more precise, but you can choose to use a “px“ value) - Line 79 : change title alignment (center, left, right)

Finally, to change background color in diaporama mode, open the chocolat.css file (FollowMouseHover => css => chocolat.css) change color inscribed in line 16.

Customization of the blogLine 8.1 You will find the following code in the HTML elements placed in the page. Here is the corresponding code for each news:

First row of news is made of 3 news. The code allowing to display this is inscribed between the comments

Line 8.2Personnalisation du style css du blog

Everything is the style.css file (plugins => actuHover => css)

- Line 32 : change news tag font (import Google font in the page properties). - Line 33 : change news tag size- Line 34 : change space between letters for news tag font - Line 35 : change news tag font color- Line 36 : change news tag color

- Line 41 : change news title font (import Google font in the page properties).- Line 42 : change news title font size- Line 43 : change news title font color

- Line 48 : change news text font size - Line 49 : change news text font color- Line 50 : change space between the lines for news text

- Line 56 : change news boxes color - Line 59 : change news boxes shadow color when overview. rgba code corresponds to rvb code, the last value being for opacity.

Step 8.3In the images folder you will find the plugin images (plugins => actuHover => images). Replace them with your own images.

If you use images with a different format, the news box will auotmatically adapt and will then be bigger or smaller than the others. Each news box can have a specific size, which is determined by the images dimensions.

Images dimensions that we recommend: 640 x 430, 72dpi, 2 Mo maximum These dimensions are provided for information only, and you can perfectly have slightly different sizes.

Customization of sharing buttonsLine 9.1You will find the following code in the HTML elements placed in the page:

All social networks icons are in the icons folder (plugins => boutonsPartage => icons). You can easily change or replace them. For easier manipulation, be careful to keep the same file name.

The plugin contains a lot of social networks icons, don’t put them all ! Choose the social networks on which you are active and delete useless code lines.

Line 9.2Customization of sharing buttons css style

To customize the plugin even more, open the style.css file (Plugins => boutonsPartage => css)

- Line 9 : per defaut icons size- Line 10 : space between icons- Line 22 : per defaut icons opacity- Line 25 to 29 : zoom power




Customization of Facebook comments Step 10Please refer to this tutorial in order to know how to get and customize your code: https://www.tontonduweb.com/des-commentaires-sous-vos-articles-dans-warc-grace-a-facebookYou will not need to get the first part of the Facebook code, which is common to all, but only the little piece of code to be placed in an HTML element.

Customization of the retour buttonStep 11.1You will find the following code in the HTML elements placed in the page:

RETOUR

Change URL of destination pageChange button text

https://www.tontonduweb.com/des-commentaires-sous-vos-articles-dans-warc-grace-a-facebookhttps://www.tontonduweb.com/des-commentaires-sous-vos-articles-dans-warc-grace-a-facebook

Line 11.2Customization of the retour button css style

To customize even more the Retour button, open the style.css file (plugins => pluginBouton)

- Line 55 : button corners- Line 56 : button background color- Line 57 : default button border color and thickness- Line 58 : text color- Line 59 : text alignment (left, right ou center) - Line 60 : text size- Line 62 : button size - Line 77 : button background color when overview- Line 78 : button border color and thickness - Line 79 : text color when overview - Line 83 : symbol code (here an arrow pointing to the left). To change this symbol, you can refer to this list: http://astronautweb.co/

snippet/font-awesome/

http://astronautweb.co/snippet/font-awesome/http://astronautweb.co/snippet/font-awesome/