• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 307
  • Last Modified:

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.  
0
rtod2
Asked:
rtod2
  • 6
  • 4
1 Solution
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now