WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I'm new to CSS and can't seem to find the proper places to change the post title color (tried advice in a previous topic that didn't work) and also the font size of the sidebar/widget headers.
I'm also having a hard time increasing the margin between the banner and the menu.
Finally, does anyone know if it's possible to increase the size of the banner image?
Help would be much appreciated! Blog is http://mongoliabound.wordpress.com/
The blog I need help with is mongoliabound.wordpress.com.
Can anyone help? I'm desperate!
Should I be putting this post in a different place? I really, really need help with this and am on a tight deadline.
I'm sorry but the fact is that everyone here is looking for help and there is no instant service here. You have to wait patiently along with everyone else, until someone who has CSS editing expertise chooses to help you or Staff helps you.
I completely understand that - I'm just looking at other posts and it seems like everyone else is getting really quick responses to CSS questions so wanted to make sure this was in the right place.
You have two post title scenarios: One on the main posts page (title is a link) and the other on the single post pages (title not a link).
1. Post title as a link (also picks up page titles)
Non-hover
meantformongolia
h1.post-title a {
color: #333333;
}Hover
h1.post-title a:hover {
color: #666666;
}2. Post title on single post pages
h1.post-title {
color: #444444;
}Thank you so much for your response! I will try this today and let you know how it goes!
@thesacredpath Worked like a charm! Thanks again. I have a couple more questions I'm wondering if you can help with:
1. Is it possible to increase the size of the banner header? If so, can you tell me what CSS that would require?
2. How can I center my menu items so they're evenly spread horizontally across the menu bar? Currently I'm fudging it with a left hand margin, but I'd like to center/distribute the items properly.
3. How can I remove the 'Posted in: Uncategorized' from the post footer?
1. Is it possible to increase the size of the banner header? If so, can you tell me what CSS that would require?
All of the themes with space for a header image built in will have the option to just upload a larger image to the Appearance → Header page, but the Comet theme hasn't been updated for flexible headers yet. Not to worry though, you can change out the header image with CSS like this:
#header {
height: 271px;
}
#header-image {
display:block;
background:url('http://mongoliabound.files.wordpress.com/2012/06/mongolia-banner-final.png') no-repeat;
width:960px;
height:271px;
}
#header-image img {
display: none;
}Change the url() value to an image link from your media library. Change the width value to the width of your image. Change the height value to the height of your image.
2. How can I center my menu items so they're evenly spread horizontally across the menu bar? Currently I'm fudging it with a left hand margin, but I'd like to center/distribute the items properly.
One way to do this is to set the top level menu item width to a percentage. Note that this will only work for a set number of items and if you change the total number of top level menu items, then you will also need to update the percentage value accordingly. I also removed the left and right padding from the top level menu item links so that the longer items wouldn't get wrapped to two lines. You can use this as a starting point:
.menu > li {
width: 16.2%;
}
.menu > li a {
padding: 12px 0;
}3. How can I remove the 'Posted in: Uncategorized' from the post footer?
You can hide the 2nd row of post meta for Comet posts using the following CSS:
.post-meta .row:nth-of-type(2) {
display: none;
}Note that :nth-of-type() is a CSS3 selector and it will work in all up-to-date browsers, but it will not work in IE8 or less.
Thank you so much! Will try these fixes! Really appreciate the help.
@designsimply The post meta is now gone - thanks!
I'm having issues with the menu, though - when I try what you've provided, the items are not centered and the longer items are wrapping. Here's all the CSS I've got:
.widget {
margin:10px 0 30px 30px;
padding:10px;
background:#ffffff;
border:none;
font-size:16px;
clear:both;
font-style:normal;
line-height:100%;
list-style:none;
overflow:visible;
}
.menu {
background:#fff;
clear:both;
border:none;
font-size:12px;
color:#50A6C2;
line-height:100%;
list-style:none;
margin:0;
overflow:visible;
}
.menu > li {
width:16.2%;
}
.menu > li a {
padding:12px 0;
}
h1.post-title a {
color:#50A6C2;
}
h1.post-title a:hover {
color:#50A6C2;
}
h1.post-title {
color:#50A6C2;
}
#c2 {
background:#fff;
float:left;
border:none;
line-height:150%;
margin:15px 0 0;
overflow:hidden;
padding:0 20px;
width:605px;
}
#c3 {
border:none;
margin:15px 0 0;
float:left;
overflow:hidden;
width:315px;
text-align:center;
}
.widget h2 {
display:inline-block;
font-style:normal 20px;
font-size:16px;
color:#50A6C2;
background:#fff;
letter-spacing:2px;
margin:0;
padding:8px;
text-shadow:none;
text-transform:uppercase;
text-align:center;
}
img.alignright {
float:right;
margin:0 0 1em 1em;
}
img.alignleft {
float:left;
margin:0 1em 1em 0;
}
img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
.alignright {
float:right;
}
.alignleft {
float:left;
}
.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
.post-meta .row:nth-of-type(2) {
display:none;
}
Since your menu li blocks are a set width of 16.2%, the words don't necessarily fit all the way across them, making them look uncentered. Try adding this:
text-align: center;
under "width" (in this code specified by DesignSimply) :
.menu li {
width: 16.2%;
}@zandyring Thanks! That seems to have worked somewhat, but if you look now, the words still haven an uneven amount of space between them, when I'd like each item to have the same amount of space between it: mongoliabound.wordpress.com
So, what my recommendation does is make each menu item and equal width, meaning the width between the center of each item is equal, but that's slightly different than changing the spacing surrounding each menu item's text.
My last suggestion might have been easier to visualize if you had a border between items like this:
.menu > li {
width:16.2%;
text-align:center;
border-left: 1px solid #E5E5E5;
}
.menu > li:first-of-type {
border-left: none;
}
.menu > li a {
padding:12px 0;
}Or you could take a different approach like replacing all of the things you have now that start with ".menu > li" and replacing them with one block like this:
.menu > li a {
padding:12px 30px;
}The second thing might be what you're really after, but to be honest both can look a little odd if you look at the menu for too long because the menu labels have such different widths. A border between each one might be a good idea in either case.
.menu > li {
border-left: 1px solid #E5E5E5;
}
.menu > li:first-of-type {
border-left: none;
}
.menu > li a {
padding:12px 30px;
}Hopefully that is enough info to play around with it until you get the result you're looking for.
Note that the same caveat applies, this is a manual adjustment and if you change the text for any menu item or the total number of menu items, you will need to also adjust the padding value.
@designsimply The second suggestion is exactly what I was looking for - thanks!
@designsimply For the header banner, I used your code but for some reason the banner still shows up with only 200 px height rather than the 271 px I would like. Any thoughts? Is there extra CSS I need to add to override the default banner size?
Ah, looks like I missed that the #header height also needs to be adjusted. Try adding this:
#header {
height: 271px;
}* Note that I amended the original example above.
Also, don't forget the "#header-image img" rule or the background image you add will show up in addition to the one added via Appearance → Header.
Perfect! That worked like a charm :)
Sorry, but I have ANOTHER question! There is quite a bit of padding below the images at this page: http://mongoliabound.wordpress.com/about/
How can I change this?
Also, how can I change the font in my menu to the Museo font I'm using for other headers?
There is quite a bit of padding below the images at this page: http://mongoliabound.wordpress.com/about/
You can make a change to the bottom padding for images just on that page by adding this to your Appearance → Custom Design → CSS editor:
.page-id-2 #content img.alignleft,
.page-id-2 #content img.alignright,
.page-id-2 #content img.aligncenter {
margin-bottom: 0;
}Note that you can change the margin-bottom value to something else if that takes away too much spacing. Also, to make the change for all images, you can remove all of the ".page-id-2" parts.
Also, how can I change the font in my menu to the Museo font I'm using for other headers?
As long as "Museo Slab" is selected as one of the fonts on your Appearance → Custom Design → Fonts page, you can use CSS like this to change to that font:
.menu > li a {
font-family: museo-slab-1,museo-slab-2,"Droid Serif",Georgia,serif;
}Note that different fonts have different properties such as width. If you change the font, you will also need to adjust the padding value between menu items (discussed earlier in this thread) to account for the change—otherwise, the menu will fall over to two lines.
I noticed the width of the content area looks like it's short 20 pixels on this page: http://mongoliabound.wordpress.com/about/
You could widen it a little using this:
.page-template-full-width-template-php #content #c2,
.attachment #content #c2 {
width: 920px;
}@designsimply You are the BEST! This blog would look pretty crappy without your help :)
It looks fantastic! I love the customizations you've done so far!
I just saw your instagram pic! Cool! https://twitter.com/MongoliaBound/status/218680501718880257
You should link @mongoliabound to https://twitter.com/#!/mongoliabound on http://mongoliabound.wordpress.com/2012/06/29/hello-world/
I think it'd be cool to put a Twitter widget on your sidebar too :) http://en.support.wordpress.com/widgets/twitter-widget/
@designsimply Wow - thanks for the compliment and the suggestions!!! I will definitely put a Twitter widget or at least icon in the sidebar.
One more question - how can I get rid of the little squiggly at the bottom of each post?
To hide the squiggly line below posts in the Comet theme, add this to your Appearance → Custom Design → CSS editor:
#c2 .sep {
display: none;
}@designsimply Last question - how can I make tags not show up in the footer? Thank you!!!
This topic has been closed to new replies.
