Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
CSS styling issues
Hi everyone. I’m still pretty new to textpattern and CSS in general. I’ve been able to come quite a long way in customizing my site but I’m hung up by a couple of things.
1.) I added a large background to my website and included the name of the site as part of the image. Everything is lined up great except that now I don’t have a link to my home page. What I can’t figure out is how to make a portion of that background image(the part that is the name) into a link. I read about using a transparent pixel to do this which might work, except I can’t find the right style in the CSS to add it to. If anyone has more insight on how to do it, I would love to hear it.
2.) Instead of just a text title for my articles I would like it to be an image that stretches the length of the container. The image would go underneith and the title text would sit on top of it. The only CSS style I can find that relates to this portion of the article is “h3 a.” I tried adding it here but because the titles length is only as long as the actual title you typed in, I can’t get it to work.
Alot of my trouble is not knowing exactly where I should be making the changes to do what I want. If it will help to have some visuals, you can see the site at jonwilliamsdesign.com.
Thank you to anyone who can help.
Offline
Re: CSS styling issues
For the “h3 a” couldn’t you give it a width equal to that of the container, or maybe “100%” (not sure if that would work without trying it)?
The site name link is a little more complicated so I’ll see if I can explain it in an understandable way. ;)
In your page template ( or maybe in a form if you need to use it in several page templates) you need to add the link with some style hooks so something like:-
<div class="homeLink"><a href="<txp:link_to_home />"><span><txp:site_name /></span></a></div>Now you don’t want the actual “link text” to appear so in your CSS something like this:-
.homeLink a span {
display: none;
}Then you need to give the “div” tag the width of the image segment you are overlaying and position it so:-
.homelink {
width: 200px;
margin-left: 50px;
margin-top: 20px;
}I quite often find that adding a temporary border helps to get the size and position correct then once it is working you can remove it. Now you need to give the “a” tag a height and make it fill the div so:-
.homeLink a {
display: block;
height: 100px;
}I think that should be it unless you have other blocks (divs or whatever) that need to sit alongside this one in which case you will probably need to use “float: left;” but remember to clear anything underneath it.
Last edited by thebombsite (2008-11-10 18:01:21)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
Re: CSS styling issues
Stuart: Thank you. You were very helpful. This was exactly what I needed to know in order to get the site link working. For the title image I found that all I had to do was create a style for “h3” itself in order to set the width and have the image display correctly. Again, thanks for all your help.
Offline
Pages: 1