Headerlinks im Style

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.1/3.2, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 1347
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Headerlinks im Style

Beitragvon Tastenplayer » 26.02.2018 10:20

Wenn ich das jetzt mit Pastebin einfüge, ist es ja nach einer gewissen Zeit wieder weg - bin mit jetzt etwas unschlüssig.

Mein Versuch hat zwar geklappt, allerdings mit Kompromiss. Man kann keinen Background samt Border einfügen, sonst überlappt die column in kleinerer Auflösung. Responsive Anpassungsversuche haben bisher nicht geklappt. Aber so geht es ja auch. Mit Background und Border sah es allerdings besser aus.
Klappte allerdings nur mit zwei columns nebeneinander, 100% Breite sowie Scrollbar unten am Seitenende. Was dann wieder happig wird für die Responsive-Anpassung.
[ externes Bild ]

html

Code: Alles auswählen

 <div class="modern_bar">
  <a href="#home"><i class="icon fa-university fa-fw"></i>Portal</a>
  <a href="#news"><i class="icon fa-file-text fa-fw"></i>News</a>
  <div class="modern_drop">
    <button class="dropbtn">YOUR LINKS
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="modern_bar_content">
      <div class="modern_bar_header">
        <h2>YOUR MENU</h2>
      </div>
      <div class="bar_row">
        <div class="bar_column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="bar_column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="bar_column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

css

Code: Alles auswählen

 /* Navbar container */
.modern_bar {
   overflow: hidden;
   background-color: transparent;
   font-family: Arial, sans serif;
   margin-top: 10px;
   border-top: 1px solid #777;
}

/* Links inside the navbar */
.modern_bar a {
   float: left;
   font-size: 10px;
   font-weight:800;
   text-transform:uppercase;
   color: #B5B5B5;
   text-align: center;
   padding: 8px;
   text-decoration: none;
}

/* The dropdown container */
.modern_drop {
   float: left;
   overflow: hidden;
}

/* Dropdown button */
.modern_drop .dropbtn {
   border: none;
   outline: none;
   font-size: 10px;
   font-weight:800;
   text-transform:uppercase;
   color: #B5B5B5;
   text-align: center;
   padding: 8px;
   text-decoration: none; 
   margin-top: 2px;
}

/* Add a red background color to navbar links on hover */
.modern_bar a:hover, .modern_bar_drop:hover .dropbtn, .modern_drop .dropbtn:hover{
   background-color: #BF0000;
}

/* Dropdown content (hidden by default) */
.modern_bar_content {
   display: none;
   position: absolute;
   background-color: transparent;
   width: 20%;
   min-width: 180px;
   left: 10%;
   z-index: 1;
   padding: 0 6px 6px 6px;
}

/* Mega Menu header, if needed */
.modern_bar .header {
   background: red;
   padding: 16px;
   color: #B5B5B5;
}

/* Show the dropdown menu on hover */
.modern_drop:hover .modern_bar_content {
   display: block;
}

