?

Log in

No account? Create an account

Previous Entry | Next Entry

Color of Text, Change Text, & Separater Bar

  • Sep. 13th, 2006 at 1:26 AM
Hello there,
I have just switched to Urban Noir, and love it. Perfect change from what I had before.
I trotted around this site and another you had linked to in regards to getting sitemeter added. After many hours of frustrating clicking, I finally managed to get it done. (Frustrating because I'm a retard when it comes to this, and had to do a lot of learn as I go in regards to the language and where things were.)

Now, I have a few things I'd like to change and it'll be perfect (I do have a paid account.). But I'm in dire need of step by step instructions. Go here>>click this>>paste that>> etc.
If you'd be so kind as to help me with these, I'll be your best friend forever. Really.

1.) Anonymous comment text: [(Anonymous) wrote:] Would like to change that to: [Incognito Entity wrote:], no parenthesis or italics either.

2.) The color of the text for the links in the sidebar, and the links at the end of each entry (comments, edit, track this, edit tags, etc), and the text in the body/entry--I'd like them all to be a shade or two darker. I know about hex codes and use Color Cop, just need to know the code and where it gets edited.

3.) Change the color of clickable links within the body of the entry.

4.) I'd like a separator bar at the end of each entry, preferably leaving about a half inch or so before the previous entry begins, once it's posted. And not at the top of the entry most recently posted (will detract from the design of the header---which I like very much as is.)
I did find information here about this particular want of mine, but I didn't understand it, or where to put it, or how to get there! (I do have a clear idea *now* on how to edit the code, where it goes, and the create a layer thing, so no worries on that front.)

And THANK YOU for your efforts here regarding all these questions from everyone.

Comments

( 25 comments — Leave a comment )
redwolf
Sep. 13th, 2006 08:02 am (UTC)
Anonymous comment text code to be added to a custom layer (check the tutorials for details on how to do this):

set text_poster_anonymous = "Incognito Entity";

Colour of links in the sidebar CSS:

.widget-content a:link,
.widget-content a:visited {
color : #999;
}
.widget-content a:hover {
color : #666;
}

Colour of links at the end of entry CSS:

.asset-meta-list a:link,
.asset-meta-list a:visited {
color : #999;
}
.asset-meta-list a:hover {
color : #666;
}

Colour of links within body of entry CSS:

.asset-body a:link,
.asset-body a:visited {
color : #ff0000;
}
.asset-body a:hover {
color : #0000ff;
}

Separator Bar CSS:

.asset-footer {
margin-bottom : 15px;
border-bottom : 1px solid #999;
}
chasethestars
Sep. 13th, 2006 04:35 pm (UTC)
re: separator
Separator Bar CSS:

.asset-footer {
margin-bottom : 15px;
border-bottom : 1px solid #999;
}


note to raginglunatic:
Change 15 to any number you want, depending on what "about a half inch" looks like on your screen (half an inch on my screen is different from half an inch on your screen). The bigger the number, the bigger the space.

Sorry if this seems obvious. I'm adding this as a just in case, since you did ask for step by step instructions :)
raginglunatic
Sep. 13th, 2006 04:47 pm (UTC)
Re: separator
No apologies necessary, thank you!
I have more problems that just that 15px--which I figured should be bigger from my dicking around in Paint for my icon pic manipulations.

Given the information that was offered in the first comment here, I went to the tutorial and followed the directions about creating a new layer, and pasted this into the edit thing (first two lines were already there, I added the name text):

layerinfo "type" = "user";
layerinfo "name" = "ExpressiveStat2";
set base_theme = "urban-noir";
set text_poster_anonymous = "Incognito Entity";
.widget-content a:link {color : B5B2B5;
}
.widget-content a:visited {
color : #215163;
}
.widget-content a:hover {
color : #666;
}
.asset-meta-list a:link {
color : B5B2B5;
}
.asset-meta-list a:visited {
color : #215163;
}
.asset-meta-list a:hover {
color : #666;
}
.asset-body a:link {
color : 215163;
}
.asset-body a:visited {
color : #ff0000;
}
.asset-body a:hover {
color : #0000ff;
}
.asset-footer {
margin-bottom : 15px;
border-bottom : 1px solid #000000;
}
____________________
This is the error message it gave me:
S2 Compiler Output at Wed Sep 13 16:39:31 2006
Error compiling layer:

Compile error: line 5, column 1: Unknown token encountered while parsing layer: [TokenPunct] = .
S2::Layer, S2/Layer.pm, 67
S2::Compiler, S2/Compiler.pm, 27


Context

1: layerinfo "type" = "user";
2: layerinfo "name" = "ExpressiveStat2";
3: set base_theme = "urban-noir";
4: set text_poster_anonymous = "Incognito Entity";
5: .widget-content a:link {color : B5B2B5;
6: }
7: .widget-content a:visited {
8: color : #215163;
9: }
____________________________

I did add color to some of those links as it looks to be that only the visited links would change and that wasn't enough for what I wanted. Although, I do realize I may be a complete idiot, and assumed where I should not have. I notice that the color codes are only three digits...what is that? I thought they were supposed to be six.

SOS!
chasethestars
Sep. 13th, 2006 05:03 pm (UTC)
Re: separator
Colors can be 3 if the last 3 are the same. For example, #fff will be the same white as #ffffff. I like to use 6 in my code to keep it consistent, but 3 works fine :)

See what branchandroot said below about where to put the CSS.

Actually, put this in instead, so later on, you'll remember which part is what. You can add text that explains what it is (notes for yourself). It just needs to be inbetween /* and */. This is called "commenting out". You can read it, but the browser won't interpret it as code.



/* Colour of links in the sidebar */

.widget-content a:link,
.widget-content a:visited {
color : #999;
}
.widget-content a:hover {
color : #666;
}

/* Colour of links at the end of entry */

.asset-meta-list a:link,
.asset-meta-list a:visited {
color : #999;
}
.asset-meta-list a:hover {
color : #666;
}

/* Colour of links within body of entry */
.asset-body a:link,
.asset-body a:visited {
color : #ff0000;
}
.asset-body a:hover {
color : #0000ff;
}

/* Separator Bar */

.asset-footer {
margin-bottom : 15px;
border-bottom : 1px solid #999;
}
raginglunatic
Sep. 13th, 2006 05:12 pm (UTC)
Re: separator
Thank you so much, that is incredibly helpful and easy to understand.
I did follow Branch's advice and had mostly success. The Incognito Entity did not work, how do I fix that? (it didn't corrupt, it just didn't change from the default [(Anonymous) wrote:]
And I'd like to remove or hide the 'Previous 20' link at the very top of the most recent entry/underneath the header area.
nimoloth
Sep. 13th, 2006 08:08 pm (UTC)
Re: separator
To get rid of the top Previous 20 link, put this in the Custom CSS area:

.stream-header { display: none; }

To change the colour of the links at the bottom of an entry, put this in Custom CSS:

.asset-meta-list,
.asset-meta-list a:link,
.asset-meta-list a:hover,
.asset-meta-list a:visited,
.asset-meta-list a:active {
color : #AFA578;
}

with your colour of choice in there of course.
nimoloth
Sep. 13th, 2006 08:26 pm (UTC)
Re: separator
Regarding the anonymous poster text, there are two things you need to do. To change the text, put these two lines into your layer:

property use text_poster_anonymous;
set text_poster_anonymous = "Incognito Entity";

To make it not italic will require a small change to the function EntryPage::print_comment. Here is the complete function, with the bits you need to change marked in red. You can simply change them and then copy and paste the whole lot into your layer. I'll explain below what to change them to. So, the function:

