simple alterations

jameslomax · 2011-11-12 18:09:24

I can’t get my head around TXP – coding, etc.

So my question is basic, but important for me.

www.jameslomax.com is quite nice – and built by a few other nice people, not me.

What I want to do is build two further columns that will display to the left and the right of the existing one.

That will entail tweaking other stuff – widths, column feeds (content) etc, but first off – how do I ‘add’ two (or possibly one) other column?

Merci.

maniqui · 2011-11-12 18:42:55

Inside the <div id="wrapper"></div> and just before the <div id="footer"></div>, you could add two columns, like this:

<div id="wrapper">
   ...

  <div id="sidebar-1"> content will go here </div>
  <div id="sidebar-2"> content will go here </div>

  <div id="footer">...</div>
</div>

That’s the very basic, and it’s just one possible approach of many.
For adding them, you will have to look into “Presentation -> Pages” and look for the page(s) where you would like to add this two new sidebars.

Of course, without touching a few lines of CSS here and there, those two sidebars won’t look like columns. They will just show below the current main content of your page.

Then, it comes the question about what to put in those two sidebars, and so, which mix of TXP tags and HTML tags you will have to put inside them.

I think now you have some good stuff to investigate and learn and have fun.

jameslomax · 2011-11-13 09:42:52

Merci – that’s very clear.

Now I’ll see if I can do it, which is not the same thing….

jameslomax · 2012-09-01 16:13:05

Got confused. Then more horribly confused. Left it. Now I’ve had another look.

I seem to have built the sidebars (finally) but they appear at the bottom, inside the central ‘box’.

I assume the next step is to modify the css to place them where I want. Which means, as I understand it, they have to be correctly placed in the css according to the ‘hierarchical’ way css works: what you say at the top filters down to everything below. Correct me if I’m wrong….

And there, I haven’t a clue. Here’s the css – perhaps someone could insert the code where it needs to be? I want one sidebar on the left and the other on the right.

Apologies for including all of it and not just the necessary part, but I don’t know what the necessary part of it is:

/* base
———————————————————————- */

html > body {
overflow-y: scroll;
}

body, input, select, textarea {
font-family: “Lucida Grande”, “Lucida Sans Unicode”, Verdana, Lucida, Arial, Helvetica, sans-serif;
}

body {
margin: 0;
padding: 0;
font-size: 13px;
text-align: center;
color: #222;
background-color: #FDFAF0;
background-color: #e0dbd0;
}

img {
padding: 12px;
border: 1px solid #ddd;
}

#column img {
border: 1px solid #ccc;
}

h1, h2, h3,
p, ol, ul, dl {
margin: 0 0 10px 0;
padding: 0;
}

p + h2, p + h3,
ol + h2, ol + h3,
ul + h2, ul + h3 {
margin-top: 5px;
border-top: 1px solid #fff;
}

ul {
list-style-position: inside;
}

li, dt, dd {
margin: 0 0 5px 5px;
padding: 0;
}

dd {
margin-left: 20px;
}

p, li, dt, dd {
font-family: Georgia, Times, Times New Roman, serif;
font-size: 1.1em;
line-height: 1.4em;
}

h1 {
font-family: Georgia, Times, Times New Roman, serif;
font-weight: normal;
font-size: 1.4em;
color: #000;
}

h1 span {
font-size: 0.6em;
font-weight: normal;
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva;
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva;
display: block;
margin-top: 8px;
}

h2 {
font-size: 1.1em;
padding-top:1em;
}

h3 {
font-size: 1em;
}

p {
text-align: justify;
}

blockquote {
font-style: italic;
padding: 5px 40px 0 40px;
margin: 1em 0;
color: #666;
}

form {
text-align: left;
}

input, textarea, select {
background-color: #F8F7F5;
border: 1px solid #bdcbd7;
}

/* links
———————————————————————- */

a {
color: #000;
background-color: transparent;
text-decoration: none;
}

a:active, a:focus { outline: none; }

