Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2012-12-06 16:35:36

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

quick css question

I can’t code css so I don’t know how to do this. If you look at my front page and scroll down to the bottom you see two sidebars with “content will go here” inside them.

I want those sidebars as sidebars – vertical columns beside the main display.

I assume this is a simple matter of cutting the sidebar css code and pasting it where it needs to be.

Can anyone help? thanks.

Offline

#2 2012-12-07 16:37:31

gavnosis
Member
From: Milton Keynes, UK
Registered: 2005-03-12
Posts: 150
Website

Re: quick css question

I’ve just had a look and see what you mean …except, if you put the sidebars as columns at the top won’t that mess your main page design?
Where do you want them, and what’s going in them?

Offline

#3 2012-12-08 10:15:14

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

Re: quick css question

Thanks for looking.

Yes it might mess up the design but because I don’t have the skills to do this stuff (other people built my site), this is possibly the most simple change that I can actually manage – if some kind person will tell me where to copy and paste the css code, I can do that.

The content will probably be a YouTube feed. I understand the thumbnails for videos can be defined in any size you want, so they can be made to fit.

It has occurred to me a horizontal ‘panel’ below the main photograph – a row rather than a column – might work better. I don’t know if that would be more difficult to style, or not? It would probably look more ‘elegant’ and fit the design better.

Offline

#4 2012-12-08 13:54:24

gavnosis
Member
From: Milton Keynes, UK
Registered: 2005-03-12
Posts: 150
Website

Re: quick css question

Hi James,

It’s actually a HTML and CSS job
In your page template (default?-depends how it’s named in Textpattern) is a chunk of code four lines long near the bottom

<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>

This has to be changed/deleted/moved for two reasons:

  1. it has a class of clear which I’m fairly confident will produce the effect you don’t want
  2. it’s in the ‘wrong’ place

I think you want a box to float on the right hand side of the screen underneath where the photo goes …and for the CSS property of float to work, it’s dependent on the order within the HTML

<div id=“video”>
</div>

And then in the CSS it can be positioned with something like

div#video{
float:right;
height:260px;
width:360px;
}

I’d need to see some lines of the page template to say exactly where…

Offline

#5 2012-12-08 17:56:55

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

Re: quick css question

Hi Gavin, OK here’s the template –

<txp:output_form form="header" />
                     <!-- show most recent image -->
		<txp:article limit="1" form="photo_front" />
<txp:hide>
                     <!-- show a random image -->
		<txp:article_custom limit="1" section="photos" form="photo_front" sort="rand()" />
</txp:hide>
		<div id="photo_links_wrapper">
<txp:hide>
		<txp:article limit="1" form="related_category_link" />
</txp:hide>
		<txp:output_form form="photo_cat_drop" />
<txp:article limit="1" form="paypal" />
		</div>
		<txp:output_form form="previous_thumbs" />
		<dl id="words-cat-list">
		<txp:article_custom section="words" sort="Posted desc" limit="5" form="words_cat_list" />
		</dl>
<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>
<txp:output_form form="footer" />

- someone else told me how to insert the sidebar code in the template, and frankly I’d forgotten it was there.

- is that what you need?

Last edited by jameslomax (2012-12-08 18:00:29)

Offline

#6 2012-12-09 13:47:18

gavnosis
Member
From: Milton Keynes, UK
Registered: 2005-03-12
Posts: 150
Website

Re: quick css question

This has been done quite nicely with parts of the page in forms… which will need the alteration rather than just the page template. So I’ll switch to email to ask my next question, rather than clog up the forum :-)

Offline

#7 2012-12-09 13:57:57

gavnosis
Member
From: Milton Keynes, UK
Registered: 2005-03-12
Posts: 150
Website

Re: quick css question

Scrub that, this might be one for the community afterall!

James, there’s a form called photo_front which seems to be around where we want to put a <div> in
Can I/we see the code for that?

Whatever happens, you safely delete the code highlighted below

<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>

In your outputted page i.e. on your live website, is this:

<div id="photo_wrapper">
<p id="single-photo"><a href="http://www.jameslomax.com/photos/2208/lake-district-photography-helvellyn-in-autumn" class="prev_photo_link" title="← Lake District Photography: Helvellyn In Autumn">&nbsp;</a>	<img src="http://www.jameslomax.com/images/2708.jpg" width="650" height="506" alt="" />
This view is looking up towards the summit of Helvellyn showing the undulating plateau as you gently descend, in this case, down towards Grizedale Tarn. I’ve come this way perhaps five times and rarely seen anyone here. Most walkers undertake the Striding Edge and Swirral Edge circuit. On this occasion a man and woman were up here walking their dog. When they dropped down to the tarn I wondered if they would turn left for Grizadale but they went right, instead, which takes you down to Grasmere. As with many Lake District names, ‘helvellyn’ is a lovely sound. </p>
</div>

The tricky part is getting to the right part of the template to float a div in after the photo but before the text :-)

Offline

#8 2012-12-09 20:34:02

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

Re: quick css question

OK thanks. And sure – I’m sure there are people who will appreciate this. This forum is mostly populated with coders and developers. In that respect (I can see) its excellent – no nonsense, civilised, and high quality stuff gets swapped around. But unfortunately I don’t fit into that because I can’t code.

Yes here it is -

<txp:hide>
	<div class="prev-next">
		<p class="prev"><txp:link_to_prev>&larr; Previous</txp:link_to_prev></p>
		<p class="next"><txp:link_to_next>Next &rarr;</txp:link_to_next></p>
		<div class="clear">&nbsp;</div>
	</div>
</txp:hide>
	<div id="photo_wrapper">
	<p id="single-photo"><txp:chh_if_data><a href="<txp:link_to_prev />" class="prev_photo_link" title="← <txp:prev_title />">&nbsp;</a></txp:chh_if_data><txp:chh_if_data><a href="<txp:link_to_next />" class="next_photo_link" title="<txp:next_title /> →">&nbsp;</a></txp:chh_if_data><txp:etz_striptags><txp:body /></txp:etz_striptags></p>
	</div>
	<p id="single-title"><a href="<txp:permlink />" title="Permanent link to “<txp:title />”"><txp:title /></a></p>
	<p id="single-date"><txp:posted /></p>
	<div class="clear">&nbsp;</div>
<txp:output_form form="current_article_timestamp" />

- I think what you’re doing here should result in a ‘box’ below the text as well, because the text relates directly to the photo. But – I should explain – the videos will not relate to anything else directly.

Offline

Board footer

Powered by FluxBB