Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
Report any technical problems you discover and discuss solutions.
  • Page:
  • 1
  • 2

TOPIC:

Customisation of Bootstrap top folder title 7 years 2 months ago #4314

  • instildistance
  • instildistance's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
  • Posts: 23
  • Thank you received: 1
I'm trying to create a learning object via the Bootstrap and would like to be able to change the style of titles via the visual editors that should appear when I click on the titles fields. As you can see from the video below, the presenter is showing exactly that. In my case, though, when I click on the main folder title field, or on any items below that, the visual editor doesn't pop up.
I've tested this in Chrome, Firefox and IE11.
Is it a bug or is there something I'm not doing right?
Thank you!
www.youtube.com/watch?v=bbX_4A56W_E

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

Last edit: by instildistance.

Customisation of Bootstrap top folder title 7 years 2 months ago #4318

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 235
  • Thank you received: 88
Hi Joe

The styles popup has been removed from these fields so you would have to do any styling of them through css. I'm not sure now why this will have been done but that video uses a beta version of the editor so I don't think styling these titles directly through the text fields has ever been available in the proper release versions.

If you add the 'Styles' optional property to your project you can use these css selectors to target the titles:
#pageTitle {
color: yellow;
}
#pageSubTitle {
color: red;
}
.page-header {
  color: green;
}

This also gives you the advantage that you won't have to do every title individually

Fay

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

Customisation of Bootstrap top folder title 7 years 2 months ago #4321

  • instildistance
  • instildistance's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
  • Posts: 23
  • Thank you received: 1
Hi Fay,

Thank you for your prompt reply and clarification with this. By Styles do you mean the Stylesheet option or the acual 'Styles' one. I could try additing the selectors you suggest to a Stylesheet, though not too familiar with it. I'm not really understanding the functionality of Styles in optional properties. It looks like the usual text entry with its visual editor.

Joe

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

Customisation of Bootstrap top folder title 7 years 2 months ago #4329

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 235
  • Thank you received: 88
The 'Stylesheet' option allows you to upload a css file (useful if you want to use the same styles on multiple projects) while the 'Styles' option allows you to type css directly into the editor.

If you're not too familiar with css then these links show examples of the properties you might want to change:
CSS Fonts
CSS Text

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

Customisation of Bootstrap top folder title 7 years 2 months ago #4332

  • instildistance
  • instildistance's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
  • Posts: 23
  • Thank you received: 1
Thank you for the clarification, Fay. I must make it a habit of checking w3school more, it's a very useful resource.
Yesterday I added your selectors to a stylesheet I was already using and it worked. However, what confuses me is that I've typed the same selectors into 'Styles' but when I view it makes no difference to the page.
Also, am I correct in thinking that I can type a whole shylesheet into 'Styles' and that would work the same? Only ask because I've tried it and it makes no difference to the page.

Finally, one last query. What do I actually add to a style/stylesheet in order to customize the menu that appears in the top black strip of the bootstrap template?

Thanks for your valued help.

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

Customisation of Bootstrap top folder title 7 years 2 months ago #4333

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 235
  • Thank you received: 88
Yes you should just be able to copy the contents of a css file there and for it to work. You said earlier that the styles field 'looks like the usual text entry with its visual editor' which makes me wonder if you are running a slightly older version than me. To me it looks like this:



It was changed to this kind of 'script' field from a normal text field in 2015 so perhaps this was done as it wasn't working as expected before.

To answer your second question, there are quite a lot of tags that make up the black menu bar at the top. It really depends what you are trying to do to it as to how you'd apply css here. Try pressing F12 in your browser to open the developers tool. Then select the area you want to change using this to get the class or id to use in your css.

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

  • Page:
  • 1
  • 2
Moderators: ronmjultenJohnSmith
Time to create page: 0.054 seconds
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search