In P2 theme, how do I change my post titles without changing other text?
-
My blog is http://Sharkcircle.wordpress.com
The blog attached to my actual posting name here is not the blog Im focusing on at the moment, so be sure to not confuse the two. Sharkcircle is the blog Im asking about, not puckcircle.
If you look at my sharkcircle.wordpress.com blog, it has one post on it, and the title should be in black text that says, “THE BEST FREE AGENT SIGNINGS OF THE OFFSEASON, THE PLAYERS THE SHARKS SHOULD HAVE SIGNED, PART 1.”
The titles for each of my sidebar widgets are also in the same font and color, and it was suggested to me I make my post titles look the same as my sidebar titles. Right now, my post titles font is much bigger than the sidebars. I’ve tried everything but I cant make them smaller without changing everything else.
How do I change the font here and make it smaller without affecting anything else? That’s my question. I basically need a CSS code that targets just the post titles.
A lesser question, where it says “Twitter Updates” in black, you’ll notice when you hover over it with your mouse, a blue underline will appear. That is because I set the links in my sidebar to underline with blue, because all the other links turn blue, because they’re normal links. The problem with the Twitter Updates is it’s supposed to just be a widget title there in the sidebar, but because it also links to my twitter, it’s a link as well. So because it’s sort of a link, apparently the blue underline from the other links (which are actually blue once you hover over them) is applying itself to Twitter Updates here. The problem is Twitter Updates has to match all the other widget titles, so I made it black, not blue like a link. So I want to keep it black, but change the underline color to black as well.
So for blue links, the blue underline is what I want. But for the black text for Twitter Updates, I want the underline to be black. Both the blue links (they look orange now, but if you hover them they turn blue) and “Twitter Updates” are in my sidebar section though, so setting the link underline color for the section does not allow me to specify different colors for the two. How do I specify? How do I fix this?
Third question, a big one, when looking at my code to figure out the specific answers I asked about, it would be also be very helpful if someone could tell me how to clean up the CSS. I’ve achieved everything I want to with my CSS besides the two problems I mentioned here, but I probably achieved it in a very messy way, with unneeded and repeat code. If someone who has an eye for this can tell me how to achieve all the same results in less, easier to edit code, that would be very helpful.
Thank you!
The blog I need help with is: (visible only to logged in users)
-
Also, in P2, I believe there is a button to not show avatars on the home page, or gravatars, so I know how to do that. However, I can’t find out, after you do that, how to make the content text go all the way left. In other words, when you use a gravatar, you’ll have a little gravatar to the left of your post content, taking up 30px or so width, and then your post content will start to the right of the gravatar, and go down in a straight line so it never passes the gravatar boundary, even below the gravatar. What I want to do is not use a gravar, and then have my post content, the text, take up the space the gravatar was taking up. Because if you just hide the gravatars and dont have the text replacing it, it just looks weird having a big space with no text to the left of all the text. And if you do use a gravatar, unless you have a good one which I dont, you have a little picture next to your name. I at least want the option to have my posts not use a gravatar, and use up the space it was taking up.
-
I have no hidden my avatar so you can see what I mean. There is almost an inch or so of space to the left of my text in my post. Hiding the gravatar even messes up the indentation of your posting name, another thing I need to know how to fix. So there almost an inch of white space between the text and the left edge of my content area that I want to fix for the actual content text, and then for my posting name text, there’s still a big indentation, except it’s no longer lined up with the text below. Now it’s a little bit further to the left. How do I fix these things as well?
-
The base color is set in “a” for the post titles on the main page, but changing that would change all links that are currently the orangish color throughout the site. This would change the font color and size on both the main page and on the page you get after you click on the post title.
#main .postcontent h2, #main .postcontent h2 a { color: #000000; }If you want to change the font size, add a font-size declaration although I would suggest leaving it larger than the widget titles since the post titles are more important than the widget titles. The existing size is 1.8em.
The twitter widget title is designed to be a link and and links to your twitter page. That is why it turns blue when you hover it. If you want it black, the following will do it. I also added a declaration to get rid of the underline on hover in case you want it. If not, just delete that line.
#sidebar h2 a:hover { border-bottom: medium none; color: #000000; }In general, put only the specific declarations you are adding or changing into the CSS edit window. As an example, if this was the existing CSS for #wrapper
#wrapper { background: none repeat scroll 0 0 #00C0C2; border: 1px solid #008E90; margin: 7px auto 0; overflow: hidden; position: relative; width: 1008px; }and all you wanted was to change the background color, then you would put the following into your CSS edit window.
`#wrapper {
background: none repeat scroll 0 0 #00C0C2;
}`Any declaration that is not being changed should not be included.
-
thanks a lot sacred path! I knew about not adding extra declaration’s, but forgot to do that. But even so it’s not my issue. My issue is I have a lot of things overruling other things probably, and different codes that overlap probably, and stuff like that. Im not sure if I should post my CSS code here, if someone will steal my colors (LOL! Not since the mona lisa has such a masterwork been stolen…).
I’ll just post my CSS and you can see what I mean.
This is what I have in my CSS editor right now that my blog is using.
#header {
min-height:120px;
width:960px;
margin:8px auto;
}address,caption,code,dfn,h1,h2,h3,h4,h5,h6,th,var {
font-style:normal;
text-transform:uppercase;
font-weight:bold;
color:#00BCBE;
}blockquote {
padding-left:8px;
color:#E6E6E6;
}.category-quote blockquote p {
-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.3);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);
box-shadow:0 3px 4px rgba(0,0,0,0.29);
-webkit-border-radius:100px;
-moz-border-radius:1000px;
border-radius:7px;
color:#888;
background:#F67604;
text-shadow:0 1px 0 #fff;
font-size:.9em!important;
line-height:2em;
padding:10px;
}#wrapper {
border:solid;
width:1008px;
position:relative;
overflow:hidden;
background:#00C0C2;
border-color:#008E90;
border-width:1px;
margin:7px auto 0;
}#main {
padding-left:12px;
padding-right:18px;
padding-bottom:10px;
position:relative;
background:#FBFBFB;
}#main h2 {
padding-top:5px;
padding-bottom:18px;
line-height:1.1em;
}#main .post h2 {
margin:-6px 0 -10px;
}#main img.avatar {
float:left;
margin-right:10px;
border:solid;
color:#00BCC0;
margin-top:0;
border-width:2px;
}#main ul#postlist ul.commentlist li {
border-top-style:groove;
border-top-width:1px;
display:block;
}.bottom-of-entry {
display:block;
margin-bottom:-9px;
}#main p {
margin:.8em 0;
}#main #respond,.textedit {
margin-bottom:18px;
padding:11px 16px 0;
}#sidebar ul li {
clear:both;
padding:0 0 8px;
}#sidebar a:hover {
border-bottom:solid;
border-color:#2903CB;
border-width:1px;
}a {
color:#C6620A;
font-weight:bold;
font-family:verdana;
}body a:visited {
color:#C6620A;
}body a:hover {
color:#2903CB;
}h4 a:visited {
color:#00BCBE;
}h4 a:hover {
border-bottom:solid;
border-color:#00BCBE;
border-width:1px;
}h2 a:visited {
font-family:verdana;
color:#000000;
font-weight:bold;
}h2 a:hover {
color:none;
}#main .selected .actions a:link {
color:#F67604;
}#main .selected .actions a:visited {
color:#00BCBE;
}a:hover,a:visited a:hover,h1 a:hover,#main .selected .actions a:active {
color:#2903CB;
border-bottom:solid;
border-width:1px;
}#main .selected .actions a:hover {
color:#F67604;
}h2 {
font-family:verdana;
font-size:12px;
text-transform:uppercase;
color:#282828;
}#footer {
background:#F67604;
border-color:#000000;
border-width:3px;
}#footer p {
color:#00B0C0;
font-family:cornerstone;
font-size:10px;
}#main .actions a:link,#main .actions a:visited {
color:#00BCBE;
font-size:11px;
}#main p,#main ul,#main ol {
font-size:14px;
font-family:arialMT, verdana, “times new roman,” tahoma;
color:#282828;
}#main span.meta {
font-size:10px;
font-family:tahoma;
color:#00BCBE;
}#sidebar ul {
font-size:14px;
font-family:arialMT;
color:#000000;
}#newCommentsIndicator {
border-color:#F27506;
}li.newupdates,li.newcomment {
background-color:#00000;
}.navigation {
border-top:none;
}#sidebar h2 {
font-family:verdana;
color:#000000;
font-weight:bold;
font-size:18px;
} -
You are welcome.
It would be quite difficult at this point to tell you what you can take out and what you should leave in. CSS loads pretty quickly since it is just text, so I would not worry about it.
-
sacredpath,
thanks again. Both your codes worked very well and fixed the problems that were getting in the way. Getting what it didnt fix fixed would just be gravy at this point. It really doesnt matter but I thought I’d tell you anyway. The code for the post titles worked on the main page, and the size still worked on its own page once you clicked it and it went to its own page, only the bold was gone. Probably not your codes fault but something else I have in my CSS.
Probably the same case here, your code for the sidebar hover worked for the twitter updates, or it took away the underline border altogether. I added a border back but was able to make it black like I wanted. Its sort of muted and thicker than the others is the only problem, but it’s not blue anymore. I dont have to use a border on it at all.
Thanks again for your help. If you know how to fix the gravatar text indentation issue that seems to be the last issue I have except for how the blog looks.
-
If you know how to fix the gravatar text indentation issue that seems to be the last issue I have except for how the blog looks.
Are you talking about on the recent comments widget?
-
For the title on the single-post page, do the following (add the font-weight).
#main .postcontent h2, #main .postcontent h2 a { color: #000000; font-size: 20px; font-weight: bold; } -
not the recent comments widget. I mean if you look at my main page, home page, if you look at the text in my blog, there is space between the text and the left side of the content area. There is only a little space after the text on the right side of it, but a lot more on the left, because that is where the gravatar usually goes. You can hide the gravatar, but I cant figure out how to hide it, and then take the space away and put the text there instead.
-
-
I just noticed the line with your name and the date did not move left with the above. Adjust the left margin below to the same value you use for the left padding above.
#main h4 { margin-left: 55px; } -
Im going to try that now, but I think it’s not the answer. You see with this theme specifically, I tried that, and it will not let you move the margins further than where the gravatar is supposed to be. It looks like there is room to move the text, but it does not let you with the normal margins, at least not what I tried. You need some code that says override the gravatar, go into the designated gravatar space, if the gravatar is showing, then just overlap it with text. Go in no matter what.That way when the gravatar turned off, it will work like its supposed to. Otherwise the way it is now, the theme just views the cutoff you see right now as the edge of the content area. You cant go any further left.
Nevermind you’re a genius. It worked.
-
Thanks so much once more. There is no text that shows up well on top of my sidebar color (which is why I had to bold the orange just so that is sort of was readable), so I still cant seem the get things looking perfect how I want, but you’ve helped me get it as good as I can. Thanks again!
I have discovered something else to ask about but if you’re sick of dealing with CSS it can wait or someone els can answer. The simplest way to ask it is just, I want my link hover color to be one thing for my sidebar, and one thing for my content area blog posts. I made the orange links in the sidebar have a blue hover color because the orange doesn’t show up the best, so you can read it easier in blue once you hover over it. But now when I have links in my blog post that I want to be orange and stay orange, they also go blue when hovered over. It actually looks fine but it would be nice to know how to control this. But it’s not a pressing question like the post titles and all. Thanks again! Let me know if there are any changes you think I should make to the colors and all that.
-
- The topic ‘In P2 theme, how do I change my post titles without changing other text?’ is closed to new replies.
WordPress.com Forums 