WordPress.org

Ready to get started?Download WordPress

Forums

How can I make the textarea for content and pages wider? (22 posts)

  1. djhomeless
    Member
    Posted 8 years ago #

    Hi Everyone,
    Dealing with what should be a very easy problem; for whatever reason, I'm struggling with it...

    I personally find the content textarea too narrow for my liking. In the admin panel, it seems fairly easy to add more rows, but there doesn't seem to be a simple way to add colums. In fact, this seems to be ignored because the textarea is defined by a style, like so:

    <textarea rows="<?php echo $rows; ?>" cols="10" name="content" tabindex="5" id="content">

    In the stylesheet for my theme, the content class is defined to be just 510px wide. The content class is also used to style the content layout on the page view as well.

    Here's where it gets a bit tricky. If I create a new class, say content1, and give it the exact same elements that are in the content class, then it works (which means I can increase the size to whatever I want). However, for whatever reason, the quicktags fail to work using this new style!

    My only option is to increase the width defined in the content class, but that will impact how the content is styled on the front end. Considering WordPress wraps each paragraph element inside brackets, it shouldnt really matter for the input and display elements to be the same width correct?

    Or am I missing something here?

    Thanks for your help.

    Geoffrey

  2. moshu
    Member
    Posted 8 years ago #

    When to talk about the "content textarea" - does it mean the "window" in the admin panel where you write your posts? I don't know what resolution do you have, but at 1027x768 the text input area is big enough. If it was wider would push the categories sidebar out of the screen.

  3. Michael Bishop

    Posted 8 years ago #

    Me thinks you are crossing up two different contents. IT sounds to me like at first you are talking about the content box you type your post in, then you talk about the content of your finished post, as you reference your THEME'S style sheet. The two do not have anything to do with one another. If I'm mistaken, can you clarify?

  4. djhomeless
    Member
    Posted 8 years ago #

    Slight correction here, though I'm still confused.

    Looking through my theme, which is Connections, the content is actually styled using the post-content class.

    However, when I modified the content class, the modifications were reflected on the front end website as well as on the form pages. But if the web display is referencing the post-content class, then why did it pick it up?

    The only thing I can see that might cause the this is that the two classes are referenced in the stylesheet differently. I don't really know what it means, but here are the two references:


    #content {
    width:510px;
    float:left;
    padding:5px;
    margin:0;
    overflow:hidden;
    display:inline;
    }

    .post-content {
    padding:10px 0;
    margin:3px 0;
    border-top:#BBC4A3 1px solid;
    font-family: Georgia, Verdana, Arial, serif;
    font-size:12px;
    }

    Does the hash key act as some sort of wildcard? Like any class that contains the word 'content' will also utilise these attributes??

    Thanks All,

    Geoffrey

  5. Michael Bishop

    Posted 8 years ago #

    the # means a div, the . means class. You are only suppose to have one of the divs per page, as many classes as wanted.

    When you say forms then, are refering to the comments form then?

  6. moshu
    Member
    Posted 8 years ago #

    Actually, we are the ones confused :)
    textarea is a very specific expression used for defining a certain part of a form in a webpage. Click to see it.

    It seems you are not talking about the textarea but about the content part of your theme. You cannot make it wider without re-designing the theme: the whole theme has to be wider in order to allow a wider content.

  7. djhomeless
    Member
    Posted 8 years ago #

    Ok, so I'm not doing a good job explaining myself.

    The textarea, refers to the form you use to create and edit content.

    Whenever I talk about the 'front end', I refer to how the content appears on the site.

    The content as it appears in the site, is inside a div with a class of "content-post".

    The textarea where you input the content, is in a class called "content".

    As I'm self taught on CSS, I'm confused why changing the atrributes for the "content" style, which should only affect the textarea of the form, also impact how the content styles in the "content-post" class.

    Does that make sense?

    Geoffrey

  8. moshu
    Member
    Posted 8 years ago #

    You still don't get it :(
    Do you want to change the frontend or the backend?
    They are NOT related.
    They use different stylesheets.
    Don't even mention "textarea" if you want to change the frontend.

  9. djhomeless
    Member
    Posted 8 years ago #

    I do get it. The title of the post says it all, I'm looking to modify the textarea you use to input your content.

    All I'm looking to do is change the width of the textarea, which I mention above.

    I am confused, because not only is the change reflected in the textarea (ie the form), which is what I wanted, but it is also shows up on the website in terms of how the content is displayed, which is what I don't want.

    Both stylesheets are referenced in the admin screen, and both stylesheets contain a class called "content". Strangely enough, if I change the content class in the admin css, it does nothing.

    The content is displayed on the site inside a div that references a class called "post-content". So again, I am confused why chaning a differently named class would have any affect.

  10. Beel
    Member
    Posted 8 years ago #

    I am new to this thread and I still don't think I get it ;-), changing, in admin.css,

    classwhatever { whatever }

    will have no effect on how the content is displayed on the front page. That is, unless you define a class and use it in both the content div and in the textarea, and mistakenly call admin.css in the front page, then there will be a possible conflict between the two.

  11. djhomeless
    Member
    Posted 8 years ago #

    I know, I don't get it myself, hence the reason for this post.

    I changed the class for the textarea, in the admin pages, and the change was reflected. However, it also changed the way the content was styled on the site!

    Then I created a new class, and changed the textarea to reference it. The textarea did change, however the quicktags stopped working.

    Its all very weird....

    Geoffrey

  12. Beel
    Member
    Posted 8 years ago #

    I'd sooner believe your eyes are playing tricks. Unless you call admin.css in your index page, then what you describe (or how I interpret what you describe ;-) is as likely as turning on the bathroom light causes my car to start.

  13. djhomeless
    Member
    Posted 8 years ago #

    Its the other way around.

    I'm making the changes in the site stylesheet, not the admin one. I mentioned this above, but for whatever reason when I made the change in the admin stylesheet (for the textarea), it didn't change.

    Both the admin stylesheet and the site stylesheet have a class called "content".

  14. djhomeless
    Member
    Posted 8 years ago #

    Its the other way around.

    I'm making the changes in the site stylesheet, not the admin one. I mentioned this above, but for whatever reason when I made the change in the admin stylesheet (for the textarea), it didn't change.

    Both the admin stylesheet and the site stylesheet have a class called "content".

  15. Beel
    Member
    Posted 8 years ago #

    All right, so turning on my car causes the bathroom lights to turn on :-) I guess I'd better reread the entire thread... after church.

    It's a longshot but make sure the theme you are using does not add css to the admin section. Check the source, wp-admin.css should be the only one called.

  16. djhomeless
    Member
    Posted 8 years ago #

    Your working on the sabbath? You heathen! :)

    I mentioned it earlier in the thread, but my theme does call the site stylesheet in the admin pages.

    As its done in the header, I'm not sure how to disable it just in the admin pages....

  17. Beel
    Member
    Posted 8 years ago #

    Well then you will have to get specific, instead of something like:

    .whateverclass { whatever }

    you will have to use:

    textarea.whateverclass { whatever }

    Ahh, I think I get it now. I bet your front page has a div with an ID of "content" and the textarea is also given an ID of "content." This ordinarily would not be a problem but since your theme dinks with the admin display, to change just the textarea in admin you will probably need to use "textarea#content { }" as "#content {}" will affect both the content div on the front page and the textarea in the admin write page.

  18. djhomeless
    Member
    Posted 8 years ago #

    Sadly I tried that.

    Whenever I created a new class for the textarea, the form would indeed change. However, for whatever reason the quicktags stopped working!

    Does anyone know why that would happen?

  19. djhomeless
    Member
    Posted 8 years ago #

    *sigh*
    This thread is not going anywhere. I will make one last valiant attempt to get my point across. :)

    Whenever a textarea is used in the admin pages to input/edit content, the code is this:

    <div><textarea rows="<?php echo $rows; ?>" cols="10" name="content" tabindex="5" id="content"><?php echo $content ?></textarea></div>

    Note the class id of "content".

    In wp-admin.css, there is just the following simple CSS entro for content:

    #content, #excerpt {
    margin-left: 1%;
    width: 130%;
    }

    Changing this CSS entry to increase the text size has no affect.

    My theme's CSS, which is called site-wide from the header, ALSO has an entry called "content". It is as follows:


    #content {
    width:510px;
    float:left;
    padding:5px;
    margin:0;
    overflow:hidden;
    display:inline;
    }

    If I change this entry, it WILL increase the textarea in the admin pages. However, it ALSO changes how the content is styled on the site, despite the fact that the content is styled inside a differently named class!

    Also, if I create a new class to use on the textarea in the admin pages, it WILL work (ie it increases the textbox size). HOWEVER, the quicktags fail to function using this new class.

    Sorry for being so literal, and taking so much space. I'm really struggling on how to solve what should be a fairly straightforward change.

    thanks

  20. Mark (podz)
    Support Maven
    Posted 8 years ago #

    This, when placed at the bottom of wp-admin.css, makes the textarea a bit larger:

    #postdiv {
    width:1000px;
    }

    That also break the overall width of the containers, and wanders behind the categories (at least on my page is does).

    Is that what you mean ?

  21. djhomeless
    Member
    Posted 8 years ago #

    That increases the size of the div container around the quicktags and the textarea. It doesn't increase the size of the textarea.

    It would be nice to know why the quicktags seem to have some dependency on the textarea using a specific class....?

  22. Mark (podz)
    Support Maven
    Posted 8 years ago #

    My textarea took off east at that size.

    Could you mockup a screenshot of what you want ?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.