Détails
Catégorie : Uncategorised
Affichages : 1534
Unge & VoksenPsykologisk Center
VESTERBROGADE 56, 1 - 1620 KØBENHAVN V
Kontakt os:
tel. +45 42 72 17 02
Hanne Søltoft: 6074 0602
Jette Bach Sørensen: 2617 1698
e-mail : Denne e-mail adresse bliver beskyttet mod spambots. Du skal have JavaScript aktiveret for at vise den.
Åbningstid:
mandag til fredag
09.00 - 17.00
lørdag Lukket
søndag Lukket

Détails
Catégorie : Uncategorised
Affichages : 1721

You can create easily a link button with the background color of your choice (148 colors available, details here). These buttons can be displayed in any part of your article or in any module with the type Custom HTML.

Procedure

You must toggle the wysiwyg editor and add the CSS class "color-XX" in the code of your link.

Example of a single link button

Example 01



<a class="color-lightgoldenrodyellow" href="URL of your link here" >Example 01</a>

Example 02 with another background color

Example 02



<a class="color-steelblue" href="URL of your link here" >Example 02</a>

Example 03 : a single button in all width

Example 03



<a class="color-lightgoldenrodyellow text-centered" href="URL of your link here" >Example 03</a>

Example 04 : a single button centered. You must include the button in a DIV with the CSS class "text-center".

Example 04


<div class="text-center" >
<a class="color-lightgoldenrodyellow" href="URL of your link here" >Example 04</a>
</div>

Example 05 : several links button centered.

Example 05 Example 06 Example 07 Example 08


<div class="text-center" >

<a class="color-lightgoldenrodyellow" href="URL of your link here" >Example 05</a>

<a class="color-steelblue" href="URL of your link here" >Example 06</a>

<a class="color-lightgoldenrodyellow" href="URL of your link here" >Example 07</a>

<a class="color-steelblue" href="URL of your link here" >Example 08</a>




</div>

148 background colors available :

maroon - #800000
brown - #a52a2a
rosybrown - #bc8f8f
sienna - #a0522d
saddlebrown - #8b4513
chocolate - #d2691e
sandybrown - #f4a460
peru - #cd853f
bisque - #ffe4c4
burlywood - #deb887
tan - #d2b48c
navajowhite - #ffdead
blanchedalmond - #ffebcd
wheat - #f5deb3
darkgoldenrod - #b8860b
goldenrod - #daa520
cornsilk - #fff8dc
whitesmoke - #f5f5f5
white - #ffffff
snow - #fffafa
mistyrose - #ffe4e1
seashell - #fff5ee
linen - #faf0e6
antiquewhite - #faebd7
oldlace - #fdf5e6
floralwhite - #fffaf0
beige - #f5f5dc
ivory - #fffff0
honeydew - #f0fff0
mintcream - #f5fffa
azure - #f0ffff
aliceblue - #f0f8ff
ghostwhite - #f8f8ff
lavenderblush - #fff0f5
lightgray - #f2f2f2
slategrey - #708090
lightslategrey - #778899
grey - #808080
dimgrey - #696969
darkslategrey - #2f4f4f
darkgrey - #444444
black - #000000
silver - #c0c0c0
lightgrey - #d3d3d3
gainsboro - #dcdcdc
tomato - #ff6347
orangered - #ff4500
coral - #ff7f50
lightsalmon - #ffa07a
darkorange - #ff8c00
orange - #ffa500
mediumvioletred - #c71585
deeppink - #ff1493
hotpink - #ff69b4
palevioletred - #db7093
pink - #ffc0cb
lightpink - #ffb6c1
rebeccapurple - #663399
magenta - #ff00ff
lavender - #e6e6fa
darkslateblue - #493d8b
slateblue - #6a5acd
mediumslateblue - #7b68ee
mediumpurple - #9370db
blueviolet - #8a2be2
indigo - #4b0082
darkorchid - #9932cc
darkviolet - #9400d3
mediumorchid - #ba55d3
purple - #800080
darkmagenta - #8b008b
fuchsia - #ff00ff
violet - #ee82ee
plum - #dda0dd
thistle - #d8bfd8
orchid - #da70d6
deepskyblue - #00bfff
blue - #0000ff
cyan - #00ffff
aquamarine - #7fffd4
turquoise - #40e0d0
mediumturquoise - #48d1cc
aqua - #00ffff
paleturquoise - #afeeee
lightcyan - #e0ffff
darkturquoise - #00ced1
cadetblue - #5f9ea0
powderblue - #b0e0e6
lightblue - #add8e6
skyblue - #87ceeb
lightskyblue - #87cefa
steelblue - #4682b4
dodgerblue - #1e90ff
lightsteelblue - #b0c4de
cornflowerblue - #6495ed
royalblue - #4169e1
midnightblue - #191970
navy - #000080
darkblue - #00008b
mediumblue - #0000cd
mediumslateblue - #7b68ee
darkred - #8b0000
firebrick - #b22222
red - #ff0000
indianred - #cd5c5c
lightcoral - #f08080
salmon - #fa8072
darksalmon - #e9967a
lightsalmon - #ffa07a
crimson - #dc143c
ocean - #39947f
olive - #808000
olivedrab - #6b8e23
yellowgreen - #9ACD32
darkolivegreen - #556b2f
greenyellow - #adff2f
chartreuse - #7fff00
lawngreen - #7cfc00
darkgreen - #006400
green - #008000
forestgreen - #228b22
lime - #00ff00
limegreen - #32cd32
lightgreen - #90ee90
palegreen - #98fb98
darkseagreen - #8fbc8f
seagreen - #2e8b57
mediumseagreen - #3cb371
springgreen - #00ff7f
mediumspringgreen - #00fa9a
mediumaquamarine - #66cdaa
lightseagreen - #20b2aa
teal - #008080
darkcyan - #008b8b
cyan - #00ffff
lightcyan - #e0ffff
peachpuff - #ffdab9
papayawhip - #ffefd5
moccasin - #ffe4b5
goldenrod - #daa520
gold - #ffd700
khaki - #f0e68c
lemonchiffon - #fffacd
palegoldenrod - #eee8aa
darkkhaki - #bdb76b
yellow - #ffff00
lightgoldenrodyellow - #fafad2
lightyellow - #ffffe0

Détails
Catégorie : Uncategorised
Affichages : 1753

You can create a block with an image on the top and the text of your choice below. I added a nicely hover effect. It's easy and there's 148 colors available for the background.

You have 2 possibilities :

  • You can display the block in a module. To obtain that, you must create a new module with the type Custom HTML. Choose the module position of your choice and paste the HTML code inside. If you choose the module position "top", "bottom" or "footer", you must add the Module class suffix "image-text" in Advanced options of your module. It's important to add an empty space on each side.
  • You can display the block in an article. To obtain that, edit your article and paste the HTML code inside.

Important : the HTML code and the result are the same.

Responsive feature

  • If the width of your screen is larger than 768 pixels (tablets and desktop) the image is on the top and the text below.
  • Under 768 pixels, the image and the text are inline.

Procedure

Edit your module or your article and disable the wysiwyg editor. Then, paste the HTML code and change the text and the path of your image.

Note : you can paste several times the code if you want display several images. I recommend you to use the Multli-column feature to obtain several columns.

Example in an article :

Example 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More

Example 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More





<div class="image-text-below one-half">
<img class="image-text-image" src="images/YOUR-IMAGE.jpg"  alt="" />
<div class="image-text-column">

<div>
<h2>Your Title</h2>

<p>Your text here</p>

<p>
<a  href="URL OF THE LINK" >Read More</a>
</p>

</div>
</div>
</div>






<div class="image-text-below one-half last">
.... Same code for the second image here ....
</div>

Example 02 with a background color (steelblue and lightgoldenrodyellow) :

Example 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More

Example 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More

Example 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More





<div class="image-text-below color-steelblue one-third">
<img class="image-text-image" src="images/YOUR-IMAGE.jpg"  alt="" />
<div class="image-text-column">

<div>
<h2>Your Title</h2>

<p>Your text here</p>

<p>
<a  href="URL OF THE LINK" >Read More</a>
</p>

</div>
</div>
</div>






<div class="image-text-below color-lightgoldenrodyellow one-third">
.... Same code for the second image here ....
</div>






<div class="image-text-below color-steelblue one-third last">
.... Same code for the third image here ....
</div>

148 colors available for the background. Add the name of your color in the code.

