Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
Main Forum
Developers
Code to change Bootstrap Template navigation menu
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1

TOPIC:

Code to change Bootstrap Template navigation menu 6 years 2 months ago #5345

  • A511197
  • A511197's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 133
  • Thank you received: 10
Hi Everyone,

I'm using a bootstrap template in v3.6 and looking to change the colours of the side navigation menu (I'm not a coder). I'm using the Flat: Blue & Grey theme and have added a different header and footer colour using Optional Properties.

Q. Does anyone have a snippet of code to change the default blue and the hover over colour for the side navigation menu in a Xerte bootstrap template?

Many thanks,
Alison

Easy if you know how;-)
If you can use Lego, you can use Xerte

Please Log in or Create an account to join the conversation.

Code to change Bootstrap Template navigation menu 6 years 2 months ago #5346

  • A511197
  • A511197's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 133
  • Thank you received: 10
Would really appreciate a response to my initial post if you are able to help out. I know this is something non-coding users will want to do at my institution.Is it possible to add an Optional Properties for the side navigation menu to change colour, hover over etc?

TIA
Alison
If you can use Lego, you can use Xerte

Please Log in or Create an account to join the conversation.

Last edit: by A511197.

Code to change Bootstrap Template navigation menu 6 years 2 months ago #5347

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 852
  • Thank you received: 263
Hi Alison
try the following:
.bs-docs-sidenav > li > a {
    color: #ff000a; /*text colour*/
}

.bs-docs-sidenav > li > a:hover {
    background-color: #f89406;
    color: #ffffff; /*text colour*/
}

Obviously change the colour values to what you want.
HTH
Ron
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/
The following user(s) said Thank You: A511197

Please Log in or Create an account to join the conversation.

Code to change Bootstrap Template navigation menu 6 years 2 months ago #5348

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 229
  • Thank you received: 92
Hi Alison,
Try these:
.bs-docs-sidenav {
  background-color: green;
}

.bs-docs-sidenav > li > a:hover {
  background-color: red;
}

.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus {
  background-color: pink;
}

Fay
The following user(s) said Thank You: A511197

Please Log in or Create an account to join the conversation.

Code to change Bootstrap Template navigation menu 6 years 2 months ago #5349

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 229
  • Thank you received: 92
Ron beat me to it!

Please Log in or Create an account to join the conversation.

Code to change Bootstrap Template navigation menu 6 years 2 months ago #5350

  • A511197
  • A511197's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 133
  • Thank you received: 10
Many thanks Ron and Fay, really is appreciated, works a treat.

I need to spend more time coding.
If you can use Lego, you can use Xerte
The following user(s) said Thank You: helenmd

Please Log in or Create an account to join the conversation.
  • Page:
  • 1
Moderators: JohnSmith
Forum
Main Forum
Developers
Code to change Bootstrap Template navigation menu
Time to create page: 0.059 seconds
Main Pages
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search