[ SOLVED ] Game Magazine: editor error

Gamebox - especially created support forum for Joomla 1.6
Topic locked
GK User
Mon Nov 21, 2011 5:21 am
Hi guys! I seem to have an error in the editor portion of this new freshly installed template.
It's showing the Save and Cancel buttons on the side, pushing the whole window over... any idea's?

Pic below:

Image
User avatar
Senior Boarder
GK User
Mon Nov 21, 2011 5:27 am
Try below css which was for another light template.
Add them to end of template.css file or in override.css , make sure CSS Override is enabled from template features.
Code: Select all
/* Editor Styles Starts Here */
#editor-xtd-buttons {
    padding-top: 5px;
}
.formelm {
    float: none;
    padding: 0px 5px 0px 5px;
    position: relative;
    display: block;
    overflow: hidden;
}
.formelm-area {
    color: #000000;
    font-size: 10px;
    padding: 3px 0;
    width: 12em;
    text-transform: uppercase;
    position: relative;
    display: block;
}
.formelm-area label{
    color: #000000;
    float: left;
    font-size: 10px;
    padding: 3px 0;
    width: 12em;
    text-transform: uppercase;
}
.formelm-buttons {
    float:right;
    margin-bottom: 10px;
    position: inline;
}
.formelm label {
    color: #000000;
    float: left;
    font-size: 10px;
    padding: 3px ;
    text-transform: uppercase;
    vertical-align: top;
    width: 10em;
}
.formelm .inputbox {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CCCCCC #E7E7E7 #E7E7E7;
    border-radius: 2px 2px 2px 2px;
    border-right: 1px solid #E7E7E7;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 6px #F0F0F0 inset;
    color: #111111;
    font: 12px/18px Arial,Helvetica,sans-serif;
    height: 16px;
    padding: 6px;
}
.button2-left {
    float: left;
    margin-left: 5px;
    background: url("../images/btn_bg.jpg") repeat-x scroll left top #FFFFFF;
    border: 1px solid #DBDBDB;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-family: BebasNeue,Arial,sans-serif;
    height: 29px !important;
    line-height: 31px;
    margin: 0 5px 3px 2px;
    padding: 0 16px;
    font-weight: normal;
}
.edit form#adminForm fieldset {
    border: 1px solid #DDDDDD;
}
.edit form#adminForm fieldset {
    margin: 10px 0 15px;
    padding: 20px 15px;
}
.edit form#adminForm  legend {
    font-size: 14px;
    background: url("../images/breadcrumbs_bg.png") repeat-x scroll left bottom #FAFAFA;
    border: 1px solid #C3C3C3;
    border-radius: 0 0 3px 3px;
    position: relative;
    width: auto;
    padding: 2px 10px 2px 10px;
}
fieldset {
    border: 0 solid #CCCCCC;
}
fieldset {
    border: 1px solid;
    margin: 10px 0;
    padding: 15px 0;
}
fieldset a {
    font-weight: normal;
}
fieldset .legend {
    font-size: 18px;
}
div.mceEditor {
    padding-top: 2px;
    position: relative;
}
jform_language-lbl {
    color: #000000;
    float: left;
    font-size: 10px;
    padding: 3px 0;
    width: 12em;
    text-transform: uppercase;
}
span.wf_editor_toggle {
    cursor: pointer;
    display: block;
    line-height: 20px;
    background: url("../images/breadcrumbs_bg.png") repeat-x scroll left bottom #FAFAFA;
    border: 1px solid #C3C3C3;
    border-radius: 0 0 3px 3px;
    position: relative;
    width: 70px;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    font-family: BebasNeue,Arial,sans-serif;   
}
/* Editor style ends here */


See you around.
User avatar
Platinum Boarder
GK User
Mon Nov 21, 2011 5:36 am
thanks for the reply.. hmmm, not diggin the look with the washed out buttons etc.. isn't there any way to just move the original buttons above the editor area??


Image
User avatar
Senior Boarder
GK User
Mon Nov 21, 2011 6:24 am
I don't have access for my test server at the moment so I cannot test this right now , later on when I get access to my test server I ll post a solution.


See you around...
User avatar
Platinum Boarder
GK User
Mon Nov 21, 2011 6:26 am
you know what, you did great, thank you, i just firebugged the CSS and messed with it, within your code you gave me, works perfectly, thanks again!
User avatar
Senior Boarder
GK User
Mon Nov 21, 2011 6:39 am
Thats good to hear you fixed it , you might want to post your final editor css in here so it will be useful to others as well.

See you around...
User avatar
Platinum Boarder
GK User
Mon Nov 21, 2011 9:57 am
Here is the code to achieve this look -
(i put this code in my override.css file - be sure to enable it in the template backend or it wont work) This is for a DARK template - i changed from light to dark, so this css works best for dark templates.


editor.jpg



Code: Select all
/* Editor Styles Starts Here */
#editor-xtd-buttons {
    padding-top: 5px;
}
.formelm {
    float: none;
    padding: 0px 5px 0px 5px;
    position: relative;
    display: block;
    overflow: hidden;
}
.formelm-area {
    color: #FFFFFF;
    font-size: 10px;
    padding: 3px 0;
    width: 12em;
    text-transform: uppercase;
    position: relative;
    display: block;
}
.formelm-area label{
    color: #FFFFFF;
    float: left;
    font-size: 10px;
    padding: 3px 0;
    width: 12em;
    text-transform: uppercase;
}
.formelm-buttons {
    float:right;
    margin-bottom: 10px;
    position: inline;
}
.formelm label {
    color: #FFFFFF;
    float: left;
    font-size: 10px;
    padding: 3px ;
    text-transform: uppercase;
    vertical-align: top;
    width: 10em;
}
.formelm .inputbox {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CCCCCC #E7E7E7 #E7E7E7;
    border-radius: 2px 2px 2px 2px;
    border-right: 1px solid #E7E7E7;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 6px #F0F0F0 inset;
    color: #111111;
    font: 12px/18px Arial,Helvetica,sans-serif;
    height: 16px;
    padding: 6px;
}
.button2-left {
    float: left;
    margin-left: 5px;
    background: url("../images/btn_bg.jpg") repeat-x scroll left top #333333;
    border: 1px solid #444444;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-family: BebasNeue,Arial,sans-serif;
    height: 29px !important;
    line-height: 31px;
    margin: 0 5px 3px 2px;
    padding: 0 16px;
    font-weight: normal;
}
.edit form#adminForm fieldset {
    border: 1px solid #444444;
}
.edit form#adminForm fieldset {
    margin: 10px 0 15px;
    padding: 20px 15px;
}
.edit form#adminForm  legend {
    font-size: 14px;
    background: url("../images/breadcrumbs_bg.png") repeat-x scroll left bottom #222222;
    border: 1px solid #222222;
    border-radius: 0 0 3px 3px;
    position: relative;
    width: auto;
    padding: 2px 10px 2px 10px;
}
fieldset {
    border: 0 solid #CCCCCC;
}
fieldset {
    border: 0px solid;
    margin: 10px 0;
    padding: 15px 0;
}
fieldset a {
    font-weight: normal;
}
fieldset .legend {
    font-size: 18px;
}
div.mceEditor {
    padding-top: 2px;
    position: relative;
}
jform_language-lbl {
    color: #000000;
    float: left;
    font-size: 10px;
    padding: 3px 0;
    width: 12em;
    text-transform: uppercase;
}
span.wf_editor_toggle {
    cursor: pointer;
    display: block;
    line-height: 20px;
    background: url("../images/breadcrumbs_bg.png") repeat-x scroll left bottom #FAFAFA;
    border: 1px solid #C3C3C3;
    border-radius: 0 0 3px 3px;
    position: relative;
    width: 70px;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    font-family: BebasNeue,Arial,sans-serif;   
}
/* Editor style ends here */
User avatar
Senior Boarder
GK User
Mon Nov 21, 2011 12:32 pm
normanUK wrote:Try below css which was for another light template.
Add them to end of template.css file or in override.css , make sure CSS Override is enabled from template features.
Code: Select all
/* Editor Styles Starts Here */
#editor-xtd-buttons {
    padding-top: 5px;
}
.formelm {
    float: none;
    padding: 0px 5px 0px 5px;
    position: relative;
    display: block;
    overflow: hidden;
}
.formelm-area {
    color: #000000;
    font-size: 10px;
    padding: 3px 0;
    width: 12em;
    text-transform: uppercase;
    position: relative;
    display: block;
}
.formelm-area label{
    color: #000000;
    float: left;
    font-size: 10px;
    padding: 3px 0;
    width: 12em;
    text-transform: uppercase;
}
.formelm-buttons {
    float:right;
    margin-bottom: 10px;
    position: inline;
}
.formelm label {
    color: #000000;
    float: left;
    font-size: 10px;
    padding: 3px ;
    text-transform: uppercase;
    vertical-align: top;
    width: 10em;
}
.formelm .inputbox {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CCCCCC #E7E7E7 #E7E7E7;
    border-radius: 2px 2px 2px 2px;
    border-right: 1px solid #E7E7E7;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 6px #F0F0F0 inset;
    color: #111111;
    font: 12px/18px Arial,Helvetica,sans-serif;
    height: 16px;
    padding: 6px;
}
.button2-left {
    float: left;
    margin-left: 5px;
    background: url("../images/btn_bg.jpg") repeat-x scroll left top #FFFFFF;
    border: 1px solid #DBDBDB;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-family: BebasNeue,Arial,sans-serif;
    height: 29px !important;
    line-height: 31px;
    margin: 0 5px 3px 2px;
    padding: 0 16px;
    font-weight: normal;
}
.edit form#adminForm fieldset {
    border: 1px solid #DDDDDD;
}
.edit form#adminForm fieldset {
    margin: 10px 0 15px;
    padding: 20px 15px;
}
.edit form#adminForm  legend {
    font-size: 14px;
    background: url("../images/breadcrumbs_bg.png") repeat-x scroll left bottom #FAFAFA;
    border: 1px solid #C3C3C3;
    border-radius: 0 0 3px 3px;
    position: relative;
    width: auto;
    padding: 2px 10px 2px 10px;
}
fieldset {
    border: 0 solid #CCCCCC;
}
fieldset {
    border: 1px solid;
    margin: 10px 0;
    padding: 15px 0;
}
fieldset a {
    font-weight: normal;
}
fieldset .legend {
    font-size: 18px;
}
div.mceEditor {
    padding-top: 2px;
    position: relative;
}
jform_language-lbl {
    color: #000000;
    float: left;
    font-size: 10px;
    padding: 3px 0;
    width: 12em;
    text-transform: uppercase;
}
span.wf_editor_toggle {
    cursor: pointer;
    display: block;
    line-height: 20px;
    background: url("../images/breadcrumbs_bg.png") repeat-x scroll left bottom #FAFAFA;
    border: 1px solid #C3C3C3;
    border-radius: 0 0 3px 3px;
    position: relative;
    width: 70px;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    font-family: BebasNeue,Arial,sans-serif;   
}
/* Editor style ends here */


See you around.



Thanks, it worked. :D

TWN 2
Adsz_2011-11-21.jpg
User avatar
Gold Boarder
GK User
Tue Nov 22, 2011 8:55 am
No problem at all, thanks for sharing css for dark templates as I am sure it will be useful in future templates.

See you around...
User avatar
Platinum Boarder
Topic locked
cron