You are here

Styles

This is h1 - <h1></h1> is used in the Title* box above, which becomes the page header as well as its link in the system. Please do not use h1 in the body text box.

This is h2 - coded as <h2></h2>. If you paste text in and want it, it is Heading 2 in the left styles drop-down and you can choose a color in the right Styles dropdown.

This is h3 - coded as <h3></h3>. Major section subheads are h2, and smaller subheads breaking up content within the major section are h3.

This is h4 - coded as <h4></h4> Very rarely you may want this as a label for a table or graph or similar.

This is h5 - this is for a page of punchy subheads, it is the same size as H3 but is all caps
This is h6 - THIS IS FOR SMALLER SUBHEADS DELINEATING DETAILS, the SAME SIZE as h4 but all caps.

 

Paragraph -- <p></p>

How to make columns -- first:

put in a clear div above and below -- <div style="clear:both;width:100%;"></div>

 

Two columns is

<div style="clear:both;width:100%;"></div>

<div class="two-col-to-one">left column content</div><div class="two-col-to-one">right column content</div>

<div style="clear:both;width:100%;"></div>

Three columns

<div style="clear:both;width:100%;"></div>

<div class="three-col-to-one">left column content</div><div class="three-col-to-one">middle column content</div><div class="three-col-to-one">right column content</div>

<div style="clear:both;width:100%;"></div>

Two thirds and one third

<div style="clear:both;width:100%;"></div>

<div class="two-of-three-col-to-one">left column content</div><div class="one-of-three-col-to-one">right column content</div>

<div style="clear:both;width:100%;"></div>

 

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.

IMAGES. How to upload, style, size, and wrap text around them

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 one image in the largest size listed in the styles, below. The website will make the smaller ones needed for smaller screens. 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 in the user tools 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 your image has been completely uploaded and is ready to use, you will see the name of your image in the list of on-server images, highlighted in blue. Leave it highlighted and click the bright green check mark at the top of the list of image names -- this will insert the photo onto the page and open a dialogue box.

 

Image Alignment -- choose Left or Right.

 

Image Style 

intext large horizontal will bring in a photo and keep it at 800 x 500, this is good for the top of a page. In this case only: you make want to choose Center for Image Alignment. If you do that, you will need to "break the div" so the text won't go up next to the photo. Just a few words or letters straggling next to a photo when the screen is re-sized will look bad. To "break the div" -- bring the photo into a paragraph <p></p> -- insert <div class="rule-white"></div> after that paragraph.

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

intext vertical will scale and then crop to 300px by 400px. Best: upload an image 600px by 800px. Good for headshots.

intext vrt small will scale then crop to 100px by 130px. Best: upload an image 200px by 260px. Good for headshots

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

 

None of the other Image Styles in the list should be used on a page or in an event or press release (Article).

 

These are set up to have the text flow around them on wider screens and tuck the text and images underneath each other on narrrower screens, such as mobile screens.

TO MAKE PHOTOS GO NEXT TO EACH OTHER AND REFLOW FOR SMALLER SCREENS -- OR TO MAKE TEXT GO NEXT TO PHOTOS

The ONLY way this will work is if you use photos that are of the standard sizes above, apply the standard styles above, AND, put each photo and or its accompanying text into the COLUMNS specfied above. IF YOU NOTICE THAT YOUR PHOTOS AND TEXT ARE FLYING AROUND THE PAGE -- BREAK YOUR DIVS.

Two columns is

<div style="clear:both;width:100%;"></div>

<div class="two-col-to-one">PHOTO</div><div class="two-col-to-one">PHOTO</div>

<div style="clear:both;width:100%;"></div>

 

If you want the photo to fit into the paragraph with the text flowing around it, that is automatically part of the style. Just click in the paragraph, preferably at the beginning, and bring in the photo by the methods specified above.

How to link pages and upload and link documents

To upload a PDF, click on the link, then hit the browse button.

Button Styles -- for links. 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.

National Cyber LeagueNATIONAL CYBER LEAGUENATIONAL CYBER LEAGUE

The link below is class list-link <a class="list-link" href="link"> Leave a space at the end of the link text - a plus mark will automatically come in on the right. This is good for lists of resources.

PRESS RELEASE — TUITION-FREE COLLEGE PROGRAM

The link below is class major-link <a class="major-link" href="link"> this is good for links you want people to notice.

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!  or in HTML <ul><li>your text</li></ul>:

  • dogs
  • cats
  • birds
  • rabbits
  • snakes

Ordered list, same process, but the button with numbers -- Button styled link colors or in HTML <ol><li>your text</li></ol>:

  1. dogs
  2. cats
  3. birds

 

Accordion List

If you have a lot of related content that is broken into categories, and you want people to see the list of categories without them scrolling down the page, you can make an accordion list.

The accordion list has the subhead on the “outside” and the content, paragraphs, links etc., on the “inside”.

It’s called an accordion because it opens one section at a time when clicked.

The head is entered like this: <h4 class="toggler">Head of Accordion</h4>

It will automatically bring in the “+” sign, so don’t type that in. It will also put a space between the end of your header text and the plus mark, so you don’t need to leave a space either.

Immediately after the h4 with the toggler class applied, type in <div class="list-plus-acc"> and </div>.

Put all of the content you want for each subhead in each div class list-plus-acc. It will be hidden on page load until the user clicks it.

Example

Accordion Head One

Here is the content for section One.

Accordion Head Two

Here is the content for section Two.

Accordion Head Three

Here is the content for section Three.

Accordion Head Four

Here is the content for section Four.