[I've run out of space in this repy - see my next reply for the continuation...]
nimoloth
Sep. 13th, 2006 08:27 pm (UTC)
Re: separator

function EntryPage::print_comment(Comment e) {
var string barc = "comment-" + ($e.depth % 2 ? "odd" : "even");
var int num = 0;

if (not $e.full) {
# Collapsed mode

var string id = $e.dom_id ? " id=\"comment-$e.talkid\"" : "";
"""
<a name='$e.anchor'></a>
<div class="collapsed-comment"$id>
<div class="comment-inner">
<div class="comment-meta">""";

var string subject = $e.subject != "" ? $e.subject : """<i class="nosubject">$*text_nosubject</i>""";

"""<a href="$e.permalink_url" class="collapsed-comment-link">$subject</a> <span class="separator">-</span> """;

var string poster = (defined $e.poster ? ""+$e.poster : """<i class="noposter">$*text_poster_anonymous</i>""");
"""$poster <span class="separator">-</span> """;
print lang_posted_by_date_and_time($e, false, true, true);

if (size($e.replies) > 0) {
foreach var Comment c ($e.replies) {
$this->print_comment($c);
}
}

"""
</div>
</div>
</div>\n""";

return;
}

var string id = $e.dom_id ? " id=\"comment-$e.talkid\"" : "";

"""
<a name='$e.anchor'></a>
<div class="$barc comment"$id>
<div class="comment-inner">
<div class="comment-meta">""";

if ($*opt_userpic_comments and defined $e.userpic) {
"""<div class="user-icon">$e.userpic</div>""";
}

var string poster = defined $e.poster ? $e.poster->as_string() : "<i>$*text_poster_anonymous</i>";

"""<span class="commenter-name">$poster """;
if ($e.metadata{"poster_ip"} != "") {
"(" + $e.metadata{"poster_ip"} + ") ";
}
"""wrote:</span><br />""";
var string datetime = lang_posted_by_date_and_time($e, true, true, true);
"""<div class="comment-date"><abbr class="datetime">$datetime</abbr></div>""";

if ($e.subject != "") {
"""<div class="comment-subject">$e.subject</div>""";
}

"""<div class="comment-body">""";
$e->print_text();
"""</div>

<div class="comment-links">""";
var string sep = """<span class="separator">|</span>""";
"""<a class="permalink" href="$e.permalink_url"><img src="$*text_permalink"></a>""";

if ($e.frozen) {
" $sep $*text_comment_frozen";
} else {
" $sep "; $e->print_reply_link({"linktext" => $*text_comment_reply});
}

if ($e.parent_url) { print """ $sep <a href="$e.parent_url">$*text_comment_parent</a>"""; }
if ($e.thread_url) { print """ $sep <a href="$e.thread_url">$*text_comment_thread</a>"""; }

$e->print_linkbar();

if ($this.multiform_on) {
println """ <label for="ljcomsel_$e.talkid">$*text_multiform_check</label>""";
$e->print_multiform_check();
}

"</div>\n</div>\n</div>\n</div>\n";
if (not $e.frozen) {
$e->print_reply_container({"class" => "quickreply"});
}

if (size($e.replies) > 0) {
foreach var Comment c ($e.replies) {
"""<div style="margin-left: 35px">""";
$this->print_comment($c);
"""</div>""";
}
}
}


[Continued in next reply...]




nimoloth
Sep. 13th, 2006 08:27 pm (UTC)
Re: separator
In those bits I've made red, replace the letter i at the start and end of the segments with span. The i is the tag for italic - replacing it with span removes the italic feature while keeping the class. So as I said - change those and copy and paste the whole lot into your layer.

Let me know if you have any problems with this.
raginglunatic
Sep. 13th, 2006 10:00 pm (UTC)
Re: separator
Copied below is how I tried to follow your instructions:

var string poster = (defined $e.poster ? ""+$e.poster : """$*property use text_poster_anonymous""");


var string poster = defined $e.poster ? $e.poster->as_string() : "$*set text_poster_anonymous = "Incognito Entity";

I think I messed it up. :-\
This was supposed to go in the Custom Options>>>CSS Tab area, right?

It didn't do the desired result, but he separater bar disappeared and the color of the body links reverted to default. (Both of which, I didn't go near.)
nimoloth
Sep. 13th, 2006 10:33 pm (UTC)
Re: separator
Sorry, I guess I wasn't clear enough! Firstly, you need to create a custom theme to do this. To create a custom theme, go here and follow the instructions for creating a custom theme, including the instructions to set your base colour theme. (Don't worry about the custom layer stuff there, you don't need that.)

Once you've done that, insert these two lines into your custom theme, right below the other stuff that's already there (only three or four lines):

property use text_poster_anonymous;
set text_poster_anonymous = "Incognito Entity";


Once you've done that, copy and paste the whole of the code in my next reply in as well...

[cont...]
nimoloth
Sep. 13th, 2006 10:35 pm (UTC)
Re: separator

