Twenty Eleven Comment bubble background
-
Hi,
I changed the background color of the main page where posts go. It worked great, but now the comment icon in Twenty Eleven shows a dopey white box around it because the background of the page is no longer white. Obviously it is not a png image. I found code to remove it, but I’d rather have it there. Any ideas?
The blog I need help with is: (visible only to logged in users)
-
It is a PNG, but it was not created with a transparent background.
You have to either edit the existing image or create a new one, upload it to the media library, get the URL of that image and then add the following to your CSS and replace IMAGE URL between the double quote marks with the full URL of the new image.
.entry-header .comments-link a { background: url("IMAGE URL") no-repeat scroll 0 0 transparent; }Here is the URL of the existing image:
-
Thank you.
I can’t seem to get the url to work. I uploaded the image. Here is the url, can you please show me the full code with the url?
Thanks
-
OK, I figured out the URL issue.
Do you know how I might accommodate the image being larger. Seems there is a small transparent window to hold the image and any image larger than that gets cropped.
I appreciate it.
-
And can you tell me what the code is for uploading my own Hover Image to match the new image I’ve uploaded for the comment image?
Thanks so much
-
This should do it. I haven’t tested it, but it should.
.entry-header .comments-link a:hover { background: url("IMAGE URL") no-repeat scroll 0 0 transparent; } -
Brilliant!! Thank you. Works like a charm.
I’m new to this and am having fun designing the site.
-
I left a comment on the other thread with a suggestion on how to get the menu back to a single line and gave you a big thumbs up on the colors and design. VERY nice site. I’ve bookmarked it and plan on visiting regularly.
-
-
Yes, it is fun. Like being a detective. I’m just tossing contact up right now to see how it looks and learn the process. I’ll spend another few days on it and then publish it with some new content. I still need to consider how I’m posting content for both business clients (team and leadership development) and coaching clients for personal development.
Header content will be important.
Do you know if there is a way to create a page that always holds the posts with specific categories? I know I can create a menu item for specific categories, but I want to be able to design the page with a specific header for the different categories. And I want to be able to direct people to specific category pages to land on. They can browse once they get there. But I want to send business clients directly to the page the hold “Leadership Development” category posts and have that page have a certain look.
Any ideas would be greatly appreciated.
-
You can target specific pages in the CSS and do headers that way for individual pages. With a reactive design such as twenty eleven, it can be a bit messy to get the images to resize like the original images do, but it can be done.
If you look at the body tag in the source code for say your Personal Well Being page, you will find this: category-202355 . You can use that to target and put a custom header image of your choosing just on that page.
We can help with that when you are ready.
-
How the hell do you know these things? Ha! I found the source code. So, in the CSS, there is a way to specify an image for the header for that category? I assume I load that image to my media library and point to it with certain code.
Would that image show up on every post that held that category, or only on the page that is related the that menu item?
I’m beat. Got to sleep. This can be addicting. Fun!
-
I’ve been working with CSS now for about 3 years and doing web design.
It would show up on only the specific category page.
You can actually set a featured image for each individual post, and as long as the image is the same size as the header image, that featured image will be used as the header on the single post page, so each individual post page could have its own header image. This is a feature of the twenty eleven theme.
- The topic ‘Twenty Eleven Comment bubble background’ is closed to new replies.
WordPress.com Forums 