maroon - #800000
brown - #a52a2a
rosybrown - #bc8f8f
sienna - #a0522d
saddlebrown - #8b4513
chocolate - #d2691e
sandybrown - #f4a460
peru - #cd853f
bisque - #ffe4c4
burlywood - #deb887
tan - #d2b48c
navajowhite - #ffdead
blanchedalmond - #ffebcd
wheat - #f5deb3
darkgoldenrod - #b8860b
goldenrod - #daa520
cornsilk - #fff8dc
whitesmoke - #f5f5f5
white - #ffffff
snow - #fffafa
mistyrose - #ffe4e1
seashell - #fff5ee
linen - #faf0e6
antiquewhite - #faebd7
oldlace - #fdf5e6
floralwhite - #fffaf0
beige - #f5f5dc
ivory - #fffff0
honeydew - #f0fff0
mintcream - #f5fffa
azure - #f0ffff
aliceblue - #f0f8ff
ghostwhite - #f8f8ff
lavenderblush - #fff0f5
lightgray - #f2f2f2
slategrey - #708090
lightslategrey - #778899
grey - #808080
dimgrey - #696969
darkslategrey - #2f4f4f
darkgrey - #444444
black - #000000
silver - #c0c0c0
lightgrey - #d3d3d3
gainsboro - #dcdcdc
tomato - #ff6347
orangered - #ff4500
coral - #ff7f50
lightsalmon - #ffa07a
darkorange - #ff8c00
orange - #ffa500
mediumvioletred - #c71585
deeppink - #ff1493
hotpink - #ff69b4
palevioletred - #db7093
pink - #ffc0cb
lightpink - #ffb6c1
rebeccapurple - #663399
magenta - #ff00ff
lavender - #e6e6fa
darkslateblue - #493d8b
slateblue - #6a5acd
mediumslateblue - #7b68ee
mediumpurple - #9370db
blueviolet - #8a2be2
indigo - #4b0082
darkorchid - #9932cc
darkviolet - #9400d3
mediumorchid - #ba55d3
purple - #800080
darkmagenta - #8b008b
fuchsia - #ff00ff
violet - #ee82ee
plum - #dda0dd
thistle - #d8bfd8
orchid - #da70d6
deepskyblue - #00bfff
blue - #0000ff
cyan - #00ffff
aquamarine - #7fffd4
turquoise - #40e0d0
mediumturquoise - #48d1cc
aqua - #00ffff
paleturquoise - #afeeee
lightcyan - #e0ffff
darkturquoise - #00ced1
cadetblue - #5f9ea0
powderblue - #b0e0e6
lightblue - #add8e6
skyblue - #87ceeb
lightskyblue - #87cefa
steelblue - #4682b4
dodgerblue - #1e90ff
lightsteelblue - #b0c4de
cornflowerblue - #6495ed
royalblue - #4169e1
midnightblue - #191970
navy - #000080
darkblue - #00008b
mediumblue - #0000cd
mediumslateblue - #7b68ee
darkred - #8b0000
firebrick - #b22222
red - #ff0000
indianred - #cd5c5c
lightcoral - #f08080
salmon - #fa8072
darksalmon - #e9967a
lightsalmon - #ffa07a
crimson - #dc143c
ocean - #39947f
olive - #808000
olivedrab - #6b8e23
yellowgreen - #9ACD32
darkolivegreen - #556b2f
greenyellow - #adff2f
chartreuse - #7fff00
lawngreen - #7cfc00
darkgreen - #006400
green - #008000
forestgreen - #228b22
lime - #00ff00
limegreen - #32cd32
lightgreen - #90ee90
palegreen - #98fb98
darkseagreen - #8fbc8f
seagreen - #2e8b57
mediumseagreen - #3cb371
springgreen - #00ff7f
mediumspringgreen - #00fa9a
mediumaquamarine - #66cdaa
lightseagreen - #20b2aa
teal - #008080
darkcyan - #008b8b
cyan - #00ffff
lightcyan - #e0ffff
peachpuff - #ffdab9
papayawhip - #ffefd5
moccasin - #ffe4b5
goldenrod - #daa520
gold - #ffd700
khaki - #f0e68c
lemonchiffon - #fffacd
palegoldenrod - #eee8aa
darkkhaki - #bdb76b
yellow - #ffff00
lightgoldenrodyellow - #fafad2
lightyellow - #ffffe0

Détails
Catégorie : Uncategorised
Affichages : 5423

This template is fully compatible with the extension JComments.

After the installation of JComments, you must install the free template for this extension. More details here.

Example

Below this article, you can see an example of Jcomments.

{jcomments on}

Détails
Catégorie : Uncategorised
Affichages : 2041

I include this module in the package. It's very simple and work only with the video from Vimeo or Youtube.

 

Note : I recommend you to choose a video with the format 16/9 to obtain a perfect result.

Note : I recommend you to choose Vimeo because there isn't any publicity.

How to configure the Video module ?

- Install the module "mod_video.zip"

- Go to the Vimeo page (or Youtube) of your video and click on the button "share"

 

{gallery}video01.jpg{/gallery}

 

- Copy the ID of your video (only the number between the character / and ? ).

 

{gallery}video02.jpg{/gallery}

 

{gallery}video04.jpg{/gallery}



- Edit the module "video" on your admin and paste the video ID in the parameters. Choose the position "video" to display the video above the Content box (like on this page). Publish your module.

 

{gallery}video03.jpg{/gallery}



  1. Example No mask
  2. Testimonials
  3. Columns layout
  4. Animations