评论表单“成功”消息会显示在页面顶部，但会被固定标题隐藏(Comment form 'success' message goes to top of page but is hid

评论表单“成功”消息会显示在页面顶部，但会被固定标题隐藏(Comment form 'success' message goes to top of page but is hidden by fixed header)

当您在博客文章上提交评论时（例如，在http://helloarchie.blue/posts/fashion-friday-6上），页面将刷新，并在表单上方显示“成功”消息。

现在我的布局上有一个固定的标题，成功消息显示在它后面，因此用户无法看到它并且没有意识到他们的评论已经通过。

我正在使用Anchor CMS，所以很难找到所有的CSS等，因为它在许多不同的地方使用，但这里是我能找到的与通知相关的CSS，无论我尝试什么，我似乎都看不到将它推到固定标题下方。

PHP

// form elements function comment_form_notifications() { return Notify::read(); } function comment_form_url() { return Uri::to(Uri::current()); } function comment_form_input_name($extra = '') { return '<input name="name" id="name" type="text" ' . $extra . ' value="' . Input::previous('name') . '">'; } function comment_form_input_email($extra = '') { return '<input name="email" id="email" type="email" ' . $extra . ' value="' . Input::previous('email') . '">'; } function comment_form_input_text($extra = '') { return '<textarea name="text" id="text" ' . $extra . '>' . Input::previous('text') . '</textarea>'; } function comment_form_button($text = 'Post Comment', $extra = '') { return '<button class="btn" type="submit" ' . $extra . '>' . $text . '</button>'; }

PHP

<?php class Notify { public static $types = array('error', 'notice', 'success', 'warning'); public static $wrap = '<div class="notifications">%s</div>'; public static $mwrap = '<p class="%s">%s</p>'; public static function add($type, $message) { if(in_array($type, static::$types)) { $messages = array_merge((array) Session::get('messages.' . $type), (array) $message); Session::put('messages.' . $type, $messages); } } public static function read() { $types = Session::get('messages'); // no messages no problem if(is_null($types)) return ''; $html = ''; foreach($types as $type => $messages) { foreach($messages as $message) { $html .= sprintf(static::$mwrap, $type, implode('<br>', (array) $message)); } } Session::erase('messages'); return sprintf(static::$wrap, $html); } public static function __callStatic($method, $paramaters = array()) { static::add($method, array_shift($paramaters)); } } <?php class Migration_add_comment_notifications extends Migration { public function up() { $table = Base::table('meta'); if($this->has_table($table)) { if( ! Query::table($table)->where('key', '=', 'comment_notifications')->count()) { Query::table($table)->insert(array( 'key' => 'comment_notifications', 'value' => 0 )); } } } public function down() {} }

CSS

.notifications { margin-bottom: 10px; } .notifications .notice, .notifications .error, .notifications .success { padding: 10px 18px; margin-bottom: 20px; font-size: 13px; line-height: 21px; font-weight: 500; border-radius: 5px; } .notifications .notice { color: #fff; background: #578cd9; } .notifications .error { color: #fff; background: #d34937; } .notifications .success { color: #fff; background: #64a524; } .header .notifications { position: absolute; left: 55%; top: 182px; z-index: 1200; width: 320px; } .header .page .notifications { left: 48%; } .header .notifications div:after { content: ''; position: absolute; display: block; top: -6px; right: 50px; border-bottom: 6px solid #64a524; border-left: 6px solid transparent; border-right: 6px solid transparent; } .header .notifications .error:after { border-bottom-color: #d34937; }

When you submit a comment on a blog article (for example, on http://helloarchie.blue/posts/fashion-friday-6), the page refreshes with a 'success' message above the form.

Now that I have a fixed header on my layout, the success message is showing behind it therefore the user can't see it and doesn't realize their comment has gone through.

I'm using Anchor CMS so it's difficult to find all of the CSS etc. that's being used as it's in lots of different places but here's the CSS I can find related to the notifications and no matter what I try, I can't seem to push it down below that fixed header.

PHP

// form elements function comment_form_notifications() { return Notify::read(); } function comment_form_url() { return Uri::to(Uri::current()); } function comment_form_input_name($extra = '') { return '<input name="name" id="name" type="text" ' . $extra . ' value="' . Input::previous('name') . '">'; } function comment_form_input_email($extra = '') { return '<input name="email" id="email" type="email" ' . $extra . ' value="' . Input::previous('email') . '">'; } function comment_form_input_text($extra = '') { return '<textarea name="text" id="text" ' . $extra . '>' . Input::previous('text') . '</textarea>'; } function comment_form_button($text = 'Post Comment', $extra = '') { return '<button class="btn" type="submit" ' . $extra . '>' . $text . '</button>'; }

PHP

<?php class Notify { public static $types = array('error', 'notice', 'success', 'warning'); public static $wrap = '<div class="notifications">%s</div>'; public static $mwrap = '<p class="%s">%s</p>'; public static function add($type, $message) { if(in_array($type, static::$types)) { $messages = array_merge((array) Session::get('messages.' . $type), (array) $message); Session::put('messages.' . $type, $messages); } } public static function read() { $types = Session::get('messages'); // no messages no problem if(is_null($types)) return ''; $html = ''; foreach($types as $type => $messages) { foreach($messages as $message) { $html .= sprintf(static::$mwrap, $type, implode('<br>', (array) $message)); } } Session::erase('messages'); return sprintf(static::$wrap, $html); } public static function __callStatic($method, $paramaters = array()) { static::add($method, array_shift($paramaters)); } } <?php class Migration_add_comment_notifications extends Migration { public function up() { $table = Base::table('meta'); if($this->has_table($table)) { if( ! Query::table($table)->where('key', '=', 'comment_notifications')->count()) { Query::table($table)->insert(array( 'key' => 'comment_notifications', 'value' => 0 )); } } } public function down() {} }

CSS

.notifications { margin-bottom: 10px; } .notifications .notice, .notifications .error, .notifications .success { padding: 10px 18px; margin-bottom: 20px; font-size: 13px; line-height: 21px; font-weight: 500; border-radius: 5px; } .notifications .notice { color: #fff; background: #578cd9; } .notifications .error { color: #fff; background: #d34937; } .notifications .success { color: #fff; background: #64a524; } .header .notifications { position: absolute; left: 55%; top: 182px; z-index: 1200; width: 320px; } .header .page .notifications { left: 48%; } .header .notifications div:after { content: ''; position: absolute; display: block; top: -6px; right: 50px; border-bottom: 6px solid #64a524; border-left: 6px solid transparent; border-right: 6px solid transparent; } .header .notifications .error:after { border-bottom-color: #d34937; }