Log in

No account? Create an account

Previous Entry | Next Entry

Changing width, border and opacity

  • May. 15th, 2007 at 1:58 PM
This is probably going to sound ridiculous, partly because I don't know all the technical terms. eem... what I want to do is either by removing the bit above my header with the 'archive ... friends ... memories etc.' (header nav links?) or by some other means, make the border around my header contained around ONLY the header background image, so either move the border down or remove the top bit... if that makes any sense.

Also, for some reason the border around the 'page-inner' section of my page won't change colour...? It's stuck at grey. It's also stuck at a certain width and won't let me make it any smaller. Any reason why it would do that?

And I was wondering is there a way to change the opacity of this same section so that you can see the background colour or image partly through it. Same with the header.

Thank-you for your help sorry to be a pain... 


Oh and I think I tagged this wrong sorry :(

EDIT: I've just realised that maybe the reason the width won't change is because there's another component either side of the header?





( 14 comments — Leave a comment )
May. 15th, 2007 03:34 pm (UTC)
Before trying to address any of the specifics, you should probably clean up the CSS declarations a bit. There are a few specifiers listed twice, there are a few that can be combined, and a few that are just formatted incorrectly.
For example, all the #header groups can be combined into one:
#header {
    background-image: url(http://i21.photobucket.com/albums/b272/shalalabang/journalheader6.png);
    background-color: #FFFFFF;
    width: 728px;
    height: 396px;
    margin-top: 100px; 
    margin-bottom: 80px;
    border-top: 4px dashed #ED7383;
    border-bottom: 4px dashed #ED7383;
#header-name a,
#header-description {
    font-family: (Gungsuh};
    color: #F6F6FF;
(Take the parentheses out of the font-family declaration, and add in less-specific fonts, like serif.)
#page-inner {
  { border-width: 4px;
    border-style: dashed;
    border-colour: #ED7383;
The extra open brace here and in body will keep the parser from interpreting the statements correctly. Try:
#page-inner {
    border: 4px dashed #ED7383;
May. 15th, 2007 04:14 pm (UTC)
Okay, thanks, I did that. It looks better, and I think the nav links have disappeared... :/ But I don't think they should've. Don't know what I did. Do you know how I can change the width?
May. 15th, 2007 06:24 pm (UTC)
Change the width of what?

For the header thing, try deleting the "height" property out of #header{}.
May. 15th, 2007 07:38 pm (UTC)
Ok when i took that out it's how i want it to be in terms of where the border surrounds the image, but it's not high enough.

I mean the width of the body section of the page, what it looks like right now is (1) but what i want it to look like is (2) or (3) whichever one's possible. if either.

i've used this css

#page-inner {
width: 728px;

to try to change the width but it won't change.
May. 15th, 2007 10:16 pm (UTC)
You must be using IE, or are still making changes, because in FF it looks nothing like any of your 3 screenshots. Which of (2) or (3) would you want?
May. 15th, 2007 10:22 pm (UTC)
what's IE? I'm trying things at the moment to try get it to work. I've actually almost got it working the only thing that's not working is my profile icon has disappeared and I can't remember when so I don't know which code I added was the one that made it disappear :/ do you have any idea what would have made it disappear?

ahh i'm hopeless......

you're very patient :)
May. 15th, 2007 11:09 pm (UTC)
Internet Explorer. You know, that Microsoft thing? ;)

OK... for one thing, the background is still gray because this line is formatted wrong:
.layout-twt #content-inner,
Change that section to say:
#content-inner {
    background-color: #ffffff;
The profile disappeared because #container-inner is too narrow. Is there some reason you're using the 2 sidebar (3 column) layout? If you use a 2-column one it might be a little easier to follow how the columns are used. To separate the header image and links, try putting the image into #header-inner instead of #header and set the height there.
May. 15th, 2007 11:28 pm (UTC)
Aaaaaah I did the thing you said and it went all crazy and I went back and tried to change it but I couldn't really remember what I had before and now it's not right :( it's all wide again.

(by 'the thing you said' I mean putting the image into #header-inner instead of #header)

#header-inner screwed me over

any ideas?

May. 15th, 2007 11:30 pm (UTC)
oh and I have no idea why I used 3 columns, if I changed to 2 would that mess up everything (that isn't messed up already)?
May. 16th, 2007 12:16 am (UTC)
I clicked back, refreshed, and it looked the same as it did before, so I'm guessing you fixed it ... ?

Here's what I would suggest, since you're making a white page anyway: the "clean slate" approach. Rather than try to override a particular theme, go to the Look and Feel of the Customize Journal page, and select (None) under Theme. Try changing to a 2-column layout, which will give you more room for entries. Then empty out the Custom CSS box and start adding things one at a time. Try putting your border around various sections to see what affects what. Look through the Expressive Explained post, under the beginners guide tag. If you get really stuck, you can always catch me on IM.
May. 16th, 2007 12:27 am (UTC)
I didn't fix it... I don't think? I don't know what happened. Meh. Maybe it's just my browser.
Ok, I'll take your advice. Start from scratch. 2 columns sounds less complicated anyway. *sigh*

Thanks for your help!
I owe you one.
I'll.. buy you a burrito or write you a poem or something...

(sorry my sense of humour sucks)

May. 18th, 2007 10:45 pm (UTC)
How did you get that cool dashed border? I want it!
May. 18th, 2007 11:59 pm (UTC)
#page-inner {
border: 3px dashed #F0CACA;

#header {
border-bottom: 3px dashed #F0CACA;

May. 19th, 2007 02:13 am (UTC)
Yatzee!! Danke.
( 14 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars