You are here

Styles

Images! You can upload an image from your hard drive. All images compress and download the smallest size first, for mobile, and then deliver large images as it detects a larger screen size.

Please upload large images and the script will take care of making the smaller ones! Images are much sharper if they are scaled smaller than if they are scaled larger. This is set up to deliver large images and scale them without any loss in loading time!

Put your cursor where you would like the image to be. Click the button above,  the one with the mountains and sun in a rectangle.

Hit the Browse Server key. Follow the pattern of "Browse" and "Upload" keys. When you see your image name in the list of on-server images, highlight it and hit the insert key.

 

Image Alignment -- choose left or right.

Image Style 

intext hz medium will scale and then crop to 400 x 300. Best: upload an image 800 x 600

intext vertical will scale and then crop to 300 x 400. Best: upload an image 600 x 800

intext vrt small will scale then crop to 100 x 130. Best: upload an image 200 x 260.

square 260 will scale and then crop to 260px square. Ideal for a headshot on an older mobile. Best: upload an image 520 px square. 

These are set up to have the text flow around them on the larger screens. Add the caption into the text, style with the caption style and it will float between the image and the body text.

 

Caption -- apply Caption in Styles menu under Block Styles.

Paragraph -- apply Paragraph in Styles menu under Block Styles.

Subhead serif

Subhead Sans-serif

SUBHEAD ALL CAPS

Caption -- Bold and Italic and Bold Italic are in Styles menu - Scroll down to Inline Styles. Apply Block style first, then select word(s) and apply Inline Style.

Paragraph -- Bold and Italic and Bold Italic are in Styles menu - Scroll down to Inline Styles. Apply Block style first, then select words and apply inline.

FOLLOWING STYLE IS THE OBJECT STYLE LIST LINK

PRESS RELEASE — TUITION-FREE COLLEGE PROGRAM

Plain link style FACTSHEET — Tuition-Free College Program . The best way to apply this is to copy the http: or http: address first, then highlight the text in your paragraph or list that you want to use as a link. The click the Chain button in the top toolbar. It's a little hard to see - it's next to the left pointing arrow. A dialogue box will open -- paste in the http address and it will link. Go to the Target tab if you want to make it open in a new window. The dropdown list has your choices clearly marked.

LINK A PDF. You can upload PDFs from your hard drive. Select the text where you want it to link, hit the link chain tool next to the arrow that curves to the left -- next to the flag!! and then hit the browse server button. Find your pdf file. please name it without any white spaces. Use dashes to separate words. Try to make the name all in lower-case letters -- better for google. follow the upload and browse chain, then click the green OK button.

Unordered list -- paste text, highlight, click button with 2 dots up top! Need styles for:

  • pull out quote
  • pull out quotepull out quotepull out quotepull out quotepull out quote pull out quotepull out quotepull out quotepull out quotepull out quotepull out quotepull out quotepull out quote
  • smart symbols
  • link list of links list
  • button styled link

Ordered list, same process, but the button with numbers -- Button styled link colors:

  1. blue pull out quote pull out quotepull out quotepull out quotepull out quotepull out quote pull out quotepull out quotepull out quotepull out quotepull out quotepull out quotepull out quotepull out
  2. green
  3. teal

“I am extremely proud of our students.”Pull Quote Left -- Paste your text, apply smart quotes with the omega button (horse shoe symbol on button on top button tools)if necessary. Then select the whole phrase, choose Pull Quote Left from Styles dropdown. Goes one hundred percent across mobile but 30 percent of tablet size or larger. Lines up with left side, margin of white space on right side, text wraps around as a span.

 “I am extremely proud of our students.”Pull Quote Right -- Paste your text, apply smart quotes with the omega button (horse shoe symbol on button on top button tools)if necessary. Then select the whole phrase, choose Pull Quote Right from Styles dropdown. Goes one hundred percent across mobile but 30 percent of tablet size or larger. Lines up with right side, margin of white space on left side, text wraps around as a span.

See http://dev-massbay.pantheonsite.io/node/41 Button Styles -- for links. copy http url you want your link to go to. type the text you want on the button into the body text on article or page. select the text you want on the button. click the chain tool. a window will open. paste your link. note setting http or https! Hit OK button. Then select the ordinary link you now see in your text, go to Styles dropdown menu and apply Button Link Blue, Button Link Green, Button Link Teal. You can stack these vertically if you hit return after entering each one. To make them be horizontal: Hit Source button, find the links in the code, and take out all the paragraph p tags except the very first one before the first button and the very last slash p after the last button. Then delete white space between a tags. You can just open Source on this page to see what I mean:

National Cyber LeagueNATIONAL CYBER LEAGUENATIONAL CYBER LEAGUE


NATIONAL CYBER LEAGUE

NATIONAL CYBER LEAGUE

NATIONAL CYBER LEAGUE