It's the first time I use foundation for my Rails project. In the past I only used Bootstrap.
I followed the steps described here http://foundation.zurb.com/docs/gem-install.php#simple2 and I can't manage to create a simple nav ( http://foundation.zurb.com/docs/navigation.php ).
It applies some style, but not fully (for example, it's not black).
I followed the automatic and the manual install as well. The funny thing is that some styles work. For example, applying style "button" to a link works.
I tried many things. Any ideas?
It looks like the link you supplied is outdated (http://foundation.zurb.com/docs/gem-install.php#simple2)
Here are the updated instructions:
http://foundation.zurb.com/docs/rails.php
Related
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I have a problem when using md-buttons, md-select or md-field in a vue project created by the vue CLI from the webpack template.
I have a MWE of the situation here, featuring the three introduction examples from the vue material website on each type of form item combined with the vue-cli template. It doesn't look very nice, but if you run it it breaks down as follows:
The first row are a set of radio buttons; however, the buttons are invisible (yet you can click on them, get a ripple effect and the correct value is recorded by vue)
Next is a select box; however, the background of the box is transparent.
Finally there are a few text boxes; however, the outlines seem to be transparent.
I can solve the issue with the select boxes by inserting a style block
<style>
.md-menu-content-container {
background-color: white;
}
</style>
and that will make md-select work as expected. I still decided to include it here, because it seems related to the other issues and may have a common origin.
Unfortunately, I have not figured out how to solve the other issues yet or which attribute to modify to "patch" the problem. So any help or pointers are highly appreciated.
It appears that when using he latest version of vue-material, the default template has to be loaded explicitly. Hence adding
import 'vue-material/dist/theme/default.css'
to the main.js file from vue-cli seems to fix this issue.
Looked around without much luck.
In short, I purchased a wrap that has almost 30k lines of css. I want to get just the needed css for 1 page which will probably be 1000 lines of css.
Found a couple plugins to speed it up, but it's still a very manual process grabbing each class 1 at a time.
Is there anything out there to make it easier?
The bad part, they copied all the bootstrap code into a new file and made the changes there. 90% is the original bootstrap css.
Found the Dust-me firefox plugin, but it just lists the used css classes, so it's still a manual process going to their css and copying each class 1 at a time and having to make sure it's not the same as the bootstrap classes.
With all the wraps out there, I would figure this is somewhat common, since most are pretty messy. Any suggestions would be great. Thanks ahead of time.
Edit: Try an online tool like unused-css to isolate just those styles used on the page.
To isolate non-bootstrap code, determine the bootstrap version they used; you can run a diff on your wrap vs. the bootstrap distributed file. Try an online app like diffchecker and hopefully most of it was just untouched bootstrap css like you said.
I am trying to implement bootstrap in my current code which is built over existing codebase for few years. The current codebase has several stylesheets and all.
I am using nav-pills and nav-tabs from bootstrap. However, icnluding the bootstrap.css, bootstrap.responsive.css messes up with the current layout elements like header, footer, input etc. I have tried removing some of the properties from bootstrap css files but they are over 7000 lines of code and it is not a good idea to go through every line of code in bootstrap.
Is there a version of bootstrap or way where i can select which component of bootstrap i want to use and my css files are populated accordingly. For eg i want nav-pills and nav-tabs and i believe including lal dependencies code should not be over 50-100 lines. Which is easy to debug and modify as well.
I believe this is what you are looking for:
https://getbootstrap.com/customize/
You can deselect the base CSS to not have it interfere.
You should use the LESS Code from the Bootstrap GitHub Repository. Just download the latest tagged version. You also need a LESS compiler.
In addition you should first include your bootstrap file and afterwards your own stylesheets to make sure it overrides if necessary.
You can customize your 'needs' on project page.
http://twitter.github.com/bootstrap/customize.html
I installed the latest version of Wordpress and added the WP-Syntax plugin (and also the Markdown Extra plugin, but I think it's unrelated to this issue).
It works perfectly with both themes that ship with Wordpress: looking good using WordPress Default 1.6 and looking equally good with the WordPress Classic 1.5 theme.
However it doesn't work with the excellent LightWord theme, which I would like to use. The code box looks strange with the right border at the end of the actual code:
My thoughts:
I have tried investigating this with Firebug without any success. The CSS from the WP-Syntax plugin should be the same in all three theme cases. So the fact that it looks wierd with this theme has to do with some inherited CSS property from the LightWord theme.
This in turn probably means that the WP-Syntax plugin should reset something more for its CSS to work correctly.
Help!
Advanced CSS isn't something I'm good at. But I would very much like to resolve this problem as soon as possible. I'm also curious from a technical view point what could be causing this behavior? I hope someone with good CSS skills will be able to help out!
We (you if you want to, me if you don't feel like it) could then file a bug report in the appropriate place, to get these components working together.
To resolve this I understand you need more than screenshots. I have a link with the problem theme, which could be used to investigate further.
Web site where the problem may be experienced (Taken down as the problem is solved)
Edit: In response to a comment I'm also including a link to the working web site using the classic theme and the same plugin setup: Link to a working theme with these plugins (Taken down as the problem is solved)
Thank you for reading!
Summary of problems I'd like to solve:
What's the best way to get rid of the right and bottom inner border in the code box? I first noticed the right border, but the bottom border is also an eye sore.
The code box right border isn't visible. It's due to .wp_syntax {width:100%;} and if I set it to 99% it's visible again. Do you consider this to be a problem with the theme or the plugin?
Making changes in the theme (style.css) or the plugin (wp-syntax.css) would be preferred if that's possible, so one of them could be standard. But which one? And how?
The problems you are having are due to the stylesheets of WP-Syntax and LightWord interfering with each other. I don't really think that the problems are with the theme or the plugin, they are just down to how the two interact with each other.
To make all of the required changes, ideally you would edit styles in both wp-syntax.css and style.css. You can however cheat a little.
In style.css add the following:
.wp_syntax { width:auto; }
.wp_syntax table { border:0 !important; }
.wp_syntax table td { border:0 !important; }
These changes should solve all of the problems, with the benefit of keeping all of the changes localised to a single file (style.css of the LightWood theme). The other tables in the example should all remain unchanged as well.