Textpattern Forum

You are not logged in. Register | Login | Help

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

jameslomax
Member
From: UK
Registered: 2005-05-09
Posts: 391
Website

simple alterations

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.

Offline

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

maniqui
Moderator
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 2,976
Website

Re: simple alterations

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.


La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

Offline

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

jameslomax
Member
From: UK
Registered: 2005-05-09
Posts: 391
Website

Re: simple alterations

Merci – that’s very clear.

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

Offline

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

jameslomax
Member
From: UK
Registered: 2005-05-09
Posts: 391
Website

Re: simple alterations

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.

Offline

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

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,034
Website

Re: simple alterations

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)


TXPQ Examples and discussion of Textpattern CMS quality.

Offline

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

jameslomax
Member
From: UK
Registered: 2005-05-09
Posts: 391
Website

Re: simple alterations

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.

Offline

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

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,034
Website

Re: simple alterations

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.


TXPQ Examples and discussion of Textpattern CMS quality.

Offline

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

jameslomax
Member
From: UK
Registered: 2005-05-09
Posts: 391
Website

Re: simple alterations

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.

Offline

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

uli
Moderator
From: Cologne/Köln
Registered: 2006-08-15
Posts: 3,037

Re: simple alterations

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.


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

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

jameslomax
Member
From: UK
Registered: 2005-05-09
Posts: 391
Website

Re: simple alterations

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.

Offline

Board footer

Powered by FluxBB