?

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

( 27 comments — Leave a comment )
renne
Sep. 3rd, 2006 08:20 am (UTC)
i'm using the hills midnight layer - do you know if there any way to change the little leaf image that's next to the entry subject line? (i'm asking you, cos you appear to know your way around. ;))
nimoloth
Sep. 3rd, 2006 08:31 am (UTC)
Oh, I loved that! I can't get it to work with my current layout yet (based on Urban Green). Anyway, your question - yes. You can change it with:

.asset-stream .asset-header {
background: transparent url(post-ornament.gif) no-repeat scroll 0 0;
}

Put this in the custom css with your own image address in the url. It's a good idea to save the one that's there and modify it, or at the very least check out what size it is. But you could put anything there.
renne
Sep. 3rd, 2006 09:07 am (UTC)
thanks! i'll do some tinkering and see how i go.
harmonatrix
Sep. 3rd, 2006 04:34 pm (UTC)
I have a question for you if you don't mind.
I would really like to add the day of the week in front of the date and time, and although I think i've found where it would go:

.asset-meta-datetime-issued {
width: 100%;
}
.profile .asset-meta-datetime-issued,
.asset-detail .asset-meta-datetime-issued,
.asset-favorite-of-user .asset-meta-datetime-issued {
width: auto;
}

However, I have no idea if I'm right, much less how to change it.

If you have any ideas, I would appreciate it.
Thanks.
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.
ana_khouri
Oct. 2nd, 2008 04:56 pm (UTC)
I am using Bloom Pink and I have, I think, a related problem. I am trying to get rid of the flower image to the left at the top and have it meld into my background... I tried the above (inserting the same image as the background) but it didn't work.. do you have any suggestions?

Thank you!
playchesswithme
Mar. 10th, 2007 02:40 am (UTC)
beginner but its shitting me.
When I try to change the theme, this displays. help.

Journal Display
Error
Invalid form submission. Please refresh and try again.
nimoloth
Mar. 10th, 2007 06:36 pm (UTC)
Re: beginner but its shitting me.
You mean when you try to change the look of your journal using the general options under Edit Journal Style?

In any case, I don't think we can help - that sounds like a behind-the-scenes Livejournal database error - it happens now and again. Have you tried it again, a day/week later?
ainabarad
Mar. 20th, 2007 06:02 pm (UTC)
Is there a way to customize fonts, colors, and backgrounds using s2? If so, would it be the same exact code another layout uses (like Component) or completely different? I have a theme layer for my Expressive layout, but using custom css as well doesn't seem to want to work (surely the custom css goes in the custom css box under customizing display and not in the s2 layer). I tried this to customize the background and it did nothing:

body {
background-color: #000000;
}

Maybe this line in my layer is screwing it up?: set base_theme = "scribe";

I'd really love it if I could customize the fonts, colors, and backgrounds using s2 since css doesn't seem to be working.
nimoloth
Mar. 21st, 2007 11:36 am (UTC)
CSS in the Custom CSS box should always override anything in your layer unless you have specifically hard-coded it into the layer and removed the css class of the thing in question. But the body css tag should always override anything in the theme.

It could be that there is another element on top of the basic body that is hiding any changes you make to body. I had a look at your layout and in this case, it appears to be the element "container" that is visible, which is black, so I assume you've changed it to black now too, with something like:

#container { background-color: #000000; }

or similar.

You can customise pretty much everything through css - you just need to know what the classes are. Check out the source code for your layer, or have a sift back through this community to find the basic css guide that lists the common classes and their purposes.

If you have Firefox, there's an excellent web developer add-on (available from the Firefox home site) that allows you to highlight css elements and see info about them interactively, amongst other things.
stickykeys633
Jul. 2nd, 2007 02:57 am (UTC)
Hello, I am using Endless Summer Tan and trying to add images/color to the sidebars. I see the code above, but I'm not quite sure where to put the code? In the custom css box, or does it go inside a function? Thanks for any help!
nimoloth
Jul. 3rd, 2007 04:49 pm (UTC)
This stuff just goes in the Custom CSS box in the Edit Journal area.
stickykeys633
Jul. 3rd, 2007 05:29 pm (UTC)
I tried and absolutely nothing worked. I also have in there the header image and the remove current header code, would the two conflict?
nimoloth
Jul. 3rd, 2007 05:44 pm (UTC)
They shouldn't conflict. What's your code?
stickykeys633
Jul. 3rd, 2007 05:49 pm (UTC)
nimoloth
Jul. 3rd, 2007 06:24 pm (UTC)
Try changing .layout-wt to .layout-wtt - it looks like your two sidebars might both be identified by that.
stickykeys633
Jul. 3rd, 2007 06:35 pm (UTC)
Actually, it looks like one of the wt's got transposed, which is odd since I copied and pasted it!

Hmm, it... kind of works... At least I can get it to show up, I'll do some more futzing around with it later. Thanks so much!
niamhotoole
Oct. 23rd, 2007 06:38 pm (UTC)
Hi!
I've been living here for the last week or so and got all the answers I needed do far except this one so far:
Is there a way to repeat the background image x and y in expressive? I tried all sorts of syntax and can't get it to work.
At the minute I made a long strip that repeats x, but it's a bit clumsy and since it's a pattern, I'd rather use the original little square for it.

(My skin is barely half done yet, if you look at it =))
nimoloth
Oct. 23rd, 2007 07:01 pm (UTC)
Try putting the following into the Custom CSS area:

body { background-repeat: repeat; }

That should cause the background image to repeat in both x and y. If you only wanted one, you would use repeat-x or repeat-y instead of repeat.
niamhotoole
Oct. 23rd, 2007 07:03 pm (UTC)
Soooo easy. It's always the plain obvious that's harder to figure out. Thanks!!
( 27 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