Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Josh Hicks
14,146 PointsHow can I change the style of the top bar without Sass?
I have a foundation project that needs very specific topbar styles. However I don't have the settings.scss file to edit. Can I just edit the foundation.css to make changes?
5 Answers
Ken Alger
Treehouse TeacherJosh;
Yes, but a better solution is to apply your custom styles in a different style sheet that is loaded after the Foundation styles. One of the great features about the cascading of CSS. It gets to be a bit of a maintenance nightmare otherwise.
Make sense?
Ken
Ken Alger
Treehouse TeacherJosh;
Yes, that is very possible. I would recommend perusing the Modular CSS with Sass course with Mr. Hernandez, and the Advanced Sass course with Mr. Sande. They really go into detail about best practices for what it sounds like you are wanting to do. It will probably be a bit of overkill for your current project, but great info none the less.
Ken
Josh Hicks
14,146 PointsYes, that does make sense, however I'm having trouble finding the right rules to edit. In Sass it's super easy, but the CSS is more obscure. Thanks
Ken Alger
Treehouse TeacherJosh;
One way to, relatively, quickly find the elements is to use your browser's development tools (Dev Tools). Each browser's tools are slightly different and it is well worth the effort to get to know how to use yours. I predominantly use FireFox on Windows. To open the DevTools I hit CTRL-SHIFT-K. There is an Inspector tab that allows one to inspect the elements of the page and in doing so shows all of the CSS rules that are being applied (in order) to that element.
Also, since you are using the Foundation framework's Top Bar nav, if you look on the documentation page you will see a section called Available SCSS Variables on the page which lists out all of the pertinent variables they use for Top Bar.
Hope it helps,
Ken
Josh Hicks
14,146 PointsKen,
I would love to use the settings.scss file instead however, the project I'm working on only has the standard foundation css included. I can't seem to find any good tutorials for adding the Sass files to an existing project. Also I use the Scout App for Sass usually, do you have experience with that and Foundation? I can't seem to find any info on that either.
Thanks, Josh
Ken Alger
Treehouse TeacherJosh;
Sorry, I don't use Scout. Tried it, it wasn't for me. Use Foundation for almost all of my projects. Without knowing more about how your project is designed it is a bit difficult to say exactly how to add things. Do you have the freedom to add a new stylesheet to the site? Can you add it after the Foundation code is loaded so that your styles for Top Bar take precedence over the default settings?
Ken
Josh Hicks
14,146 PointsThe file structure of my project is as follows:
css/
-foundation.css
- foundation.min.css
- gallery.css
- normalize.css
js/ - ...
-gallery.html
I have linked the foundation.min.css, normalize.css, and my custom gallery.css in the gallery.html file. I would like to add Sass into this structure so I would have the settings.scss available to edit. Or at the very least edit my gallery.css to change css rules. Have you tried that?