CSS help – Replace the HOME menu item by small logo.
-
hey there, I have few questions on twenty twelve theme.
1) can someone help me replace Home menu item by little logo image. I have the image.
2) I want to change the background color of the top menu items.
3) I want to change the background color when I hover on any menu item.
4) I want to center my logo image in place or site title. I don’t want site title/
5) I want to replace the widget titles by images.
6) Can I put the search bar on header image.
7) Can I have sharing buttons next to any post title.
8) i want to remove the default text in the footer “The Twenty Twelve Theme. Blog at WordPress.com” Also a little smiley at the center bottom.Please let me know. Thank you.
-Sumit
site name – coderange.netThe blog I need help with is: (visible only to logged in users)
-
Hi there,
Please see below:
Can someone help me replace Home menu item by little logo image. I have the image.
You should be able to do this following the example here:
http://wordpress.org/support/topic/using-images-instead-of-menu-items?replies=3
Using the following CSS:
li#menu-item-765 a { display: block; background-image:url('http://url.to/yourbackgroundimage.jpg'); background-repeat: no-repeat; width: 100px; height: 50px; text-indent: -9000px; }In your case, the menu item will need to be switched to 329. Can you give that a try?
2) I want to change the background color of the top menu items.
Give this a try:
header#masthead.site-header { background-color: #000; }3) I want to change the background color when I hover on any menu item.
.main-navigation li a:hover { background-color: #000; }4) I want to center my logo image in place or site title. I don’t want site title/
The easiest way to do this would be to add a custom header:
http://en.support.wordpress.com/themes/custom-header-image/
Have you given that a try?
5) I want to replace the widget titles by images.
Oy! There isn’t really an easy way to do this. It would require a similar code as item 1 above repeated for each widget. I would recommend asking in the CSS forum here:
https://en.forums.wordpress.com/forum/css-customization
It’s better suited for advanced questions like this.
Can I put the search bar on header image.
No – this will not be possible to put a search bar on top of a custom image. In order to do this, you would need to move the current search bar from the sidebar. Doing that would be more well-suited for the CSS Customizations forum mentioned above.
7) Can I have sharing buttons next to any post title.
No – sharing buttons can only be added to the bottom of posts as described here:
8) i want to remove the default text in the footer “The Twenty Twelve Theme. Blog at WordPress.com” Also a little smiley at the center bottom.
The default footer credit is required per our terms and conditions here:
As for the smiley, can you give this a try?
footer#colophon:before { content:url(''); margin-left: 450px; }Just put the link to the smiley you want to use in between the parenthesis.
-
hey there, thank you so much for the reply really appreciate it.
Well counting on above questions.
Following bullet points did work for me.
1, 2 and 3.For point 8 the smiley face is all the way at the bottom in the center.
Visit http://www.coderange.net.
Also in point 8 I have my domain registered on wordpress.com and it should be removable. I am surprise about not able to remove the text which “wordpress.com and twenty twelve theme”.For point 4 I am looking not to add header but above menu there is site title where I want to have my site logo in the center. Can you provide the css for the same.
Few more questions.
9) can I have font name, font size and bold it for top menu nav.
10) can I align the top menu in the middle. I have it centered by the way.
11) Can I make the all the menu item of equal width right now they are taking as per there text.
12) Can I have categories or tags background color hightlighted once they clicked.
13) Can I remove the heading “Tag archive : tagname ” or “Category archive: categoryname” which appears whenever I click on any category or tag.
14) Once #13 is done there will be lot of space between post and top menu. Can I reduce the same.
15) Can I add footer like privacy policy, terms & conditions, etc.Please let me know. Thank you for your help.
-
For point 8 the smiley face is all the way at the bottom in the center.
Ah – I misunderstood. I thought you were trying to add a smiley! To remove that one, use the following:
img#wpstats { display: none; }Also in point 8 I have my domain registered on wordpress.com and it should be removable. I am surprise about not able to remove the text which “wordpress.com and twenty twelve theme”.
Yes – even though you have a custom domain mapped to your WordPress.com blog, you’ll need to leave the footer credits intact.
For point 4 I am looking not to add header but above menu there is site title where I want to have my site logo in the center. Can you provide the css for the same.
Were you able to get this worked out? I see the OS X Yosemite logo on the top of your site now. Is that what you were looking for?
9) can I have font name, font size and bold it for top menu nav.
If you’re looking to change the font size and font weight of the nav menu, you can use the following:
.main-navigation li a { font-size: 14px; font-weight: 800; }To change the font, you’ll have to follow the instructions here:
http://en.support.wordpress.com/custom-design/custom-fonts/
10) can I align the top menu in the middle. I have it centered by the way.
Hmm I’m not entirely sure what you’re looking for. The menu is currently centered. Could you explain a bit more?
11) Can I make the all the menu item of equal width right now they are taking as per there text.
This should get us on the right track:
.main-navigation li a { width: 100px; text-align: center; }Right now, one of your menu items (namaste) is throwing off the width. If you truncate that down a bit, the above code might be perfect.
12) Can I have categories or tags background color hightlighted once they clicked.
I’m not sure if you’re referring to a background color on highlight or after they’re visited. Here are the codes for each:
Highlight:
aside#wp_tag_cloud-4 a:hover { background-color: #000; }Active:
aside#wp_tag_cloud-4 a:active { background-color: #000; }Visited:
aside#wp_tag_cloud-4 a:visited { background-color: #000; }Can I remove the heading “Tag archive : tagname ” or “Category archive: categoryname” which appears whenever I click on any category or tag.
h1.archive-title { display: none; }14) Once #13 is done there will be lot of space between post and top menu. Can I reduce the same.
This should automatically bump up the text to compensate for the missing element.
15) Can I add footer like privacy policy, terms & conditions, etc.
Let’s start with this and see if it works for what you’re looking for:
div.site-info:before { content: "ENTER CONTENT HERE"; } -
Point 8, 9 and 15 did work.
For point 4 I actually don’t want to add header which is OS X yosemite.
All I want to add the logo above the top menu nav. in place or site title.
Right now I have disabled the site title which is above menu nav.From point 10 yes you are right its centered. there is other catch here if you see closely I have put the logo as home which is little bit stretched down and other menus have gone up in the same line. I want pull other menus in middle.
From 11 can you provide css to wrap the text.
From 14 it worked but the gap looks more there. Can I reduce that gap.
it did not bump up.Questions :
16. Currently I have all titles in the post appears blue color when I click on categories and tags, but if I click on particular post title, after when it renders the post titles become black. Can you provide css to make all the titles blue.
17. Do you see I have rounded the top menu. Can I give background color to that rounded box.
18. Is it possible to display summary text when I click on tags or categories.Please let me know. Thank you.
–
Sumit -
Hi there,
Please see below! For future CSS-related questions, please direct them to the CSS forum here:
https://en.forums.wordpress.com/forum/css-customization
However, I’m happy to help you with any additional questions here that aren’t CSS related!
From point 10 yes you are right its centered. there is other catch here if you see closely I have put the logo as home which is little bit stretched down and other menus have gone up in the same line. I want pull other menus in middle.
It looks like your menu is now centered and on the same line. Is that what you’re looking for? If not, please provide a specific description of what you’re looking for including an example or two just so I know we’re on the right page!
From 11 can you provide css to wrap the text.
Hmm…your menu items don’t need to wrap currently as they’re all fitting nicely on a line. Again, could you provide a detailed breakdown of what you’re looking for as mentioned above?
From 14 it worked but the gap looks more there. Can I reduce that gap.
it did not bump up.This should do the trick:
div#main.wrapper { margin-top: -20px; }16. Currently I have all titles in the post appears blue color when I click on categories and tags, but if I click on particular post title, after when it renders the post titles become black. Can you provide css to make all the titles blue.
h1.entry-title { color: #000; }Just change the hex code there to what you’re looking for.
17. Do you see I have rounded the top menu. Can I give background color to that rounded box.
Not entirely sure what you’re referring to here. I do see that you’ve rounded the corners. Where are you looking for the background color to be applied? It looks like you’ve already changed the background color of the menu.
18. Is it possible to display summary text when I click on tags or categories.
The easiest way to do this would actually just be using the More tag within your posts as described here:
http://en.support.wordpress.com/splitting-content/more-tag/
That will break up the content. Anything above the More tag will appear on archive pages. The rest of the content will be hidden behind a “Read More” link.
-
Hey there, thank you so much for your response. Your all guesses are correct :). I am in atleast in better position then earlier. I would like to work on footer now can you please provide me as to how I can add footer in proper layout form. Like Privacy policy and terms & conditions in one column and my contact details on other col. so on and so forth.
Waiting for your further guidance. Thank you. -
Hi there,
The method we’re using now to add the footer elements (the before CSS selector) isn’t really going to be ideal if you’re looking to add multiple columns of information. Ideally, if you wanted to have that information in the footer, you would be better suited by choosing a theme that has footer elements already like the Twenty Eleven theme here:
http://theme.wordpress.com/themes/twentyeleven/
This way, you don’t have to add the elements through CSS. You could just add them through a Text Widget. Would that work?
-
Hey there, thanks for your reply. I think its not possible for me to change the theme now and I dont want to do it, since twenty twelve is really clean and nice theme. Well for footer how can I add multiple text in same line with respective link. Please let me know. Thank you.
-
Hi there,
I apologize for not thinking of this before. With the CSS attribute we’re using (the :before selector), it isn’t possible to add a link to text. So, it’s not possible to link the text above your footer to your individual pages. Instead, I would recommend adding the pages to the bottom of your sidebar using a text widget. Would that work?
-
Hey there, thanks for your reply. If I put text widget for the footer it will only appear on the front page. I would need footer on all the pages.
There should be atleast a way to add link to text. Right now I have copyright text return. Could you please guide me for footer. i want to add multiple text and links to it. Please let me know.I had other question if I change the theme to twenty eleven as you mentioned earlier will my css changes stay and my site will look same.
or i will have to redo the efforts. Please let me know. Thank you. -
Hi there,
Please see below:
If I put text widget for the footer it will only appear on the front page. I would need footer on all the pages.
If you place the widget in the main sidebar area on your Widgets page linked below, it should appear on all pages except your front page:
https://coderange.wordpress.com/wp-admin/widgets.php
To place it on the front page as well, you’ll need to add it to the Front Page Widget Area.
There should be atleast a way to add link to text. Right now I have copyright text return. Could you please guide me for footer. i want to add multiple text and links to it.
There is not a way to add a link to your copyright text in the footer using CSS. You will need to either add the link within a text widget as described above or change to a theme that has footer widgets.
Also, I noticed you have removed the copyright notice for WordPress.com. Per our conversation earlier, the footer credit is required as stated in our Terms of Service. Please remove the code starting with “footer[role=”. I’ll make a note to check back in a few days to make sure this has been removed.
if I change the theme to twenty eleven as you mentioned earlier will my css changes stay and my site will look same.
Initially, when you change to the Twenty Eleven theme, your CSS changes will be removed. However, they’re saved in your CSS revisions history. We can get them back up and running. Please note, some of the selectors may be different from Twenty Twelve to Twenty Eleven meaning some of your CSS attributes may need to be tweaked. However, that shouldn’t be a huge issue.
Also, when you change themes, your widgets will moved out of your sidebar and onto an Inactive Widgets panel at the bottom of your widgets page. However, they won’t be deleted. To re-activate them, you’ll need to move them back to your sidebar.
-
hey there, thanks for your reply. Please do not misunderstand me. Since I was trying different things and missed to put that back. You can see I have put that back. thanks for your attention.
I have tried changing the twenty eleven but looks like there is lot of effort there. Either I have to go with twenty twelve or see other which has less efforts. -
Thanks for adding those footer credits back in!
I have tried changing the twenty eleven but looks like there is lot of effort there. Either I have to go with twenty twelve or see other which has less efforts.
Please let me know how you want to proceed!
-
hey there, I am going with twenty twelve theme. Can you please help me identify the terms of use of the website. I am using the earlier link that you shared about terms of use. There is lot of content. Do you think I have read all of those and understand my site use. Also can you share the privacy policy of individual blogger if you have those.
Thank you.
-
Hi!
Do you think I have read all of those and understand my site use
I took a look, and it doesn’t look like you’re breaking any of our terms of use. Is that what you’re asking?
Also can you share the privacy policy of individual blogger if you have those.
We don’t have a default privacy policy for bloggers to use. Is that what you’re looking for?
We do have an Automattic privacy policy that you can read here:
-
hey there, I want to put terms of use on my site of my own. Do you think that I should extract from wordpress.com terms of use and put that there or should I just link it from there. I want put only required text under terms of use and privacy policy.
I want to understand what information does wordpress store like user info., cookies, etc. I hope this is much clear. Please let me know. -
Hi!
You can read the information that we store here (particularly under “Gathering of Personally-Identifying Information”):
We don’t require you have a privacy policy or terms of use policy on your site so we don’t have a template or a generic one so to speak. If you would like to create your own privacy policy, here is a pretty solid breakdown of what to include:
-
Hey there, thanks for your reply. I have pretty much extracted and created my Terms of Use and Privacy Policy and linked to wordpress.com for detailed one. If you visit my site coderange.net its under About menu you should see. Please let me know if it looks good
and have np at all. Thank again. -
Looks great! Thanks for linking back to Automattic.com for the full length options.
Let me know if you need anything else!
- The topic ‘CSS help – Replace the HOME menu item by small logo.’ is closed to new replies.
WordPress.com Forums 