Error messages style

Hello,

I have noticed there is a difference between the error handeling in the demo site and the quickstart installations.

In the quickstart installations (tested with a fresh installation with no file modification at all and a live site) the error displayed (after a failed login attempt for exemple) is all messed up, see the attached images or do a failed login attempt in http://tourisme.nadorpresse.com)

error_live_site.jpg

When checking the source code I noticed a different class used in the demo, than the one used in the quickstart, the generated code in the demo site is :

Code: Select all

<div id="system-message-container">
<dl id="system-message">
<dt class="error">Error</dt>
<dd class="error message">
   <ul>
      <li>Username and password do not match or you do not have an account yet.</li>
   </ul>
</dd>
</dl>
</div>

The one generated in the sites running a quickstart package is :

Code: Select all

<div id="system-message-container">
<div id="system-message">
<div class="alert alert-warning"><a class="close" data-dismiss="alert">×</a>
<h4 class="alert-heading">Warning</h4>
<div>
      <p>Username and password do not match or you do not have an account yet.</p>
</div>
</div>
</div>
</div>

I'm actually using a banner in the top_banner position (unpublished untill I get this error message problem fixed), I'm trying to use the styling for the error message used in the "news" template (message on top pushes the menu bar down)...

Any idea how to get this fixed?

Hi

You can select in which position messages should be displayed in template settings. For fix of styling please use this code:

Code: Select all

#system-message {
    margin: 0 0 5px;
}
#system-message div p {
    list-style: none outside none !important;
}
#system-message div {
    color: #111111;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    padding: 10px 20px 0;
    text-align: center;
}
#system-message div.alert-warning {
    color: #DA5A12;
}
#system-message div.alert-notice {
    color: #363636;
}
#system-message-container {
    margin: 0;
    padding: 0;
}


Hi

You can select in which position messages should be displayed in template settings. For fix of styling please use this code:

Code: Select all

#system-message {
    margin: 0 0 5px;
}
#system-message div p {
    list-style: none outside none !important;
}
#system-message div {
    color: #111111;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    padding: 10px 20px 0;
    text-align: center;
}
#system-message div.alert-warning {
    color: #DA5A12;
}
#system-message div.alert-notice {
    color: #363636;
}
#system-message-container {
    margin: 0;
    padding: 0;
}


Hi,

Can you tell me exactly when in template settings can I find the message position options, please?

For the styling, I still can't figure out how to make the topbar (gkpagetopbar) just like it does here :

http://demo.gavick.com/joomla25/news/

Can you give a hint please?

Regards.

Hi

I cannot see it now. I believe it must have been removed because of some problem. Sorry, my bad. Anyway it's still not so hard to move it manualy by changing it's position in code directly. Just edit /layouts/default.php, than copy and paste to the new place this code:

Code: Select all

   <?php if(count($app->getMessageQueue())) : ?>
   <jdoc:include type="message" />
   <?php endif; ?>


Hi

I cannot see it now. I believe it must have been removed because of some problem. Sorry, my bad. Anyway it's still not so hard to move it manualy by changing it's position in code directly. Just edit /layouts/default.php, than copy and paste to the new place this code:

Code: Select all

   <?php if(count($app->getMessageQueue())) : ?>
   <jdoc:include type="message" />
   <?php endif; ?>


Hi,

How can I make it move down the topbar instead of poping up in the same position?

Hi

I've already explained that. So it will be better when I do this. PLease send me an ftp access to Your site and tell me where you want this messages to appear.

Hi

I've already explained that. So it will be better when I do this. PLease send me an ftp access to Your site and tell me where you want this messages to appear.

Hi,

I actually was expecting from you to explain where exactly to put that line of code if I want the topbar moved down when the error message is shown so I can understand and do it myself..

I managed to get it done, thanks for your assitance

Just for the records, I moved the code from inside the page divs to outside, old code was :

Code: Select all

    <section id="gkPageTop" <?php if($header_nobg): ?> class="nobg"<?php endif; ?>>
       <div class="gkPage">
                  <?php if(count($app->getMessageQueue())) : ?>
                    <jdoc:include type="message" />
                    <?php endif; ?>

New code is :

Code: Select all

                   <?php if(count($app->getMessageQueue())) : ?>
                    <jdoc:include type="message" />
                    <?php endif; ?>
        <section id="gkPageTop" <?php if($header_nobg): ?> class="nobg"<?php endif; ?>>
       <div class="gkPage">


Hi

Yes this is the exact solution. As You can see parts of the site are goruped in secions, so I thought it's clear enought just to point the right code. Sorry, for that.