Need help? Check out our Support site, then


Customizing text in a text widget

  1. Theme is Twenty-Eleven. I want to customize the appearance of a text widget only, including its heading. Following WPress instructions for putting links into a widget, I set up a new page, wrote the widget text the way I wanted it to look in Visual mode, copied it in Text mode; then pasted the Text mode into the 'Experiment' widget. It worked fine. But I could not find a way to make the widget heading (title) bold - it would not accept the same code. Can I customize the heading of the widget?
    I would also like to make the widgets wider if I can, in sidebar template view.
    Also to be able to separate individual widgets with a straight line.

    The blog I need help with is truedemocracynow.com.

  2. But I could not find a way to make the widget heading (title) bold - it would not accept the same code.

    To make widget titles in the Twenty Eleven theme bold, you can add CSS like this to your Appearance → Custom Design → CSS editor:

    .widget-title {
    	font-weight: bold !important;
    }

    Also note that the Headings option on the Appearance → Custom Design → Fonts page also has an option to adjust the style of headings to bold, but that will affect post and page titles as well as widget titles.

  3. I would also like to make the widgets wider if I can, in sidebar template view.

    Here is an example showing how to adjust the width of the sidebar. You can make edits but note that the percentages are all kind of interdependent so if you adjust the percentage in one spot, you will probably also need to make sure to adjust the corresponding percentage to make room for the adjustment.

    #primary {
    	margin-right: -32%;
    }
    
    #content {
    	margin-left: 4%;
    }
    
    #secondary {
    	margin-right: 4%;
    	width: 27%;
    }
    
    #access ul {
    	margin-left: -6%;
    }
  4. Also to be able to separate individual widgets with a straight line.

    You could do this by adding a border to the bottom of each widget like this:

    #secondary .widget {
    	padding-bottom: 2em;
    	border-bottom: 1px solid #ccc;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic