Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Copy of Taking Control of the CSS Editor

Help on how to use the CSS editor.
by

Meaghan Hendricks

on 20 May 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Copy of Taking Control of the CSS Editor

CHANGING SHAPE COLOR
CHANGE TEXT BACKGROUND COLOR
CHANGING
LINE/ARROW COLOR
CHANGING FRAME COLOR
CHANGING SHAPE TRANSPARENCY
Taking Control of
the CSS Editor

HELPFUL HINTS
Look for the sections that control the frame settings.
{they begin with
frame.
}
Then find the following two lines:
gradStartColor: #number;
gradeEndColor: #number;
The number is the hex code of the color assigned to the frame. To change the color you need to change this number.
gradStartColor: #
number
;

Click
Apply.
Tip!
Try using a different color for the start and end colors.
Lines and arrows will always share the same colors.
{they begin with
line-arrow.style
}
Again look for the following sections and change the number to the desired hex code.
gradStartColor: #
number
;
gradEndColor: #
number
;
Also change the hex code to the line:
color: #
number
;
You can use up to 5 styles!
For shapes, follow the same steps as you would for lines and arrows.
{these sections begin with
shape.style
}
Remember to click
apply.
CHANGING BORDER COLOR
CHANGING BORDER SIZE
THINGS TO KEEP IN MIND
A border will not show up on a line even though it will show up on the arrow.
Depending on the thickness, the border will cause a rectangle to have rounded corners.
Borders will scale when you re-size an object.
A line will NOT show transparency even though an arrow will.
Again go to the sections that control the shape settings.
{you know the drill}
This time you are going to add the following lines:
gradStartAlpha: number between 0-1;
gradEndAlpha: number between 0-1;
For this section you are going to use decimal points to specify the amount of transparency.
{
.5
=
50%
transparent,
.6
=
60%
, & so on}

Follow the same steps for frames and arrows.
Try experimenting with different levels of transparency for gradStartAlpha & gradEndAlpha for more effects.
Don't forget to click
Apply.
Go to the section of the type of object you want to edit.
{shapes, frames, or arrows}
Then find the following line:
borderColor: #number;

Replace the number of the hex code with the number of the desired color.
{if the line isn't there by default,
add it
}
borderColor: #
number
;

{shapes, frames, or arrows}
Go to the section of the type of object you want to edit.
Then find the following line:
borderThickness: number;

{if the line isn't there by default,
add it
}
Adjust the number to achieve desired border thickness.
borderThickness:
number
;

{larger number = thicker border}
Click
Apply.
Click
Apply.
Click
Apply.
You can remove the transparency from a frame by making gradStartAlpha & gradEndAlpha 1.
HELPFUL HEX CODE RESOURCES
http://color.hailpixel.com/
http://www.colorpicker.com/
http://cloford.com/resources/colours/500col.htm
For background color, follow the same steps as for lines and arrows.
{these sections are named
text.title-background
text.subtitle-background
text.body-background
}
Remember to click
apply.
Full transcript