Style guide

Good tool http://stylifyme.com/?stylify=alternativephotography.com

Styling is in the WordPress editor / Appearance CSS: My own styles such as listings and buyboxes. 

Todo:

Search and replace all 

<hr>
<author-description…

class=”alert-danger” replace with “red”

hr in efefef and eeeeee replace with e0e0e0

.col-md-12 and .row divider and .col-md-12

Background colours

 
 
HEX #f8f8f8
bg in browser,
buybox footer,
jetpack soc.med. bg
 
HEX #ffffff
Main container
 
HEX #e0f0fb
Menu
 
HEX #444444
Footer, buttons
front page, shade
 
HEX #fffef7
Sidebar
 
HEX #000000
Tags bg, footer,
menu line
 
HEX #330066
Menu
 

Spot colours

 
 
HEX #993333
R:? G:? B:?
C:? M:? Y:? K:?
Logo
 
HEX #330066
R:? G:? B:?
C:? M:? Y:? K:?
Quote, divider,
breadcrumb
 
HEX #ffcc66
R:? G:? B:?
C:? M:? Y:? K:?
Big bold, divider
 
HEX #e0f0fb
R:? G:? B:?
C:? M:? Y:? K:?
Blockquote
 

Text colours

 
 
HEX #330066
R:? G:? B:?
C:? M:? Y:? K:?
Quote, links,
breadcrumb
 
HEX #444444
p intro
links visited
 
HEX #000000
R:? G:? B:?
C:? M:? Y:? K:?
Menu
 
HEX #ffffff
R:? G:? B:?
C:? M:? Y:? K:?
 
HEX #993333
Headlines
 
HEX #ffcc66
big bold
 

Lines and borders

 
 
HEX efefef
Theme border
Where styled?
Change to e0?
 
HEX e0e0e0
Line over
.author-description
.introbox
.buyboxfull
.buyboxfooter
table
td our books
(inline style)
.thumbnail (legacy)
 
HEX eeeeee?
hr
where styled?
Change to e0?
 

Graphic elements

 
.thumblistartists
Used on artists list a-z.
Used on American Photographers etc:

 
IN WP EDITOR:
.thumblistartists {
text-align:center;
}
.thumblistartists img {
border-radius: 12%;
}
<div class="thumblistaritsts">
(WP post list)
.a-z – i think this is redundant
Used on grid post plugin here.
Used on All articles:
IN WP EDITOR:
.a-z {
width:130px;
}
.a-z img {
width:100px;
height:100px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 8%;
}
<div class="thumbnail" style="width: 50%;">
<div class="a-z" style="float: right; padding: 0px 0px 0px 8px;"><img src="/wp-content/uploads/2010/03/pix_art103.jpg" width="100" height="100"></div>
<a>Archival techniques</a>
Allan Lamb, author of...</div>

Archival techniques – comments on the past

Allan Lamb, author of Framing Photography and a certified picture framer reflects on the importance of proper archival techniques.

Archival techniques – comments on the past

Allan Lamb, author of Framing Photography and a certified picture framer reflects on the importance of proper archival techniques.

Use this (thumblist/thumblisttext) Buyboxfull is on the large booklistings.
Used at the end of articles.
IN WP EDITOR:
.divider
.thumblist
.thumlisttext
.author-name
{
As before
}
Read more about CLASS DIVIDER

Blueprint to cyanotypes – Exploring a historical alternative photographic process

 

by Malin Fabbri and Gary Fabbri

Learn about the cyanotype process, chemicals, coating, exposure, printing, making negatives, washing and troubleshooting in this well illustrated step-by-step guide to cyanotypes.
Strongly recommended for beginners

 
LEGACY: .buyboxfull and .col-md-12 and .row divider and .col-md-12
Needs to be updated to be the same style as buyboxfull
Something is squeezing the images
IN WP EDITOR:
.buyboxfull
{
As before
}
.col-md-12
{
Which stylesheet?
}
.row divider
{
Which stylesheet?
}
.col-md-12
{
Which stylesheet?
}
Read more about LEGACY, replace by thumblist
Beginners guide to cyanotypesBlueprint to cyanotypes – Exploring a historical alternative photographic process
by Malin Fabbri and Gary Fabbri
A well illustrated step-by-step guide to cyanotypes.
 
A lot more information on the process, chemicals, coating, exposure, printing, making negatives, washing and troubleshooting is available in this book.
 
Strongly recommended for beginners
 
.buyboxfull
Also at the end of articles, but need to be changed to thumblist and thumblisttext, something squeezes the images at the end of articles.

Single page for buying books
IN WP EDITOR:
.buyboxfull {
float: left;
width: 100%;
border: 1px solid #e0e0e0;
margin:0px 5px 5px 5px;
border-radius:4px;
}
.buyboxfull img {
float:left;
padding:0px 20px 8px 0px;
}
.buyboxform {
padding: 20px;
}
.buyboxfooter {
border-top: 1px solid #e0e0e0;
margin: 0;
font-size: 0.8em;
padding:8px 8px 8px 20px;
}
SPECIAL TABLE STYLE ON PAYPAL FORM, WHERE THERE ARE DROPDOWNS to narrow them so they sit next to the cover, not underneath:
table.paypal {
width: 220px;
border: 0;
}
table.paypal td {
padding: 0;
border: 0;
}

Book title h1 individual page

by AUTHOR author-name class

Buy “TITLE” directly from NAME divider
TITLE
$NN-NN  download book in pdf format direct – you will receive an email. 


There is a special .paypal style for dropdown tables



More buying choices:

Why buy it here? buyboxfooter
Buyboxfull is the first div that set the border and the image style. Then divider for title. Then buyboxform sets padding. Buyboxfooter sets border top, font size, margin and padding.
.buyboxfull
table
+ inline style on td

Only used on our 4 of own book pages so inline style on td
<td style="padding:16px 8px 16px 8px; border:0;">
or
<td style="padding:16px 8px 16px 8px; border:0; white-space:nowrap;">
when there is a no wrap on the button

IN WP EDITOR:
table, tr, th, td
.buyboxfull
buyboxfull img
.buyboxfooter{
As before
}

Blueprint… using inline styling on td

Buy “Blueprint to cyanotypes” here – published by AlternativePhotography.com divider

Blueprint to cyanotypes - Exploring a historical alternative photographic process by Malin Fabbri and Gary Fabbri

“This is fantastic book and I rate it 10 out of 10! Set with blockquote.”

Said by name.

10 of 10
Rated 9,7 – style note

$12.99 Download eBook This list is using inline style on the td otherwise same table styling
$38 Best paperback option. Buy from Amazon.com ($38 + shipping)

More buying choices – this is not in table:

In which format is the eBook?
eBook: The eBook is in PDF format which has a nice layout, but you can’t re-size the text – it is like a snapshot of a page in a printed book. You can read it on a computer or for example an iPad or a large phone.
Why buy it here?
When you choose the option to buy directly from us, most of the money goes towards running AlternativePhotography.com. When buying from Amazon we only get a small percentage – but also a good option!
 
.thumblist and .thumblisttext
Used on All books, Our books and and at the end of article, but WITH the “buy here” icon.
IN WP EDITOR:
.thumblist {
float:left;
width:240px;
padding:16px 16px 16px 16px;
}
.thumblist img {
display: block;
margin-left: auto;
margin-right: auto;
}
.thumblisttext {
float:left;
width:380px;
padding:4px 4px 4px 0px;
}
.thumblisttext img {
display: inline;
border:0px;
margin: 0px 8px 0px 0px;
}
Process name divider, image style set to thumblist used to list our books

Book title with link h4

by Author-name the image is affected by thumblilst, the text container by thumblisttest – starts before h4

9 of 10   Rated 9,8 – margin is set in thumblisttext for both graphics

Subheading of book what it’s about unstyled
A recommendation only styled with strong and a hr at the end.

 

 
Process name here used to list books sold by authors
TITLE

Buy directly from the author

TITLE

by AUTHOR

9 of 10   Rated NN – based on NN votes

More about the book.
Recommended.

 

 
Get the book used to list books on Amazon etc.
TITLE

TITLE

by AUTHOR

Recommended.

 
.introbox (previously thumbnail)
Lists of things
On Suppliers page, Follow us, Contributors, books, maybe also template for artists? See all thumbnail. See all introbox
IN WP EDITOR:
(thumbnail will be removed), thumbnail does not have images set to auto, and squeeze the image.)
.thumbnail .introbox 
.introbox {
float:left;
width:400px;
border-top:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
border-right:0px;
border-bottom:0px;
padding:24px 24px 24px 24px;
margin: 0px;
}
.introbox img {
float:left;
padding:0px 12px 0px 0px;
width:auto;
height:auto;
}

Directory headline in h2

  • Archival boxes and sleeves
  • An ul list
  • One more

Malin headline in h3

Malin… on contributors page.

Instagram h3

Image has width 59, height 60, but styles weired. Img class=”alignnone”.

 

Typography

 
h1

Use without punctuation, unless it’s a ? or !

IN WP EDITOR:
h1, h2, h3 {
color:#993333;
}
h2

Use without punctuation, unless it’s a ? or !

IN WP EDITOR:
h1, h2, h3
{
As before
}
h3

Also used on the first page as a link, but styled without the underline.

IN WP EDITOR:
h1, h2, h3
{
As before
}
.gum_post_grid_header.grid_heading h3 a {
text-decoration: none;
}
h4

Used on pages when there are many levels of hierarky.

IN WP EDITOR:
h4
{
???
}
h5
H5: Not in use.
 
h6
H6: Not in use.
 
p p: Body text. Not styled in WP editor.
IN THEME STYLESHEET:
p
{
?
}
.ul
.ol
.li
Unordered list

  • These are not styled in WP editor.
  • Unordered list item 2
  • Unordered list item 3

Ordered list

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
IN THEME STYLESHEET:
ul ol li
{
?
}
.quote

“Used to break up text. Write with quote marks.”

IN WP EDITOR:
.quote {
font-family:Georgia, Times New Roman, Times, serif;
font-size:16px;
text-align:center;
font-style:italic;
font-weight:bold;
color: #330066;
}
.author-name

Name Surname, used at the beginning of articles, and also on books for the authors name.

IN WP EDITOR:
.author-name {
font-style: italic;
padding-bottom: 8px;
}
.author-description Used at the end of articles.

.author-description: The quick brown fox jumps over the lazy dog and feels as if he were in the seventh heaven

IN WP EDITOR:
<span class="author-description">Name surname...</span>

.author-description {
font-style: italic;
padding: 16px 0 16px 0;
border-top: 1px solid #e0e0e0;
}
.price

$ NN-NN

IN WP EDITOR:
.price {
font-family:Georgia, Times New Roman, Times, serif;
font-size:36px;
margin:0px;
padding:0px;
line-height:80%;
float:left;
}
.intro
.ap-icon

Intro in the beginning of articles. After goes the name of the author and then an hr.

Writer and photography / p class author-name


p: Body text, sometimes strong and sometimes emphasized.Articles always have an icon at the end.

There are sometimes notes after the article. class note.

Name Surname and a short bio of the person who contributed.

IN WP EDITOR:
.intro {
color:#444444;
font-weight:bold;
font-size:14px;
line-height:150%;
}
<span class="ap_icon">.</span>
.ap_icon {
padding-right:15px;
background:url(/wp-content/uploads/2020/12/ap_icon_mini.png) no-repeat right;
}
a
a:hover
a:visited
.site-footer
Links are styled. This is a link. This is a hoover on a link. This is a visited link.

This is a footer link This is a footer link with text-decoration:none.

Special links are used in footer, where they are white and not underlined, added inline: text-decoration:none

IN WP EDITOR:
a {
color:#330066;
text-decoration: underline;
}
a:hover,a:visited {
text-decoration: underline;
color:#444;
}
.site-footer a:hover,.site-footer a:visited {
color: #fff;
}
blockquote
blockquote-footer

“Write WITH quotemarks, and use footer if relevant.”

Said by name, write without dash.
IN WP EDITOR:
blockquote {
border-left:5px solid #e0f0fb;
}

<blockquote>"Quote"
<footer class="blockquote-footer">Name</footer>
</blockquote>
.bigbold

NSmaller headline P with class clearfix, followed by a span with class bigbold with the number, then a strong for a small headline. It needs to be a paragraph or two for it to look good.

IN WP EDITOR:
<p class="clearfix"><span class="bigbold">1</span><strong>Mixing the chemicals</strong>Body text.</p>

.clearfix
{
???
}
.bigbold {
font-size:60px;
float:left;
width:50px;
line-height:80%;
color:#ffcc66;
margin-right:26px;
letter-spacing:-0.1em;
font-weight:bold;
}
.note Used as note in text and also on book pages “Rated 9,8” The note sits in text.

p class note: The quick brown fox jumps over the lazy dog and feels as if he were in the seventh heaven

The note sits in text.

IN WP EDITOR:
.note {
font-size:10px;
line-height:150%;
}
.red
.alert-danger

p class red is used for a warning, something dangerous or extra hazardous.

Alert-danger is not working and should be removed.

IN WP EDITOR:
.red {
font-weight:bold;
color:#993333;
}
.pdf

Used with a download link for pdf.

IN WP EDITOR:
.pdf {
padding-left:15px;
background:url(/grafix/icon_pdf.gif) no-repeat left;
}
.divider
Used to divide pages
A div with class divider
IN WP EDITOR:
.divider {
font-weight: bold;
text-transform: uppercase;
color: #330066;
background-color: #ffffff;
margin: 0;
padding: 10px;
border-bottom: 4px solid #ffcc66;
clear:both;
}
Montserrat…

H2: The quick brown fox jumps over the lazy dog and feels as if he were in the seventh heaven

IN WP EDITOR:
h2
{
???
}
.box

Yellow box, usually used in a table cell.

IN WP EDITOR:
.box {
background:#fffef7;
padding: 8px 24px 8px 24px;
border:solid 1px #993333;
}
 

Image styling

Spiffy Tumbleweed

.portrait. Image class portrait goes on the artists pages, and also on the open blog. See examples of artist page and example of open blog widget Our Bloggers and Community page listing writers.

 
IN WP EDITOR:
<div class="portrait">INSERT PORTRAIT and set to float right in editor at 150 pixels</div>
.portrait img {
border-radius: 50%;
}
.side-by-side. Used in articles to line up images next to each other. This will wrap, so 10 images can be one after another and wrap to right browser size. See example /photograms-cameraless-photography/.

 
IN WP EDITOR:
<div class="side-by-side">
Insert image and caption</div>
<div class="side-by-side">
Insert image and caption</div>
<div style="clear:both;">&nbsp;</div>
.side-by-side {
float:left;
padding:16px 32px 16px 0px;
}
Caption
Caption
Caption
Caption
 
An image in an article and the caption is added in the editor and styled using wp-caption…

The caption of the image.
IN THEME STYLESHEET: 
img - does the image have any styling?
{
?
}

Page layouts

 
Text
Text
 

Image dimensions

 

Icons

 

84 x 81 px

100 x 101 px

100 x 100 px

14 x 14 px

253 x 213 px

58 x 60 px
Event workshop exhibition meeting
86 x 82 px
Community rules for AlternativePhotography.com
79 x 81 px
Membership
111 x 80 px

00 x 00 px
 

Glyphicons halflings – any used in the bootstrap stylesheet?

 
Example
fa-name

"\"

Usage

 

Table with table head on first line

 
Style th class firstcolumn Style th no class Style th no class
Style td class firstcolumn Style td no class Style td no class
Style td class firstcolumn lastrow Style td class lastrow Style td class lastrow
There is inline style on “our books” since they are so few
On buy others books there is a style .paypal for the Paypal form removing lines and some padding.Table with class paypal:

Where shall we send this book?

table {
border-collapse:collapse;
border-spacing:0
border:0;
margin:16px 0 16px 0;
padding:16px;
width: 100%;
}
table tr {
border-top: solid 1px #e8e8e8;
}
table tr:last-of-type {
border-bottom: solid 1px #e8e8e8;
}
table th {
vertical-align:top;
text-align:center;
padding:8px;
border-left: solid 1px #e8e8e8;
}
table th:nth-child(1) {
border-left: none;
}
table td {
vertical-align:top;
text-align:left;
padding:8px;
border-left: solid 1px #e8e8e8;
}
table td:nth-child(1) {
border-left: none;
}
table.paypal {
width: 220px;
}
table.paypal tr {
border: 0;
}
table.paypal td {
padding: 0;
}

<table>
<thead>
<tr>
<th>The th is centered</th>
<th>it has no other text styling</th>
<th>any text style is by default</th>
</tr>
</thead>
<tbody>
<tr>
<td>The first td has special style removing border left. The last tr has special style adding border bottom.</td>
<td>The table also works without thead, th and tbody.</td>
<td>The table is used as base, and some individual styling on for example "our books" page with special style on td.</td>
</tr>
<tr>
<td>A middle row</td>
<td>All styles are set in stylesheet.</td>
<td>No first or last row or td needs to be set.</td>
</tr>
<tr>
<td>The</td>
<td>last</td>
<td>row. </td>
</tbody>
</tr>
</table>
 

Characters

>

<

&123;
˜





↓ ↓ ↓ ↓

→ → → → →

↶ ↶

↷ ↷

⇓ ⇓ ⇓

∼ ∼ ∼ ∼

∽ ∽

https://dev.w3.org/html5/html-author/charref