MyBB.de Forum
Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) (/thread-33302.html)

Seiten: Seiten: 1 2

Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - Lily - 23.03.2016

Guten Abend zusammen.
Ich habe gleich einige Fragen, habe gegoogelt und hier die Suchfunktion benutzt aber komme einfach nicht weiter.

1. Als erstes würde mich interessieren, wie ich es schaffe, dass meine Toplinks (Suche, Members, usw) UNTER dem Headermenü erscheinen.
Außerdem würde ich die gerne entweder mit einer Grafik ersetzen oder aber die Schriftart in der die Toplinks erscheinen ändern. Ist das möglich?


2. Dann würde ich gerne wissen, ob ich mein Headermenü irgendwie anders gestalten kann. Momentan sieht es so unübersichtlich aus:
   


Ich hätte es gerne so wie hier:
   



3. Nächstes Anliegen: Kann ich die Schriftart der Kategorie ändern ODER mit einer Graphik ersetzen?
   

4. Wie kann ich die Buttons für "Forum enthält neue Beiträge", Neue Antwort erstellen und die unter einem Post  etc mit einer eigenen Graphik ersetzen?

   
   




Tut mir Leid für die vielen Fragen, ich hoffe ihr könnt mir bei allen oder irgendeiner dieser Fragen behilflich sein!

Danke im Vorraus!

RE: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - Nik101010 - 23.03.2016

Hi,

für 1 und 2 müsste man den HTML / CSS Code kennen. Hast du einen Link zu deinem Forum (+ ggf. Testaccount?).

3. Mit einer Grafik ersetzen ist out of the box nicht möglich. Die Schriftart kann via CSS angepasst werden, allerdings gibt es nur wenige Schriftarten, die websave sind und auf quasi allen Systemen installiert sind. Die Lösung heißt hier webfonts.

4. Die Grafiken findest du unter ./images. Die entsprechenden Dateien sind buttons_sprite.png und forum_icon_sprite.png. Sollten in deinen Grafiken die Icons an anderer Stelle platziert sein, oder du keine sprites verwenden wollen, sind Anpassungen der CSS Klassen nötig.


Viele Grüße

RE: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - Lily - 23.03.2016

Danke für die schnelle Antwort!
Das unten ist der gesamte Code aus meinem global CSS, war es das, was Du meintest?

Zu 3: Das heißt ich suche nach Webfonts und kann die dann einfach im CSS einfügen, so dass es dargestellt wird? Setze mich da gleich mal dran, danke schonmal. Smile

Zu 4: Sorry ich bin ein kleines Blondchen und/oder stehe grade mächtig auf dem Schlauch. Ich habe die besagten "sprites" gefunden. Und jetzt? Sorry!





Code:
body {
   background: url("http://wallcomphd.com/wp-content/uploads/2015/05/Big-Tree-In-The-Forest-Wallpaper-Computer.jpg") repeat-y scroll 0 0 #202020;
background-attachment:fixed;
   color: #A2A2A2;
   font-family: Verdana,Arial,Sans-Serif;
   font-size: 13px;
   line-height: 1.4;
   text-align: center;
}

a:link {
color: #006400;
text-decoration: none;
}

a:visited {
color: #006400;
text-decoration: none;
}

a:hover,
a:active {
color: #8FBC8F;
text-decoration: underline;
}

#container {
background: rgba(224, 255, 255, 0.75);
width: 85%;
color: #006400;
text-align: left;
line-height: 1.4;
min-width: 950px;
margin-left: auto;
margin-right: auto;

font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}

.wrapper {
width: 75%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;
}

#logo {
text-align: center;
}

padding: 10px 0;
border-bottom: 1px solid #263c30;
text-align: center;
}

#content {
background: #fff;
width: auto !important;
padding: 20px 10px;
overflow: hidden;
}

#header ul.menu {
color: #8EE5EE;
margin: 0;
padding: 0;
list-style: none;
}

#header ul.menu li {
margin: 0 7px;
display: inline;
}

#header ul.menu li a {
padding-left: 20px;
background-image: url(images/headerlinks_sprite.png);
background-repeat: no-repeat;
display: inline-block;
line-height: 16px;
}

#logo ul.top_links {
font-weight: bold;
text-align: center;
margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
background-position: 0 0;
}

#logo ul.top_links a.memberlist {
background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
background-position: 0 -40px;
}

#logo ul.top_links a.help {
background-position: 0 -60px;
}

#logo ul.top_links a.portal {
background-position: 0 -180px;
}

#panel .upper a.logout {
font-weight: bold;
background: url(images/headerlinks_sprite.png) right -80px no-repeat;
padding-right: 20px;
margin-left: 10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
background: url(images/headerlinks_sprite.png) 0 -100px no-repeat;
padding-left: 20px;
margin-left: 10px;
font-weight: bold;
}

