Make a Compact Horizontal Account Options Menu

Posted by cold_blood3d on 08 May 2009 22:23, last edited by gerdami on 30 Dec 2009 13:20

Tags: account css login-status

Description

Sometimes it is not convenient to have the Account Options menu drop down vertical. It might interfere with ads (which is why I used this), or perhaps you want a cool new look. By applying a few simple CSS rules, you can get a horizontal account options menu that conceals the your login status/username button until you move the mouse away.

See it in action

See http://l4dmapdb.com or http://scmapdb.wikidot.com for an example. While logged in, click on the button next to your login status/username to see the menu appear.

Screenshots

Folded

Unfolded

The CSS

You will need to know how to use custom CSS to proceed. If you don't know how to use custom CSS, please find the appropriate HowTo.

#login-status {
    left:0;
    top:-30px;
    width:100%;
}
#account-options {
    position:absolute;
    left:0;
    top:-9px;
    right:auto;
    width:100%;
    height:50px;
    overflow-y:hidden;
    color:#b00000;
    background-color:#000000;
    border:0;
}
#account-options ul, #account-options li {
    display:inline;
}
#account-options li a {
    display:block;
    padding:0;
    padding-top:10px;
    padding-bottom:20px;
    height:50px;
    padding-right:1.5em;
    float:left;
    font-size:92%;
    color:#b00000 !important;
}
#account-options li a:hover {
    color:#f0f0f0 !important;
}

This will make your login status menu align to the left of the screen (similar to the example, but without the search box). When you click on the button, the account options menu will be displayed horizontally and completely hide login status/username to make the most of the available space.

You may want to customize the position to get it where you want, and change the colors. Be careful adjusting any other properties; they are needed to keep this working properly.

Example

leiger 30 Dec 2009 22:16

We have a CSS module. Many of these HowTo's that use CSS can now be shown on the page in question as well! :)

---

~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)

Idea Fail

Joshua Darby 02 Jul 2016 22:09

I put the CSS in my theme and it just took all of the account info off violating Wikidot ToS.
**To see what I am talking about, look for the content in-between the dashes

/* Import Generic
======================*/
@import url(http://themes.wdfiles.com/local--code/generic-developer);

/* Global
======================*/
a{    color: #000; }
a:hover{    color: #050505; }

/* Main Content
======================*/
#main-content a{    text-decoration: underline; }
#main-content a:hover{    text-decoration: none; }

/* Header
======================*/
#header h1 a{    color: #000; }
#header h2{    color: #111; }

/* Top Bar
======================*/
#top-bar{
    background-image: url(http://themes.wikidot.com/local--files/obsidian-developer/developer_obsidian-top.png);
    background-repeat: repeat-x;
}

/* Blockquotes
=======================*/
blockquote{
    background-image: url(http://themes.wikidot.com/local--files/obsidian-developer/developer_obsidian-quotes.png);
    background-repeat: no-repeat;
    border-left: 5px solid #000;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 20px 1em 4px 1em;
    margin: 8px 0;
}
blockquote p{    margin: 4px 0 1em 0; }

/* Code Blocks
=======================*/
.code{
    background-image: url(http://themes.wikidot.com/local--files/obsidian-developer/developer_obsidian-code.png);
    background-repeat: no-repeat;
    border-left: 5px solid #000;
    border-top: 1px dashed #000;
    border-right: 1px dashed #000;
    border-bottom: 1px dashed #000;
    padding: 20px 1em 4px 1em;
    margin: 8px 0;
}
.code pre{    margin: 4px 0 1em 0; }

/* Special Classes
========================*/
.checklist-status-head,
.checklist-item-head,
.checklist-priority-head,
.checklist-options-head{
    background-color: #000;
    padding: 0 5px 0 5px;
    color: #F7F7F7;
    font-weight: bold;
}
.image-box-heading{
    background-color:#000;
    color: #F7F7F7;
}
.image-box{
    background-color:#F7F7F7;
}
/* Sidebar
========================*/

#side-bar{
    float:right;
    overflow: hidden;
    border-left: 1px solid #000;
    width: 190px;
    margin: 22px 0 0 2px;
}
#side-bar h1,
#side-bar h2,
#side-bar h3,
#side-bar h4,
#side-bar h5,
#side-bar h6{
    font-family: 'Book Antiqua', Palatino, serif;
}
#side-bar h1{
    font-size: 18px;
    border-bottom: 1px solid;
    margin-bottom: 2px;
}
#side-bar h2{    font-size: 18px; }
#side-bar h3{    font-size: 16px; }
#side-bar h4{    font-size: 14px; }

/* Simple Tables
========================*/

table.wiki-content-table{    border: 1px solid #000; }
table.wiki-content-table th{
    background-color: #000;
    border: 1px solid #444;
    color: #F7F7F7;
}
table.wiki-content-table td{
    background-color: #F7F7F7;
    border: 1px solid #777;
}

/* Input
========================*/

#content-wrap input.text, #content-wrap textarea{
    border: 1px solid #000;
}

/* TOC
========================*/

#toc{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-top: 5px solid #000;
}
#toc a{    text-decoration: none; }
#toc a:hover{    text-decoration: underline; }
#toc > #toc-action-bar{    display: none; }

/* Hover Tips (James)
========================*/

.hover{    color: #000; }
.hover:hover span{
    background-color: #F7F7F7;
    border: 2px solid #000;
    color: #000;
}

/* Tabview (Stephen H)
========================*/

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border: solid #000; /* color of the line between tab list and content */
    border-width:0 0 3px; /*thickness of the line between tab list and content */
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 1px 0 0; /* space between tabs */
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    margin:0 1px -1px 0; /* for overlap */
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: #F7F7F7;
    border-top: 1px solid #777;
    border-left:1px solid #777;
    border-right: 1px solid #777;
    font-weight: bold;
    font-size:80%;
    color: #000;
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a:hover,
.yui-navset .yui-navset-top .yui-nav a:hover {
    background:#FFF;
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:0px solid #F00;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
    background:#000;
    color: #F7F7F7;
    border: 1px solid #444;
    border-bottom: none;
}

#search-top-box {
    display:none;
}
------------------------------------------------------------------------------------------------------
#login-status {
    left:0;
    top:-30px;
    width:100%;
}
#account-options {
    position:absolute;
    left:0;
    top:-9px;
    right:auto;
    width:100%;
    height:50px;
    overflow-y:hidden;
    color:#b00000;
    background-color:#000000;
    border:0;
}
#account-options ul, #account-options li {
    display:inline;
}
#account-options li a {
    display:block;
    padding:0;
    padding-top:10px;
    padding-bottom:20px;
    height:50px;
    padding-right:1.5em;
    float:left;
    font-size:92%;
    color:#b00000 !important;
}
#account-options li a:hover {
    color:#f0f0f0 !important;
}
------------------------------------------------------------------------------------------------------
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '1544863315816450');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1544863315816450&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
// ViewContent
// Track key page views (ex: product page, landing page or article)
fbq('track', 'ViewContent');

