Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Bueno - snags

  1. ruthbarnes
    Member

    Hello - am hoping someone may be able to help me with a few snags on a new blog I'm launching - have purchased the CSS upgrade, and managed to figure most of what I need - but there are a few snags which for the life of me I can't fathom.

    Have gone through a lot of forum posts but for some reason, some of the CSS which seems to work for other people doesn't seem to work on our site.

    Ok:

    1. Changing the colour of the border of the featured image THUMBNAIL. We've successfully sorted the featured image border itself, but the thumbnail is stumping us. We need it black, and at 2px.

    2. Reducing the amount of space above the page navigation panel (we have removed the blog title)

    3. Removing the Bueno by Woo Themes on the black footer: we've managed to get rid of the Blog at WordPress on the left, but can't seem to shift the right hand text.

    4. Changing colour of all hyperlinks, removing the underline, and changing the hover colour - including the recent posts widget on the right hand side-bar.

    5. In the extended footer, we've managed to change the background colour, and the text colour - but there are dividing lines that are currently green. We need them to be white. In addition the excerpt for the featured image is grey, and we need to change it to white. Lastly, the error message on the Twitter feed comes up as grey - we need it while.

    6. We have a recent comments widget on the right hand side bar, and the links are green and underlined - we would like to change the colour and text-decoration on these.

    7. ALSO, the widget font (not the header font, we have that sorted) appear as grey, which we would like to change to black.

    8. We would like to change the hover text-decoration in our widgets to nothing. They are currently appearing as bold.

    9. On the recent posts widget on the right hand side, we would love to get rid of the lines which divide the posts, and also to use a custom bullet point - we have made a transparent png. which is already uploaded into the media library.

    10. Is there any way to remove the 'author' and 'categories' boxes on the posts as they appear in the news/blog feed?

    11. Lastly, is there any way to remove the home page title on the page itself (currently titled spit.) whilst leaving it showing on the page navigation panel?

    Sorry for the epic list - I've spent the past 48 hours trying to figure these things out and they are completely stumping me! Any help would be enormously appreciated...

    Thanks so much....

    The blog I need help with is spitmusic.wordpress.com.

  2. ruthbarnes
    Member

    Oh, and really sorry - but is there any way to move the page navigation panel to underneath the header instead of above?

    Thanks

  3. ruthbarnes
    Member

    Aww man, have just seen two more things (I really hope some lovely person sees fit to respond to this novel of a plea for help)...

    - We're set the text-transform to:lowercase for when the posts appear in the news feed - can we do this for the posts themselves?

    - How do we reduce the size of the 'one response to "post title" text? We'd like it to be around the 18 px mark.

  4. thesacredpath
    Member

    We need a link to the blog you are talking about. The one linked to your username is wearing twenty ten.

  5. ruthbarnes
    Member

    https://spitmusic.wordpress.com/

    Thank you!

  6. thesacredpath
    Member

    1. Since I can't see an example on your site, I'm completely guessing you mean the one in the bottom widget area.

    .widget-bueno-featured span.thumb img {
border: 2px solid #000000 !important;
}

    2. 

    #header {
padding-top: 0;
}

    3. Removing the footer stuff is against the Terms of Service here and will get your site suspended or deleted. You need to put that stuff back.

    4. 

    .widget ul li a:hover {
background: none no-repeat scroll 10px 12px transparent;
color: #115900;
}

a:link, a:visited {
color: #115900;
text-decoration: none;
}

.post-meta li .body a:hover, .navigation a:hover {
color: #115900;
}

    5.

    .one, .two {
border-color: #6CAD5D;
}

.widget-bueno-featured li {
border-bottom: 1px solid #9BD28E;
}

    6. #4 above takes care of that.

    7. 

    .widget ul li a:link, .widget ul li a:visited {
color: #666666;
border-bottom: medium none;
}

body {
color: #7A7A7A;
}

    8. 

    #extended-footer .widget ul li a:hover {
font-weight: normal;
}

    9. #7 above takes care of that.

    10. 

    .categories, .author {
display: none;
}

    11. 

    .home .post .title {
display: none;
}

    This is all I'm going to take care of at this time since it is past time to go to sleep. Perhaps someone else will drop by and take care of the rest. Also, with so much, I could have missed or messed up on some of it. You will have to change hex color codes in several places.

  7. ruthbarnes
    Member

    @thesacredpath - You are amazing, and we appreciate this sooooooo much. Thank you a million times over!

    Everything looks great, and I've added back in the WordPress text.

    There are a few things that haven't worked (below) so hopefully someone else will be able to pop by and help us finish up the last few things? We'd be really grateful....

    - The excerpt text for the featured image widget on the extended footer is grey, and we need to change it to white. Also, the error message on the Twitter feed comes up as grey - we need it while.

    - On the recent posts widget on the right hand side, the rollover is still bold and we would like no text decoration - we would also like to use our custom bullet points - is there any way to do this? If so, what code would we need to enter?

    - Is there any way to move the page navigation panel to underneath the header instead of above?

    - We've set the text-transform to:lowercase for when the posts appear in the news feed - can we do this for the posts themselves?

    - How do we reduce the size of the 'one response to "post title" text? We'd like it to be around the 18 px mark.

    - Is there any way to remove the 'about' page title on the page itself whilst leaving it showing on the page navigation panel?

    - Lastly, we would like to adjust the header space to 930 x 300 pixels - I know how to do this in the CSS code, but then how do I upload this larger header onto the site? If I upload it into the custom header tool, it reverts back to the default size of 930 x 198.

    Thank you so much to anyone who can help - we really are super appreciative

    A & R x

  8. thesacredpath
    Member

    Excerpt and twitter widget text:

    #extended-footer {
    color: #FFFFFF;
    }`

    Recent posts

    .widget ul li a:hover {
font-weight: normal;
}

    Custom bullet points on the recent posts. The image used right now is 5px x 5px so you will want to stay with something close to that. Upload it to the media library and the put the URL of that uploaded image into the below.

    .widget ul li a:link, .widget ul li a:visited, .widget ul li a:hover {
background: url("green/bullet.png") no-repeat scroll 10px 12px transparent;
}

    Lower case on single post title

    .post .title {
text-transform: lowercase;
}

    Page nav below header

    #header {
position: relative;
}

#pagenav {
position: absolute;
top: 200px;
}

#content {
margin-top: 30px;
}

    About page title: the first bit would turn it off for only the about page. the second bit would turn it off for all static (non-post) pages.

    .page-id-2 .post .title {
display: none;
}

.page .post .title {
display:none;
}

    When you increase a header size with custom CSS, you have to put the header in via the custom CSS instead of the header uploader. Upload it to the media library, get the URL and then put that into a background declaration. You would also have to go to the custom header page in your dashboard and "remove" the custom header. After removing the header image, the below might not work and you might have to put it into #header-image (without the img on the end).

    #header-image img {
background: url("URL of header images") no-repeat scroll 0 0 transparent;
height: 200px;
width: 930px;
}

  9. thegirlsare
    Member

    You are awesome - again, thank you so much!
    A million times over. This has been so helpful - we owe you big
    xxxxx

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags