Serendipity Forums

Posted: **Mon Apr 09, 2007 7:44 pm**

Hello - I am new to the forums but have been using Serendipity since June 2006 for my son's blog: http://www.asherbenjamin.net.

I have used Coffee Bar and Bubblegum themes (modifying color and adding links to header) and this past week my husband and I have been working on a new look. It is up, but not without problems. So, I'm still working on the issues.

I am wondering if someone can help me with a few things.

1) I want the active links in the entries to be different color(s) than the sidebar. For the sidebar, I just want white (ffffff). For the entries, I want green (7d9412) (bold for both).

So, for entries, I put this:

.serendipity_entry a, a:link, a:visited, a:active {
color: #7d9412;
font-weight: bold;

Then when I put this for the sidebar, it makes ALL links white (for both entry and sidebar).

.serendipitySideBarContent a, a:link, a:visited, a:active {
/
color: #ffffff;
}

How can I fix this? I tried a few other things, including trying to add code to the sidebar.tpl file....but no luck.

2) I'm working on my background image to make the bottom of the orange/black table move with the length of the entries....still working on that....no specific questions yet....just going to view some other themes' codes to help me. Might need help though. Would also need to do the same for the green area (for the sidebar) at some future date to make it more of a working template / theme.

3) Is there any information out there (tutorials?) to assist me in making an image map so-to-speak, so I can make a search button to the left of my son's photo (instead of 'quick search' in the sidebar) and also linking from the items on the image frame (i.e. "x diagnosis," "guestbook," "home," etc)?

Thanks for any assistance you can give me!

Steph[/quote]

Posted: **Tue Apr 10, 2007 12:21 am**

steph730 wrote:So, for entries, I put this:

