?

Log in

No account? Create an account

Previous Entry | Next Entry

How To Change Background Images (css)

  • Sep. 3rd, 2006 at 1:01 AM
The background of the page as a whole (i.e. under the central content strip) can be changed using the body tag:

body {
background-color: #fef9d2;
background-image: url("http://www.sampleurl.com/background.jpg");
background-repeat: repeat-x ;
background-attachment: fixed ;
}

In this case, I have used a gradient background, which is a thin vertical strip image repeated in the x-direction and fixed, with the underlying colour the same as the bottom of the gradient to blend in smoothly.

You can also change the background of the sidebar(s). Use:

.layout-wt #content-inner {
background-image: url("http://www.sampleurl.com/background.jpg");
}

.layout-tw #content-inner {
background-image: url("http://www.sampleurl.com/background.jpg");
}

These two will give you background images for single sidebar layouts on the right or left respectively. You can also use these to change the background colours of them. Again, you could use gradients if you like, remembering to specify the relevant positions and repeats of the background image strip.

Comments

nimoloth
Sep. 3rd, 2006 07:32 pm (UTC)
Unfortunately, it can't be done with CSS. You need to create a custom layer and duplicate the Expressive layer code, of create a custom theme from Expressive. You then need to change the lang_posted_by_date_and_time function, which is:

function lang_posted_by_date_and_time(EntryLite e, bool showposter, bool showdate, bool showtime) : string {
var string posted = "";
if ($showposter) {
var string posterstr = (defined $e.poster ? ""+$e.poster : """$*text_poster_anonymous""");
if (not $showtime and not $showdate) {
return $posted;
}
}
if ($showdate and $showtime) {
if ($e.depth > 0) { # If $e is a comment
return $posted + $e->time_display("med", "");
} else {
return $posted + $e->time_display($*lang_fmt_date_med + " at %%h%%:%%min%% %%A%%M", "none");
}
}
if ($showdate and not $showtime) {
return $posted + $e->time_display("med", "none");
}
if (not $showdate and $showtime) {
return $e->time_display("none", "%%h%%:%%min%% %%A%%M");
}
return "";
}

In this, change these two lines:

return $posted + $e->time_display($*lang_fmt_date_med + " at %%h%%:%%min%% %%A%%M", "none");

return $posted + $e->time_display("med", "none");

, replacing $*lang_fmt_date_med with $*lang_fmt_date_med_day in the first and "med" with "med_day" in the latter.

This will give you the abbreviated day of the week at the start of the date and time. If you want the full day name, use $*lang_fmt_date_long_day and "long_day" respectively.

You can see all the date and time format options here.
harmonatrix
Sep. 3rd, 2006 08:10 pm (UTC)
Ok. I did it and it worked (THANKS), however it set my journal to the default theme w/ my customizations. How do I go about getting the "Scribble cat" theme back w/ this code in place.
nimoloth
Sep. 3rd, 2006 08:42 pm (UTC)
Did you create a custom theme or custom layer?

Either way, I think you would probably need to set:

set base_theme = "scribble-cat-green";


This is in propgroup presentation { }, the first thing you come to in the layout code. (Note, I don't know which colour variation of Scribble Cat you're using - just insert the appropriate colour in place of green there.)
harmonatrix
Sep. 3rd, 2006 08:55 pm (UTC)
Ok, but I don't know how to get a copy of the code.

I created a theme < a href="http://www.livejournal.com/customize/advanced/layers.bml">here </a> and entered the code. I then realized that you said I had to duplicate the Expressive layer code. I don't know how to do that.

nimoloth
Sep. 3rd, 2006 09:05 pm (UTC)
Ah! OK, you can fin the code here.

To get to that page, you go to Edit Journal Style - Advanced - Public Layers then click on Expressive in the list then Syntax highlighted and that gives you the code.

You can then copy and paste that into your new layer, so the new layer effectively is Expressive. You can then tweak the code to your hearts content! Just find the relevant area or function (the linked list on the left is useful) and adjust as required.
nimoloth
Sep. 3rd, 2006 09:08 pm (UTC)
However, since you say you've only created a theme (a child of Expressive I assume), you don't actually need to copy all the code over. I think you can just add bits as required, like the bits I mentioned, and they'll override the existing ones.

However, I don't have as much experience with themes - I find it easier to duplicate the entire thing as a new custom top level layer and tweak the bits I want.
harmonatrix
Sep. 3rd, 2006 09:28 pm (UTC)
I was there and just didn't know it. Thank you so much for your help.

I did just have to set the base theme and then enter the code for the change in the date. It didn't take the first time (after setting the theme) because I didn't change the theme option on the journal display after compiling it.

So basically all it took was:

layerinfo "type" = "theme";
layerinfo "name" = "NAME";


set base_theme = "scribble-cat-orange"; *or which ever theme you are using*

function lang_posted_by_date_and_time(EntryLite e, bool showposter, bool showdate, bool showtime) : string {
var string posted = "";
if ($showposter) {
var string posterstr = (defined $e.poster ? ""+$e.poster : """$*text_poster_anonymous""");
if (not $showtime and not $showdate) {
return $posted;
}
}
if ($showdate and $showtime) {
if ($e.depth > 0) { # If $e is a comment
return $posted + $e->time_display("med", "");
} else {
return $posted + $e->time_display($*lang_fmt_date_long_day + " at %%h%%:%%min%% %%A%%M", "none");
}
}

if ($showdate and not $showtime) {
return $posted + $e->time_display( "long_day", "none");
}
if (not $showdate and $showtime) {
return $e->time_display("none", "%%h%%:%%min%% %%A%%M");
}
return "";
}



Thanks again!!!



nimoloth
Sep. 3rd, 2006 10:47 pm (UTC)
Check! Glad you got it working.

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