Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Need help styling links to sections
I’ve just installed TP and am using the default config with only a few modifications of the default CSS file. Eventually I want the site to look like this (mockup only – no content):
http://www.wolnewyrazy.pl/mockup/ww.html
The four gray boxes on the left will contain links to sections (About, Contact, Archive, etc). I’m having trouble recreating this in textpattern. The txp:section_list tag only gives me a simple list, and doesn’t seem capable of producing the layout I need. What I need in html is this:
<div id="leftwrap">
<div class="leftbar">
<a href="link-to-sectionA.html">Link to a section A</a>
</div>
<div class="leftbar">
<a href="link-to-sectionB.html">Link to a section B</a>
</div>
</div>
Is there a combination of txp tags and maybe forms that can help me here,
or will I have to add these links individually by hand? Thanks a lot for any hints.
.marekLast edited by tranglos (2006-04-10 20:35:47)
Well I can get the ‘a’. But how do I put the circle around it?
Offline
#2 2006-04-10 20:55:41
- whatbrick
- Member
- From: Texas
- Registered: 2006-03-13
- Posts: 100
Re: Need help styling links to sections
If you add class="leftbar" to the section_list tag like so:
<txp:section_list class="leftbar" />Then change your style to point to .leftbar li it should accomplish the same look. Don’t forget to add list-style-stype: none; to the .leftbar li to get rid of the bullet-points.
Do not taunt the Markup Monkey!
Offline
Re: Need help styling links to sections
Thanks, your advice got me close but not quite there yet. I now have:
<code><txp:section_list class=“leftbar” wraptag=“ul” break=“li” /></code>
and changed the style to affect the li element instead. Here’s the result:
http://www.wolnewyrazy.pl/mockup/aslist.gif
Looks almost the same, except the elements no longer float left; they are entirely contained within the main content div. I’ve tried setting text-indent: 0 for the li element, but it didn’t help. Here’s the look I’m trying for:
Well I can get the ‘a’. But how do I put the circle around it?
Offline
#4 2006-04-11 15:57:45
- whatbrick
- Member
- From: Texas
- Registered: 2006-03-13
- Posts: 100
Re: Need help styling links to sections
You could try either a negative margin-left, or use position: relative; and use a negative left value. Either one should work, though I haven’t tested them.
Do not taunt the Markup Monkey!
Offline
Re: Need help styling links to sections
Got it, thank you kindly! margin-left: 0 for the LI elements was all I needed.
Well I can get the ‘a’. But how do I put the circle around it?
Offline
Pages: 1