NRBCOM Ongoing Project Questions

[thelobbyist 4]

I figure that I am going to continue to have a few questions throughout the current project I'm working on. So I decided it would probably make less clutter for the site if I just include them all in one post. So I'll just make a list in the OP and then make separate posts for any new questions I have so that this post can be used as a sort of table of contents for anyone else that has similar questions. 1) Banner position adjustment 2) Various white bars needing color change - Suggestions?

[thelobbyist 4]

1) Banner position adjustment I need to make a slight position adjustment to my banner up a few pixels and possibly over to the left a few pixels to square it to the blog title text. What does the CSS look like for that adjustment?

."????"{
	top:1px;
	margin-left:10px}

Banner can be found on any page here: nickrbrown.com

[thelobbyist 4]

2) Various white bars needing color change - Suggestions? Check out this sample post I have put up. Sample Post You will see that there is a white bar: -on top of the start of the post. -on the bottom of the post with the social links. -as the background of the Twitter feed across the bottom of the screen. How do I adjust these colors? What would be best is if I could just make them transparent and then adjust the color of the text to show up on the gradient background I'm using. Thanks!

[bryan-hadaway 3]

If you're not yet setup with Firebug: http://www.pagelines.com/docs/changing-colors-fonts 1) Use negative margins: ` margin-top:-1px; margin-left:-1px; ` You may also need to use: `position:absolute;` 2) Use Firebug to find these ids/classes and you'll probably change their background color: `background:#000;` Thanks, Bryan

[thelobbyist 4]

Thanks Bryan. Is background:#000; what I would use to go transparent so that my background would come through?

[bryan-hadaway 3]

`background:transparent` or you might need to use: `background-color:transparent` Thanks, Bryan

[thelobbyist 4]

Bryan, et al... 3) My social icons have disappeared after the last pagelines update. Can you help me find them? 4) In my right side bar, (using firebug btw) I can't find the correct class to change the color of the Twitter widget title from gray to white.I would also like to change the tweet text from gray to white. Additionally, I would like to change the black @replies from italicized to standard unitalicized font. All can be found at nickrbrown.com. Thanks for the help!

[Kate 3]

Hey, 3) Were they originally displaying above or below the banner? What you'll need to change is the "bottom" value. For instance, if you want them below the banner, something like this:

.icons{bottom:-25px !important;}

4)To change the title color:

.widget_twitter h3.widget-title a{}

To change the username color:

.wiget_twitter .twitter-user a{}

[thelobbyist 4]

Thanks Kate. Originally, the icons were displaying on top of my banner. I could go back to that, or I could push the banner down a few more pixels and place them in a row above the banner. Either would work I think. But I just need to find where they disappeared to.

[timlinson 3]

Hmm you mentioned that you just upgraded, but I think you upgraded to 1.3.3.. your style.css still has a bugged sprite-socialicons.png path which was fixed in 1.3.4 (and the current ver is 1.3.5). Basically the icons are actually there, just invisible (and actually, right now they're also behind the banner).

[thelobbyist 4]

Tim, Great catch man! Upgraded to 1.3.5 and they popped right up.

[thelobbyist 4]

Back to #4: The ".twitter_user a" code did not work. What I'm looking to do is make all of the twitter section white and unitalicized except for the @ replies which I would like to keep black but also unitalicized.

[thelobbyist 4]

Ok I think these are the last mods and I'm good to go. In addition to #4 in the previous post: 5) Use link as the example. I would like to change the background color of the blockquote back ground. 6) At the same link at the top of the page you will see above the post a "previous post" link. There are white "bookends" that need to be gone and the white circle I'm assuming is a link arrow that should be transparent. 7) At the same link at the bottom of the page you will see post-footer which has white bookends on either side. How do I get rid of these? 8) Finally...This is the big one!!! I would like to exand and move the columns. From the home page as an example home page... a) The right side of the right column should be right aligned with the right edge of the banner. The left column (which is the post excerpt) should be left aligned to the left edge of the banner. c) Finally, since the right column has been pushed right and the left column push left at this pont. I would like to expand the left columns right side toward the right. I feel like I've said a lot here, but my main problem with these things has been identifying the css for these items for whatever reason. That's the main thing I need. If you guys can help with that, then I can play with the actual code. Thanks for the help!

[Kate 3]

@thelobbyist Have you tried Firebug? It's a powerful tool that can help you easily pick out the elements you want to edit, as well as being able to see their current CSS.

[thelobbyist 4]

Oh yes. Use it all the time. Not a professional though, so occasionally it is still difficult to find the appropriate CSS tags. Found a few of them tonight via trial and error. But the main things I'm still struggling with are: -Right column is running into an invisible wall that I can't identify which is keeping me from getting the right edge of the right column aligned with the right edge of my banner. -Still cannot identify the css that is causing little white bookends on the top and bottom of the page i.e. next/previous post at top and social sharing at bottom. -Cannot identify CSS of the blockquote background...example -Cannot identify CSS of white background of "Submit" comment button. Those are my big hurdles atm.

[timlinson 3]

For the blockquote, you can set: `blockquote {background:none; border:none;}` and this rule is causing the white bookends, so you can override it with 0 border: ` .post-nav, .current_posts_info, .post-footer { border-left: 3px solid #E9E9E9; border-right: 3px solid #E9E9E9; ` `}` I can't tell what you mean by the rest of the questions, except maybe the "Submit" button question.. are you talking about the "Post Comment" button? If so, you can use: `#commentform #submit {background:#123456;}`

[thelobbyist 4]

Thanks Tim. The column I'm mentioning is the right side widget column. I'm wanting to align the right side of this column to the right edge of my banner image. This should be: .scolumn-pad{ } But as I start to adjust to the right, the column starts to disappear behind an invisible border that I cannot identify. My assumption is that this invisible border will first need to be expanded and then the .scolumn-pad adjustment can be made how I need it.

[timlinson 3]

try to expand the underlying pagelines_content container: `#pagelines_content {width:886px;}`

[thelobbyist 4]

Perfect Tim, thanks! Do you think there is a way to have youtube videos display in the front page excerpt?

[cmunns 16]

You could try placing youtube embed code in the excerpt panel for a post to test...if it is pulling excerpts automatically you'd probably have to add a filter.

[thelobbyist 4]

Adam, It worked just by putting the youtube embed code in the excerpt box in the editor. I'm now thoroughly embarrassed for not trying that first before I asked. lol

[thelobbyist 4]

Guys, I'm still stumped on this twitter widget. Want to get everything white and non-italicized. link Some times the CSS is just not obvious to me when using firebug. Still learning I guess.

[timlinson 3]

Try this for white+normal font: `#twitter-1 ul li { color:white; font-style:normal; }` and assuming you want the content links to be a unique color: `.twitter-item a.twitter-link { color:#123456 !important; }`

[thelobbyist 4]

Thanks Tim! If I want to change the hover color of a link. Do I just add a:hover to the CSS? For instance, I have changed .twitter-user {color: #FFFFFF} so that the @replies are displayed in white. So if I wanted the hover color to be black I thought that I would use .twitter-user a:hover {color: #000000} But that doesn't seem to work. I'm wanting to change the hover colors on all my twitter links, and also get rid of the underlining on the time stamp. After that I should be good to go to start adding content. Appreciate all the help gents and lady.

[Kate 3]

Hey thelobbyist, If .twitter-user is the name of the class on the link, then it would be:

.twitter-user:hover{color:#000000;}

or:

a.twitter-user:hover{color:#000000;}