Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

custom CSS for text widget in Twenty Eleven

  1. sageenergy
    Member

    Hi - I'm reposting this question as I'd originally asked it in the wrong forum.

    I'd like to narrow the input fields in the contact form. I've put the contact form in my sidebar widget in Twenty Eleven, and although it fits within the sidebar content it's much wider than the "search" bar, and without much padding on the right side.

    I would also like to change the font size of the first line of text in that same widget, I'd like it to show up larger and more emphasized. It's currently . Here's the current text in that widget:

    <div>Canada toll-free 1-855-306-1200</br>
    Direct 1-902-306-1200</br>
    Or contact us here:</br>
    [contact-form subject='Contact Request from sage-energy.ca'][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]</div>

    The <div> is in there because when I take it out, the widgets below this get bumped down to the bottom of the main content page.

    Any assistance is greatly appreciated!

    The blog I need help with is sage-energy.ca.

  2. designsimply
    Staff

    For the form width:

    .textwidget .contact-form input[type="text"],
.textwidget .contact-form input[type="email"],
.textwidget .contact-form textarea {
	width: 185px;
}

  3. designsimply
    Staff

    I would also like to change the font size of the first line of text in that same widget, I'd like it to show up larger and more emphasized.

    Here's one possible example for adjusting the text size for the "Canada toll-free 1-855-306-1200" line in the sidebar:

    #text-9 strong {
	font-size: 2em;
}

    Adjust the font-size value as needed.

    Another alternative would be to give the text a unique class name and then use that as a selector in your custom CSS:

    <strong class='toll-free-number'>Canada toll-free 1-855-306-1200</strong>

    .toll-free-number {
	font-size: 2em;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags