Discussion

Difference between revisions of "Reference:FlexiSkin"

(→‎Skin changes)
(Tag: 2017 source edit)
 
FlexiSkin allows you

Extension: FlexiSkin


Overview
Description: allows to customize the skin of
your wiki. Change
the
design of your
wiki
via the backend and with a preview function
.
Choose between different colours, insert your own logo and decide if you want to have the navigation at the left or right side. Where do I find Flexiskin?[edit | edit source]

Flexiskin is a special page. The most common way to open the Flexiskin is by clicking on "Skin" at the admin navigation.

skin1.jpg
FlexiSkin1.jpg

By clicking on "Skin" you will be taken to dialogue where you can add a new skin:

FlexiSkin2.jpg

Enter title and description of the new skin. You can also choose a related template at the dropdown and click on "Ok" to create the new skin. 

createSkin.jpg
EditFlexiSkin.jpg

Adapting the skin[edit | edit source]

On the left hand side you will find the edit functionalities on the right hand side there is a preview.

pinkflexiskin.jpg

Don't forget to click the "Save" button at the top of the editor area.

saveNewSkin.jpg

Attention: The Reset button only resets the last set value.

To close the skin editor click on "close". Please confirm to the pop-up to really close the editor.

Skin changes[edit | edit source]

The following changes for the skin are possible with Flexiskin:

  • General: Change the background in the wiki. Just choose one of the colours or enter a vertain value.

You can also insert an image as background image.

BckGimage.jpg newwindow.jpg

Upload the image you want to have in the background and specify if you want to have repeats (no repeat, horizontal, vertical repeat).

NoRepeat.jpg

HorizontalR.jpg

After you uploaded the image please click on "save" at the top of the skin editor.
  • Header/Logo: At the bottom of the editor on the left you will find "Header". Here you can upload an individual logo. To see changes in the preview please click on "save" at the top.
Attention: The logo area in BlueSpice is defined with 276 x 60px. You can also change the logo in the admin settings (click on "settings" in the admin navigation) and enter the logo path in the submenu "Flexiskin".
  • Position and size: Choose wether the navigation shall appear left or right next to the content. Position means that you can display the content left, center or right in the browser. You can also change the complete width.
    Default for the skin is navigation on the left, content in the middle and width 1000px.

Activating a skin[edit | edit source]

To finally activate a new skin please select the skin at the overview of skins on the special page by clicking on it.

active.jpg

Examples:

  • PinkSkin

  • YellowSkin

  • GreenSkin

Delete a skin[edit | edit source]

You want to delete a skin completely? Mark the skin in the overview and click on the "remove" symbol. Please confirm that you want to remove the skin.

RemoveSkin.jpg

Or you can use "delete" symbol. Please confirm that you want to delete the skin. 

DeleteSkin.jpg
Try it![edit | edit source]

DemoBlueSpice

State: stable Dependency: MediaWiki
Developer: HalloWelt License: GPL v2+
Type: MediaWiki Category: Skinning
Edition: BlueSpice Cloud
For more info, visit Mediawiki.

Features[edit source]

FlexiSkin allows you to customize the skin of your wiki. Choose between different colors or fonts and insert your own logo.

Usage / Features[edit | edit source]

  • dedicated special page Special:Flexiskin
  • allows setting of various out of the box themes
  • allows definition of custom themes
  • fields with color picker
  • font type, size and color for headings and content
  • logo / favicon upload via drag&drop 
__TOC__
            
            
            
            '''FlexiSkin''' allows you {{BSExtensionInfobox
            
            |desc=allows to customize the skin of your wiki. Change the design of your wiki via the backend and with a preview function. Choose between different colours, insert your own logo and decide if you want to have the navigation at the left or right side.
            
            
            
            ==Where do I find Flexiskin?==
            
            Flexiskin is a special page. The most common way to open the Flexiskin is by clicking on "Skin" at the admin navigation.
            
            
            
            ::: [[File:skin1.jpg|500x283px]]
            
            ::: [[File:FlexiSkin1.jpg|500x83px]]
            
            By clicking on "Skin" you will be taken to dialogue where you can add a new skin:
            
            
            
            ::: [[File:FlexiSkin2.jpg|500x283px]]
            
            Enter title and description of the new skin. You can also choose a related template at the dropdown and click on "Ok" to create the new skin. 
            
            
            
            ::: [[File:createSkin.jpg|500x282px]]
            
            ::: [[File:EditFlexiSkin.jpg|500x285px]]
            
            
            
            ===Adapting the skin=== 
            
            
            
            On the left hand side you will find the edit functionalities on the right hand side there is a preview.
            
            
            
            ::: [[File:pinkflexiskin.jpg|500x253px]]
            
            Don't forget to click the "Save" button at the top of the editor area.
            
            
            
            ::: [[File:saveNewSkin.jpg|500x253px]]
            
            Attention: The '''Reset''' button only resets the last set value.
            
            
            
            To close the skin editor click on "close". Please confirm to the pop-up to really close the editor.
            
            
            
            
            
            ===Skin changes===
            
            The following changes for the skin are possible with Flexiskin:
            
            
            
            * '''General''': Change the background in the wiki. Just choose one of the colours or enter a vertain value.
            
            
            
            You can also insert an image as background image.
            
            
            
            [[File:BckGimage.jpg|500x242px]] [[File:newwindow.jpg|500x255px]]
            
            
            
            Upload the image you want to have in the background and specify if you want to have repeats (no repeat, horizontal, vertical repeat).
            
            
            
            [[File:NoRepeat.jpg|500x256px]]
            
            
            
            [[File:HorizontalR.jpg|500x249px]]
            
            
            
            After you uploaded the image please click on "save" at the top of the skin editor. <br /><br /><br />
            
            
            
            * '''Header/Logo''': At the bottom of the editor on the left you will find "Header". Here you can upload an individual '''logo'''. To see changes in the preview please click on "save" at the top.
            
            
            
            Attention: The logo area in BlueSpice is defined with 276 x 60px.
            
            You can also change the logo in the admin settings (click on "settings" in the admin navigation) and enter the logo path in the submenu "Flexiskin".
            
            
            <br /><br /><br />
            
            
            
            * '''Position and size''': Choose wether the navigation shall appear left or right next to the content. Position means that you can display the content left, center or right in the browser. You can also change the complete width. <br />Default for the skin is navigation on the left, content in the middle and width 1000px.
            
            
            
            ==Activating a skin==
            
            To finally activate a new skin please select the skin at the overview of skins on the special page by clicking on it.
            
            
            
            
            
            
            
            ::: [[File:active.jpg|500x272px]]
            
            Examples:
            
            
            
            
            <gallery>
            
            File:Pink.jpg|PinkSkin
            
            File:Yellow.jpg|YellowSkin
            
            File:Green.jpg|GreenSkin
            
            
            </gallery>
            
            
            
            ==Delete a skin==
            
            You want to delete a skin completely? Mark the skin in the overview and click on the "remove" symbol. Please confirm that you want to remove the skin.
            
            
            
            ::: [[File:RemoveSkin.jpg|500x299px]]
            
            Or you can use "delete" symbol. Please confirm that you want to delete the skin. 
            
            
            
            ::: [[File:DeleteSkin.jpg|500x298px]]
            
            ==Try it!==
            
            [https://en.demo.bluespice.com/wiki/Main_Page DemoBlueSpice]the wiki.
            
            |status=stable
            
            |developer=HalloWelt
            
            |type=MediaWiki
            
            |edition=BlueSpice Cloud
            
            |active=Yes
            
            |compatible=MediaWiki
            
            |category=Skinning
            
            |license=GPL v2+
            
            |docu=https://en.wiki.bluespice.com/wiki/Manual:Extension/FlexiSkin
            
            }}
            
            '''FlexiSkin''' allows you to customize the skin of your wiki. Choose between different colors or fonts and insert your own logo.
            
            
            
            ==Usage / Features==
            
            
            
            *dedicated special page ''Special:Flexiskin''
            
            *allows setting of various out of the box themes
            
            *allows definition of custom themes
            
            *fields with color picker
            
            *font type, size and color for headings and content
            
            *logo / favicon upload via drag&drop
(60 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
__TOC__
+
{{BSExtensionInfobox
 +
|desc=allows to customize the skin of the wiki.
 +
|status=stable
 +
|developer=HalloWelt
 +
|type=MediaWiki
 +
|edition=BlueSpice Cloud
 +
|active=Yes
 +
|compatible=MediaWiki
 +
|category=Skinning
 +
|license=GPL v2+
 +
|docu=https://en.wiki.bluespice.com/wiki/Manual:Extension/FlexiSkin
 +
}}
 +
'''FlexiSkin''' allows you to customize the skin of your wiki. Choose between different colors or fonts and insert your own logo.
  
−
'''FlexiSkin''' allows you to customize the skin of your wiki. Change the design of your wiki via the backend and with a preview function. Choose between different colours, insert your own logo and decide if you want to have the navigation at the left or right side.
+
==Usage / Features==
  
−
==Where do I find Flexiskin?==
+
*dedicated special page ''Special:Flexiskin''
−
Flexiskin is a special page. The most common way to open the Flexiskin is by clicking on "Skin" at the admin navigation.
+
*allows setting of various out of the box themes
−
 
+
*allows definition of custom themes
−
::: [[File:skin1.jpg|500x283px]]
+
*fields with color picker
−
::: [[File:FlexiSkin1.jpg|500x83px]]
+
*font type, size and color for headings and content
−
By clicking on "Skin" you will be taken to dialogue where you can add a new skin:
+
*logo / favicon upload via drag&drop
−
 
 
−
::: [[File:FlexiSkin2.jpg|500x283px]]
 
−
Enter title and description of the new skin. You can also choose a related template at the dropdown and click on "Ok" to create the new skin. 
 
−
 
 
−
::: [[File:createSkin.jpg|500x282px]]
 
−
::: [[File:EditFlexiSkin.jpg|500x285px]]
 
−
 
 
−
===Adapting the skin===
 
−
 
 
−
On the left hand side you will find the edit functionalities on the right hand side there is a preview.
 
−
 
 
−
::: [[File:pinkflexiskin.jpg|500x253px]]
 
−
Don't forget to click the "Save" button at the top of the editor area.
 
−
 
 
−
::: [[File:saveNewSkin.jpg|500x253px]]
 
−
Attention: The '''Reset''' button only resets the last set value.
 
−
 
 
−
To close the skin editor click on "close". Please confirm to the pop-up to really close the editor.
 
−
 
 
−
 
 
−
===Skin changes===
 
−
The following changes for the skin are possible with Flexiskin:
 
−
 
 
−
* '''General''': Change the background in the wiki. Just choose one of the colours or enter a vertain value.
 
−
 
 
−
You can also insert an image as background image.
 
−
 
 
−
[[File:BckGimage.jpg|500x242px]] [[File:newwindow.jpg|500x255px]]
 
−
 
 
−
Upload the image you want to have in the background and specify if you want to have repeats (no repeat, horizontal, vertical repeat).
 
−
 
 
−
[[File:NoRepeat.jpg|500x256px]]
 
−
 
 
−
[[File:HorizontalR.jpg|500x249px]]
 
−
 
 
−
After you uploaded the image please click on "save" at the top of the skin editor. <br /><br /><br />
 
−
 
 
−
* '''Header/Logo''': At the bottom of the editor on the left you will find "Header". Here you can upload an individual '''logo'''. To see changes in the preview please click on "save" at the top.
 
−
 
 
−
Attention: The logo area in BlueSpice is defined with 276 x 60px.
 
−
You can also change the logo in the admin settings (click on "settings" in the admin navigation) and enter the logo path in the submenu "Flexiskin".
 
−
<br /><br /><br />
 
−
 
 
−
* '''Position and size''': Choose wether the navigation shall appear left or right next to the content. Position means that you can display the content left, center or right in the browser. You can also change the complete width. <br />Default for the skin is navigation on the left, content in the middle and width 1000px.
 
−
 
 
−
==Activating a skin==
 
−
To finally activate a new skin please select the skin at the overview of skins on the special page by clicking on it.
 
−
 
 
−
 
 
−
 
 
−
::: [[File:active.jpg|500x272px]]
 
−
Examples:
 
−
 
 
−
<gallery>
 
−
File:Pink.jpg|PinkSkin
 
−
File:Yellow.jpg|YellowSkin
 
−
File:Green.jpg|GreenSkin
 
−
</gallery>
 
−
 
 
−
==Delete a skin==
 
−
You want to delete a skin completely? Mark the skin in the overview and click on the "remove" symbol. Please confirm that you want to remove the skin.
 
−
 
 
−
::: [[File:RemoveSkin.jpg|500x299px]]
 
−
Or you can use "delete" symbol. Please confirm that you want to delete the skin. 
 
−
 
 
−
::: [[File:DeleteSkin.jpg|500x298px]]
 
−
==Try it!==
 
−
[https://en.demo.bluespice.com/wiki/Main_Page DemoBlueSpice]
 
Retrieved from "https://bs3-en.wiki.bluespice.com/w/index.php?title=Reference:FlexiSkin&oldid=26931"

Attachments

Discussions

…