?

Log in

No account? Create an account

Previous Entry | Next Entry

Hello :) First time poster here, first time ever attempting to edit a layout myself too. I've managed to make many of the changes I wanted thanks to the help given in previous posts but struggling on some aspects of the layout. I've gone through the relevant (I think) tags and tried several codes given to previous CSS virgins like me but none of them seem to have any effect on my profile /o\

The community I'm working on is here. This is just a Plus Account but once I've sorted the layout it will be transferred to another account which is Paid. Standard layout is Lovebirds for Expressive. My screencap software isn't working at the mo so hopefully I can explain my problems ok. I'm sure some of the points would be covered in ~one code but I don't know the technical names for each ~thing sorry. I also apologise for the tl;dr :p

Also, I'd want to do all this by adding CSS into the Custom stylesheet box rather than messing with layers and stuff if it's possible, as I know naff all about layers etc. And I have customised comment pages disabled so all the changes I only want to alter the layout ~outside the posts?



SOLVED! 1) All the clickable links in the navigation bar along the top I'd like to change to #000000.

SOLVED! 2) I've managed to move the navigation links but it's not really what I want. Ideally, I'd like the links below the header banner (I tried changing the top padding to 450px which is the height of my banner but they disappear altogether), but really I want them enclosed within a bar? Not sure how to explain it so I'll just say look at this journal for what I mean. Solid bar of colour beneath the banner with the nav links positioned centrally to the banner width. I don't want the bar that thick but I'd like all the same colours (bar, text, active/hover text). I'd also like the same font/text size/uppercase as the sidebar header text on the current layout like Comm Description etc.

SOLVED! 3) The tags in the sidebar are pink in original layout but when I click View my Tags page, the tags in there are a teal/turquoise colour. I'd like them to remain the same colour as in the sidebar.

SOLVED! 4) I want to change the colour of the subject titles to #22316C. I also want the 'Visible Tags' text on the tag page to be this colour also.

SOLVED! 5) I want to change the link colour within entries. I don't want Edit Entry/Edit Tags/Add to Memories etc to be affected though.

SOLVED! 6) I want tags on entries to be #FBEC5D without affecting tag colour in sidebar or on the tag page.

SOLVED! 7) I want to change the colour of the lj user/community names to #000000 that appear anywhere on the page (but not when inside a post), so those in page summary, profile icon, entry poster icon and any <*lj user"???"> text in the OP of a entry but only on recent entries etc.

I think that's everything for now. I know I'm asking for a lot but I hope someone can help me with as many as possible. I'm actually going to sleep now so won't be able to check back and try out any codes until tomorrow (later today) after work so it may take me a while to test them and see if they're working for me before replying to any comments so please bear with me :) Thanks in advance and I'll include all the existing code I already have in my CSS box incase I've done something wrong in that lol.
___________________________________________________________________________________

/* Removes the sticky posts subject title */
.asset .asset-name-hover {display: none;}


/* Replaces header image with own */
#header-inner {
background-image: url("http://i53.tinypic.com/awvqzc.png");
height: 400px;
}


/* Removes existing header image/create navigation bar beneath */
#header {
background-image: none;
background-color: #141414;
height: 423px;
}

#header-text {
position: absolute;
top: 403px;
}


/* Changes colour of navigation links */
#header .nav .item a { color: #FFFFFF; }
#header .nav .item { border-left-color: #8B8386;}
#header .nav .item a:hover { background-color: #141414; color: #8B8386; }


/* Changes layout width */
#container-inner, #header-inner {
width: 800px; /* Change the width of the header and overall container boxes */
}
#alpha {
width: 610px; /* Overall width minus sidebar width */
}
.layout-tw #alpha-inner {
width: 570px; /* Width of #alpha minus 40px margins */
}


/* Removes journal title/subtitle */
#header-name { display: none; }
#header-description { display: none; }


/* Change background image */
body {
background-image: url("http://i41.tinypic.com/xx7m.jpg");
background-repeat: repeat ;
background-attachment: fixed ;
}


/* Change subject title/visible tags text color */
.asset-name, asset-name a, .categories-widget .widget-footer a { color: #22316C; }


/* Change View my Tags page text color */
.asset-name a, .categories-widget .widget-footer a { color: #22316C; }


/* Color of links within entries */
.asset-body a:link,
.asset-body a:visited {
color : #8B8386;
}
.asset-body a:hover {
color : #F26098;
}


/* Change tag color in View my Tags page to match sidebar tags */
.lj-view-tags a { color: #F26098; }


/* Change tag color on entries */
.asset-tags-list a { color: #FBEC5D; }
.asset-tags-list a:hover { background-color: #fff; color: #FBEC5D; }


/* Change lj user/community names on main community page */
.widget .ljuser a, .user-icon .ljuser a { color: #000000; }

Comments

( 21 comments — Leave a comment )
av8rmike
Jul. 20th, 2011 12:22 pm (UTC)
First of all, you're missing a closing curly brace at the end of the body group. That might be why nothing you were trying was working, because any codes you put after background-attachment: fixed ; will be ignored.
argeneau
Jul. 20th, 2011 08:42 pm (UTC)
Oh wow, I can't believe I didn't notice that o_O

CSS is definitely not my thing but I'm normally good at spotting stuff if it's inconsistent from the others. Ok, I've added that in now, hopefully in the right place (looking at the other codes, sometimes it's right after the ; with no space and sometimes on the line below - I guess it doesn't matter which?).

I've now done numbers 4 and 5 :) but still struggling to find posts that cover the other numbers. They seem to be to change ~all text or links, or a specific part of the text/links but not the same parts I'd like to change. The navigation links under the header one is totally stumping me, how to recreate a similar look as the other journal I linked to.

ETA: Also done number 1 now - did it the easy way under Navigation Strip>Custom colors. It doesn't have the gradient on it but I can live with it as it is :)

Any help you could offer to walk me through the remaining issues would be so appreciated.

Edited at 2011-07-20 10:00 pm (UTC)
av8rmike
Jul. 21st, 2011 01:47 pm (UTC)
The placement of the "}" doesn't really matter in CSS, just as long as every opening curly brace is matched with a closing one. It's more of a readability issue.

I'll have to poke at #2 a bit later, when I can load the images.

#3: .lj-view-tags a { color: #F26098; }

#4: Change this line:
.asset-name a { color: #22316C; }
to
.asset-name a, .categories-widget .widget-footer a { color: #22316C; }

#6: .asset-tags-list a { color: #FBEC5D; }

#7: If I understand you correctly, this is what you want:
.widget .ljuser a, .user-icon .ljuser a { color: #000000; }
argeneau
Jul. 21st, 2011 10:21 pm (UTC)
Thankyou so much for the response :)

I've put in all the codes you supplied, most of them have done the trick. There's a couple of little things that needed tweaking (plus the navigation links below header issue - saving the biggie till last lol).

Number 4 - The 'Visible Tags' text hasn't changed colour, just the 'View my Tags' link in the sidebar below the tags. I'm actually happy the View my Tags has changed colour but I'd still like the Visble Tags text http://fyemod.livejournal.com/tag/ in there to change as well if possible.

Number 6 - The tag colour has changed, but now when I hover above a tag on a entry, the text is changing to white and there's a blue highlight over the tag. How can I either A) remove the highlight/keep text same colour on hover and B) change the white text/blue highlight to another colour. I'd like to try both, see which I prefer.

I really appreciate all the help. I do have a pretty good memory so hopefully all this is drilled in my head now and I'll never have to ask again about the same issues on future layouts :D
av8rmike
Jul. 22nd, 2011 03:12 am (UTC)
Going in reverse order, #6 is pretty easy. For hover effect, just take the existing link class and add ":hover" to it, then whatever styling you want:
.asset-tags-list a:hover { background-color: #fff; color: #FBEC5D; }

#4: Change this line:
.asset-name a, .categories-widget .widget-footer a { color: #22316C; }
to:
.asset-name, asset-name a, .categories-widget .widget-footer a { color: #22316C; }

So, for the navigation links: This will take a little bit of tweaking on your part, because I don't know exactly how you want it to look, but this should get you most of the way. In #header after background-image: none; add these two lines:
background-color: #xxxxxx;
height: 440px;


Obviously, adjust the xxx's and 440 to whatever color and size you want. Then add this section:
#header-text {
    position: absolute;
    top: 410px;
}
You might have to adjust the number there as well. Speaking of tweaking, for a lot of little changes like this, you may want to look into the Firefox extension Firebug, which is just invaluable for CSS/JavaScript/HTML tweaking.
argeneau
Jul. 22nd, 2011 09:15 pm (UTC)
Thankyou!!! You rock so much. I'd still be struggling with all this weeks from now if it wasn't for you :D Appreciate all your help.

I'm pretty much finished with the layout now (although may play around with colours a little more). I just had one more tiny question then I can call the task complete, if that's ok?

Firstly, I've got the navigation bar/links/colour/separators just how I want them thanks to you. But because you specified how to position the navigation links inside the bar beneath my header with the above code, I took out the following line:

#header-content-inner {margin: 385px 0px 0px 225px;}

because I didn't think it would be doing much good having 2 separate codes in to position the nav links but now it's made them left justified again. Is there something I can add to:

#header-text {
position: absolute;
top: 410px;
}

so the links are centrally aligned to the header banner rather than left? I tried this but it stayed to the left :p I'd try something by padding like I did last time but I wouldn't be satisfied with something looking like it's in the middle by guess work/eyes alone - is there a way to make sure it's dead center? :)

And thanks for the Firefox extension. I'm on a company laptop so once I get my own repaired, I'll install it for future tweaking I may do.

ETA: Ahhh, one last thing? Sorry for being a nuisance lol. I was just thinking that the 'View all Tags' text is #22316C below the pink sidebar tags, I would like to keep things ~standardised so how would I change the 'View all Archives' text to #22316C also?

ETA 2: I just realised that number 4 is no longer working now :-/ I don't think I've accidently deleted a } or anything and it's working in the 'View my Tags page' but not on entry subject titles anymore. I've c/p all the new coding into the OP of this post so you can see everything that's in my CSS box now.

ETA 3: Nevermind, rather than switch the existing line of code with the updated code like you said for number 4, I put both in there and it seems to have worked? :)

Edited at 2011-07-22 09:37 pm (UTC)
av8rmike
Jul. 27th, 2011 01:12 pm (UTC)
Sorry, but I couldn't get into LJ for a few days, and I got lost in all the edits and questions. What do you still need help with?
argeneau
Jul. 28th, 2011 12:05 am (UTC)
No worries :) I was the same, couldn't access LJ at all for over 3 days - longest downtime I've ever experienced since joining lol. I'm sorry for my last comment, it did get pretty confusing there didn't it :p

Ok, I've been messing with colours & also got feedback from the other mods and think there's just a couple of (hopefully) small tweaks then I think we're done.

1) Navigation links beneath the header - how would I position them dead center? If it can only be done by padding, is there a way to work out the correct number or is it a 'that looks like it's in the middle' thing lol?

2) The code you provided to change the colour of the Subject Titles inadvertently changed the 'View my Tags page' as well. After discussing with the other mods, we decided it looked weird having that one link in the sidebar blue when the rest were pink so is it possible to edit the code so it only effects the Subject Titles?

/* Change subject title/view my tags page text color */
.asset-name a, .categories-widget .widget-footer a { color: #283A90; }

3) We do like the all pink links in the Sidebar but a few people have said it's really light on their computer screens and hard to read. Is there a code to edit the colour of all the links in the Sidebar so we can select a darker shade of pink? We don't want it to override the code that made all the lj user/community names black though.

And just to be a pain in the ass, can that code include the option to change the colour of the link upon hover? I'd like to incorporate some blue into the sidebar that way just to tie the colour scheme together.

After that, I think that's everything! \o/

Thanks again for all your help, & for coming back to help after LJ sorted its issues out.
argeneau
Jul. 28th, 2011 12:15 am (UTC)
Urm, just incase:

/* Replaces header image with own */
#header-inner {
background-image: url("http://i53.tinypic.com/awvqzc.png");
height: 400px;
}


/* Removes existing header image/create navigation bar beneath */
#header {
background-image: none;
background-color: #080808;
height: 423px;
}

#header-text {
position: absolute;
top: 403px;
}


