search

wwu-housing / starterbootstrap

Bootstrap based Dokuwiki template.
http://dokuwiki.camlittle.com
40 stars 19 forks source link

Design questions #7

Closed daviddarts closed 10 years ago

daviddarts commented 10 years ago

First of all, thanks so much for creating this fantastic theme!

I have a couple of very noobish questions...

  1. How would I go about adding a horizontal navigation/menu bar along the top of my dokuwiki site? I'd like to have a black menu similar to this: https://www.dokuwiki.org/dokuwiki OR http://getbootstrap.com/2.3.2/index.html
  2. What is the best way to change the color scheme for my site (text, background, etc)?

Thanks again,

LarsGo commented 10 years ago

I second this.

apexskier commented 10 years ago

Second question first,

I'd say the best way to change the color scheme is to drop in your own version of bootstrap. You can do that at http://getbootstrap.com/customize/#less-variables. After downloading, replace bootstrap.min.css and bootstrap.css with your new css files.

The first question will probably require modifications to main.php. Do you want the top bar to replace the sidebar?

If you just want to make the existing top bar black, just change the class "navbar-default" to "navbar-inverse" at line 38.

If you want to add your own links, I'd suggest adding them after line 49. The html for them can be found in the bootstrap docs.

@LarsGo, do you have anything specific you're seconding?

daviddarts commented 10 years ago

Awesome, thank you very much for the additional info! Two additional questions:

  1. How do I replace the wiki title text (home page/start link) in the top left corner of the wiki with a logo image?
  2. How do I add a jumbotron http://getbootstrap.com/components/#jumbotron to the home/start page of the wiki (I don't want it on every page).

Thanks again!

apexskier commented 10 years ago

For the image, you're just going to have to replace the navbar-brand with your image. I'm not sure the best way to style it, as I've not seen it done, but you'll probably have to meddle with the css as well.

I'd suggest using dokuwiki's <html>...</html> tag for adding a jumbotron. I've done something similar for my organization's wiki to achieve two columns on our start page.

For example...

<html><div class="jumbotron"></html>

===== Hello, world! =====

This is inside a jumbotron

[[start:more|Learn more]]

<html></div></html>
daviddarts commented 10 years ago

Thank you!

I'm still tinkering to get my logo to display properly in the nav-bar.

To get the jumbotron to work, I had to check the "Allow embedded HTML box" in my Dokuwiki's "Admin > Configuration Settings" and then used this code (borrowed from here):

<html><div class="jumbotron">
 <h1>Hello World!</h1>
 <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
 <p><a href="" class="btn btn-primary btn-lg" role="button">Learn more</a></p>
 </div></html>

It looks like this:

screen shot 2013-11-09 at 10 58 28 pm

apexskier commented 10 years ago

Nice, I forgot about that option in the admin. You can use dokuwiki syntax inside the jumbotron, there just can't be a new section header apparently. See my example here (source).

Feel free to close the issue if you have no more questions.

daviddarts commented 10 years ago

I really appreciate all of your help!

I've tried following your earlier color scheme instructions (quoted below) but haven't been able to change the text color of the wiki's breadcrumbs or the color of the "skip to content" bar using this method. Any tips?

I'd say the best way to change the color scheme is to drop in your own version of bootstrap. You can do that at http://getbootstrap.com/customize/#less-variables. After downloading, replace bootstrap.min.css and bootstrap.css with your new css files.

Thanks,

apexskier commented 10 years ago

I'm not sure why the breadcrumbs aren't working. Have you changed the variables here?

I'd suggest adding your own css to change the skip to content link, or changing the button-info color (because that's what it is).

If you add your own css, you'll want to add a .skip-to-content { ... styles ... } class.

Send me a link or screenshot when you're done! I'd like to have an example of what it looks like.

daviddarts commented 10 years ago

I changed the bootstrap variables as per your instructions but unfortunately couldn’t get the compiled bootstrap css files to override my DokuWiki’s existing internal link color value (#090). In the end, I modified two files and directly added the existing link color variable I wanted (#999999):

/lib/tpl/starter-bootstrap-master/style.ini

; these are used for links
__existing__       = "#999999"

and…

/lib/tpl/starter-bootstrap-master/css/content.css

/* existing wikipage */
.dokuwiki a.wikilink1 {
    color: #999999;

I’m sure there’s a better way to do this but it seems to work. Here’s a screenshot of my site so far…thanks again!

screen shot 2013-11-11 at 11 35 57 am