function EntryPage::print_comment(Comment e) {
var string barc = "comment-" + ($e.depth % 2 ? "odd" : "even");
var int num = 0;

if (not $e.full) {
# Collapsed mode

var string id = $e.dom_id ? " id=\"comment-$e.talkid\"" : "";
"""
<a name='$e.anchor'></a>
<div class="collapsed-comment"$id>
<div class="comment-inner">
<div class="comment-meta">""";

var string subject = $e.subject != "" ? $e.subject : """<i class="nosubject">$*text_nosubject</i>""";

"""<a href="$e.permalink_url" class="collapsed-comment-link">$subject</a> <span class="separator">-</span> """;

var string poster = (defined $e.poster ? ""+$e.poster : """<span class="noposter">$*text_poster_anonymous</span>""");
"""$poster <span class="separator">-</span> """;
print lang_posted_by_date_and_time($e, false, true, true);

if (size($e.replies) > 0) {
foreach var Comment c ($e.replies) {
$this->print_comment($c);
}
}

"""
</div>
</div>
</div>\n""";

return;
}

var string id = $e.dom_id ? " id=\"comment-$e.talkid\"" : "";

"""
<a name='$e.anchor'></a>
<div class="$barc comment"$id>
<div class="comment-inner">
<div class="comment-meta">""";

if ($*opt_userpic_comments and defined $e.userpic) {
"""<div class="user-icon">$e.userpic</div>""";
}

var string poster = defined $e.poster ? $e.poster->as_string() : "<span>$*text_poster_anonymous</span>";

"""<span class="commenter-name">$poster """;
if ($e.metadata{"poster_ip"} != "") {
"(" + $e.metadata{"poster_ip"} + ") ";
}
"""wrote:</span><br />""";
var string datetime = lang_posted_by_date_and_time($e, true, true, true);
"""<div class="comment-date"><abbr class="datetime">$datetime</abbr></div>""";

if ($e.subject != "") {
"""<div class="comment-subject">$e.subject</div>""";
}

"""<div class="comment-body">""";
$e->print_text();
"""</div>

<div class="comment-links">""";
var string sep = """<span class="separator">|</span>""";
"""<a class="permalink" href="$e.permalink_url"><img src="$*text_permalink"></a>""";

if ($e.frozen) {
" $sep $*text_comment_frozen";
} else {
" $sep "; $e->print_reply_link({"linktext" => $*text_comment_reply});
}

if ($e.parent_url) { print """ $sep <a href="$e.parent_url">$*text_comment_parent</a>"""; }
if ($e.thread_url) { print """ $sep <a href="$e.thread_url">$*text_comment_thread</a>"""; }

$e->print_linkbar();

if ($this.multiform_on) {
println """ <label for="ljcomsel_$e.talkid">$*text_multiform_check</label>""";
$e->print_multiform_check();
}

"</div>\n</div>\n</div>\n</div>\n";
if (not $e.frozen) {
$e->print_reply_container({"class" => "quickreply"});
}

if (size($e.replies) > 0) {
foreach var Comment c ($e.replies) {
"""<div style="margin-left: 35px">""";
$this->print_comment($c);
"""</div>""";
}
}
}


Nearly there...

[cont...]
nimoloth
Sep. 13th, 2006 10:38 pm (UTC)
Re: separator
(I've fixed up that code so you don't need to change anything, just copy and paste).

Now that all that's been pasted in, go to the Save & Compile button at the top left and clikc it. If all is well, no errors should appear at the bottom.

Now go back to the main Edit Journal Style - Look And Feel. If you have created a theme, make sure you have the correct layer selected that you based it on, and choose your new theme from the Themes drop-down layer.