#panel .upper a.register {
background: url(images/headerlinks_sprite.png) right -80px no-repeat;
padding-right: 20px;
margin-left: 10px;
font-weight: bold;
}

#panel .lower ul.panel_links {
float: center;
}

#panel .lower ul.panel_links a.usercp {
background-position: 0 -120px;
}

#panel .lower ul.panel_links a.modcp {
background-position: 0 -140px;
}

#panel .lower ul.panel_links a.admincp {
background-position: 0 -160px;
}

#panel .lower ul.user_links {
float: center;
}

#panel .lower ul.user_links li a {
padding: 0;
background-image: none;
}

#panel .upper {
background: #458B74;
color: #fff;
border-top: 1px solid #458B74;
border-bottom: 1px solid #458B74;
padding: 5px;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
color: #F0F8FF;
}

#panel .lower {
background: #458B74;
color: #F0F8FF;
border-top: 1px solid #458B74;
border-bottom: 1px solid #458B74;
padding: 5px;
}

#panel .lower a:link,
#panel .lower a:visited,
#panel .lower a:hover,
#panel .lower a:active {
color: #F0F8FF;
}

#footer {
color: #8EE5EE;
clear: both;
}

#footer ul.menu {
margin: 0;
padding: 0;
list-style: none;
}

#footer ul.menu li {
margin: 0 5px;
display: inline;
}

#footer .upper {
background: #efefef;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 6px;
font-size: 12px;
overflow: hidden;
}

#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
color: #777;
}

#footer .upper .language {
float: right;
margin: -1px;
margin-left: 15px;
}

#footer .upper .language select {
border-color: #ccc;
}

#footer .upper .theme {
float: right;
margin: -1px;
margin-left: 15px;
}

#footer .upper .theme select {
border-color: #ccc;
}

#footer .upper ul.bottom_links {
float: left;
margin: 4px 0 0 0;
}

#footer .lower {
color: #666;
padding: 6px 6px 12px 6px;
overflow: hidden;
font-size: 11px;
}

#footer .lower a:link,
#footer .lower a:visited {
color: #444;
font-weight: bold;
}

#footer .lower a:hover,
#footer .lower a:active {
color: #333;
text-decoration: underline;
font-weight: bold;
}

#footer .lower #current_time {
float: right;
color: #888;
}

#search {
border: 0;
padding: 0;
margin: 0;
float: right;
vertical-align: middle;
}

#search input.button,
#search input.textbox {
border-color: #000;
}

#search input.button {
background: #0066a2 url(images/thead.png) top left repeat-x;
color: #fff;
}

#search input {
margin: -3px 0;
}

#quick_login .remember_me input {
vertical-align: middle;
margin: -3px 0 0 5px;
}

#debug {
float: right;
text-align: right;
margin-top: 20px;
font-size: 11px;
}

.scaleimages img {
max-width: 100%;
}

.forum_status {
height: 30px;
width: 30px;
background: url(images/forum_icon_sprite.png) no-repeat 0 0;
display: inline-block;
}

.forum_on {
background-position: 0 0;
}

.forum_off {
background-position: 0 -30px;
}

.forum_offlock {
background-position: 0 -60px;
}

.forum_offlink {
background-position: 0 -90px;
}

.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
background: url(images/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
background-position: 0 0;
}

.subforum_minioff {
background-position: 0 -10px;
}

.subforum_miniofflock {
background-position: 0 -20px;
}

.subforum_miniofflink {
background-position: 0 -30px;
}

table {
background: #006400;
color: #006400;
font-size: 13px;
}

.tborder {
background: #fff;
width: 100%;
margin: auto auto;
border: 1px solid #ccc;
padding: 1px;
}

.tfixed {
table-layout: fixed;
word-wrap: break-word;
}

.thead {
background: url(images/ZZZ.png) ;
color: ;
border-bottom: 1px solid #263c30;
padding: 8px;

font-size: 16 px;
}

.thead a:link {
color: #000;
text-decoration: none;
}

.thead a:visited {
color: #000;
text-decoration: none;
}

.thead a:hover,
.thead a:active {
color: #000;
text-decoration: underline;
}

.tcat {
background: #228b22;
color: #228b22;
border-top: 1px solid #444;
border-bottom: 1px solid #000;
padding: 6px;

font-size: 12px;
}

.tcat a:link {
color: #fff;
}

.tcat a:visited {
color: #fff;
}

.tcat a:hover,
.tcat a:active {
color: #fff;
}

.trow1 {
background: #f0fff0;
border: 1px solid;
border-color: #fff #ddd #ddd #fff;
}

.trow2 {
background: #f0fff0;
border: 1px solid;
border-color: #fff #ddd #ddd #fff;
}

.trow_shaded {
background: #ffdde0;
border: 1px solid;
border-color: #fff #ffb8be #ffb8be #fff;
}

.no_bottom_border {
border-bottom: 0;
}

.post.unapproved_post {
background: #ffdde0;
}

.post.unapproved_post .post_author {
border-bottom-color: #ffb8be;
}

.post.classic.unapproved_post .post_author {
border-color: #ffb8be;
}

.post.unapproved_post .post_controls {
border-top-color: #ffb8be;
}

.trow_deleted,
.post.deleted_post {
background: #E8DEFF;
}

.trow_selected,
tr.trow_selected td {
background: #FFFBD9;
color: #333;
border-right-color: #F7E86A;
border-bottom-color: #F7E86A;
}

.trow_selected a:link,
.trow_selected a:visited,
.trow_selected a:hover,
.trow_selected a:active {
color: #333;
}

.trow_sep {
background: #ddd;
color: #333;
border-bottom: 1px solid #c5c5c5;
padding: 6px;
font-size: 12px;
font-weight: bold;
}

.tfoot {
border-top: 1px solid #fff;
padding: 6px;
background: #ddd;
color: #666;
}

.tfoot a:link {
color: #444;
text-decoration: none;
}

.tfoot a:visited {
color: #444;
text-decoration: none;
}

.tfoot a:hover,
.tfoot a:active {
color: #444;
text-decoration: underline;
}

.thead input.textbox,
.thead select {
border: 1px solid #263c30;
}

.bottommenu {
background: #efefef;
color: #333;
border: 1px solid #4874a3;
padding: 10px;
}

.navigation {
color: #333;
font-size: 12px;
}

.navigation a:link {
text-decoration: none;
}

.navigation a:visited {
text-decoration: none;
}

.navigation a:hover,
.navigation a:active {
text-decoration: underline;
}

.navigation .active {
color: #333;
font-size: small;
font-weight: bold;
}

.smalltext {
color: #363636;
font-size: 11px;
}

.largetext {
font-size: 16px;
font-weight: bold;
}

fieldset {
padding: 12px;
border: 1px solid #ddd;
margin: 0;
}

fieldset.trow1,
fieldset.trow2 {
border-color: #bbb;
}

fieldset.align_right {
text-align: right;
}

input.textbox {
background: #ffffff;
color: #333;
border: 1px solid #ccc;
padding: 3px;
outline: 0;
font-size: 13px;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

textarea {
background: #ffffff;
color: #333;
border: 1px solid #ccc;
padding: 2px;
line-height: 1.4;
outline: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}

select {
background: #ffffff;
padding: 3px;
border: 1px solid #ccc;
outline: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}

button,
input.button {
padding: 3px 8px;
cursor: pointer;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
background: #eee url(images/buttons_bg.png) repeat-x;
border: 1px solid #bbb;
color: #333;
outline: 0;
}

button:hover,
input.button:hover {
border-color: #aaa;
}

form {
margin: 0;
padding: 0;
}

input.error, textarea.error, select.error {
border: 1px solid #f30;
color: #f30;
}

input.valid, textarea.valid, select.valid {
border: 1px solid #0c0;
}

label.error {
color: #f30;
margin: 5px;
padding: 0px;
display: block;
font-weight: bold;
font-size: 11px;
}

form #message {
   width: 500px;
}

.editor {
background: #f1f1f1;
border: 1px solid #ccc;
}

.editor_control_bar {
background: #fff;
border: 1px solid #ccc;
}

.post .editor_control_bar {
background: #f5f5f5;
}

.popup_menu {
background: #fff;
border: 1px solid #ccc;
}

.popup_menu .popup_item {
background: #efefef;
color: #333;
}

.popup_menu .popup_item:hover {
background: #0072BC;
color: #fff;
}

.trow_reputation_positive {
background: #ccffcc;
}

.trow_reputation_negative {
background: #ffcccc;
}

.reputation_positive {
color: green;
}

.reputation_neutral {
color: #444;
}

.reputation_negative {
color: red;
}

.repbox {
font-size:16px;
font-weight: bold;
padding:5px 7px 5px 7px;
}

._neutral {
background-color:#FAFAFA;
color: #999999;
border:1px solid #CCCCCC;
}

._minus {
background-color: #FDD2D1;
color: #CB0200;
border:1px solid #980201;
}

._plus {
background-color:#E8FCDC;
color: #008800;
border:1px solid #008800;
}

img {
border: none;
}

img.attachment {
border: 1px solid #E9E5D7;
padding: 2px;
}

hr {
background-color: #000000;
color: #000000;
height: 1px;
border: 0px;
}

.clear {
clear: both;
}

.float_left {
float: left;
}

.float_right {
float: right;
}

.hidden {
display: none;
float: none;
width: 1%;
}

.hiddenrow {
display: none;
}

.selectall {
background: #FFFBD9;
border-bottom: 1px solid #F7E86A;
color: #333;
text-align: center;
}

.expcolimage {
width: auto;
color: #000;
float: right;
vertical-align: middle;
margin-top: 3px;
}

.tcat_menu > .expcolimage {
margin-top: 0;
}

blockquote {
border: 1px solid #ccc;
margin: 0;
background: #fff;
padding: 10px;
}

blockquote cite {
font-weight: bold;
border-bottom: 1px solid #ccc;
font-style: normal;
display: block;
padding-bottom: 3px;
margin: 0 0 10px 0;
}

blockquote cite span {
float: right;
font-weight: normal;
font-size: 12px;
color: #666;
}

blockquote cite span.highlight {
float: none;
font-weight: bold;
padding-bottom: 0;
}

.codeblock {
background: #fff;
border: 1px solid #ccc;
padding: 10px;
}

.codeblock .title {
border-bottom: 1px solid #ccc;
font-weight: bold;
padding-bottom: 3px;
margin: 0 0 10px 0;
}

.codeblock code {
overflow: auto;
height: auto;
max-height: 200px;
display: block;
font-family: Monaco, Consolas, Courier, monospace;
font-size: 13px;
}

.smilie {
vertical-align: middle;
}

.smilie_pointer {
cursor: pointer;
}

.separator {
margin: 5px;
padding: 0;
height: 0px;
font-size: 1px;
list-style-type: none;
}

.popup_menu .popup_item_container {
margin: 1px;
text-align: left;
}

.popup_menu .popup_item {
display: block;
padding: 4px;
white-space: nowrap;
text-decoration: none;
}

.popup_menu a.popup_item:hover {
text-decoration: none;
}

.subject_new {
font-weight: bold;
}

.highlight {
background: #FFFFCC;
padding-top: 3px;
padding-bottom: 3px;
}

.pm_alert {
background: #FFF6BF;
border: 1px solid #FFD324;
text-align: center;
padding: 5px 20px;
margin-bottom: 15px;
font-size: 11px;
}

.red_alert {
background: #FBE3E4;
border: 1px solid #A5161A;
color: #A5161A;
text-align: center;
padding: 5px 20px;
margin-bottom: 15px;
font-size: 11px;
word-wrap: break-word;
}

.red_alert a:link,
.red_alert a:visited,
.red_alert a:hover,
.red_alert  a:active {
color: #A5161A;
}

.high_warning {
color: #CC0000;
}

.moderate_warning {
color: #F3611B;
}

.low_warning {
color: #AE5700;
}

.online {
color: #15A018;
}

.offline {
color: #C7C7C7;
}

div.error {
padding: 5px 10px;
border-top: 2px solid #FFD324;
border-bottom: 2px solid #FFD324;
background: #FFF6BF;
font-size: 12px;
}

div.error p {
margin: 0;
color: #333;
font-weight: normal;
}

div.error p em {
font-style: normal;
font-weight: bold;
padding-left: 24px;
display: block;
color: #C00;
background: url(images/error.png) no-repeat 0;
}

div.error ul {
margin-left: 24px;
}

.pagination {
font-size: 11px;
padding-top: 10px;
margin-bottom: 5px;
}

.tfoot .pagination,
.tcat .pagination {
padding-top: 0;
}

.pagination .pages {
font-weight: bold;
}

.pagination .pagination_current,
.pagination a {
padding: 3px 6px;
margin-bottom: 3px;
}

.pagination a {
background: #f5f5f5;
border: 1px solid #ccc;
}

.pagination .pagination_current {
background: none;
color: #333;
border: none;
font-weight: bold;
}

.pagination a:hover {
background: #0072BC;
color: #fff;
border-color: #263c30;
text-decoration: none;
}

.pagination .go_page img {
margin-bottom: -4px;
}

.drop_go_page {
background: #f5f5f5;
padding: 4px;
}

.pagination_breadcrumb {
background-color: #efefef;
border: 1px solid #fff;
outline: 1px solid #ccc;
padding: 5px;
margin-top: 5px;
font-weight: normal;
}

.pagination_breadcrumb_link {
vertical-align: middle;
cursor: pointer;
}

.thread_legend,
.thread_legend dd {
margin: 0;
padding: 0;
}

.thread_legend dd {
padding-bottom: 4px;
margin-right: 15px;
}

.thread_legend img {
margin-right: 4px;
vertical-align: bottom;
}

.forum_legend,
.forum_legend dt,
.forum_legend dd {
margin: 0;
padding: 0;
}

.forum_legend dd {
float: left;
margin-right: 10px;
margin-top: 7px;
}

.forum_legend dt {
margin-right: 10px;
float: left;
}

.success_message {
color: #00b200;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}

.error_message {
color: #C00;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}

#posts_container {
padding: 0;
}

.ignored_post {
border-top: 3px solid #333;
padding: 15px;
}

.ignored_post .show_ignored_post {
margin-top: -15px;
}

.ignored_post .show_ignored_post a.button span {
background-position: 0 -400px;
}

.post {
overflow: hidden;
}

.post.classic {
padding-top: 15px;
}

.post .post_author {
border-bottom: 1px solid #ccc;
border-top: 2px solid #ccc;
background: #f5f5f5;
padding: 5px;
overflow: hidden;
}

.post.classic .post_author {
border: 1px solid #ddd;
float: left;
width: 15%;
margin: 0 1% 15px 0;
border-left: 0;
padding: 5px 1%;
}

.post .post_author .buddy_status {
vertical-align: middle;
margin-top: -4px;
}

.post .post_author div.author_avatar {
float: left;
margin-right: 3px;
}

.post.classic .post_author div.author_avatar {
float: none;
text-align: center;
margin-bottom: 8px;
}

.post .post_author div.author_avatar img {
padding: 5px;
border: 1px solid #ddd;
background: #fff;
}

.post .post_author div.author_information {
float: left;
padding: 6px 8px;
}

.post.classic .post_author div.author_information {
float: none;
padding: 0;
text-align: center;
}

.post .post_author div.author_statistics {
float: right;
font-size: 11px;
padding: 3px 10px 3px 5px;
color: #666;
line-height: 1.3;
}

.post.classic .post_author div.author_statistics {
border-top: 1px dotted #ccc;
margin: 6px 0 0 0;
padding: 6px 6px 3px 6px;
float: none;
}

.post .post_head {
font-size: 11px;
padding-bottom: 4px;
border-bottom: 1px dotted #ddd;
margin-bottom: 4px;
}

.post .post_head span.post_date {
color: #666;
}

.post .post_head span.edited_post {
font-size: 10px;
color: #999;
}

.post .post_head span.edited_post a {
color: #666;
}

.post_body {
font-size: 14px;
padding: 12px 0;
}

.post.classic .post_content {
float: left;
width: 79%;
padding: 0 1% 5px 1%;
}

.post_content {
padding: 9px 10px 5px 10px;
}

.post_content .signature {
margin-top: 5px;
border-top: 1px dotted #ddd;
padding: 10px 0 4px 0;
}

.post .post_meta {
margin: 4px 0;
font-size: 11px;
color: #999;
}

.post .post_meta a:link,
.post .post_meta a:visited {
color: #777;
}

.post .post_meta a:hover,
.post .post_meta a:active {
color: #777;
}

.post_controls {
clear: both;
background: #f5f5f5;
border-bottom: 1px solid #ccc;
padding: 5px;
overflow: hidden;
}

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
display: inline-block;
padding: 2px 5px;
margin: 2px;
font-size: 11px;
background: #eee url(images/buttons_bg.png) repeat-x;
border: 1px solid #ccc;
color: #555;
}

.postbit_buttons > a:hover {
border-color: #bbb;
}

.postbit_buttons a span {
padding-left: 20px;
display: inline-block;
height: 16px;
background-image: url(images/buttons_sprite.png);
background-repeat: no-repeat;
}

.postbit_buttons a.postbit_find span {
background-position: 0 0;
}

.postbit_buttons a.postbit_reputation_add span {
background-position: 0 -20px;
}

.postbit_buttons a.postbit_email span {
background-position: 0 -40px;
}

.postbit_buttons a.postbit_website span {
background-position: 0 -60px;
}

.postbit_buttons a.postbit_pm span {
background-position: 0 -80px;
}

.postbit_buttons a.postbit_quote span {
background-position: 0 -100px;
}

.postbit_buttons a.postbit_multiquote span {
background-position: 0 -120px;
}

.postbit_buttons a.postbit_multiquote_on span {
background-position: 0 -140px;
}

.postbit_buttons a.postbit_edit span {
background-position: 0 -160px;
}

.postbit_buttons a.postbit_qdelete span {
background-position: 0 -180px;
}

.postbit_buttons a.postbit_qrestore span {
background-position: 0 -200px;
}

.postbit_buttons a.postbit_report span {
background-position: 0 -220px;
}

.postbit_buttons a.postbit_warn span {
background-position: 0 -240px;
}

.postbit_buttons a.postbit_purgespammer span {
background-position: 0 -540px;
}

.postbit_buttons a.postbit_reply_pm span {
background-position: 0 -260px;
}

.postbit_buttons a.postbit_reply_all span {
background-position: 0 -280px;
}

.postbit_buttons a.postbit_forward_pm span {
background-position: 0 -300px;
}

.postbit_buttons a.postbit_delete_pm span {
background-position: 0 -320px;
}

a.button:link,
a.button:hover,
a.button:visited,
a.button:active {
background: #0f0f0f url(images/tcat.png) repeat-x;
color: #fff;
display: inline-block;
padding: 4px 8px;
margin: 2px 2px 6px 2px;
border: 1px solid #000;
font-size: 14px;
}

a.button.small_button {
font-size: 13px;
margin: 0;
padding: 3px 6px;
}

a.button span {
padding-left: 20px;
display: inline-block;
background-image: url(images/buttons_sprite.png);
background-repeat: no-repeat;
}

a.button.new_thread_button span {
background-position: 0 -340px;
}

a.button.new_reply_button span {
background-position: 0 -360px;
}

a.button.closed_button span {
background-position: 0 -380px;
}

a.button.rate_user_button span {
background-position: 0 -400px;
}

a.button.add_buddy_button span {
background-position: 0 -440px;
}

a.button.remove_buddy_button span {
background-position: 0 -480px;
}

a.button.add_ignore_button span {
background-position: 0 -460px;
}

a.button.remove_ignore_button span {
background-position: 0 -500px;
}

a.button.report_user_button span {
background-position: 0 -520px;
}

.quick_jump {
background: url(images/jump.png) no-repeat 0;
width: 13px;
height: 13px;
padding-left: 13px; /* amount of padding needed for image to fully show */
margin-top: -3px;
border: none;
}

.pollbar {
background: url(images/pollbar.png) top left repeat-x;
border: 1px solid #3f3f3f;
height: 10px;
}

.pollbar .percent {
display: none;
}

.posticons_label {
white-space: nowrap;
}

/** jGrowl Start **/

/** Special IE6 Style Positioning **/
.ie6 {
position: absolute;
}

.ie6.top-right {
right: auto;
bottom: auto;
left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.top-left {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-right {
left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-left {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.center {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
width: 100%;
}

/** jGrowl Styling **/
.jGrowl {
 z-index: 9999;
 color: #ffffff;
 font-size: 12px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 position: fixed;
}

.jGrowl.top-left {
 left: 0px;
 top: 0px;
}

.jGrowl.top-right {
 right: 0px;
 top: 0px;
}

.jGrowl.bottom-left {
 left: 0px;
 bottom: 0px;
}

.jGrowl.bottom-right {
 right: 0px;
 bottom: 0px;
}

.jGrowl.center {
 top: 0px;
 width: 50%;
 left: 25%;
}

/** Cross Browser Styling **/

.jGrowl.center .jGrowl-notification,
.jGrowl.center .jGrowl-closer {
 margin-left: auto;
 margin-right: auto;
}

.jGrowl-notification {
 background-color: #000000;
 opacity: 0.9;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 zoom: 1;
 width: 250px;
 padding: 10px;
 margin: 10px;
 text-align: left;
 display: none;
 border-radius: 5px;
 word-break: break-all;
 min-height: 40px;
}

.jGrowl-notification .ui-state-highlight,
.jGrowl-notification .ui-widget-content .ui-state-highlight,
.jGrowl-notification .ui-widget-header .ui-state-highlight {
 border: 1px solid #000;
 background: #000;
 color: #fff;
}

.jGrowl-notification .jGrowl-header {
 font-weight: bold;
 font-size: .85em;
}

.jGrowl-notification .jGrowl-close {
 background-color: transparent;
 color: inherit;
 border: none;
 z-index: 99;
 float: right;
 font-weight: bold;
 font-size: 1em;
 cursor: pointer;
}

.jGrowl-closer {
 background-color: #000000;
 opacity: 0.9;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
 zoom: 1;
 width: 250px;
 padding: 10px;
 margin: 10px;
 text-align: left;
 display: none;
 border-radius: 5px;
 word-break: break-all;
 padding-top: 4px;
 padding-bottom: 4px;
 cursor: pointer;
 font-size: .9em;
 font-weight: bold;
 text-align: center;
}

.jGrowl-closer .ui-state-highlight,
.jGrowl-closer .ui-widget-content .ui-state-highlight,
.jGrowl-closer .ui-widget-header .ui-state-highlight {
 border: 1px solid #000;
 background: #000;
 color: #fff;
}

/** Hide jGrowl when printing **/
@media print {
.jGrowl {
display: none;
}


}

/** jGrowl End **/

/** Modal Start **/

.modal {
display: none;
width: 400px;
text-align: left;
background: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(images/spinner_big.gif) no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}

/** Modal End **/

/** Impromptu Start **/

/*! jQuery-Impromptu - v6.2.1 - 2015-05-10
* http://trentrichardson.com/Impromptu
* Copyright (c) 2015 Trent Richardson; Licensed MIT */

.jqifade{
position: absolute;
background-color: #777777;
}

iframe.jqifade{
display:block;
z-index:-1;
}

div.jqi{

width: 400px;
max-width:90%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: absolute;
background-color: #ffffff;
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
padding: 7px;
}

div.jqi .jqicontainer{
}

div.jqi .jqiclose{

position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #bbbbbb;
font-weight: bold;
}

div.jqi .jqistate{
background-color: #fff;
}

div.jqi .jqititle{
padding: 5px 10px;
font-size: 16px;
line-height: 20px;
border-bottom: solid 1px #eeeeee;
}

div.jqi .jqimessage{

padding: 10px;
line-height: 20px;
color: #444444;
overflow: auto;
}

div.jqi .jqibuttonshide{
display: none;
}

div.jqi .jqibuttons{

text-align: right;
margin: 0 -7px -7px -7px;
border-top: solid 1px #e4e4e4;
background-color: #f4f4f4;
border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
}

div.jqi .jqibuttons button{

margin: 0;
padding: 15px 20px;
background-color: transparent;
font-weight: normal;
border: none;
border-left: solid 1px #e4e4e4;
color: #777;
font-weight: bold;
font-size: 12px;
}

div.jqi .jqibuttons button.jqidefaultbutton{
color: #489afe;
}

div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus{
color: #287ade;
outline: none;
}

div.jqi .jqibuttons button[disabled]{
color: #aaa;
}

.jqiwarning .jqi .jqibuttons{

background-color: #b95656;
}

/* sub states */
div.jqi .jqiparentstate::after{

background-color: #777;
opacity: 0.6;
filter: alpha(opacity=60);
content: '';
position: absolute;
top:0;left:0;bottom:0;right:0;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

div.jqi .jqisubstate{
position: absolute;
top:0;
left: 20%;
width: 60%;
padding: 7px;
border: solid 1px #eeeeee;
border-top: none;
border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
}

div.jqi .jqisubstate .jqibuttons button{
padding: 10px 18px;
}

/* arrows for tooltips/tours */
.jqi .jqiarrow{
position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;
}

.jqi .jqiarrowtl{
left: 10px; top: -20px; border-bottom-color: #ffffff;
}

.jqi .jqiarrowtc{
left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px;
}

.jqi .jqiarrowtr{
right: 10px; top: -20px; border-bottom-color: #ffffff;
}

.jqi .jqiarrowbl{
left: 10px; bottom: -20px; border-top-color: #ffffff;
}

.jqi .jqiarrowbc{
left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px;
}

.jqi .jqiarrowbr{
right: 10px; bottom: -20px; border-top-color: #ffffff;
}

.jqi .jqiarrowlt{
left: -20px; top: 10px; border-right-color: #ffffff;
}

.jqi .jqiarrowlm{
left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px;
}

.jqi .jqiarrowlb{
left: -20px; bottom: 10px; border-right-color: #ffffff;
}

.jqi .jqiarrowrt{
right: -20px; top: 10px; border-left-color: #ffffff;
}

.jqi .jqiarrowrm{
right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px;
}

.jqi .jqiarrowrb{
right: -20px; bottom: 10px; border-left-color: #ffffff;
}

/** Impromptu End */

<style type="text/css">
.postbit {
-moz-box-shadow:inset 0px 1px 0px 0px #467d15;
-webkit-box-shadow:inset 0px 1px 0px 0px #467d15;
box-shadow:inset 0px 1px 0px 0px #467d15;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4f9413), color-stop(1, #5cb811) );
background:-moz-linear-gradient( center top, #4f9413 5%, #5cb811 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f9413', endColorstr='#5cb811');
background-color:#4f9413;
-webkit-border-top-left-radius:37px;
-moz-border-radius-topleft:37px;
border-top-left-radius:37px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:37px;
-moz-border-radius-bottomright:37px;
border-bottom-right-radius:37px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #268a16;
display:inline-block;
color:#306108;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:65px;
line-height:65px;
width:131px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #aade7c;
}

.postbit:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #4f9413) );
background:-moz-linear-gradient( center top, #5cb811 5%, #4f9413 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#4f9413');
background-color:#5cb811;
}

.postbit:active {
position:relative;
top:1px;
}

</style>


RE: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - Nik101010 - 23.03.2016

Zum CSS dazu bräuchte man noch den html Code des header Templates, oder hast du diesen nicht verändert, bzw. verwendest das Default Theme? Ein Link zum direkten Anschauen würde es aber trotzdem deutlich vereinfachen ...

3 - so mehr oder weniger funktioniert das, ja Smile

4 - das Layout der Buttons wird mit CSS erzeugt. Die Klasse hierfür heißt button. Das Icon des Buttons wird aus dem sprite geladen, bzw. anders ausgedrückt der sprite ist die Hintergrundgrafik des Buttons und nur ein bestimmter Ausschnitt daraus wird dargestellt. Welcher Ausschnitt für welchen Button dargestellt wird, wird für jeden Button in einer eigenen CSS Klasse definiert.

RE: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - MrBrechreiz - 23.03.2016

Man könnte auch auf die alte 1.6er Version zurückgreifen, wo die Buttons noch einzeln formatiert waren. Nur mal so als Tipp ^^.

RE: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - Lily - 23.03.2016

Sorry. Man merkt dass ich das ganze erst seit ein paar Tagen mache, oder? Big Grin
Das ist mein Header HTML.
Geändert habe ich daran nichts und ja, ich benutze das Default theme Wink



Code:
<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div id="logo">
<div class="wrapper">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
<ul class="menu top_links">
{$menu_portal}
{$menu_search}
{$menu_memberlist}
{$menu_calendar}
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
</ul>
</div>
</div>
<div id="panel">
<div class="upper">
<div class="wrapper">
{$quicksearch}
{$welcomeblock}
<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
</div>
</div>
<div id="content">
<div class="wrapper">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />

Okay das mit der Grafik macht jetzt mehr sinn. Ich glaub ich bin trotzdem zu blöd die manuell zu ändern. ._. Sorry.

Mr. Brechreiz, wie kann man denn zurück auf 1.6 wechseln? Müsste ich dann nochmal komplett alles neu installieren? (Auf FileZilla)?
Okay kleines Update, die Frage mit den Buttons hat sich erledigt.
Ist vermutlich ein "schlampiger Weg", hat aber für mich geklappt.

Ich habe einfach die Headerlinks-sprite date in Photoshop bearbeitet und die Bilder mit denen ersetzt, die ich will. Hat geklappt Big Grin

RE: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - Nik101010 - 23.03.2016

Für das Verschieben des Menüs musst du das Template header anpassen.

Du solltest
Code:
<ul class="menu top_links">
    {$menu_portal}
    {$menu_search}
    {$menu_memberlist}
    {$menu_calendar}
    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
</ul>
diesen Block unter <div id="panel"> ... </div> verschieben.
Anschließend kannst du in der global.css die Formatierung anpassen (z.B. zentrieren, fett, ...).

Für das ändern des welcome blocks musst du die Templates header_welcomeblock_guest / header_welcomeblock_member, header_welcomeblock_admin, header_welcomeblock_moderator bearbeiten.

Was ist dir denn bzgl. der Buttons genau unklar? (Edit: wunderbar, genau darauf wollte ich oben raus :-))

Bzgl. 1.6 ... der Support für die Version 1.6 ist eingestellt, es macht also keinen Sinn dein Board damit aufzubauen.

RE: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - Lily - 23.03.2016

Vielen Herzlichen Dank, Nik!
Das war eine großartige Hilfe! Smile
Hat alles geklappt! Cool


RE: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - [ExiTuS] - 23.03.2016

Zu 3)
Generell gibt es keine Option, eine Grafik als Kategorie einzusetzen. Mit Eingriffen in die Datenbak wäre es zwar kein Problem, allerdings sollte man sich ein Eingriff in das DB-Schema überlegen.

Mit einem Workaround wäre es trotzdem kinderleicht möglich!

1. Wähle einen Namen für die Kategorie ohne Sonder- und Leereichen.
2. Erstelle eine Grafik mit gleichem Dateinamen, wie der Name der Kategorie.
3. Ändere die Templates so, dass nicht der Kategoriename als Text im Titel angezeigt wird, sondern füge ein neues img-Tag ein, der den Namen als Bilddatei nutzt.
Tadaa Smile


Beispiel:
Name der Kategorie: Hundekuchen
Dateiname der Grafik: Hundekuchen.png

Template (Forum Bit Templates > forumbit_depth1_cat, forumbit_depth2_cat, ...):

Original:
<thead>
<tr>
<td class="thead{$expthead}" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<a href="{$forum_url}">{$forum['name']}</a>
<div class="smalltext">{$forum['description']}</div>
</td>
</tr>
</thead>

Workaround:
<thead>
<tr>
<td class="thead{$expthead}" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<a href="{$forum_url}"><img border="0" src="./images/{$forum['name']}.png" width="20px" height="20px" alt="{$forum['name']}"> {$forum['name']}</a>
<div class="smalltext">{$forum['description']}</div>
</td>
</tr>
</thead>

Man kann mit dem Dateinamen spielen (auch Großbuchstaben verwenden), um den Namen auch als Text weiter verwenden zu können. Aber keinesfalls Sonderzeichen und besser auch keine Leerzeichen nutzen! Dies schränkt zwar die Namensgebung etwas ein, sollte aber machbar sein. Natürlich sollten Kategorien nicht den selben Namen haben, es sei denn die Grafik sollte auch diesselbe sein.

[ExiTuS]

RE: Generelle CSS Fragen (Headermenü, Toplinks, CSS buttons, ...) - Lily - 29.03.2016

Wow, vielen Dank, [ExiTuS]!!
Ds hat supüer geklappt, Großartig!

Ich blick grad nur nicht ganz - wenn ich das Gleiche für die Forennamen machen möchte, kannst Du mir sagen, was genau ich da bearbeiten muss?

Danke für Eure Hilfe!! Smile