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.


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.)
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.

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.
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.
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!!!

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

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars