Container Box Resize

The gray container area shown at the bottom of this post http://www.frugalmule.com/response-to-the-emails-concerning-my-dog/ and pointed out here in this screenshot http://screencast.com/t/e7akFO2ljKI is considerably wider than comment area that is contained within it.  Is there any way to get that to adjust.

For reference, a similar question was posted here >> http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_27417034.html#a37035950 but was unable to be answered due to the complexities of the problem.  

The person answering suggested using firebug to locate the offending area and change it.  

It is only asked here at this point to separate it from the other coding issue that was resolved.

Assistance is still needed on this part if possible.  
rtod2Asked:
Who is Participating?
 
level9wizardCommented:
Add a width to:

.cke_skin_kama .cke_wrapper {
    background-color: #D3D3D3;
    background-image: url("images/sprites.png");
    background-position: 0 -1950px;
    background-repeat: repeat-x;
    border-radius: 5px 5px 5px 5px;
    display: block;
    padding: 5px;
    width: 300px;
}

And here:

span.cke_skin_kama {
    border: 1px solid #D3D3D3;
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
    width: 310px;
}


Just as a side note, you should probably use type setting (see: "Lorem Ipsum") whenever you're asking for help from professionals. The racist language on that page could be one of the reasons you have yet to receive any help.
0
 
rtod2Author Commented:
Interesting!  I did not consider the language racist at all, but I appreciate the commentary.  I certainly had not considered that and was only using that page as an illustration of a technical issue.  I clearly should have chosen another one.  In terms of the task at hand, what file should I be looking for in which to make those changes?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
rtod2Author Commented:
That file isn't the right one.  How do I search all files for that location?
0
 
level9wizardCommented:
I'm certain that is the right file - you're probably getting confused because it is compressed (newlines, whitespace, etc are removed) and so it's a bit harder to read. Open that link in a desktop browser, and find (often CTRL+F):
span.cke_skin_kama
and
.cke_skin_kama .cke_wrapper

They are both there.

If you're having problems actually locating the file itself (on your server) you're going to probably want to ask a separate question on here about working with files in wordpress - that really has nothing to do with CSS. Hope this helps.
0
 
rtod2Author Commented:
OK,
I was confused because that was the suggestion earlier where the person said Line 151.  I see 13 lines which are like you say they are.  I'm wasn't sure how to work with that because I am used to replacing blocks of code with blocks of code.  Since you pointed out the change this should be easy.  We will see as I am in the code editor portion of the cpanel file manager now and I have backed up the file.  More to come...
0
 
rtod2Author Commented:
I made the two changes after finding

.cke_skin_kama .cke_wrapper and span.cke_skin_kama
I changed the width listed after those items to 300px and 310px respectively

Unfortunately, that had no effect.  Here is a video illustrating the effort.

http://screencast.com/t/fwrW6PwBi
0
 
rtod2Author Commented:
This did the trick, per a recommendation from another person...

"The best way to do this is to add a css override in the advanced settings page for the theme. That way the css file for the plugin is not changed, and an upgrade to the plugin will not break the fix."

Only the new or changed items need to be specified:

.cke_skin_kama .cke_wrapper { width: 300px }
span.cke_skin_kama { width: 310px; }

Advanced settings page is accessible in this way:

Go to Dashboard.
From Appearance section on left click Weaver Options
From tabs at top of Weaver Options select Advanced Settings
From the tabs on the Advanced Settings page select Header
The css overrides for the site are in the first box. You will see various styling overrides, to make things disappear, have no borders, have transparent background, etc.
0
 
rtod2Author Commented:
Complete solution explained at the bottom.
0
 
level9wizardCommented:
Glad to hear you got this working.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.