Jahia Template Forum > Problem after adding...

0 (0 Good)
0 (0 Bad)

Problem after adding a css to the page

by  rusashi »  2013/01/27 13:11

Hello guys, recently I was trying to customize Jahia to work without any css frameworks. And I managed to create a custom div module and works beautifuly I am able to define my own css design. I have created a a simple template set which consists of four divs. If hit preview and look at source code of the page, it looks this way:

 

<div class="bodywrapper">
    <div  id="header">
        <h1>Cool company header</h1>
    </div>
    <div class="col1" >
        This is where the really important stuff goes.
    </div>
    <div class="col2" >
        This is where the related content goes.
    </div>
    <div  id="footer"  >
        Copyright stuff....
    </div>
</div>
 
You can see four simple divs which I made with help of my custom div module. Without applying any css everything is perfect. Studio mode looks like this.
 
 
i am able to do everything with the page. However when I apply the following css file:
 
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(123, 121, 143);
}
body {
width: 960px;
background: #fff;
margin: 0 auto 2em;
font: 100% Georgia, "Times New Roman", Times, serif;
}
#header {
background: rgb(76, 67, 65);
margin-bottom: 20px;
}
#header h1 {
font: normal 2em Arial, Helvetica, sans-serif;
color: white;
text-align: center;
line-height: 4em;
text-transform: uppercase;
letter-spacing:.1em;
margin: 0;
}
.col1 {
background: rgb(237, 228, 214);
height: 500px;
float: left;
padding: 20px;
width: 600px;
}
.col2 {
background: rgb(173, 169, 130);
height: 500px;
padding: 20px;
margin-left: 660px;
}
#footer {
background: rgb(100, 98, 102);
line-height: 3em;
font-size: .6em;
color: white;
padding: 0 2em;
clear: both;
}
 
This style is correctly applied to the page, but the studio mode and the edit mode are corrupted. And Edit Mode looks like this.
 
 

As you can see everything is shifted to the right. And you can also see that page itself doesn't allow me to select any of the modules of the page. Usually in the Edit mode there are frames around each module on the page and I can select each module, but after applying that css style I cannot select any of my divs or in fact i cant select the page itself to add new module. Similar happens to the Studio mode except the fact that I can select modules on my page. However if I hit preview the page looks correctly

Can you help pls

  • Problem after adding a css to the page
    2013/01/27 13:25

    rusashi <p> Hello guys, recently I was trying to customize Jahia to work without any css frameworks. And I managed to create a custom div module and works beautifuly I am able to define my own css design. I have created a a simple template set which consists of four divs. If hit preview and look at source code of the page, it looks this way:</p> <p> &nbsp;</p> <div> &lt;div class=&quot;bodywrapper&quot;&gt;</div> <div> &nbsp; &nbsp; &lt;div &nbsp;id=&quot;header&quot;&gt;</div> <div> &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Cool company header&lt;/h1&gt;</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &nbsp; &lt;div class=&quot;col1&quot; &gt;</div> <div> &nbsp; &nbsp; &nbsp; &nbsp; This is where the really important stuff goes.</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &nbsp; &lt;div class=&quot;col2&quot; &gt;</div> <div> &nbsp; &nbsp; &nbsp; &nbsp; This is where the related content goes.</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &nbsp; &nbsp; &lt;div &nbsp;id=&quot;footer&quot; &nbsp;&gt;</div> <div> &nbsp; &nbsp; &nbsp; &nbsp; Copyright stuff....</div> <div> &nbsp; &nbsp; &lt;/div&gt;</div> <div> &lt;/div&gt;</div> <div> &nbsp;</div> <div> You can see four simple divs which I made with help of my custom div module. Without applying any css everything is perfect. Studio mode looks like this.</div> <div> &nbsp;</div> <div> <img alt="" src="http://img690.imageshack.us/img690/5518/jahia3.png" /></div> <div> &nbsp;</div> <div> i am able to do everything with the page. However when I apply the following css file:</div> <div> &nbsp;</div> <div> <div> aside, article, section, header, footer, nav {</div> <div> display: block;</div> <div> }</div> <div> html, body {</div> <div> margin: 0;</div> <div> padding: 0;</div> <div> }</div> <div> html {</div> <div> background: rgb(123, 121, 143);</div> <div> }</div> <div> body {</div> <div> width: 960px;</div> <div> background: #fff;</div> <div> margin: 0 auto 2em;</div> <div> font: 100% Georgia, &quot;Times New Roman&quot;, Times, serif;</div> <div> }</div> <div> #header {</div> <div> background: rgb(76, 67, 65);</div> <div> margin-bottom: 20px;</div> <div> }</div> <div> #header h1 {</div> <div> font: normal 2em Arial, Helvetica, sans-serif;</div> <div> color: white;</div> <div> text-align: center;</div> <div> line-height: 4em;</div> <div> text-transform: uppercase;</div> <div> letter-spacing:.1em;</div> <div> margin: 0;</div> <div> }</div> <div> .col1 {</div> <div> background: rgb(237, 228, 214);</div> <div> height: 500px;</div> <div> float: left;</div> <div> padding: 20px;</div> <div> width: 600px;</div> <div> }</div> <div> .col2 {</div> <div> background: rgb(173, 169, 130);</div> <div> height: 500px;</div> <div> padding: 20px;</div> <div> margin-left: 660px;</div> <div> }</div> <div> #footer {</div> <div> background: rgb(100, 98, 102);</div> <div> line-height: 3em;</div> <div> font-size: .6em;</div> <div> color: white;</div> <div> padding: 0 2em;</div> <div> clear: both;</div> <div> }</div> <div> &nbsp;</div> <div> This style is correctly applied to the page, but the studio mode and the edit mode are corrupted. And Edit Mode looks like this.</div> <div> &nbsp;</div> <div> <img alt="" src="http://img12.imageshack.us/img12/1733/jahia1.png" /></div> <div> &nbsp;</div> </div> <p> As you can see everything is shifted to the right. And you can also see that page itself doesn&#39;t allow me to select any of the modules of the page. Usually in the Edit mode there are frames around each module on the page and I can select each module, but after applying that css style&nbsp;I cannot select any of my divs or in fact i cant select the page itself to add new module. Similar happens to the Studio mode except the fact that I can select modules on my page. However if I hit preview the page looks correctly</p> <p> <img alt="" src="http://img96.imageshack.us/img96/671/jahia2.png" /></p> <p> Can you help pls</p>

  • Number of messages  8
    Registration date Jan 27, 2013
    0 (0 Good)
    0 (0 Bad)

    Re: Problem after adding a css to the page

    by  faissah »  2013/01/30 22:03

    Hello,

    You should prefix all your CSS with ".bodywrapper". This would make something like this:

    .bodywrapper #header {
    background: rgb(76, 67, 65);
    margin-bottom: 20px;
    }
     
    Also you can exclude some CSS from the edit mode using the following syntax:
     
    <c:if test="${not renderContext.editMode}">
        <template:addResources type="css" resources="edit.css" />
    </c:if>
     
    BR,

    Fabrice

    Fabrice  (faissah)

    Number of messages  264
    Registration date
    Contact
    Share
    Feedback

    Get in touch

    Whether you are a current user or if you are just evaluating Jahia, we are here to help.

    Contact us

    Share this page