Your journal should now show the changes. There is no CSS manipulation involved in this, only S2 coding. You don't need to go anywhere near Custom CSS :). Let me know if you're still having problems.
raginglunatic
Sep. 14th, 2006 05:07 am (UTC)
Forget Incognito; Stat Counter Crisis!
Just kill me now, wouldja?
I'm tearing my hair out over here.
Situation: Went and upgraded my sitemeter just for a month to see if I liked it better. Noticed that it wasn't showing up on the journal anymore, so went back to sitemeter to get the code thinking maybe it had changed after forking over the plastic cash.
Retrieved the code, rummaged around and found the help post about adding stat counter, got it to take in the editing process (no compiling errors, and after about 30 friggin' attempts!)
It still isn't showing on my journal.
Would you take a look at the following and tell me what's wrong with it?

[Broken into multiple posts due to length]
raginglunatic
Sep. 14th, 2006 05:38 am (UTC)
Stat Counter Crisis Continued
I was going to email you, but you don't have email showing in your profile. This whole thing is something like 53,000 characters and I simply don't have the patience to break it down into 12 or so, parts.
So, I made another post regarding just the stat counter issue.
I wish you'd just go in there, do your code magic, clean up the mess, sprinkle web designer fairy dust in that code hell.
(If you want to, email me: ragingloonatic@gmail.com, and I'd more than happy to flip the password and log out for you.)

I can't even begin to think about the anonymous wrote and comment section link color business. After all this....ARGH.
(Anonymous)
Sep. 14th, 2006 06:00 am (UTC)
Re: Stat Counter Crisis Continued
Calm! It's just code! So let me get this figured out - you're putting the anonymous comment issue aside for the time being because your stat counter is not showing up and you want to fix that first?

Well, I don't know about adding stat counters specifically, but if you have HTML code for it it should be a simple matter of putting it in the right place in the S2 code. Where do you want it to appear?

You should be able to post me a link to your layer or theme code (which do you have?) and I can take a look at it. If not, you can email me at my Livejournal address, nimoloth[@]livejournal[dot]com.
raginglunatic
Sep. 14th, 2006 06:06 am (UTC)
Re: Stat Counter Crisis Continued
Oh hello! My saviour!
I can't help it, getting pissed off. This SHOULD be easy. It looks easy, it reads easy, I have better than average reading skills and a high learning curve. It. Shouldn't. Be. This. Obnoxious!
Anyway...
While you were posting this, I trotted over to sitemeter and lo and behold there are tons, and I mean TONS of visitors having visited in the last hour. While trying to fix this, I would check and see nothing had changed--which could have been either scene--no action, or no counter.

So, what I'm going to do now is email you with the new plan.
Anonymous wrote and comment section link color change.
I'm so happy to see you're up!
raginglunatic
Sep. 16th, 2006 03:34 am (UTC)
ATTENTION PLEASE!
Everyone, please take a moment and send virtual, or even silent thanks to [info]nimoloth, who helped me immensely with the evil S2 and CSS code crap associated with modern day Live Journal Living.

Before my last clump of hair was ripped from my frazzled skull, she swooped in at the S2Expressive community, and saved the day.

I hereby announce that September 13 is International Saviour of the Code Day, and [info]nimoloth is the first recipient of Metric Tons of Gratitude and Tidal Waves of Good Karma.

*golf clap*

Thanks also to chasethestars and branch.
Refreshments in the back, don't be piggies at the buffet.
nimoloth
Sep. 13th, 2006 10:38 pm (UTC)
Re: separator
Oh, also - undo whatever you already tried to do regarding this.
nimoloth
Sep. 13th, 2006 10:47 pm (UTC)
Re: separator
By the way, do you already have a custom layer? If you have as custom layer (as opposed to a custom theme which I just explained the process for) you don't need to copy and paste that function, you just need to find it in your layer (assuming you duplicated Expressive) and change this line:

var string poster = (defined $e.poster ? ""+$e.poster : """<i class="noposter">$*text_poster_anonymous</i>""");

to this:

var string poster = (defined $e.poster ? ""+$e.poster : """<span class="noposter">$*text_poster_anonymous</span>""");

And change this line:

var string poster = defined $e.poster ? $e.poster->as_string() : "<i>$*text_poster_anonymous>/i<";

to this:

var string poster = defined $e.poster ? $e.poster->as_string() : "$*text_poster_anonymous";

And you would put these two lines:

property use text_poster_anonymous;
set text_poster_anonymous = "Incognito Entity";

into the propgroup at the top named "text".

You can find both of these places using the nav bar at the left, the first is called "EntryPage::print_comment" and the second is called "text".
raginglunatic
Sep. 13th, 2006 05:25 pm (UTC)
Re: separator
Oh!!
And the links in the comment section...sorry! They need changing of color as well.
I should have checked that before making the last post.

[.asset-comment a:link] Is that how I'd modify the existing code bits I've been given?
arnogseel
Sep. 18th, 2006 11:54 pm (UTC)
Re: separator
that was helpful for me! thanks!
raginglunatic
Dec. 1st, 2007 09:42 am (UTC)
Re: separator
Hello Chasethestars,
You were very helpful when I needed this help, could you email me please, I have a question for you. Thanks.
ragingloonatic@gmail.com
(Date of this request: 12-01-2007)
branchandroot
Sep. 13th, 2006 04:46 pm (UTC)
It sounds like you're not familiar with CSS? Just in case you're confused on this front, the CSS code you've been given (for changing link colors and the divider) goes in a very different place than the S2 code (for changing actual text).

To add CSS, go to the Customize Journal page and click on Custom Options, just as you would to get to the layer dialogue. But instead of Advanced, click on the Custom CSS tab. The large box on that page is for you to add your own CSS to the existing style sheets of the theme. Paste the example code you've been given into that box. Then you can play around with it and see what colors and widths work best.
raginglunatic
Sep. 13th, 2006 05:15 pm (UTC)
I am so not familiar w/CSS and knowing which area to go to put the code in is probably the most confusing to me. You directional path was and clear as well, which helps. The sitemeter project from hell last night, was a nightmare of sifting and sorting of things I wasn't well versed on.
I took your advice and it mostly worked.
(I detailed it to chasethestars above.)
( 25 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars