Editing Widget Titles on Sidebar
-
I would like to edit the Font Size and header size of the titles of my widgets (they are currently way too big on the page). I have tried to edit the CSS code but have been unsuccessful. Given my lack of knowledge and experience with CSS, please can anyone help me achieve the look for my sidebar that I desire?
The blog I need help with is: (visible only to logged in users)
-
Hi there,
You can shrink the size of the widget titles with the following CSS:
#secondary-content h3 { font-size: 12px; }Just input that under Appearance -> Customize -> CSS. The pixel number is adjustable to achieve the look you want. Also, just for future reference, we have a forum devoted to CSS customizations here:
https://en.forums.wordpress.com/forum/css-customization
In case you’re interested to learn a bit more, we have some information and resources here:
http://en.support.wordpress.com/custom-design/editing-css/
Let me know if you need anything else!
-
Thank you very much, exactly what i needed :) I checked the links you provided for tips on how to remove the white header box on the widget titles but didn’t find anything – Is there an easy fix?
-
You can change the background color of the widget titles with the following code:
#secondary-content h3 { background: rgba(216, 216, 216, 0.4); }Can you give that a try?
-
-
-
To be honest, there are a few things i’ve been struggling to figure out for the past few weeks…
1. How can i get the title of my posts to go all the way across the width of the post rather than cut off two thirds of the way and go onto the next line?
2. If i choose to have the ‘Leave Comment’ box on posts, how can i only specify for this to show at the end of the post, rather than on the top right hand side of the post title bar next to the heading of the post?
3. Can i change the width & height of my Instagram widget pictures? There doesn’t seem to be an option for this on my theme (Grisaille) like there is for the Twitter widget.Sorry to bombard you but i can’t find the answers for the above anywhere and have tried! As you can see, i am a tech novice and any advice/help would be appreciated…
-
Please see my answers below!
How can i get the title of my posts to go all the way across the width of the post rather than cut off two thirds of the way and go onto the next line?
Can you give this a try?
#primary-content h2.post-title a { width: 580px; }That should get the look closer to what you’re going for. Some of the titles will still wrap due to the word length.
If i choose to have the ‘Leave Comment’ box on posts, how can i only specify for this to show at the end of the post, rather than on the top right hand side of the post title bar next to the heading of the post?
If you enable comments, this CSS should remove the “Leave a Comment” text towards the top of the post:
span.comments { display: none; }Can i change the width & height of my Instagram widget pictures? There doesn’t seem to be an option for this on my theme (Grisaille) like there is for the Twitter widget.
That’s getting a bit tricky since the images display in several formats (columns, singular, etc). The better solution would be to use the columns adjustment within the widget settings to either make the images larger (1 column) or smaller (3 columns). I see Grace has already logged the widget error from your other forum thread. Once that gets resolved, we can take another look at this!
-
Thanks so much, yes the first 2 worked :)
For the comments, is there anyway to keep the box if there have been any comments posted so readers can see the comment count in the top right hand side of the post i.e. just remove the box when there are no comments on a post?
Re. the Instagram widget – cool, i’ll wait for the widget error to be resolved and take it from there.
-
Ignore me re. the comment box, i think it’s already showing the box when comments are already on that post!
-
One last question (really sorry for bombarding), can i change the background colour of my post pages, so they stand out more from the background colour?
-
Hi!
Please see below:
For the comments, is there anyway to keep the box if there have been any comments posted so readers can see the comment count in the top right hand side of the post i.e. just remove the box when there are no comments on a post?
Unfortunately, the selector for the comment number and the “Leave a Comment” text are the same. When someone leaves a comment, the text will be removed and the number of comments will be shown. However, if you use the code I provided, both the “Leave a Comment” text and the number of comments will be removed. Since they use the same selector, it isn’t possible to differentiate via CSS.
One last question (really sorry for bombarding), can i change the background colour of my post pages, so they stand out more from the background colour?
You’re not bombarding me at all! Can you give this a try?
li.type-post, div.type-post, .type-page, .home-post, .featured { background-color: #fff; } -
-
-
Thanks Jeremey I really appreciate it. Any tips you have for making it look even better/more professional would be welcome :)
- The topic ‘Editing Widget Titles on Sidebar’ is closed to new replies.
WordPress.com Forums 