/* Removes the sticky posts subject title */
.asset .asset-name-hover {display: none;}


/* Changes colour of navigation links */
#header .nav .item a { color: #FFFFFF; }
#header .nav .item { border-left-color: #808080;}
#header .nav .item a:hover { background-color: #080808; color: #3D59AB; }


/* Changes layout width */
#container-inner, #header-inner {
width: 800px; /* Change the width of the header and overall container boxes */
}
#alpha {
width: 610px; /* Overall width minus sidebar width */
}
.layout-tw #alpha-inner {
width: 570px; /* Width of #alpha minus 40px margins */
}


/* Removes journal title/subtitle */
#header-name { display: none; }
#header-description { display: none; }


/* Change background image */
body {
background-image: url("http://i41.tinypic.com/xx7m.jpg");
background-repeat: repeat ;
background-attachment: fixed ;
}


/* Change visible tags text color on tags page */
.asset-name, asset-name a, .categories-widget .widget-footer a { color: #283A90; }


/* Change subject title/view my tags page text color */
.asset-name a, .categories-widget .widget-footer a { color: #283A90; }


/* Color of links within entries */
.asset-body a:link,
.asset-body a:visited {
color : #D9D919;
}
.asset-body a:hover {
color : #000000;
}


/* Change tag color in view my tags page to match sidebar tags */
.lj-view-tags a { color: #F26098; }


/* Change tag color on entries */
.asset-tags-list a { color: #F26098; }
.asset-tags-list a:hover { background-color: #fff; color: #000000; }


/* Change lj user/community names on main community page */
.widget .ljuser a, .user-icon .ljuser a { color: #000000; }


/* Remove designed by */
.designed-widget {
display: none;
}

.powered-widget {
display: none;
}


/* Generated by Malionette's Tiny Icon Generator */
img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/ttxZR.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/BizJc.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/syndicated.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/aK3Al.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/f0yvv.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/HJKv5.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_groups.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/Uw9Q9.png) no-repeat !important; padding: 16px 0 0 16px !important; }
av8rmike
Jul. 29th, 2011 02:22 pm (UTC)
OK, I think I've got everything. Don't worry about being a pain, it helps me keep my skills sharp. ;)

1) There is a way to automatically center blocks, but since you're already using "absolute positioning" to locate the nav links, that method won't work. I figured out how to center it mathematically this way:

800px (width of header block) - 300px (approx. width of the menu bar) leaves 500px, so 250px on either side. Change the #header-text section like this:
#header-text {
    position: absolute;
    top: 403px;
    margin: 0;
    width: 300px;
    left: 250px;
}
2) OK, looks like I just got confused about the different text and links you wanted to change. Just remove ", .categories-widget .widget-footer a" from this line:

