Top Menu Bar

[pcunit]

The Top Most Menu Bar where we have Upload, Sign In etc links. How Do I disable that ?

 

[Anomaly]

The quickest way would probably be through custom CSS. Go to Dashboard > Settings > Theme and add the following to "Custom CSS code" depending which you want:

To completely hide the entire bar:

#top-bar-shade, #top-bar {display: none;}

To keep the top bar with the logo but hide everything else:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
.top-bar-notifications, #top-bar-user, li[data-nav="about"], #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar and hide only Upload, Sign In & Sign Up:

li[data-nav="upload"], #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar with the logo & user account controls:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
.top-bar-notifications, li[data-nav="about"], #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar with the logo, notifications, & user account controls:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
li[data-nav="about"], #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar with the logo, user account controls & page listing:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
.top-bar-notifications, #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar with the logo, notifications, user account controls & page listing:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
#top-bar-signin, #top-bar-signup {
    display: none;
}

Note that I don't particularly have use for this coding myself so I didn't go through the effort of testing cross-browser compatibility. It works fine for me in Firefox Developer Edition version 56 and above.

Additionally, this won't actually disable those sections, just hide the top links leading to them so that most casual users won't be able to see them. Anyone with developer tools in their browser or a userstyles extension can un-hide the elements if they're determined to do it, so if you want to completely disable access you'll have to do the following.

• Disable Uploads via Dashboard > Settings > Image upload > Enable uploads > set to 'disabled'
  • Note that this does not disable uploading for Administrator accounts. You will still be able to upload things yourself, if signed into your admin/owner account. So will anyone else signed into an Administrator account.
• Disable or Demote Unwanted Users via Dashboard > Users > select the user you want to get rid of > click "edit" or "delete" by their avatar
  • In combination with disabled uploads, you can stop Administrators from having upload access by demoting them.
    • If you want them to still be able to moderate content, demote them to Manager via the "Role" option.
    • If you want them to be a normal user, demote them to User via the "Role" option.
  • You can also outright delete any problematic users or people you just don't want accessing the site anymore by clicking "delete" on their profile.
• Disable Registration via Dashboard > Settings > Users > Enable signups > set to 'disabled'

Anyone can still access the /login and /signup pages by typing the URLs if you have them enabled in the dashboard. Therefore, if you're looking to actually stop uploads and registrations, you'll have to use the above steps. Doing that will lead to the relevant pages no longer functioning for users/guests without the proper permissions.

 

[pcunit]

The quickest way would probably be through custom CSS. Go to Dashboard > Settings > Theme and add the following to "Custom CSS code" depending which you want:

To completely hide the entire bar:

#top-bar-shade, #top-bar {display: none;}

To keep the top bar with the logo but hide everything else:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
.top-bar-notifications, #top-bar-user, li[data-nav="about"], #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar and hide only Upload, Sign In & Sign Up:

li[data-nav="upload"], #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar with the logo & user account controls:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
.top-bar-notifications, li[data-nav="about"], #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar with the logo, notifications, & user account controls:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
li[data-nav="about"], #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar with the logo, user account controls & page listing:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
.top-bar-notifications, #top-bar-signin, #top-bar-signup {
    display: none;
}

To keep the top bar with the logo, notifications, user account controls & page listing:

#top-bar-explore, #top-bar-moderate, #top-bar-random,
li[data-nav="search"], li[data-nav="tone"], li[data-nav="upload"],
#top-bar-signin, #top-bar-signup {
    display: none;
}

Note that I don't particularly have use for this coding myself so I didn't go through the effort of testing cross-browser compatibility. It works fine for me in Firefox Developer Edition version 56 and above.

Additionally, this won't actually disable those sections, just hide the top links leading to them so that most casual users won't be able to see them. Anyone with developer tools in their browser or a userstyles extension can un-hide the elements if they're determined to do it, so if you want to completely disable access you'll have to do the following.

• Disable Uploadsvia Dashboard > Settings > Image upload > Enable uploads > set to 'disabled'
  • Note that this does not disable uploading for Administrator accounts. You will still be able to upload things yourself, if signed into your admin/owner account. So will anyone else signed into an Administrator account.
• Disable or Demote Unwanted Users via Dashboard > Users > select the user you want to get rid of > click "edit" or "delete" by their avatar
  • In combination withdisabled uploads, you can stop Administrators from having upload access by demoting them.
    • If you want them to still be able to moderate content, demote them to Manager via the "Role" option.
    • If you want them to be a normal user, demote them to User via the "Role" option.
  • You can also outright delete any problematic users or people you just don't want accessing the site anymore by clicking "delete" on their profile.
• Disable Registration via Dashboard > Settings > Users > Enable signups > set to 'disabled'

Anyone can still access the /login and /signup pages by typing the URLs if you have them enabled in the dashboard. Therefore, if you're looking to actually stop uploads and registrations, you'll have to use the above steps. Doing that will lead to the relevant pages no longer functioning for users/guests without the proper permissions.

Thanks for the detailed tutorial it really works.

I hope i am not being too greedy but can you please let me know is it possible to add small banner in place of the top logo on the top bar 😀

@Anomaly

 

[pcunit]

Also how to keep the login link etc on the home page and remove the top bar from the image pages only

 

[Rodolfo]

Also how to keep the login link etc on the home page and remove the top bar from the image pages only

All pages on body tag contain the route name on the id attribute. For example, the following rules will alter the color of the buttons based on routes.

#image .btn-text { color: red; }

#explore .btn-text { color: blue; }

It's CSS, you can do anything.

 

[Anomaly]

Thanks for the detailed tutorial it really works.

I hope i am not being too greedy but can you please let me know is it possible to add small banner in place of the top logo on the top bar 😀

@Anomaly

If you mean you want to put your own logo/banner where the chevereto logo appears on the top bar, that can be done with the dashboard settings. Head on over to Dashboard > Settings > Theme > Raster logo image and upload it there. You can find a copy of the original chevereto logo to use as a size/style guide at [yoursite]/content/images/system/default/logo.png if needed. It's 314px wide and 48px tall, and gets automatically resized to fit the space. I'm sure there's ways to alter this behaviour with CSS if needed, but unfortunately I don't have the energy to dedicate to customizing a logo that won't actually be used on my install. I hope you understand! 😔

Also how to keep the login link etc on the home page and remove the top bar from the image pages only

To keep everything as-is on the home page and remove the top bar from only image pages, use this custom CSS:

#image #top-bar-shade, #image #top-bar {display: none;}

To get rid of the padding left in its place on the top of image pages, add this in addition to the above code:

#image .top-bar-placeholder { display: none; }

If you want to customize how much padding there is, toy with this instead, customizing the pixel value:

#image .top-bar-placeholder { height: 20px; }

Also, I do strongly recommend looking into CSS as Rodolfo suggested. The things you can accomplish with it are amazing, and understanding the basics of how it works makes customizing so much easier - even when you want/need help from others, since you'll have more of an idea on how to tweak the codes given to suit your specific needs. 🙂

@pcunit

 

[termsl]

How i can add "albums" link in to top menu bar in personal website mode?