a:hover, a:focus,
div#paypal a:hover,
ul#words-list li a:hover,
div#related_category_link a:hover {
color: #b37b7b;
color: #f07832;
background-color: transparent;
}

a.rss, a.atom {
padding: 1px 3px 1px 5px;
font: bold 9px sans-serif;
letter-spacing: 1px;
color: #fff;
background-color: #ffa500;
border: 1px solid #000;
}

a.rss:hover, a.rss:focus,
a.atom:hover, a.atom:focus {
color: #ffa500;
background-color: #fff;
}

/* global classes
———————————————————————- */

a.active-link {
font-weight: bold;
cursor: pointer;
}

div.clear {
margin: 0;
padding: 0;
clear: both;
height: 0;
line-height: 0px;
}

div.prev-next {
margin: 4px 0 18px 0;
display:none;
}

p.prev, p.next {
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva;
text-transform: lowercase;
font-size: 11px;
padding: 0;margin: 0;
}

p.prev {
float: left;
}

p.next {
float: right;
}

p.article-image {
margin: -15px 0 5px 20px;
float: right;
}

#column p.article-image {
margin-top: 0;
}

p.article-image img {
padding: 6px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

a:hover p.article-image img,
#column a:hover p.article-image img {
border: 1px solid #999;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

/* global ids
———————————————————————- */

p#comments-invite {
margin-top: 5px;
}

/* global layout
———————————————————————- */

div#page {
margin: 30px auto 40px auto;
padding: 0 0 4px 0;
width: 820px;
text-align: left;
color: inherit;
background-color: #fff;
border: 1px solid #d8d3ca;
}

div#header {
padding: 15px 0 15px 10px;
letter-spacing: 0.2em;
background: url(http://www.jameslomax.com/images/2218.png) no-repeat 100% 7px;
border-bottom: 1px dotted #bbb;
}

ul#nav-list {
padding-top: 15px;
padding-left: 10px;
list-style: none;
font-size: 10px;
}

ul#nav-list li {
padding: 10px 5px;
display: inline;
letter-spacing: 0.2em;
text-transform: uppercase;
font-family: Georgia, Times, Times New Roman, serif;
font-size: 11px;
}

ul#nav-list li.current a {
border-bottom: 2px solid #f07832;}

ul#nav-list li a {
padding: 4px 0px;
}

ul#nav-list a:hover,
ul#nav-list a:focus {
}

div#wrapper {
position: relative;
margin: 0 auto;
clear: both;
width: 726px;
}

div#menu {
margin-bottom: 25px;
margin-top: 23px;
float: right;
width: 25%;
}

div#column {
margin-top: 20px;
margin-right: 30px;
width: 508px;
float: left;
}

div#footer {
margin-top: 25px;
padding: 12px 0 2px 0;
border-top: 1px dotted #999;
}

div#footer p {
text-align: center;
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva;
text-transform: lowercase;
font-size: 11px;

}

/* photos
———————————————————————- */

div#column img {
margin: 15px auto;
display: block;
padding: 8px;
}

div#column p img {
margin: 5px 0;
display: inline;
padding: 8px;
}

div#photo_wrapper {
text-align:center;
}

p#single-photo {
margin: 25px auto 0 auto;
text-align: center;
position: relative;
display: inline-block;
overflow: hidden;
}

a.prev_photo_link {
position: absolute;
top: 0; left: 0;
width: 200px;
height: 100%;
display:block;
float: left;
background: transparent url(http://www.jameslomax.com/images/2219.png); }

a.prev_photo_link:hover {
background: transparent url(http://www.jameslomax.com/images/2220.png) no-repeat 25% 50%; }

a.next_photo_link {
position: absolute;
top: 0; right: 0;
width: 200px;
height: 100%;
display:block;
float: right;
background: transparent url(http://www.jameslomax.com/images/2219.png); }

a.next_photo_link:hover {
background: transparent url(http://www.jameslomax.com/images/2221.png) no-repeat 75% 50%; }

p#single-title {
padding-top: 8px;
padding-bottom: 0;
float: left;
font-family: Georgia, Times, Times New Roman, serif;
}

p#single-date {
padding-top: 8px;
font-family: Georgia, Times, Times New Roman, serif;
padding-bottom: 0;
float: right;
}

a.prev_thumb_link {
padding-right:6px;
}
a.prev_thumb_link.num_2 {
padding-right:5px;
}

a.prev_thumb_link.num_4 {
padding-right:0px;
}

a.prev_thumb_link:last-child {
padding-right: 0;
}
a.prev_thumb_link img {
padding: 6px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

a.prev_thumb_link:hover img {
border: 1px solid #999;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

div#photo-comment-form #txpcommentinputform,
div#photo-comment-form h2 {
margin: 0 auto;
width: 50%;
}

div#photo-comment-form h2 {
margin-bottom: 10px;
}

div#related_category_link {
float:left;
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva;
font-size:11px;
color: #999;
}

div#related_category_link a {
color: #999;
}

div#paypal {
margin-bottom: 25px;
text-align: right;
}

div#paypal form,
div#paypal input,
div#paypal p {
font-family: verdana;
font-size:11px;
color: #999;
margin: 0;
padding: 0;
display: inline;
}

div#paypal a {
color: #999;
}

div#paypal input {
color: #000;
background-color: #fff;
border: none;
}

div#paypal input:hover,
div#paypal input:focus {
cursor: pointer;
color: #b37b7b;
background-color: #fff;
}

div#photos {
margin: 25px auto 25px auto;
text-align: center;
background-color:#E7DDD3;
background-color:#d9d2ca;
padding-top: 25px;
padding-bottom: 5px;
}

div#photos ul {
list-style-type: none;
}

div#photos li {
margin: 0;
display: inline;
}

dl#photo-archive-menu,
dl#words-archive-menu {
margin: 10px auto 0 auto;
float: left;
width: 100%;
padding-bottom: 10px;
padding-top: 5px;
border-top: 1px solid #fff;
}

dl#words-archive-menu {
margin-top: 25px;
border-top: 1px solid #ccc;
}

div#photos dt,
dl#words-archive-menu dt {
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva;
font-size: 11px;
margin: 0 0 5px 0;
padding: 0 0px 5px 5px;
width: 55px;
text-align: left;
font-weight: bold;
float: left;
clear: left;
border-bottom: 1px solid #fff;
}

dl#words-archive-menu dt {
border-bottom: 1px solid #ccc;
}

div#photos dd,
dl#words-archive-menu dd {
font-family: verdana;
font-size: 11px;
margin: 0 0 5px 0;
padding: 0 5px 5px 16px;
display: block;
float: left;
color: #999;
background-color: inherit;
border-bottom: 1px solid #fff;
}

dl#words-archive-menu dd {
border-bottom: 1px solid #ccc;
}

div#photos dd.month_12,
dl#words-archive-menu dd.month_12 {
padding-right:3px;
}

div#archive-menus {
margin: 0 auto 15px auto;
width: 555px;
text-align: right;
}

div#archive-menus form {
float: right;
text-align: right;
}

div#archive-menus select {
font-size:11px;
}

ul#photo-archive-list li + li {
margin-left: 0px;
}

h1#photo-archive-heading {
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 10px;

color: #555555;
background-color: inherit;
}

ul#photo-archive-list {
margin: 0 auto 25px auto;
overflow: auto;
width: 565px;
}

ul#photo-archive-list li a {
background: #fff;
display: inline-block;
margin: 6px;
float: left;
}

ul#photo-archive-list li a img {
padding: 8px;
border: none;
opacity: 1;
filter:alpha(opacity=100);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

ul#photo-archive-list li a img:hover {
background: #222;
opacity: .8;
filter:alpha(opacity=80);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
/* words
———————————————————————- */

form#category-drop {
margin-bottom: 15px;
}