// Search
// Track searches on your website (ex. product searches)
fbq('track', 'Search');

// AddToCart
// Track when items are added to a shopping cart (ex. click/landing page on Add to Cart button)
fbq('track', 'AddToCart');

// AddToWishlist
// Track when items are added to a wishlist (ex. click/landing page on Add to Wishlist button)
fbq('track', 'AddToWishlist');

// InitiateCheckout
// Track when people enter the checkout flow (ex. click/landing page on checkout button)
fbq('track', 'InitiateCheckout');

// AddPaymentInfo
// Track when payment information is added in the checkout flow (ex. click/landing page on billing info)
fbq('track', 'AddPaymentInfo');

// Purchase
// Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});

// Lead
// Track when a user expresses interest in your offering (ex. form submission, sign up for trial, landing on pricing page)
fbq('track', 'Lead');

// CompleteRegistration
// Track when a registration form is completed (ex. complete subscription, sign up for a service)
fbq('track', 'CompleteRegistration');

// Other
// 
fbq('track', 'Other');

---

Joshua Darby
StikiHosting | Wikidot Support Mentor | Icon Deposit Profile | Entrepreneur | Investor

RobElliott 03 Jul 2016 09:43

You've not said which said is affected, where have you tried this?

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Joshua Darby 04 Jul 2016 02:54

Its above Facebook code.
EDIT:It takes the login info off my site. I temporarily put the code up above on so you can see.
My site is http://jdarby98.cf

---

Joshua Darby
StikiHosting | Wikidot Support Mentor | Icon Deposit Profile | Entrepreneur | Investor

Last edited on 04 Jul 2016 02:59 by Joshua Darby Show more

Joshua Darby 04 Jul 2016 03:03

It seems to work on mobile but not on desktop

---

Joshua Darby
StikiHosting | Wikidot Support Mentor | Icon Deposit Profile | Entrepreneur | Investor

Helmut_pdorf 04 Jul 2016 05:58

I have no problems with your site and your login info on my desktop - ( win 7) firefox 47.0 :
"Activity", "Messages" and "Sites" are present and working.
The rest I am not seeing… :(

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

RobElliott 04 Jul 2016 07:33

The width of the menu items cannot be more than the width of the #login-status. So the first thing you'll need to increase the width of the login-status:

#login-status {
    width: 450px;
}

The missing menu items will now display.

The result of changing the width is that it pushes the login further to the left. The problem you now have is that you can't float the login-status right as its position is set with position:absolute. Changing it to position:relative will mess up your overall layout. I'll think about the best way to deal with that if the positioning is vital to you.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Joshua Darby 05 Jul 2016 02:13

Thank you for your help again. I have chosen to give up having this feature for right now due to getting extremely frustrated over this.

---

Joshua Darby
StikiHosting | Wikidot Support Mentor | Icon Deposit Profile | Entrepreneur | Investor

---

Related articles

• Mix and Match CSS Classes
• find a forgotten password
• Count tablerows
• Override Inline Styles With CSS
• Change the background
• Inline Hover Tips

Comments

Example

leiger 30 Dec 2009 22:16

We have a CSS module. Many of these HowTo's that use CSS can now be shown on the page in question as well! :)

---

~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)

Idea Fail

Joshua Darby 02 Jul 2016 22:09

I put the CSS in my theme and it just took all of the account info off violating Wikidot ToS.
**To see what I am talking about, look for the content in-between the dashes

/* Import Generic
======================*/
@import url(http://themes.wdfiles.com/local--code/generic-developer);

/* Global
======================*/
a{    color: #000; }
a:hover{    color: #050505; }

/* Main Content
======================*/
#main-content a{    text-decoration: underline; }
#main-content a:hover{    text-decoration: none; }

/* Header
======================*/
#header h1 a{    color: #000; }
#header h2{    color: #111; }

/* Top Bar
======================*/
#top-bar{
    background-image: url(http://themes.wikidot.com/local--files/obsidian-developer/developer_obsidian-top.png);
    background-repeat: repeat-x;
}

/* Blockquotes
=======================*/
blockquote{
    background-image: url(http://themes.wikidot.com/local--files/obsidian-developer/developer_obsidian-quotes.png);
    background-repeat: no-repeat;
    border-left: 5px solid #000;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 20px 1em 4px 1em;
    margin: 8px 0;
}
blockquote p{    margin: 4px 0 1em 0; }

/* Code Blocks
=======================*/
.code{
    background-image: url(http://themes.wikidot.com/local--files/obsidian-developer/developer_obsidian-code.png);
    background-repeat: no-repeat;
    border-left: 5px solid #000;
    border-top: 1px dashed #000;
    border-right: 1px dashed #000;
    border-bottom: 1px dashed #000;
    padding: 20px 1em 4px 1em;
    margin: 8px 0;
}
.code pre{    margin: 4px 0 1em 0; }

/* Special Classes
========================*/
.checklist-status-head,
.checklist-item-head,
.checklist-priority-head,
.checklist-options-head{
    background-color: #000;
    padding: 0 5px 0 5px;
    color: #F7F7F7;
    font-weight: bold;
}
.image-box-heading{
    background-color:#000;
    color: #F7F7F7;
}
.image-box{
    background-color:#F7F7F7;
}
/* Sidebar
========================*/

#side-bar{
    float:right;
    overflow: hidden;
    border-left: 1px solid #000;
    width: 190px;
    margin: 22px 0 0 2px;
}
#side-bar h1,
#side-bar h2,
#side-bar h3,
#side-bar h4,
#side-bar h5,
#side-bar h6{
    font-family: 'Book Antiqua', Palatino, serif;
}
#side-bar h1{
    font-size: 18px;
    border-bottom: 1px solid;
    margin-bottom: 2px;
}
#side-bar h2{    font-size: 18px; }
#side-bar h3{    font-size: 16px; }
#side-bar h4{    font-size: 14px; }

/* Simple Tables
========================*/

table.wiki-content-table{    border: 1px solid #000; }
table.wiki-content-table th{
    background-color: #000;
    border: 1px solid #444;
    color: #F7F7F7;
}
table.wiki-content-table td{
    background-color: #F7F7F7;
    border: 1px solid #777;
}

/* Input
========================*/

#content-wrap input.text, #content-wrap textarea{
    border: 1px solid #000;
}

/* TOC
========================*/

#toc{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-top: 5px solid #000;
}
#toc a{    text-decoration: none; }
#toc a:hover{    text-decoration: underline; }
#toc > #toc-action-bar{    display: none; }

/* Hover Tips (James)
========================*/

.hover{    color: #000; }
.hover:hover span{
    background-color: #F7F7F7;
    border: 2px solid #000;
    color: #000;
}

/* Tabview (Stephen H)
========================*/

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border: solid #000; /* color of the line between tab list and content */
    border-width:0 0 3px; /*thickness of the line between tab list and content */
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 1px 0 0; /* space between tabs */
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    margin:0 1px -1px 0; /* for overlap */
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: #F7F7F7;
    border-top: 1px solid #777;
    border-left:1px solid #777;
    border-right: 1px solid #777;
    font-weight: bold;
    font-size:80%;
    color: #000;
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a:hover,
.yui-navset .yui-navset-top .yui-nav a:hover {
    background:#FFF;
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:0px solid #F00;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
    background:#000;
    color: #F7F7F7;
    border: 1px solid #444;
    border-bottom: none;
}

#search-top-box {
    display:none;
}
------------------------------------------------------------------------------------------------------
#login-status {
    left:0;
    top:-30px;
    width:100%;
}
#account-options {
    position:absolute;
    left:0;
    top:-9px;
    right:auto;
    width:100%;
    height:50px;
    overflow-y:hidden;
    color:#b00000;
    background-color:#000000;
    border:0;
}
#account-options ul, #account-options li {
    display:inline;
}
#account-options li a {
    display:block;
    padding:0;
    padding-top:10px;
    padding-bottom:20px;
    height:50px;
    padding-right:1.5em;
    float:left;
    font-size:92%;
    color:#b00000 !important;
}
#account-options li a:hover {
    color:#f0f0f0 !important;
}
------------------------------------------------------------------------------------------------------
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '1544863315816450');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1544863315816450&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
// ViewContent
// Track key page views (ex: product page, landing page or article)
fbq('track', 'ViewContent');

// Search
// Track searches on your website (ex. product searches)
fbq('track', 'Search');

// AddToCart
// Track when items are added to a shopping cart (ex. click/landing page on Add to Cart button)
fbq('track', 'AddToCart');

// AddToWishlist
// Track when items are added to a wishlist (ex. click/landing page on Add to Wishlist button)
fbq('track', 'AddToWishlist');

// InitiateCheckout
// Track when people enter the checkout flow (ex. click/landing page on checkout button)
fbq('track', 'InitiateCheckout');

// AddPaymentInfo
// Track when payment information is added in the checkout flow (ex. click/landing page on billing info)
fbq('track', 'AddPaymentInfo');

// Purchase
// Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});

// Lead
// Track when a user expresses interest in your offering (ex. form submission, sign up for trial, landing on pricing page)
fbq('track', 'Lead');

// CompleteRegistration
// Track when a registration form is completed (ex. complete subscription, sign up for a service)
fbq('track', 'CompleteRegistration');

// Other
// 
fbq('track', 'Other');

---

Joshua Darby
StikiHosting | Wikidot Support Mentor | Icon Deposit Profile | Entrepreneur | Investor

RobElliott 03 Jul 2016 09:43

You've not said which said is affected, where have you tried this?

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Joshua Darby 04 Jul 2016 02:54

Its above Facebook code.
EDIT:It takes the login info off my site. I temporarily put the code up above on so you can see.
My site is http://jdarby98.cf

---

Joshua Darby
StikiHosting | Wikidot Support Mentor | Icon Deposit Profile | Entrepreneur | Investor

Last edited on 04 Jul 2016 02:59 by Joshua Darby Show more

Joshua Darby 04 Jul 2016 03:03

It seems to work on mobile but not on desktop

---

Joshua Darby
StikiHosting | Wikidot Support Mentor | Icon Deposit Profile | Entrepreneur | Investor

Helmut_pdorf 04 Jul 2016 05:58

I have no problems with your site and your login info on my desktop - ( win 7) firefox 47.0 :
"Activity", "Messages" and "Sites" are present and working.
The rest I am not seeing… :(

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

RobElliott 04 Jul 2016 07:33

The width of the menu items cannot be more than the width of the #login-status. So the first thing you'll need to increase the width of the login-status:

#login-status {
    width: 450px;
}

The missing menu items will now display.

The result of changing the width is that it pushes the login further to the left. The problem you now have is that you can't float the login-status right as its position is set with position:absolute. Changing it to position:relative will mess up your overall layout. I'll think about the best way to deal with that if the positioning is vital to you.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Joshua Darby 05 Jul 2016 02:13

Thank you for your help again. I have chosen to give up having this feature for right now due to getting extremely frustrated over this.

---

Joshua Darby
StikiHosting | Wikidot Support Mentor | Icon Deposit Profile | Entrepreneur | Investor