Style Guide Headline

Style Guide Headline

Here's a subhead

Here's a subhead

This first paragraph has a class of «intro» applied to it from the «formats» dropdown menu. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt.

 

Ut consequat semper viverra nam libero justo. Senectus et netus et malesuada fames ac turpis egestas. Ipsum dolor sit amet consectetur adipiscing elit duis. Maecenas accumsan lacus vel facilisis volutpat. Cursus risus at ultrices mi tempus imperdiet. Id faucibus nisl tincidunt eget nullam non nisi. Interdum velit laoreet id donec. Nibh mauris cursus mattis molestie a iaculis at. Nunc consequat interdum varius sit amet mattis. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Quis vel eros donec ac odio tempor. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Dignissim diam quis enim lobortis scelerisque.

Typography – Level Two Subhead (h2)

Curabitur gravida arcu ac tortor. Elementum pulvinar etiam non quam lacus suspendisse. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. A iaculis at erat pellentesque adipiscing commodo. Viverra maecenas accumsan lacus vel facilisis volutpat. Rhoncus aenean vel elit scelerisque. In hendrerit gravida rutrum quisque. Nec nam aliquam sem et tortor consequat id porta nibh. Sed id semper risus in hendrerit gravida rutrum. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Dictum varius duis at consectetur lorem. Aenean sed adipiscing diam donec adipiscing tristique risus. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam.

Level Three Subhead, more like a label (h3)

Curabitur gravida arcu ac tortor. Elementum pulvinar etiam non quam lacus suspendisse. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. A iaculis at erat pellentesque adipiscing commodo. Viverra maecenas accumsan lacus vel facilisis volutpat. Rhoncus aenean vel elit scelerisque. In hendrerit gravida rutrum quisque. Nec nam aliquam sem et tortor consequat id porta nibh. Sed id semper risus in hendrerit gravida rutrum. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Dictum varius duis at consectetur lorem. Aenean sed adipiscing diam donec adipiscing tristique risus. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam.

With a caption

Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. At elementum eu facilisis sed odio morbi quis. Commodo ullamcorper a lacus vestibulum sed. Egestas congue quisque egestas diam in arcu cursus. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Tellus id interdum velit laoreet id donec. Enim sed faucibus turpis in. Arcu dui vivamus arcu felis bibendum ut tristique. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Nulla aliquet enim tortor at. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Sed velit dignissim sodales ut eu sem integer vitae justo. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Eu facilisis sed odio morbi quis commodo odio aenean. Lectus quam id leo in vitae.

Level Four Subhead (h4)

Non consectetur a erat nam at lectus urna. In egestas erat imperdiet sed euismod nisi. Mi in nulla posuere sollicitudin. Enim facilisis gravida neque convallis a. Sed velit dignissim sodales ut eu sem integer. Eu lobortis elementum nibh tellus molestie. In fermentum posuere urna nec tincidunt. Amet luctus venenatis lectus magna. Faucibus a pellentesque sit amet porttitor. Pulvinar etiam non quam lacus suspendisse. Morbi blandit cursus risus at ultrices. Est lorem ipsum dolor sit amet consectetur adipiscing elit. Facilisis leo vel fringilla est ullamcorper eget. Imperdiet massa tincidunt nunc pulvinar. Vitae aliquet nec ullamcorper sit amet risus. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Venenatis urna cursus eget nunc scelerisque. Quisque egestas diam in arcu. Eu ultrices vitae auctor eu. Ornare lectus sit amet est placerat in egestas.

Here’s a quote. To apply the quote style, select the text and choose the block quote button from the editor toolbar. The second paragraph in a quote can be set to be an attribution, by selecting it and applying «attribution» from the format’s menu

Like this

 

 

 

 

 

Ut lectus arcu bibendum at varius vel pharetra vel turpis. A erat nam at lectus. Pretium nibh ipsum consequat nisl vel pretium lectus quam. Habitasse pla

tea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Odio ut enim blandit volutpat maecenas volutpat blandit. Convallis posuere morbi leo urna molestie at elementum eu. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Purus non enim praesent elementum facilisis leo vel fringilla est. Nunc non blandit massa enim nec dui. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Turpis in eu mi bibendum. Vulputate dignissim suspendisse in est ante in. Id velit ut tortor pretium viverra suspendisse potenti. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. A pellentesque sit amet porttitor eget dolor morbi non. Lobortis elementum nibh tellus molestie. Rhoncus mattis rhoncus urna neque viverra justo nec. Commodo elit at imperdiet dui accumsan sit amet. Sit amet aliquam id diam maecenas. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan.

 

Buttons/Links

Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Nunc scelerisque viverra mauris in aliquam sem fringilla ut morbi. Proin nibh nisl condimentum id venenatis.

Here’s a link with a class of «button»

Here’s a link without a class. 

To add a class of «button» create your link, then place the cursor somewhere inside the link, and choose «button» from the «formats» dropdown button in the editor toolbar.

 

 

2018/19 Colors

The updated PDF with hex colors for the adjusted background colors can be found here: updated-color

A rule of thumb we’d suggest is to pick background colors that are all approximately in the same range as each other, neither too light or too dark, so that the same image blending and transparency effects used throughout the site will be legible. If darker colors are part of the palette, we suggest picking a compatible lighter color for use on the web as the background color.

The «Active Color» is determined by finding the next up «show» color. If there is not an upcoming show, it will default to the «backup color» selected here: https://www.californiasymphony.org/wp-admin/themes.php?page=site-settings

 

Image Sizes

Auto Generated Sizes

Thumbnail:  150px by 150px, automatically crops into a square

The Californa Symphony performs at the Lesher Center

 

Medium:  300px wide by the aspect ratio of the image you upload. This is a good size to use when you’re floating images within content.

The Californa Symphony performs at the Lesher Center

 

Large:  1200px wide by the aspect ratio of the image you upload, as long as the original was at least this large. Use this size when you want to fully span the width of the content.

The Californa Symphony performs at the Lesher Center

 

Other Special Image Sizes

These are also auto-generated sizes but have specific purposes in the back end of the site:

Square: 800px by 800px, automatically crops the image when you upload, but you can edit the crop by clicking the «crop image» button. This size is used in a few places, and is sized-down via the code when it needs to be, for pages like the calendar listings and the musician landing page.

Small Square: 400px by 400px, also automatically cropped. This is used in a handful of places where we don’t ever need the image to be as large as the other «square» size, like thumbnails for related blog posts.

Post Title: 800px by 600px, this is the size used for the featured image on pages throughout the site. It automatically crops, but like the other sizes, you can click «crop featured image» to set the crop to your liking.

 

Image Alignment/Dropshadow

Align any image left or right to add the dropshadow

The Californa Symphony performs at the Lesher Center

The Californa Symphony performs at the Lesher Center