Need help? Check out our Support site, then


Oulipo - changing site header/logo

  1. Hi,

    We are working on customizing Oulipo, and what drew us to this layout was these to sites: http://casayellow.com and http://www.flourishingfoodie.com because of the position of the image headers/logos on these sites. We have purchased the custom upgrade, but I am thinking that possibly, as these two sites are likely both wordpress.org sites and can get at the php, we probably won't be able to get our logo in the same place on our site. Any feedback, or if you know how to do this, is so appreciated.

    Thank you.

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

  2. Hi, I've looked at all your blogs and I see what you mean about the logo and the placement of it. I'm wondering if in your premium theme there might be a setting or a customization that is specific to logos and placement of such? Have you checked that out? Also, since you have a premium theme, have you searched through the documentation on the theme developer's site?

  3. If you upload your logo to your media library, we can help you use CSS to position it up in the same area.

  4. And we will need the URL of that image. Sorry to not have added that to begin with.

  5. Perfect. Thank you very much. Here it is: http://wedontaskformuch.files.wordpress.com/2013/04/workinglogo.png

    Thank you so much.

  6. You need to resize your image so that it is no more than 160px in width as that is the width of the main nav div we are putting the image into. I've temporarily resized the image using the "contain" attribute, but that relies on the browser to resize the image and browsers are lousy at that. You will see that the image has become very fuzzy. Add the following to your CSS, at the bottom, and take a look.

    #main-nav {
    background: url("http://wedontaskformuch.files.wordpress.com/2013/04/workinglogo.png") no-repeat scroll center top / contain transparent;
    margin-top: 1em;
    padding-top: 14em;
    }

    When you get the image resized and uploaded to the media library, replace the URL of this image with the new one (between the double quote marks) and then you should also be able to remove the
    / contain
    from the background declaration.

  7. Thank you very much. I resized to a new image and updated the url. Then I tried pasting that into my CSS, and it doesn't seem to be showing up. Any thoughts?

  8. Actually, cancel that last comment. I went back to these two posts: http://en.forums.wordpress.com/topic/oulipo-theme-adding-link-to-image?replies=4 and http://en.forums.wordpress.com/topic/adding-logo-above-title-in-oulipo-layout?replies=6 and managed to get the logo to show up with a link back to the home page.

    However, with your wonderful help, I would like to delete the title text completely, so that left hand column is the logo and then the navigation links shortly under it. Do you have any advice on how I might do that now? My CSS for this task looks like this:

    '#main-nav h1.masthead a, #main-nav h1.masthead a:hover {
    background:url('http://wedontaskformuch.files.wordpress.com/2013/04/workinglogo1.png') no-repeat;
    display: block;
    margin-top: 1em;
    padding-top: 14em;
    }'

    Any advice? I greatly appreciate your help. After we (really, you, because you are far better at this than me) work this question out, can I ask a few more? Do you mind? I am just looking for some identifiers that I cannot find in the past discussion topics so I can alter some other things. Thank you.

  9. Give this a try. The second rule below is from your CSS. Add the #padding top as I have it and then work from there.

    #main-nav h1.masthead a {
    text-indent: -9999px;
    }
    
    #main-nav h1.masthead a, #main-nav h1.masthead a:hover {
    background: url("http://wedontaskformuch.files.wordpress.com/2013/04/workinglogo2.png") no-repeat scroll 0 0 transparent;
    display: block;
    margin-top: 2em;
    padding-top: 5em;
    }
    
    #main-nav .menu-wrap {
    margin-top: 0;
    }
  10. Wow. I can't thank you enough. Now, I know this is taking more of your time, but I have a couple questions. I hate to be that person who keeps asking, but I've searched and searched and I can't find what I am looking for.

    First, I had my links (I want all links to match) like this:

    a:link, a:visited {

    color: #E4575C;

    text-decoration: none;

    }
    a:hover, a:active {

    color: #1F63C4;

    text-decoration: none;

    }

    And every time I preview/and or save, it makes no appearance difference. And then when I save and come back to the CSS editor, it says the rule is empty (and it is). Any advice?

    My other questions are minor pesky ones, if you are available to answer them.

    Our blog currently has two search fields. Do you know how I might get rid of the top one, above the black line? In that vein, I would also like to know if it is possible to get rid of the black line and shift all my content up?

    As well, do you know how I might get rid of symbol between date and ‘leave a comment’ on the home page and each post? If possible, I would just like the date, no option to post at this point.

    Is it by design that the first line of every post is larger - I believe my searching around has said this, but I just wanted to be sure. If it is not, is there any way to change this?

    Finally, do you know the identifier for the "date/leave a comment" text, as well as the "read more of this entry" text?

    Thank you very much. I appreciate that this is taking up your time. I really, really, cannot thank you enough.

  11. Sorry. I apologize. As I'm asking these questions, I continue to work and figure things out.

    I figured that the search bar in the menu was just a widget, it is gone now. I would still be interested in nixing that top black line. I can find where it is in the page source, but I don't know how to write the CSS to override it.

    And then, in regards to the left and right columns and their format and typeface, I thought that going through and finding their identifiers (.recent-posts-2, .categories-2, .archives-2, .meta-2) and putting them in the CSS with the styling I want would work - but so far no success. I also need to change the style of the texts and links in the left hand column. I have Googled like mad and searched the code as best I can, and I am baffled at how to do that.

    I have been messing more with trying to change link styling, to no avail. Will the styling then be consistent for all three columns (I sure hope so, that would be brilliant)?

    Similarly,I thought using .date and then changing the style would alter the style of the large date on each post. No luck. I also would like to do the same to the leave a comment text and the read more at the jump. Would I do this the same way - find the identifier and specifically change the text? As well, do you know how can I write an override to get rid of the symbol between date and comment and the << around 'read the rest'?

    Even if you could direct me to a web resource that might help me figure these and my above few questions (is the first line of each post and preview larger as a set feature of the design?), out I would be so grateful.

    I know that you are a volunteer, and I can't tell you how much I appreciate your help. It has been fantastic.

  12. PLEASE ignore the last 2 questions above.

    Honestly, I swear I am not turning into THAT person. Who hounds you with too many questions. I am working really hard on these edits, and sometimes the CSS is just not agreeing with what my intense Googling is telling me it should do. I am hoping for some guidance.

    I want to thank you again for your time. I realize you are a volunteer. I do have CSS and some coding experience, but for some reason, wordpress is messing with me. I apologize A LOT.

    Also. I promise I won't post again until you answer. These are my most updated questions:

    Just as background, many of these colors deal with links. I do have an overall link rule defined, but it seems not to be working at all

    a:link, a:visited {
    	color: #423D42;
    }
    
    a:hover, a:active {
    	color: #E4575C;
    }

    1. In the right hand column, I have edited the content links (January 2012, February 2012) of each widget (#archives-2, etc) and they are the correct font/size. However, I cannot get the link styles for these to change. My coding looks like this, but the links remain light grey with blue mouseover (default)

    #archives-2 {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #423d42;
    }
    
    #archives-2 a {color: #423d42;}
    a:hover {color: #e4575c;}

    2. In this same right hand column, it looks like #widgettitle should be how I can change "archives" and "categories" titles, which currently are the default styling. In the page source, it says that widgettitle is associated with h2, however, h2 is already defined differently? This is what I have currently and it hasn't changed anything

    #widgettitle {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #423d42;
    }'
    
    3. Again, I am still fighting to remove the dotted line at top of the blog and lessen padding to raise the blog (so the first post is closer to the top of the screen). I have tried every suggestion I can find on these forums and Google, and have had no success yet. All I have managed to do so far is make the image you helped me set up disappear - not great. 
    
    4. I would also like to remove the dotted line on the post title links (h2). I can't seem to change the styling of the post title links at all, including the font. I would like them to be simple, change color on hover, no underline. Do you have any suggestions?
    
    5. I would also like to change the link style, color, and font in left column. I have had trouble getting into that left column at all - is it java? I would like to change the font, size, and remove the shaded links when hovering. Again, I would like the link style to be simple. Any ideas on how I can get into that left column?
    
    6. I have been trying (aimlessly) to remove the symbol between "date" and add a comment". Any suggestions?
    
    7. As well, I have been trying to remove << around “read more”, and change text format. I thought it seemed to be "p.morleink", but it hasn't worked. This is what I have and everything appears to be default still
    p.more-link {
    font-family: Garamond, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #423d42;
    }`

    8. have been trying to change the 'date' and 'add a comment' size, font, and color. I have been using p.date and span.commentcount. Only the 'add a comment' has changed successfully, although the link color is still incorrect. This is what I have
    `p.date {
    font-family: Garamond, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #423d42;
    }

    span.commentcount {
    font-family: Garamond, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #423d42;
    }'

    9. And finally, I am again struggling with the first line of text on each post. Is first line always larger and in this default text? If not, how might I change this? (I am crossing my fingers it is changeable).

    Thank you very much. Honestly. Thank you. You are helping to keep me sane as I stress over this. I will wait patiently for your response.

    THANK YOU.

  13. Oh my gosh. That posted horribly. So sorry. Let me try again.

    PLEASE ignore the last 2 questions above.

    Honestly, I swear I am not turning into THAT person. Who hounds you with too many questions. I am working really hard on these edits, and sometimes the CSS is just not agreeing with what my intense Googling is telling me it should do. I am hoping for some guidance.

    I want to thank you again for your time. I realize you are a volunteer. I do have CSS and some coding experience, but for some reason, wordpress is messing with me. I apologize A LOT.

    Also. I promise I won't post again until you answer. These are my most updated questions:

    Just as background, many of these colors deal with links. I do have an overall rule defined, but it seems not to be working at all

    a:link, a:visited {
    	color: #423D42;
    }
    
    a:hover, a:active {
    	color: #E4575C;
    }

    1. In the right hand column, I have edited the content links (January 2012, February 2012) of each widget (#archives-2, etc) and they are the correct font/size. However, I cannot get the link styles for these to change. My coding looks like this, but the links remain light grey with blue mouseover (default)

    #archives-2 {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #423d42;
    }
    
    #archives-2 a {color: #423d42;}
    a:hover {color: #e4575c;}

    2. In this same right hand column, it looks like #widgettitle should be how I can change "archives" and "categories" titles, which currently are the default styling. In the page source, it says that widgettitle is associated with h2, however, h2 is already defined differently? This is what I have currently and it hasn't changed anything

    #widgettitle {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #423d42;
    }

    3. Again, I am still fighting to remove the dotted line at top of the blog and lessen padding to raise the blog (so the first post is closer to the top of the screen). I have tried every suggestion I can find on these forums and Google, and have had no success yet. All I have managed to do so far is make the image you helped me set up disappear - not great.

    4. I would also like to remove the dotted line on the post title links (h2). I can't seem to change the styling of the post title links at all, including the font. I would like them to be simple, change color on hover, no underline. Do you have any suggestions?

    5. I would also like to change the link style, color, and font in left column. I have had trouble getting into that left column at all - is it java? I would like to change the font, size, and remove the shaded links when hovering. Again, I would like the link style to be simple. Any ideas on how I can get into that left column?

    6. I have been trying (aimlessly) to remove the symbol between "date" and add a comment". Any suggestions?

    7. As well, I have been trying to remove << around “read more”, and change text format. I thought it seemed to be "p.morleink", but it hasn't worked. This is what I have and everything appears to be default still

    p.more-link {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #423d42;
    }

    8. have been trying to change the 'date' and 'add a comment' size, font, and color. I have been using p.date and span.commentcount. Only the 'add a comment' has changed successfully, although the link color is still incorrect. This is what I have

    p.date {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #423d42;
    }
    
    span.commentcount {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #423d42;
    }

    9. And finally, I am again struggling with the first line of text on each post. Is first line always larger and in this default text? If not, how might I change this? (I am crossing my fingers it is changeable).

    Thank you very much. Honestly. Thank you. You are helping to keep me sane as I stress over this. I will wait patiently for your response.

    THANK YOU.

  14. This is a lot of questions! Just as a general tip for the future, it works best to create a new help request for each question or each set of alike questions (like all the link color related ones). Otherwise, it can get especially messy when any back and forth conversation needs to happen, i.e. about that bit of CSS you said won't save (that sounds odd!).

    Let's finish out this thread, but stick to shorter posts in the future.

  15. And every time I preview/and or save, it makes no appearance difference. And then when I save and come back to the CSS editor, it says the rule is empty (and it is). Any advice?

    Just to clarify, the CSS won't save or the CSS saves and doesn't apply on the site. In the first comment you posted about this issue, it sounds like the the CSS isn't saving for you. One possible reason something like that might happen would be if the syntax was bad (i.e. there's a typo in the code you added). I did test the CSS you posted earlier though, and it worked in my test:

    a:link, a:visited {

    color: #E4575C;

    text-decoration: none;

    }
    a:hover, a:active {

    color: #1F63C4;

    text-decoration: none;

    }

    Are you still having trouble with adding that specific block of CSS to the Appearance → Themes → Customize → CSS panel in your blog?

  16. Hi designsimply - thank you so much. I have the links working now.

    Don't worry about answering the grocery list of questions I have. I understand that it is a bit against the rules of the forums, and also, that it is a ton of work for you. I will keep googling and try to search out the answers.

    Thank you again, you guys are stars.

  17. Just as background, many of these colors deal with links. I do have an overall rule defined, but it seems not to be working at all

    This is a later comment you added. This one sounds like the rule gets saved but doesn't get applied. What's probably happening is that there are more specific CSS rules that are being set by the theme. You need to learn about CSS specificity in order to know how it works before you try to create the code you need to change all link colors. Here is a good article about it:
    http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    So, regarding the link colors, there are a whole slew of them set in any given theme and you may have to add several rules to override all of them—however, a lot of times you won't want to target every single link to be the same color because that would be overkill. The site title is a link, page and post titles, all the navigation links might have a specific color scheme.

    What you probably want is to target the links inside the post or page and maybe the right sidebar. To get you on the right track, here is an example that does just that:

    #supplementary a,
    .entry a,
    .entry a.more-link {
    	color: #f00;
    }
    
    #supplementary a:hover,
    .entry a:hover,
    .entry a.more-link:hover {
    	color: #0ff;
    }

    I used red and teal for the colors, you should preview the example so you can see where the links are and then update the code with your own color codes before saving.

  18. Don't worry about answering the grocery list of questions I have.

    I'm here to help! I can tell you're excited and that your blog is going to turn out looking fantastic too. :)

  19. 2. In this same right hand column, it looks like #widgettitle should be how I can change "archives" and "categories" titles, which currently are the default styling. In the page source, it says that widgettitle is associated with h2, however, h2 is already defined differently? This is what I have currently and it hasn't changed anything

    #widgettitle {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    	color: #423d42;
    }

    The first thing to note is that "widgettitle" is a class not an ID. In CSS, selecting an ID starts with "#" and selecting a class starts with "."

    The second thing, the tricky part!, is that because you have set fonts on the Appearance → Custom Design → Fonts page, you'll need to add "!important" to the new CSS rules you're creating to override those.

    Here is your example updated:

    .widgettitle {
    	font-family: Garamond, Helvetica, sans-serif !important;
    	font-size: 11px !important;
    	font-weight: normal !important;
    	color: #423d42;
    }
  20. 3. Again, I am still fighting to remove the dotted line at top of the blog and lessen padding to raise the blog (so the first post is closer to the top of the screen). I have tried every suggestion I can find on these forums and Google, and have had no success yet. All I have managed to do so far is make the image you helped me set up disappear - not great.

    CSS is theme specific, so if you search the forums, make sure you're looking at advice about your current theme.

    You currently have this in your custom CSS:

    #search #searchform {
    	display: none;
    }

    But if you back that selector up one level, it will remove all of the spacing for it as well as the dotted line:

    #search {
    	display: none;
    }
  21. 4. I would also like to remove the dotted line on the post title links (h2).

    To remove the bottom border from all h2 heading links, add this to your Appearance → Themes → Customize → CSS panel:

    h2 {
    	border-bottom: none;
    }
  22. I can't seem to change the styling of the post title links at all, including the font. I would like them to be simple, change color on hover, no underline.

    Try something like this:

    h2 a:hover {
    	color: #ed6f6f;
    	border-bottom: none;
    }
  23. 5. I would also like to change the link style, color, and font in left column. I have had trouble getting into that left column at all - is it java?

    Nope.

    I would like to change the font, size, and remove the shaded links when hovering. Again, I would like the link style to be simple. Any ideas on how I can get into that left column?

    This is because of Custom Fonts again. :)

    Try this as a starting point:

    #main-nav ul li:hover {
    	background: inherit;
    	border-color: inherit;
    }
    
    #main-nav ul li:hover a {
    	border: none;
    	color: #e24239;
    }
  24. 6. I have been trying (aimlessly) to remove the symbol between "date" and add a comment".

    .date .sep {
    	display: none;
    }
  25. 7. As well, I have been trying to remove << around “read more”, and change text format. I thought it seemed to be "p.morleink", but it hasn't worked. This is what I have and everything appears to be default still

    p.more-link {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #423d42;
    }

    Try "a.more-link" instead of "p.more-link" and add "!important" for the font-related bits:

    a.more-link {
    	font-family: Garamond, Helvetica, sans-serif !important;
    	font-size: 12px !important;
    	font-weight: normal !important;
    	color: #423d42;
    }

    Note that using "!important" isn't always a good idea—it's only a good idea to use it when there is not another alternative. In special cases like this one where you need to override the Custom Fonts settings, I think it's okay but I wouldn't use it on a ton of other things.

  26. 8. have been trying to change the 'date' and 'add a comment' size, font, and color. I have been using p.date and span.commentcount. Only the 'add a comment' has changed successfully, although the link color is still incorrect. This is what I have

    p.date {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #423d42;
    }
    
    span.commentcount {
    	font-family: Garamond, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #423d42;
    }

    The p.date block needs "!important" tags to cover the font properties:

    p.date,
    span.commentcount {
    	font-family: Garamond, Helvetica, sans-serif !important;
    	font-size: 12px !important;
    	color: #423d42;
    }

    And "font-weight" isn't needed because those things are already font-weight:normal by default.

    Did you know you can combine the two blocks like this?

    p.date,
    span.commentcount {
    	font-family: Garamond, Helvetica, sans-serif !important;
    	font-size: 12px !important;
    	color: #423d42;
    }
  27. 9. And finally, I am again struggling with the first line of text on each post. Is first line always larger and in this default text? If not, how might I change this? (I am crossing my fingers it is changeable).

    This will reset size and styling for the first letter and first line of a post in the Oulipo theme:

    .entry > p:first-child:first-letter {
    	font-size: inherit;
    }
    .entry > p:first-child:first-line {
    	font-family: Georgia, Helvetica, sans-serif !important;
    	font-size: 12px !important;
    }

    Be careful with how many times you use "!important". We went over a lot of things separately, and I think several of them could be combined to be more efficient. Also, if you aren't going to use the custom font you setup on the Appearance → Custom Design → Fonts page, maybe set them back to the defaults and you won't need the "!important" parts in the CSS.

  28. SHUT THE FRONT DOOR. Oh my goodness. I cannot thank you enough. AT ALL. At all. This is perfect.

    Honestly though, thank you so much for your time. Is there any way I can send you quick online gift card or something? To thank you for this. Because actually, it really, really, really saved our blog. No joke. It helped in a beyond major way.

    Thank you again. I hope you have a lovely rest of the day (and week, and month, and year - thank you!)

  29. "SHUT THE FRONT DOOR" is the best reply ever. :)

    No need for a gift card, but thank you so much for the thought!

Topic Closed

This topic has been closed to new replies.

About this Topic