Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
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
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
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
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:
- it has a class of
clearwhich I’m fairly confident will produce the effect you don’t want - 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
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
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
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"> </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
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>← Previous</txp:link_to_prev></p>
<p class="next"><txp:link_to_next>Next →</txp:link_to_next></p>
<div class="clear"> </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 />"> </a></txp:chh_if_data><txp:chh_if_data><a href="<txp:link_to_next />" class="next_photo_link" title="<txp:next_title /> →"> </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"> </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
Pages: 1