.bar_column {
   float: middle;
   width: 99%;
   padding: 10px;
   background: #262223;
   background: -moz-linear-gradient(45deg, #262223 1%, #303032 41%, #303032 58%, #262223 100%);
   background: -webkit-linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
   background: linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262223', endColorstr='#262223',GradientType=1 );
   border: 1px solid #777;
   border-radius: 2px;
   -webkit-box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
   -moz-box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
   box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
   height: auto;
   max-width: 320px;
}

/* Style links inside the columns */
.bar_column a {
   float: none;
   color: #B5B5B5;
   padding: 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}

/* Add a background color on hover */
.bar_column a:hover {
   background-color: #BF0000;
   color: #F9F9F9;
}

/* Clear floats after the columns */
.bar_row:after {
   content: "";
   display: table;
   clear: both;
}

.modern_bar_content  h3{
   margin-top:-1px;
}

.modern_bar_content  h2{
   color: #B5B5B5;
   font-family: Arial, sans serif;
   font-size: 10px;
   font-weight: 800;
   text-transform: uppercase;
   background: #262223;
   background: -moz-linear-gradient(45deg, #262223 1%, #303032 41%, #303032 58%, #262223 100%);
   background: -webkit-linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
   background: linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262223', endColorstr='#262223',GradientType=1 );
   border: 1px solid #777;
   border-radius: 2px;
   -webkit-box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
   -moz-box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
   box-shadow: inset 0 0 12px #777, 0 0 12px rgba(0,0,0, .9);
   margin: 5px 0 8px 0;
   padding: 3px;
}

.modern_bar .icon, .button .icon, blockquote cite::before, .uncited::before {
   display: initial;
   font-weight: normal;
   font-style: normal;
   font-variant: normal;
   font-family: FontAwesome;
   font-size: 14px;
   line-height: 1;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

(Hoffe, das Ganze funktioniert auch noch, wenn ich Links einfüge :lol: )
Mein Portal: https://www.portal.my-tastenworld.ch/ Mein Forum: https://www.forum.my-tastenworld.ch/
The best online translator comes from Köln DE
Be the best version of yourself rather than a bad copy of someone else!

Benutzeravatar
canonknipser
Supporter
Supporter
Beiträge: 1643
Registriert: 10.09.2011 11:14
Kontaktdaten:

Re: Headerlinks im Style

Beitragvon canonknipser » 26.02.2018 10:59

Und da hast du jetzt welche Frage zu oder beantwortest welche Frage?

Irgendwie verstehe ich den Zusammenhang nicht.

In welche Dateien sollen deine Codebröckchen?
Grüße, canonknipser
"there are only 10 types of people: those, who understand binary and those, who don't"
just arrived ;) - Bilder
Kein Support via PN, nur im Board und (manchmal) im IRC

Verschoben von Coding & Technik nach Styles, Templates und Grafiken am 26.02.2018 12:06 durch Crizzo

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 1347
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: Headerlinks im Style

Beitragvon Tastenplayer » 26.02.2018 16:39

Sorry Canonknipser - Ich dachte, vielleicht hätte ja jemand interresse an dem. Ich hab keine Frage diesbezüglich :)
Bei mir ist das in die top_modern.html eingefügt(after search header).
Mein Portal: https://www.portal.my-tastenworld.ch/ Mein Forum: https://www.forum.my-tastenworld.ch/
The best online translator comes from Köln DE
Be the best version of yourself rather than a bad copy of someone else!

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 1347
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: Headerlinks im Style

Beitragvon Tastenplayer » 01.06.2018 18:52

Ich hab die letzten Tage mal andere Sachen ausprobiert - ohne outline wäre definitv besser.
Alle Dropdowns mit klick oder Hoverfuntion(Wie zBsp. Quicklinks geöffnete) haben mir den Style zerschossen :)
Diese hier wäre ganz gut https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp Funktioniert auch alles bis auf den responsive Toggle.
Bevor ich weiter rumwurstle mal die grundsätzliche Frage: Geht das überhaupt ein JavaScript in den 3.2x Style einzubinden für die Link Navi?

Ausserdem, geht es evt. nicht, weil ich die Linknavi in den Top Modern einbauen wollte. Respektive müsste ich diese unter dem Top Modern in den Style einfügen?(Der top_modern ist ja eigentlich schon responsive)

Code: Alles auswählen

dropdown
habe ich natürlich in top-drop umbenannt. Sonst geht es logisch nicht. Allerdings, da der Link zu dem JavaScript in der css Datei ist - müsste ich das Script vielleicht im theme Ordner anstatt im template Ordner ablegen. Die Idee ist mir bisher nicht gekommen.
[ externes Bild ] Wie man sieht:
Toggle ist da - 3 Links aus der Linknavi entschwunden - alle Links aus dem Top Drop entschwunden(Script oder css muss ich noch irgendwie anpassen. Vergessen, dass ich da ja noch Titel einfügte) - der Toggle zeigt keine Reaktion :D

Ansonsten halt die Alternative installieren in Form von 1- 3 Dropups - das hat geklappt(sieht man in jeder Auflösung noch)

Bevor jetzt einer diesbezüglich was schreibt, Alternative ist klar: phpbb Button Menu ext von Oxpus https://phpbb3.oxpus.net/viewtopic.php?t=740 [ externes Bild ] Aber das ist dann eben der no kick Weg durch installation einer weiteren Ext :D

Edit: ich glaub ich brauch definitv eine neue Brille. Diese Variante hat ja auch den nicht zulässigen code

Code: Alles auswählen

outline: none;
:lol:
Egal muss dann halt wieder geändert werden in den zulässigen Code von:

Code: Alles auswählen

/* :focus with outline: 0 and provides replacement treatment */
.top_drop .dropbtn a:focus {
   border: 1px solid red;
   outline: 0;
}
Mein Portal: https://www.portal.my-tastenworld.ch/ Mein Forum: https://www.forum.my-tastenworld.ch/
The best online translator comes from Köln DE
Be the best version of yourself rather than a bad copy of someone else!


Zurück zu „Styles, Templates und Grafiken“