Styling article links with CSS...

6sigma · 2006-03-07 11:48:31

I didn’t design my site, and the designer isn’t available. Can anyone tell me how to put a small, gray (possibly dotted) line under each link in my articles without doing the same thing to the titles, sidebar, navbar, etc.? Thanks for any help you can offer.

The site is at http://rodentregatta.com. I’ve used the web developer toolbar in Firefox, but I cannot see how to style links in articles without also styling links elsewhere on the site.

Last edited by 6sigma (2006-03-07 12:52:54)

thebombsite · 2006-03-07 14:02:18

Try using:-

.entry a {
border-bottom: 1px dotted #444;
text-decoration: none;
}

You could also add “padding-bottom” to push the line down from the text a little but be careful as it may mess with the line-height.

6sigma · 2006-03-07 14:36:40

Stuart:

Thanks so much for replying. I’ve made a pass at using your suggestion. The results can be observed here. Notice that styling .entry a
as you suggest alters article titles, links for comments and categories, etc.

Is this a limitation in the way divs and ids were put in my Textpattern templates for this design? In other words, do I need a separate div or id for the body of an article?

Again, many thanks for the help.

thebombsite · 2006-03-07 14:45:35

Ah! Yes you are a little limited to what you can do by the lack of a specific “div” to aim the CSS at. If you look at your “default” form template (or whichever form is used by the page to output articles) you need to get a “div” around the <code><txp:body /></code> tag. This might be complicated by the use of the <code><txp:excerpt /></code> tag and conditionals. If it is I shall need to see what your form’s code looks like. If not just wrap the “body” tag like so – <code><div class=“post”><txp:body /></div></code>, then in the CSS I gave you above replace “.entry” with “.post”.

Having said all that try using “.entry p a” as it is now.

Last edited by thebombsite (2006-03-07 16:38:49)

6sigma · 2006-03-07 16:49:04

I’m learning and this is incredibly helpful. I think I do indeed have the excerpt conditional issue to contend with.

I have a form called default. It looks like this:

<code>
<div class=“entry”>
<h2 class=“entrytitle”><txp:permlink><txp:title /></txp:permlink></h2>
<h3 class=“entrysub”><txp:posted /></h3>
<txp:body />
<div class=“subentry”>
<p class=“invite”><txp:comments_invite /></p><p class=“posted”>Filed under: <txp:category1 link=1 /></p>
</div>
</div>
</code>

<p>But, there’s also a page called default. Here’s the relevant code from it:</p>

<txp:article form=“def_if_excerpt” limit=“5” />
<txp:output_form form=“front_nav” />

</div> <!— End of “main-content” —>
</div> <!— End of “content —></code>

If this isn’t the code you need, let me know. Again, many thanks for your advice.

thebombsite · 2006-03-07 19:38:11

It’s the form code you need to look at. Try adding that “div” I mentioned:-

<code>
<div class=“entry”>
<h2 class=“entrytitle”><txp:permlink><txp:title /></txp:permlink></h2>
<h3 class=“entrysub”><txp:posted /></h3>
<div class=“post”><txp:body /></div>
<div class=“subentry”>
<p class=“invite”><txp:comments_invite /></p><p class=“posted”>Filed under: <txp:category1 link=1 /></p>
</div>
</div></code>
<br />

then use “.post a” in the CSS I mentioned above.

6sigma · 2006-03-07 20:19:37

thebombsite wrote:

<blockquote>It’s the form code you need to look at. Try adding that “div” I mentioned:-

<code>
<div class=“entry”>
<h2 class=“entrytitle”><txp:permlink><txp:title /></txp:permlink></h2>
<h3 class=“entrysub”><txp:posted /></h3>
<div class=“post”><txp:body /></div>
<div class=“subentry”>
<p class=“invite”><txp:comments_invite /></p><p class=“posted”>Filed under: <txp:category1 link=1 /></p>
</div>
</div></code>
<br />

then use “.post a” in the CSS I mentioned above.</blockquote>

Once I do this, shouldn’t a “view source” show the < div class=“post” > around the body of the article? It currently does not, and I’m puzzled as to why.

thebombsite · 2006-03-07 20:31:59

In that case give me the code for the def_if_excerpt form which is what your article tag appears to be using.

