Oulipo – changing site header/logo
-
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: (visible only to logged in users)
-
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?
-
If you upload your logo to your media library, we can help you use CSS to position it up in the same area.
-
-
Perfect. Thank you very much. Here it is: http://wedontaskformuch.files.wordpress.com/2013/04/workinglogo.png
Thank you so much.
-
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. -
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?
-
Actually, cancel that last comment. I went back to these two posts: https://en.forums.wordpress.com/topic/oulipo-theme-adding-link-to-image?replies=4 and https://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.
-
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; } -
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.
-
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.
-
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 stillp.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.
-
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.
-
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.
-
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?
-
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.
-
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.
-
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. :)
-
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; } -
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; }
- The topic ‘Oulipo – changing site header/logo’ is closed to new replies.
WordPress.com Forums 
