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:
Remove legacy: 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
bg in browser,
buybox footer,
jetpack soc.med. bg
Main container
Menu
Footer, buttons
Divider headline text
Sidebar
Tags bg, footer,
menu line
front page, shade
behind headlines
Menu
Spot colours
R:? G:? B:?
C:? M:? Y:? K:?
Logo
R:? G:? B:?
C:? M:? Y:? K:?
Use less, since
link colours are
very similar
R:? G:? B:?
C:? M:? Y:? K:?
Big bold, divider
R:? G:? B:?
C:? M:? Y:? K:?
Menu,
Blockquote left side
Text colours
R:? G:? B:?
C:? M:? Y:? K:?
(Not used for text any longer)
Not in use for text
R:? G:? B:?
C:? M:? Y:? K:?
Menu
R:? G:? B:?
C:? M:? Y:? K:?
Headlines 1 and 2
big bold
Link colour
Link colour visited
Lines and borders
Theme border
Where styled?
Change to e0?
Line over
.author-description
.introbox
.buyboxfull
.buyboxfooter
table
td our books
(inline style)
.thumbnail (legacy)
hr
where styled?
Change to e0?
Graphic elements
.thumblistartists Used on artists list a-z. Used on American Photographers etc: |
|
||||||
.a-z – i think this is redundant Used on grid post plugin here. Used on All articles: |
|
||||||
![]() 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. |
|
||||||
Read more about CLASS DIVIDER
Blueprint to cyanotypes – Exploring a historical alternative photographic process
Learn about the cyanotype process, chemicals, coating, exposure, printing, making negatives, washing and troubleshooting in this well illustrated step-by-step guide to cyanotypes. |
|||||||
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 |
|
||||||
Read more about LEGACY, replace by thumblist and hoooks
![]() ![]() 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 |
|
||||||
Book title h1 individual pageBuy “TITLE” directly from NAME divider
![]() ![]() $NN-NN download book in pdf format direct – you will receive an email. More buying choices: |
|||||||
.buyboxfull table + inline style on td Only used on our 4 of own book pages so inline style on td |
|
||||||
Blueprint… using inline styling on tdBuy “Blueprint to cyanotypes” here – published by AlternativePhotography.com divider
More buying choices – this is not in table: |
|||||||
.thumblist and .thumblisttext Used on All books, Our books and and at the end of article, but WITH the “buy here” icon. |
|
Book title with link h4
- Buy eBook directly from us in PDF format ($16.99 download direct)
- Another place to buy book on an ul
Subheading of book what it’s about unstyled
A recommendation only styled with strong and a hr at the end.


.introbox (previously thumbnail) Lists of things On Suppliers page, Follow us, Contributors, books, maybe also template for artists? See all thumbnail. See all introbox |
|
Directory headline in h2
Malin headline in h3Malin… on contributors page. |
Typography
h1 |
Use without punctuation, unless it’s a ? or ! |
|
---|---|---|
h2 |
Use without punctuation, unless it’s a ? or ! |
|
h3 |
Also used on the first page as a link, but styled without the underline. |
|
h4 |
Used on pages when there are many levels of hierarky. |
|
h5 |
H5: Not in use. |
|
h6 |
H6: Not in use. |
|
p | p: Body text. Not styled in WP editor. |
|
.ul .ol .li |
Unordered list
Ordered list
|
|
.quote LEGACY – Has been replaced with Blockquote |
“No longer in use.” |
|
.author-name |
|
|
.author-description Used at the end of articles. |
|
|
.price |
$ NN-NN |
|
.intro .ap-icon |
Intro in the beginning of articles. After goes the name of the author and then an hr. 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. |
|
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 |
|
blockquote blockquote-footer |
|
|
.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. |
|
.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. |
|
.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. |
|
|
||
.divider Used to divide pages |
A div with class divider
|
|
Montserrat… |
H2: The quick brown fox jumps over the lazy dog and feels as if he were in the seventh heaven |
|
.box |
Yellow box, usually used in a table cell. |
|
Image styling
![]() ![]() .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. |
|
.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/.
|
|












An image in an article and the caption is added in the editor and styled using wp-caption…
|
|
Page layouts
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


86 x 82 px


79 x 81 px


111 x 80 px
00 x 00 px
Glyphicons halflings – any used in the bootstrap stylesheet?
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:
|
|
Characters
>
≫
<
≪
&123;
˜
oˇ
›
›
›
‹
‹
‹
↓ ↓ ↓ ↓
↓
↓
→ → → → →
→
→
↶ ↶
↶
↶
↷ ↷
↷
↷
⇓ ⇓ ⇓
⇓
⇓
∼ ∼ ∼ ∼
∼
∼
∽ ∽
∽
∽
https://dev.w3.org/html5/html-author/charref