Questions about Bootstrap
Re: Questions about Bootstrap
Ah ok, I was thinking templates or lots of mini legos, I mean mini templates. XD Templates have never been my thing, since I'm more into adding css classes with names I can recall as needed. I guess there are a lot of "shortcuts" out there these days. (and here I am going in the opposite direction and diving deeper into writing my own codes lol)
Re: Questions about Bootstrap
LEGOS -coughs- But yeah, WP templates are confusing as heck to me still despite using it for a while for one of my sites that I used for my personal one back in 2009.
But the best thing though is that all you need to search is "bootstrap wordpress themes" and download one of those. Boom done. Just find one you like and can mess with the CSS bits after xD
But the best thing though is that all you need to search is "bootstrap wordpress themes" and download one of those. Boom done. Just find one you like and can mess with the CSS bits after xD
I accept your challenge, "high prince", but I am no general.
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Questions about Bootstrap
@Camy: you might have just solved the huge problem I've had with my Wordpress blog since...well, ever. Been struggling trying to make my own theme (and make it responsive)...maybe I can give somebody else's Bootstrap WordPress theme a whirl!
Re: Questions about Bootstrap
There you go XD Plus it'll help to understand too what does what if you want to experiment with it in another folder or site.
I accept your challenge, "high prince", but I am no general.
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Questions about Bootstrap
Been toying around with Bootstrap for about an hour, and so far I've figured out...uh, how to change the navbar color. xD Oh, and how to rewrite the text. It's something ^o^
One thing I keep running into: how do you get the "ul" and "li" part of the navigation to behave itself? I put my nav links in the right spot on the navbar (or so I thought), but it keeps putting the navigation right below the site title in a scrunched-up mess. Changing the usual list style rules stuff in bootstrap.css doesn't seem to have an effect on the list items' display.
(I don't often use ul and li tags for navigation--it kinda bugs me--so I think there's probably something simple I'm missing.)
One thing I keep running into: how do you get the "ul" and "li" part of the navigation to behave itself? I put my nav links in the right spot on the navbar (or so I thought), but it keeps putting the navigation right below the site title in a scrunched-up mess. Changing the usual list style rules stuff in bootstrap.css doesn't seem to have an effect on the list items' display.
(I don't often use ul and li tags for navigation--it kinda bugs me--so I think there's probably something simple I'm missing.)
-
- Communications Staffer
- Posts: 1078
- Joined: Sat Oct 13, 2012 7:55 pm
- Location: Canada
- Contact:
Re: Questions about Bootstrap
Maybe you're missing a class? If you show me your HTML I can help you troubleshoot it.
Join in the Tale, in the Blight, of Conquest and Lies
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Questions about Bootstrap
This seems to be where the trouble is--not really sure if I'm using the correct class or what. By using the "navbar-nav" class on the UL instead of the actual links, I was able to get the links to display beside the site title, but I still can't change their color or make them sit vertically centered in the navbar.
(Also, I'm using the Jumbotron template and am having trouble getting a picture to display in the jumbotron itself. CSS doesn't like absolute links, but that's the only way I can figure to link to the pic from within the /css/ folder of Bootstrap. I had this same problem with Wordpress -_-)
Many many many thanks in advance for any help! Frameworks are REALLY cool but my brain apparently has a hard time operating inside the box. xD
Code: Select all
<a class="navbar-brand" href="index.php">Cleveland County Choral Society</a><ul class="navbar-nav"><li><a href="about.php">About Us</a></li><li><a href="concerts.php">Concerts</a></li><li><a href="media.php">Media</a></li></ul>
Many many many thanks in advance for any help! Frameworks are REALLY cool but my brain apparently has a hard time operating inside the box. xD
-
- Communications Staffer
- Posts: 1078
- Joined: Sat Oct 13, 2012 7:55 pm
- Location: Canada
- Contact:
Re: Questions about Bootstrap
Your ul is missing the nav class. It should say
I'm trying it on my work PC (shhh) and that got the link to display properly. If you want you can use the navbar example in Components and take out the code you don't need.
To make changes to the CSS, make a custom.css file in the css folder (you can name it anything you want really) and link it in the head of your page, below the Bootstrap stylesheet(s). That way your CSS will have precedence. After that it's the same CSS as ever.
I'm not quite sure what you mean by a picture in the jumbotron not working, though. Do you mean like a background picture for it instead of the grey, or something else?
Code: Select all
<a class="navbar-brand" href="index.php">Cleveland County Choral Society</a><ul class="nav navbar-nav"><li><a href="about.php">About Us</a></li><li><a href="concerts.php">Concerts</a></li><li><a href="media.php">Media</a></li></ul>
To make changes to the CSS, make a custom.css file in the css folder (you can name it anything you want really) and link it in the head of your page, below the Bootstrap stylesheet(s). That way your CSS will have precedence. After that it's the same CSS as ever.
I'm not quite sure what you mean by a picture in the jumbotron not working, though. Do you mean like a background picture for it instead of the grey, or something else?
Join in the Tale, in the Blight, of Conquest and Lies
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Questions about Bootstrap
Ah, ok, I'll try that change and see how it works. (Edit: it works! Now to make the font big enough so that the text isn't hanging out awkwardly at the very top of the screen, lol.)
I tried making the custom.css file but it didn't seem to affect the page...might not have been using the right selectors. (The Bootstrap CSS file...I have never seen such a giant CSS file with so many IDs and classes in all my life!! LOL)
In terms of the jumbotron, I was wanting a background picture for it--just can't get it to display because I actually don't know how to link to things that aren't in the same folder. ^_^; I usually use absolute links but CSS does not like them, LOL
Thank you so much, Nyx! I promise I'm not always this derpy about code, xD
I tried making the custom.css file but it didn't seem to affect the page...might not have been using the right selectors. (The Bootstrap CSS file...I have never seen such a giant CSS file with so many IDs and classes in all my life!! LOL)
In terms of the jumbotron, I was wanting a background picture for it--just can't get it to display because I actually don't know how to link to things that aren't in the same folder. ^_^; I usually use absolute links but CSS does not like them, LOL
Thank you so much, Nyx! I promise I'm not always this derpy about code, xD
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Questions about Bootstrap
Update: Still trying to puzzle through this code...I did figure out how to make the custom.css file work (not sure what I did, but it magically started working), and made some cosmetic changes, but I still have some weird code bugs I'm trying to squash. xD
One issue is that I still can't make the navigation "ul" behave itself, as seen below: I want the list items to be beside the site title rather than hanging out on a line below it, but I've been scratching my head and Googling for a week with no solution. (It looks even more awful when you shrink the window horizontally--the links just go everywhere in no certain order. >_<)
Second issue is the very very plain jumbotron, below: I have a suitable background image, but I can't figure out how to link to it because absolute links don't work in CSS. All the CSS files are in a "css" folder within the "bootstrap-dist" folder on my hard drive, while both the test HTML file and the desired background image is two folder levels above it.
One issue is that I still can't make the navigation "ul" behave itself, as seen below: I want the list items to be beside the site title rather than hanging out on a line below it, but I've been scratching my head and Googling for a week with no solution. (It looks even more awful when you shrink the window horizontally--the links just go everywhere in no certain order. >_<)
Second issue is the very very plain jumbotron, below: I have a suitable background image, but I can't figure out how to link to it because absolute links don't work in CSS. All the CSS files are in a "css" folder within the "bootstrap-dist" folder on my hard drive, while both the test HTML file and the desired background image is two folder levels above it.