.asset-name, asset-name a, .categories-widget .widget-footer a { color: #283A90; }

3) As before, change the colors to something better suited to the layout:
.widget-content a { color: pink; }
.widget-content a:hover { color: blue; }
argeneau
Jul. 31st, 2011 04:29 pm (UTC)
Hello. Sorry about the delay, been having access issues on here again /o\ Seems to be working now though even with the blue warning bar across the top.

1) Ok, this has worked and looks great! Thanks so much, definately prefer it centered to left justified :)

2) Urm, not sure what affect removing this has had on the layout, the 'View my Tags page' below my tags in the sidebar is still blue. Unless it was just superfluous coding that isn't doing anything so was just to delete for that reason?

ETA: Nevermind. I removed the ", .categories-widget .widget-footer a" section from both of these codes and now it's worked.

/* Change visible tags text color on tags page */
.asset-name, asset-name a, .categories-widget .widget-footer a { color: #283A90; }

/* Change subject title/view my tags page text color */
.asset-name a, .categories-widget .widget-footer a { color: #283A90; }

3) This has worked great, changed the pink for a darker shade and also anything else in the layout that was the same colour so much better now and easier to see :)

Thankyou for all your help and for being so patient with me! I think the layout is finished now so can transfer it onto the proper comm now. Really appreciate everything you've done to help. You rock! x
av8rmike
Aug. 1st, 2011 12:43 pm (UTC)
You're very welcome! Also, I looked at your page again and saw both these lines:

/* Change visible tags text color on tags page */
.asset-name, asset-name a { color: #283A90; }

* Change subject title color */
.asset-name a { color: #283A90; }


You could remove the second line, as both lines do the same thing.
argeneau
Aug. 2nd, 2011 12:45 am (UTC)
Hello again :)

Umm, I tried taking the second line out...but the subject titles revert back to the original themes colour when I do. I'm not sure why it does, but looks like I'll have to leave it in to keep the new colour but it should be ok right? Having it in won't cause any code conflicts hopefully :)
av8rmike
Aug. 2nd, 2011 02:02 am (UTC)
I figured out why it reverted when you removed the second line-- there's a typo on the first line. You're missing the period before "asset-name a".
argeneau
Aug. 2nd, 2011 02:18 am (UTC)
Ahhhhh, so there is! :) Just added it and removed that second line, all is well. Thankyou for that.

Whilst you're here lol, just one last thing?

http://fyemod.livejournal.com/tag/

I'd like the tags on that page to change colour when I hover over them, like they do in the sidebar (I like consistency lol). Is that a easy edit? :)
av8rmike
Aug. 2nd, 2011 03:29 am (UTC)
You can just do this:
.lj-view-tags a:hover { color: #283A90; }
argeneau
Aug. 2nd, 2011 09:44 pm (UTC)
Perfect! I think that's it :D Can't think of anything else we want to change so guess we can call this post officially and completely solved. Thankyou for everything! And for bearing with me during the LJ downtime too. You're awesome Mike :)
argeneau
Aug. 6th, 2011 06:05 pm (UTC)
Ahhhhh! I'm so sorry for this. Just panicked a little because I transferred the layout over to the comm & 1 thing have stood out immediately that I didn't take into account on the test comm because we didn't have that many entries or tags /o\

Any chance you can help with this? I don't want to start messing around with it whilst it's live and there's members wondering what's going on lol.

fyentertainment

1) I have Limit of tags to display in Tags sidebar set to 10 yet all of them are showing. Is there something in the CSS overriding that and can I fix it so they aren't making the page really long?

I didn't think I'd be back here so soon, truly sorry about that.

Edited at 2011-08-07 04:06 am (UTC)
av8rmike
Aug. 8th, 2011 05:23 pm (UTC)
As far as I can tell, you only need to enable "Cut off tag display in sidebar after certain limit." and set a number for a limit. There shouldn't be anything in the CSS affecting that. Set the right theme active in the community and I promise I'll take a look ASAP tonight if anything else weird is going on.
argeneau
Aug. 9th, 2011 08:22 pm (UTC)
Sorry, I wasn't around last night (too many 4am bed times so kinda crashed as soon as I got home from work lol). I'll put the layout as it was back on fyemod when I get home (just wanna make sure everything's ok before it goes anywhere else). I did have cut off tag display ticked and set it to a lesser amount than we have tags but it just wasn't working for some reason. When it's active again, will reply back and let you know :) Thankyou.
argeneau
Aug. 10th, 2011 12:04 am (UTC)
Omg, I am so dense jfc! I just realised I didn't have that tag display thing ticked.....because when I first saw it, I thought it meant cut off tag display i.e. how long the tag was & if it was really long, it would be cut off by the width of the sidebar. How silly is that? I'm sorry lol. I was just looking at it and thought I'd try ticking it to see what happens and then it clicked. Sorry to disturb you over this, guess it's sorted now? :p
( 21 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