If you have been prodding around in the skin editor you may have noticed that when you select an element you have under the Advanced tab CSS Classes and CSS styles.
Well for now looking at just styles you can use CSS code to add some extra visual enhancements.
If you select the map element this has no way of adding a border or radius. So what you would do is add a rectangle element and make the map a child of this.
You could then give it a border and rounded corners etc. However with CSS you can do this directly in the map element.
I get all my code from the W3Schools website http://www.w3schools.com/css/
Add a Map to a skin.
In the W3Schools website look down the left hand side for Rounded Corners.
Under the first example you will see: border-radius: 25px;.
Copy and paste into the map elements CSS Styles text field but change to 10px.
Click the Live Preview button or publish the project and you will see the Map now has rounded corners.
Now go back to the W3Schools website and look for CSS Borders.
Under the first example you will need to copy and paste both border-style: solid; and border-width: 5px;.
Back in the skin and under the CSS Styles for the map add the code. Just leave a space in-between each peace of code so it will look like this:
Code: Select all
border-radius: 10px; border-style: solid; border-width: 5px;
You can add further code: border-color: #98bf21; to specify colour, just copy and paste and add to the end of the code string, remembering to leave a space.
You will now have a lime green border.
Now have look at the CSS3 Shadow Effects.
This will allow you to add a drop shadow to the Map or a text box/rectangle as well as shadow effect to text in a text box.
The page starts off with text effects then further down shows the drop shadow effects for boxes.
Add a text box to your skin, now on the W3Schools website look for CSS3 Gradients.
Under the first example you can add to the CSS Styles to your text box:
Code: Select all
background: -webkit-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue);
Preview or Publish and you will see a white background?????
However in the text box properties deselect Background: Enabled.
Now Preview, you will see the colours for the CSS background. Just change your text colour to white so it is clear to read.
Of course you can add the CSS to the text box to give it a drop shadow as well as all the other CSS tricks above.
Note: Not all CSS code will work with all elements.