thelobbyist 4 Report post Posted March 1, 2011 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? Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted March 1, 2011 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 Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted March 1, 2011 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! Share this post Link to post Share on other sites
bryan-hadaway 3 Report post Posted March 1, 2011 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 Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted March 2, 2011 Thanks Bryan. Is background:#000; what I would use to go transparent so that my background would come through? Share this post Link to post Share on other sites
bryan-hadaway 3 Report post Posted March 2, 2011 `background:transparent` or you might need to use: `background-color:transparent` Thanks, Bryan Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 11, 2011 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! Share this post Link to post Share on other sites
Kate 3 Report post Posted April 11, 2011 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{} Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 11, 2011 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. Share this post Link to post Share on other sites
timlinson 3 Report post Posted April 12, 2011 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). Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 13, 2011 Tim, Great catch man! Upgraded to 1.3.5 and they popped right up. Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 13, 2011 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. Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 13, 2011 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! Share this post Link to post Share on other sites
Kate 3 Report post Posted April 13, 2011 @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. Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 14, 2011 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. Share this post Link to post Share on other sites
timlinson 3 Report post Posted April 14, 2011 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;}` Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 14, 2011 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. Share this post Link to post Share on other sites
timlinson 3 Report post Posted April 14, 2011 try to expand the underlying pagelines_content container: `#pagelines_content {width:886px;}` Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 14, 2011 Perfect Tim, thanks! Do you think there is a way to have youtube videos display in the front page excerpt? Share this post Link to post Share on other sites
cmunns 16 Report post Posted April 14, 2011 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. Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 15, 2011 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 Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 17, 2011 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. Share this post Link to post Share on other sites
timlinson 3 Report post Posted April 17, 2011 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; }` Share this post Link to post Share on other sites
thelobbyist 4 Report post Posted April 18, 2011 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. Share this post Link to post Share on other sites
Kate 3 Report post Posted April 18, 2011 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;} Share this post Link to post Share on other sites