.serendipity_entry a, a:link, a:visited, a:active {
color: #7d9412;
font-weight: bold;
Then when I put this for the sidebar, it makes ALL links white (for both entry and sidebar).

.serendipitySideBarContent a, a:link, a:visited, a:active {
/
color: #ffffff;
}
How can I fix this?

You need to have the css class before every link element ... this is hard to explain, so I'll just show you the code:

Code: Select all

.serendipity_entry a,
.serendipity_entry a:link,
.serendipity_entry a:visited,
.serendipity_entry a:active {
    color: #7d9412;
    font-weight: bold;
}

See what I mean? Same for the sidebar links.

YL

Posted: **Tue Apr 10, 2007 12:51 am**

Yes, I see what you mean and it fixed it right up. Now just gotta figure out where to code the link color for the "posted by [person's name]" and "[category]" because it changed to a default now that I fixed the links in the entry and sidebar. Thanks for the help!

Steph

Posted: **Tue Apr 10, 2007 10:18 am**

If you use firefox there are some awesome addons for changing css and seeing what style is applied where on the page by clicking, you can change stuff real time and save out the new files so you can add that to your template directory. I use the add-ons called EditCSS and Web Developer.

Posted: **Tue Apr 10, 2007 11:16 am**

Hi

you'll find those links can be styled in serendipity_entryFooter in the same way that you've styled the links in the sidebar or entry

HTH

Dave

Posted: **Tue Apr 10, 2007 11:22 am**

Melanieofsydney wrote:I use the add-ons called EditCSS and Web Developer.

You might want to add Firebug to that list. I have actually dumped EditCSS since I discovered Firebug

YL

Posted: **Tue Apr 10, 2007 6:33 pm**

d_cee wrote: you'll find those links can be styled in serendipity_entryFooter in the same way that you've styled the links in the sidebar or entry

Dave, that did help for "previous" and "next" at the bottom of the page, however, I moved the "author" and "categories" up in entries.tpl like this:

{if $dategroup.is_sticky}
<p class="serendipity_date">{$CONST.STICKY_POSTINGS}</p>
{else}
<class="serendipity_date">[ {$dategroup.date|@formatTime:DATE_FORMAT_ENTRY}<class="entry_time"> @ {$entry.timestamp|@formatTime:'%H:%M'} ]
{/if} {$CONST.POSTED_BY} <a href="{$entry.link_author}">{$entry.author}</a>
{if $entry.categories}
{$CONST.IN} {foreach from=$entry.categories item="entry_category" name="categories"}<a href="{$entry_category.category_link}">{$entry_category.category_name|@escape}</a>{if not $smarty.foreach.categories.last}, {/if}{/foreach}
{/if}
</div>
<div class="serendipity_entry serendipity_entry_author_{$entry.author|@makeFilename} {if $entry.is_entry_owner}serendipity_entry_author_self{/if}">
{if $entry.categories}
<span class="serendipity_entryIcon">
{foreach from=$entry.categories item="entry_category"}
{if $entry_category.category_icon}
<a href="{$entry_category.category_link}"><img class="serendipity_entryIcon" title="{$entry_category.category_name|@escape}{$entry_category.category_description|@emptyPrefix}" alt="{$entry_category.category_name|@escape}" src="{$entry_category.category_icon}" /></a>
{/if}
{/foreach}
</span>
{/if}

I thought it was serendipity_entry_heading, but that didn't work.

I did put ?<font color=""> in the entries.tpl file and that worked, but only for IE, and then it messed up the entry text color in FF too. It is just about the last bit I need to fix, if you could please help, thanks!

(11:30am)
Well....I think maybe I am happy with this change....but again, did this in entries.tpl (not style css file):

{if $dategroup.is_sticky}
<p class="serendipity_date">{$CONST.STICKY_POSTINGS}</p>
{else}
<class="serendipity_date">[ {$dategroup.date|@formatTime:DATE_FORMAT_ENTRY}<class="entry_time"> @ {$entry.timestamp|@formatTime:'%H:%M'} ]
{/if} {$CONST.POSTED_BY}
<a href="{$entry.link_author}" style="text-decoration: none"><font color="#7D9412"><b>{$entry.author}</b></font></a>
{if $entry.categories}
{$CONST.IN} {foreach from=$entry.categories item="entry_category" name="categories"}<a href="{$entry_category.category_link}" style="text-decoration: none"><font color="#7D9412"><b>{$entry_category.category_name|@escape}</b></font></a>{if not $smarty.foreach.categories.last}, {/if}{/foreach}
{/if}
</div>
<div class="serendipity_entry serendipity_entry_author_{$entry.author|@makeFilename} {if $entry.is_entry_owner}serendipity_entry_author_self{/if}">
{if $entry.categories}
<span class="serendipity_entryIcon">
{foreach from=$entry.categories item="entry_category"}
{if $entry_category.category_icon}
<a href="{$entry_category.category_link}"><img class="serendipity_entryIcon" title="{$entry_category.category_name|@escape}{$entry_category.category_description|@emptyPrefix}" alt="{$entry_category.category_name|@escape}" src="{$entry_category.category_icon}" /></a>
{/if}
{/foreach}
</span>
{/if}

It looks okay in IE and FF now.

Would still like to know if there is a way to do this in style.css because then I could do a hover color and more.

Thanks for the help!
Steph

Posted: **Tue Apr 10, 2007 10:28 pm**

Steph - You cannot use just <class="WHATEVER">. You are doing so in several places. You CAN have <a class="WHATEVER">, <div class="WHATEVER">, <span class="WHATEVER"> and a few more, but the point that you cannot have a tag of just <class="..."> without a name or "token". They are further screwed up by the fact that a nameless tag appears to open, but is never closed.

That being said, your problem is easily fixed.

Element by element:

Code: Select all

<p class="serendipity_date">{$CONST.STICKY_POSTINGS}</p>

I do not think this works well as a paragraph, especially not in the context in which you are using it. If you want to test it out, simply make one of your entries "sticky" and you will find out what I mean.

I think a span works better, ie:

Code: Select all

<span class="serendipity_date">{$CONST.STICKY_POSTINGS}</span>

<class="serendipity_date">[ {$dategroup.date|@formatTime:DATE_FORMAT_ENTRY}<class="entry_time"> @ {$entry.timestamp|@formatTime:'%H:%M'} ]

So here is our first (and second) example of a tag(s) without a name or token. It also SUGGESTS someone was trying to accomodate 2 different classes, one for the date, another for the time. It is unlikely, however, anyone would ever want these styled differently. My choice would be to use a span with a single class for the entire thing:

Code: Select all

<span class="serendipity_date">[ {$dategroup.date|@formatTime:DATE_FORMAT_ENTRY} @ {$entry.timestamp|@formatTime:'%H:%M'} ]</span>

Next....

Code: Select all

{$CONST.POSTED_BY}
<a href="{$entry.link_author}" style="text-decoration: none"><font color="#7D9412"><b>{$entry.author}</b></font></a>

This one has no tag, and you are trying to style it in-line. Using our previous span examples, this one becomes the following, styling then relocated to style.css:

Code: Select all

<span="WHATEVERCLASSYOUWANT">{$CONST.POSTED_BY}
<a href="{$entry.link_author}"> {$entry.author}</a></span>

Finally:

Code: Select all

{$CONST.IN} {foreach from=$entry.categories item="entry_category" name="categories"}<a href="{$entry_category.category_link}">{$entry_category.category_name|@escape}</a>{if not $smarty.foreach.categories.last}, {/if}{/foreach}

Can also be wrapped in a span tag:

Code: Select all

<span class="WHATEVERYOUWANT">{$CONST.IN} {foreach from=$entry.categories item="entry_category" name="categories"}<a href="{$entry_category.category_link}">{$entry_category.category_name|@escape}</a>{if not $smarty.foreach.categories.last}, {/if}{/foreach} </span>

Most of the time, you see all these little bits of meta data styled exactly the same way. If that were the case, and there were no other spans falling under <div id="serendipity_Entry_Date">, you could omit the span classes (ie, just use <span> without a class="..) and use something like this in your style css:

Code: Select all

#serendipity_EntryDate span{
color: whatever;
text-decoration: whatever;
etc... }

Likewise, you can use:

Code: Select all

#serendipity_Entry_Date span a,
#serendipity_Entry_Date span a:link,
#serendipity_Entry_Date span a:visited {
color: whatever;
}

AND

Code: Select all

#serendipity_Entry_Date span a:hover {
color: whatever;
},

I wrote this very quickly, and have not reviewed it extensively. Hopefully, it is either correct, you will figure it out for yourself, or someone else will come along and add further explanation/correction if necessary.

Posted: **Wed Apr 11, 2007 1:43 am**

Wow, Don, THANK YOU! I have some stuff to learn! LOL I knew that though.

It was my messing with the code that did that to the "class"es. I just dragged part of the code from the bottom (footer area I think) to have the author name and category up under the entry title. That will teach me to be more careful. I just assumed it was all okay cuz it "looked" right when I was done. LOL

Thanks again!
Steph

Serendipity Forums

Links in sidebar different color(s) than entries?

Links in sidebar different color(s) than entries?

Re: Links in sidebar different color(s) than entries?