.ctdl-main-grid-container > div {
text-align: left;
- padding: 0;
+}
+
+.ctdl-banner-buttons { /* Flexbox container for everything we stick into the banner */
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.ctdl-banner-left { /* Items which should be grouped to the LEFT side of the banner */
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+
+.ctdl-banner-center { /* Items which should be grouped to the MIDDLE of the banner */
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+
+.ctdl-banner-right { /* Items which should be grouped to the RIGHT side of the banner */
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
}
.ctdl-banner-buttons li, .ctdl-banner-buttons li button {
float: left;
display: block;
- padding: 8px;
background-color: DarkSlateGrey;
color: White;
font-size: 1.25vw;
border: none;
+ padding-left: 4px;
+ padding-right: 4px;
}
.ctdl-banner-buttons li button:hover {
background-color: Black;
}
-.ctdl-banner-buttons a {
+.ctdl-banner-buttons a { /* For example, the Login / Log Off button */
color: White;
}
+.ctdl-banner-buttons span { /* For example, the name of the logged in user */
+ color: White;
+}
+
+.ctdl-logo-img {
+ background-color: White;
+ border-radius: 5px;
+ padding-bottom: 3px;
+ padding-left: 3px;
+ padding-right: 3px;
+}
+
html,body,h1,h2,h3,h4,h5 {
font-family: sans-serif
}
color: #FFFFFF;
}
-.ctdl-logo-img {
- background-color: White;
- border-radius: 5px;
- padding-bottom: 3px;
- padding-left: 3px;
- padding-right: 3px;
-}
-
.ctdl-forum-reading-pane {
background-color: DarkSlateGrey; /* Background behind the message boxes */
}
<div class="ctdl-grid-banner-item" id="banner">
<ul class="ctdl-banner-buttons">
- <!-- <li id="ctdl-sidebar-open" onClick="sidebar_open();"><i class="fa fa-bars"></i>Menu</li> -->
- <li id="ctdl-logo" onclick=window.open("https://www.citadel.org");>
- <img class="ctdl-logo-img" src="/ctdl/s/images/citadel-logo.gif" alt="CITADEL">
- </li>
- <li id="ctdl_banner_title">---</li>
- <li><button id="ctdl-newmsg-button" style="display:none" onClick="entmsg_dispatcher();">enter</button></li>
- <li><button id="ctdl-ungoto-button" style="display:none" onClick="gotonext(0);">ungoto</button></li>
- <li><button id="ctdl-skip-button" style="display:none" onClick="gotonext(1);">skip</button></li>
- <li><button id="ctdl-goto-button" style="display:none" onClick="gotonext(2);">goto</button></li>
- <li><button id="lilo">Login</button></li>
- <li><span id="current_user">Not logged in.</span></li>
- <li><span id="current_user_avatar"><i class="fa fa-user-circle fa-3x"></i></span></li>
+ <div id="ctdl-banner-left" class="ctdl-banner-left">
+ <!-- <li id="ctdl-sidebar-open" onClick="sidebar_open();"><i class="fa fa-bars"></i>Menu</li> -->
+ <li id="ctdl-logo" onclick=window.open("https://www.citadel.org");>
+ <img class="ctdl-logo-img" src="/ctdl/s/images/citadel-logo.gif" alt="CITADEL">
+ </li>
+ <li><button id="ctdl_banner_title">---</button></li>
+ </div>
+ <div id="ctdl-banner-center" class="ctdl-banner-center">
+ <li><button id="ctdl-newmsg-button" style="display:none" onClick="entmsg_dispatcher();">enter</button></li>
+ <li><button id="ctdl-ungoto-button" style="display:none" onClick="gotonext(0);">ungoto</button></li>
+ <li><button id="ctdl-skip-button" style="display:none" onClick="gotonext(1);">skip</button></li>
+ <li><button id="ctdl-goto-button" style="display:none" onClick="gotonext(2);">goto</button></li>
+ </div>
+ <div id="ctdl-banner-right" class="ctdl-banner-right">
+ <li><button id="lilo">Login</button></li>
+ <li><button>
+ <span id="current_user">Not logged in.</span>
+ </button></li>
+ <li><button>
+ <span id="current_user_avatar"><i class="fa fa-user-circle"></i></span>
+ </button></li>
+ </div>
</ul>
</div>