How do I adjust the width of a block?

I would like to increase the width of the "Search area" block.

I'm putting my own text in the "Search area" region, and would like more letters to stay on one line. So I need to know how to make that block wider.

Thank you!!

Comments

stanowen’s picture

stanowen commented

In the style.css file I found a width of 218px associated with the Search region, but adjusting that number makes no difference in the size of the block. There must be a way to increase the length/width of the search area block.

stanowen’s picture

stanowen commented
Priority: Normal » Critical

so nobody knows?

really could use thee help to get my website to go live and I've been waiting on this one issue.

gtsopour’s picture

gtsopour commented
Assigned: Unassigned » gtsopour
Issue tags: +corporate, +Corporate Theme, +Corporate Clean Theme

Hello stanowen,

could you tell me in which region have you placed the search block?

Thanks
/George

gtsopour’s picture

gtsopour commented

Hello stanowen,
I prepared for you the appropriate changes to style.css file. Make the following changes only on your style.css file (increase search block 100px for example)

1. Decrease header-inside-left width 100px
From

#header-inside-left {
    float: left;
    margin: 0;
    padding: 0 60px 0 0;
    width: 620px;
}

To

#header-inside-left {
    float: left;
    margin: 0;
    padding: 0 60px 0 0;
    width: 520px;
}

2. Increase header-inside-right width 100px
From

#header-inside-right {
    float: left;
    padding: 0;
    width: 280px;
}

To

#header-inside-right {
    float: left;
    padding: 0;
    width: 380px;
}

3. Increase search block form text width 100px
From

#block-search-form input.form-text {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #9F9F9F;
    float: left;
    font-family: "Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif;
    height: 15px;
    line-height: 15px;
    outline: medium none;
    padding: 10px;
    text-decoration: none;
    width: 218px;
}

To

#block-search-form input.form-text {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #9F9F9F;
    float: left;
    font-family: "Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif;
    height: 15px;
    line-height: 15px;
    outline: medium none;
    padding: 10px;
    text-decoration: none;
    width: 318px;
}

Please, inform me if this worked for you or not in order to help you directly.
Thanks
/George

stanowen’s picture

stanowen commented

George, you are a genius! From a beautiful theme to the excellent support.

You've helped me tremendously, and fixed my problem!

Thank you very much!

gtsopour’s picture

gtsopour commented
Status: Active » Fixed

Hello stanowen,
thank you for your good words.

I changed the status of this issue to 'fixed'.

Thanks again
/George

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

gtsopour’s picture

gtsopour commented
Status: Closed (fixed) » Fixed

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

corrected grammar.