form#category-drop select {
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva;
font-size:11px;
}

p#words-archive-link {
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva;
font-size:11px;
}

dl#words-cat-list {
margin-top: 35px;
}

dl#words-cat-list dt {
font-weight: bold;
margin-left: 0;
border-top: 1px dotted #999;
padding-top: 15px;
}

dl#words-cat-list dd {
padding-bottom: 0px;
margin-left: 0;
font-size: 12px;
margin-bottom: 15px;
}

dl#words-archive-list {
margin: 0 auto;
}

dl#words-archive-list dt {
margin: 10px 0 0 0;
color: #fff;
}

dl#words-archive-list dd {
margin: -17px 0 0 0px;
border-top: 1px dotted #ccc;
font-size: 12px;
}

dl#words-archive-list dd + dd {
border-top: 1px dotted #ccc;
}

ul#words-list {
margin: 0 0 15px 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
}

ul#words-list li {
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva;
font-size: 11px;
margin: 0 0 10px 0;
padding: 0;
}

ul#words-list li a {
color: #888;
}

h2#comments-invite,
h2#comment-preview-heading {
margin-top: 10px;
border: 1px solid #fff;
}

div#comment-preview {
margin-bottom: 15px;
color: inherit;
background-color: #f5f5f5;
}

div.comment {
padding: 1em;
font-size: 12px;
}

p.comment-sig {
margin-bottom: 0;
font-size: 0.9em;
}

/* previous-words
———————————————————————- */

h1#words-archive-month {
margin: 15px 0;
background-color: inherit;
}

dl#words-archive-menu {
margin: 25px auto 20px auto;
float: left;
}

dl#words-archive-list dt {
margin: 10px 0 0 0;
font-weight: bold;
}

dl#words-archive-menu dd {
margin-left: 0;
display: inline;
color: #ccc;
background-color: inherit;
}

form#search {
margin-bottom: 10px;
}

dl#search-results {
margin-top: 10px;
}

dl#search-results dt {
margin: 0 0 5px 0;
padding: 5px 0 0 0;
font-weight: bold;
border-top: 1px solid #eee;
}

dl#search-results dd {
margin: 0 0 5px 10px;
padding: 0;
}

dl#search-results dd + dt {
margin-top: 15px;
}

ul#result-nav {
margin-top: 10px;
padding: 0;
list-style-type: none;
text-align: center;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}

ul#result-nav li {
margin: 2px 5px 2px 0;
padding: 0;
display: inline;
}

ul#result-nav li.current {
font-weight: bold;
}

/* galleries
———————————————————————- */

ul#gallery-list {
list-style-type: none;
text-align: left;
}

ul#gallery-list li {
float: left;
text-align: center;
}

div.rssThumbs {
text-align: center;
}

div.rssThumbFloat {
margin: 0 10px 10px 0;
float: left;
}

/* stories
———————————————————————- */

div.flashmovie {
width: 700px;
margin: 0 auto;
}

ul#story-list {
list-style-type: none;
}

ul#story-list li {
text-align: center;
}

ul#story-list a {
font-weight: bold;
}

ul#story-list a img {
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

ul#story-list a:hover img {
border: 1px solid #999;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

- If a mod wants to mod that post so its not so big and only includes the relevant part of the code, feel free.

zero · 2012-09-01 17:34:13

Please could you explain exactly what you want to achieve as I’m not sure.

Regarding HTML, it’s usually best to put your content as high up the page as possible for semantic and SEO reasons. Then adjust the CSS to position it as you want it to look. In the CSS, there is inheritance to consider, so a rule at the start can affect rules lower down, but first get your positioning right. Then you can tweak inheritance to make it more ‘pure’ or ‘elegant’.

Before I look at the CSS though, I need to know is the existing content as it is meant to be – big image, 4 thumbnails, content text to left, image to right? If so are the two sidebars going to be equal width below this and are they for more content text and images or are they for lists, navigation and other stuff?

Last edited by zero (2012-09-01 17:38:13)

jameslomax · 2012-09-01 19:19:48

Yes I understand the principle of inheritance but – basically – I can’t code css so I don’t know how its implemented. Other nice people did my site for me.

The existing content is OK but I want the sidebars left and right of the existing content in two columns. One sidebar is for a ‘blog’ with all the usual features – posts, comments, etc. I don’t know how to do that either but thats the plan!

- The other “sidebar”, actually, might work best as a horizontal panel below my thumbnails. But is that hard to code? It certainly is for me; impossible in fact. The content of that one – a YouTube feed where I plan to display some videos I want to make.

So basically the existing content is fine and I want to add more content, as above, styled accordingly in terms of dimensions. If you can help, that will be great! I’m also receptive to some core redesign changes, perhaps making use of existing templates etc.

zero · 2012-09-01 19:57:34

OK, that’s going to be tricky and still make it look good. I think your site looks very good as it is. Widening the home page with an extra column means that your visitors on ipads and non-wide screens are going to have to scroll sideways, never a popular thing. So responsive design is needed to adjust to different size screens. The default TXP 4.5 template is responsive and flexible with extensive commenting to help you understand it. But there’s still a lot to learn if you’re useless at css!

When I get some time I’ll try and ‘pour’ your markup into the new theme and see if I can adjust it to work for you so the content is rearranged depending on the screen size. This is where your priorities come in. Would you prefer people to see your blog first, or the existing big image first, or the text/image content first. You will really need to re-order your content so that when it is viewed in single column mode, such as on a mobile, the visitor is seeing what you want them to see in the order you want them to see it.

Like Maniqui I thought perhaps you wanted 2 extra sidebars below the existing content. That would be quite simple to do and you’ve already positioned the sidebar divs there. So for now, let’s just do that and leave the other for later.

You need to change the wrapper for the sidebars because you already have a #wrapper div and cannot have two same ids on a page. Try replacing your existing html with this:

<div id="sidebars-wrapper" class="clear">
  <div id="sidebar-1"><p>content will go here</p> </div>
  <div id="sidebar-2"><p>content will go here</p> </div>
</div>

Then in the global layout part of your css just before #footer put this:

#sidebars-wrapper {position: relative; clear:both; height: 50px; }
#sidebar-1 {float:left; width: 355px; background: #ffe; }
#sidebar-2 {float:left; width: 355px; background: #eff; margin-left: 16px; top: 0; }

I’ve only positioned it there because it should be easy to find there. The hierarchical stuff you mentioned only really refers to the order of the html on the page and by the ‘hierarchy’ of the css, I think you mean inheritance. As these sidebars have unique ids they won’t follow any inheritance rules.

I hope that helps for the time being.

jameslomax · 2012-09-02 10:27:55

Thanks Peter, I’ll try that code.

As regards your questions, I hadn’t considered iPads etc and I suppose I should. So thinking about what you said, maybe the following is a good plan:

1) Change the ‘Words’ part of my site to the blog. With all the usual features. That is – where you currently see my ‘Words’, you will see a blog.

2) The ‘Words’ can be displayed somewhere else. They’re quite long essays and don’t work very well anyway.

3) After that, a vertical column sidebar displaying YouTube videos. Either on the left or the right, not sure. The column width could be fairly narrow.

4) Might want a third narrow width column for further content. Possibly just thumbnail images taking you to my ‘Words’, which will deal with (2).

5) Or – some other content. I’ll have to think about it/open to suggestions.

Basically, I want to ‘jazz up’ my site to make it more ‘sticky’ in terms of diverse content. I’ll continue to post my photos but they don’t actually attract much interest, nor my ‘Words’.

It does look nice – very clean, simple, and ‘old school’. But it doesn’t actually work very well as an internet platform.

uli · 2012-09-02 13:04:11

After reading the topic’s title and your last posts, James, I tried to find the common thread between the two and came to the conclusion there is none:

This topic actually belongs here as it’s acomplete revamp you want.

This annotation is just my personal opinion. It is completely free of moderation objectives, but clearly in the hope of ramping up the amount of gratitude for the effort Peter might put into your project.

jameslomax · 2012-09-02 17:30:34

My last posts were responding to Peter’s questions – and then changing my ideas accordingly. This is not all me! I guess it depends on Peter and what he wants to do and what he “might” do – only Peter knows! I don’t quite know what to say other than that, but I think there should be some freedom to continue.

uli · 2012-09-02 22:18:05

jameslomax wrote:

I think there should be some freedom to continue.

Don’t feel restricted.

zero · 2012-09-03 23:16:12

OK, HTML and CSS are not difficult and you will learn enough to get by if you adapt the new TXP 4.5 to your needs. You will not have to alter a great deal if you want large picture at top, followed by blog article. On the right side you can have videos, paypal and image links. When the screen narrows into one column you will see those items in that order as you go down the page. Here’s what you do with the new txp:

On the default page, remove the whole header section (header, hgroup, site name, site slogan).

You could replace the whole navigation section with your own nav but leave it for now and play with it to see if you can adjust to your needs. I’ll come back to that.

Scroll down past if_search, if_category and if_author and replace <txp:article limit="5" /> with something that will grab your big image and your most recent blog article. This might be, for example,
<txp:article limit="1" section="bigimages" form="minimal" />
<txp:article limit="1" section="blog" form="simple" />

Scroll down to the complementary column and delete everything in div role="complementary" and insert your narrow youtube image links, all your paypal stuff, and your previous thumbs section.

Save it and look at your home page. You should see the layout roughly as you want it. Widen and narrow the page of your browser and see how it adjusts.

Now the CSS. Quite near the beginning of “Styling and layout for screen media (mobile first)” there is nav and also nav.li:active and nav.li:hover. The colours here are also used for buttons so to change from the yellow colours to a neutral grey/black use a text processor with find and replace and change the following:

yellowish -> grey
#e1a61a -> #333333
#ffda44 -> #999999
#fabc2b -> #444444
#ffe477 -> #bbbbbb
#fbcc5d -> #777777

Now have a look at the default article and notice the search button. When you have more articles you will see prev and next buttons too. Are these OK? The nav is probably not OK but you get the idea? You can alter the colours in the nav section to perhaps #eeeeee and #dddddd to get a faint grey or remove them altogether if you want your nav to retain its present look. Don’t forget link colours too. Have fun!

Now layout and positioning. The CSS right until near the end when there is “additional layout for 490px and up” applies to all screen widths and is based on single column. In “672px and up” you can see that widths are set for the main column and the complementary column (left and right in wide view). This is a percentage and may work well for you but you might want to tweak it a little. Trial and error works wonders! But of course do this on an experimental site such as your own computer with MAMP or WAMP or XAMPP.

Phil has done a great job with the new textpattern theme, both admin and public sides, with extensive commenting to help you understand what is going on. Little by little, you can change things and tweak it to your needs. I think it’s probably a good idea to have the high quality photo followed by blog about photography, with images and links alongside. The new txp makes it possible without too much difficulty.

Textpattern CMS

Textpattern CMS support forum

#1 2011-11-12 18:09:24

simple alterations

#2 2011-11-12 18:42:55

Re: simple alterations

#3 2011-11-13 09:42:52

Re: simple alterations

#4 2012-09-01 16:13:05

Re: simple alterations

#5 2012-09-01 17:34:13

Re: simple alterations

#6 2012-09-01 19:19:48

Re: simple alterations

#7 2012-09-01 19:57:34

Re: simple alterations

#8 2012-09-02 10:27:55

Re: simple alterations

#9 2012-09-02 13:04:11

Re: simple alterations

#10 2012-09-02 17:30:34

Re: simple alterations

#11 2012-09-02 22:18:05

Re: simple alterations

#12 2012-09-03 23:16:12

Re: simple alterations

Board footer