6sigma · 2006-03-07 20:40:19

thebombsite wrote:

In that case give me the code for the def_if_excerpt form which is what your article tag appears to be using.

Here’s what’s in the def_if_excerpt form:
<code>
<div class=“entry”>
<h2 class=“entrytitle”><txp:permlink><txp:title /></txp:permlink></h2>
<h3 class=“entrysub”><txp:posted /></h3>
<txp:swf_if_empty field=“excerpt” minlength=“2”>
<txp:body />
</txp:swf_if_empty>
</code><code>
<txp:swf_if_not_empty field=“excerpt” minlength=“2”>
<txp:excerpt /><p><txp:permlink>Read on…</txp:permlink></p>
</txp:swf_if_not_empty>
<div class=“subentry”>
<p class=“invite”><txp:comments_invite /></p><p class=“posted”>Filed under: <txp:category1 link=1 /></p>
</div>
</div>
</code>

thebombsite · 2006-03-07 22:08:18

Oh my word, that’s more complicated than it needs to be, but let’s not get into that just yet. It occurs to me to ask if you actually use excerpts anywhere? Anyway here you go:-

<code>
<div class=“entry”>
<h2 class=“entrytitle”><txp:permlink><txp:title /></txp:permlink></h2>
<h3 class=“entrysub”><txp:posted /></h3>
<txp:swf_if_empty field=“excerpt” minlength=“2”>
<div class=“post”><txp:body /></div>
</txp:swf_if_empty>
<txp:swf_if_not_empty field=“excerpt” minlength=“2”>
<div class=“post”><txp:excerpt /><p><txp:permlink>Read on…</txp:permlink></p></div>
</txp:swf_if_not_empty>
<div class=“subentry”>
<p class=“invite”><txp:comments_invite /></p><p class=“posted”>Filed under: <txp:category1 link=1 /></p>
</div>
</div></code>
<br />

Extra div tags added around the “body” tag and the “excerpt” tag (including the “more” link). Then use “.post a” with the CSS above.

6sigma · 2006-03-07 23:03:31

thebombsite wrote:

Oh my word, that’s more complicated than it needs to be, but let’s not get into that just yet.

It worked!

I’ve even embellished it a bit for link vs. visited link. Thanks so much!

Here’s my final CSS question for the day: What’s the difference between these two selectors? What are they really telling me?

First: <code>#main-content .post a {whatever}</code>

Second: <code>.post a {whatever}</code>

In properly grouping and commenting my stylesheet, does this change belong with the #main-content selectors or nearer the top of the stylesheet?

thebombsite · 2006-03-08 00:50:06

Excellent stuff. :)

With selectors it’s a bit like a box within a box within a box etc. You start with the largest box, “#main-content”, then you look inside and find the box marked “.post”, then you look inside that and find the box marked “a”. With your examples, the first one would only point to “.post a” if it were inside a div with an id=“main-content”, whereas the second would point to any “.post a”, in other words the first is MORE selective.

And yes, I would group it in with the other #main-content stuff just to keep it tidy or, more accurately, place it with the “.entry”, “.entrytitle” and “.entrysub” stuff as that’s it’s location.

Last edited by thebombsite (2006-03-08 00:55:16)

Textpattern CMS

Textpattern CMS support forum

#1 2006-03-07 11:48:31

Styling article links with CSS...

#2 2006-03-07 14:02:18

Re: Styling article links with CSS...

#3 2006-03-07 14:36:40

Re: Styling article links with CSS...

#4 2006-03-07 14:45:35

Re: Styling article links with CSS...

#5 2006-03-07 16:49:04

Re: Styling article links with CSS...

#6 2006-03-07 19:38:11

Re: Styling article links with CSS...

#7 2006-03-07 20:19:37

Re: Styling article links with CSS...

#8 2006-03-07 20:31:59

Re: Styling article links with CSS...

#9 2006-03-07 20:40:19

Re: Styling article links with CSS...

#10 2006-03-07 22:08:18

Re: Styling article links with CSS...

#11 2006-03-07 23:03:31

Re: Styling article links with CSS...

#12 2006-03-08 00:50:06

Re: Styling article links with CSS...

Board footer