I'm writing a rails app and in one of my views, I have a signup form. I'm using a bootstrap theme and in the textfields, when something is typed in, it is grey and hard to read. Without the theme the text is black and looks fine.
I've tried to edit the colors in the textarea classes of the theme but that hasn't worked.
What do I need to change to make the text a different color?
You need to apply a css style to the textfield to make the text black. Try something like...
input {
color:black;
}
Put that code in a css file in your assets/css directory. Make sure this css is getting loaded after bootstrap so that it overwrites it. I find Google Chrome's inspector tool handy for see what styles are being applied.
Related
I'm trying to change my link_to text color. I've seen numerous questions and articles where people can change the link_to text color without the !important property. But my links' colors won't change without it. Was this because of a recent change, or am I doing something wrong?
I did notice that when I refresh the page, for a split second, the links are changed to the colors I've assigned to them, but then immediately changes back to the default gray color.
Recreating the issue
Run rails new app.
Run cd app
Run rails g scaffold Car model:string.
Add the following code to the app/assets/stylesheets/applications.css file.
.test {
color: red;
padding: 50px;
}
Add a link to the app/views/layouts/applications.html.erb file (within the body tag).
<%= link_to 'Testing', nil, class: "test" %>
Result
Testing is the link's color I'm trying to change. As mentioned, the text color of the link doesn't change, however, the padding is successfully applied.
While inspecting, I also noticed that the color property is lined out.
When using scaffold, it's important to be aware of what scaffold creates. For me personally, scaffold is nice for quick basic crud stuff. However it comes with a lot.
As for your issue scaffold creates a scaffold.scss which overwrites your styling. Try commenting it out and then it should work(It did for me!).
Fastest way to find out where this one is coming from is to click on the funnel icon, next to red;. It will filter you every place that color is applied to the element. There should probably be some !important declared below your CSS but it's still takes the upper hand.
When it's stroked, it's saying that it's overwritten elsewhere, it's a wrong CSS property or alike.
This issue has nothing to do with Rails or link_to. You are simply trying to style your a.test element.
You definitely do not need to use important ESPECIALLY for a new app. The CSS cascade can get complex, but this shouldn't be a complex situation.
CSS is based on both a cascade and specificity. You probably have other CSS (above the part you pasted in the inspector) that is overwriting the .test class, or something in the CSS is being more specific (since you're only styling .test.
Since this is a link (a) you should try to do a.test in your CSS, and you may also need to also style :hover and :visited pseudo classes.
Default text in TinyMCE editor is black until styles are applied either via the plugins or my custom CSS. Once saved and viewed, default text-color is #555, as defined in my primary stylesheet.
I would like TinyMCE to display #555 as the default, to assist users in selecting compatible colors when formatting text via the editor.
Previous questions/answers on StackOverlow (c.2013) refer to a CSS file that no longer exists in the TinyMCE package. I've tried changing the default "color" in content.min.css without result.
I've also tried adjusting the CSS that controls the data-entry forms BUT this is not working, eg.
#ppform textarea {color:#555}
<table id="ppform">
<tr><td><textarea id="ppmce" name="entry">
Is is possible? What else can I try?
If you want to impact the content in the editor via CSS you can pass CSS to the editor via the content_css configuration setting:
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
I want to add a glassdoor icon. You can find my site at braunweiss.net. My theme uses fontawesome and it currently doesn't support a glassdoor icon. So I tried adding an image in place using the below code:
.social-menu li a[href*="glassdoor.com"]::before {content:url(http://braunweiss.net/wp-content/uploads/2017/07/glassdoor-2-1.png);}
However, it looks bad, it's not customizable, and it doesn't change when it is hovered like a font. I've read of using svg in inline css but cannot figure out how to do it. Here's where I got the glassdoor icon I used: https://materialdesignicons.com/ (scroll down, the icons are in alphabetical order).
Is there a better way to get the icon to show up? I can only customize css or add codes to my theme's php files on wordpress. Thanks.
Have you tried using an SVG?
https://github.com/FortAwesome/Font-Awesome/issues/6422 (SVG LINK IS IN HERE)
https://css-tricks.com/using-svg/ Icon SVG how-to.
I have my own website and I am currently using the Vulcan template on Wordpress and I want to change a texts font color. Is there a way to do this?
Yes of course, if there is a will there is a way.
Are you changing an element inside a post?
Open up your page/post editor and switch the editor to "Text" mode (look to the far right on the editor) and keep reading.
Are you changing a "hard-coded" element in a file?
Open up the file in question with your favorite text-editor and keep reading.
Changing multiple elements?
Look into using CSS classes (https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors). Add your classes to your HTML elements using the class attribute.
Changing just one element?
Look into using the style (http://reference.sitepoint.com/html/core-attributes/style) attribute on your element.
In a Rails app I am using Twitter Bootstrap as a starting point. Twitter Bootstrap uses some of the HTML5 Boilerplate reset which includes this gem:
#media print {
* {
color: #000 !important; /* Black prints faster: h5bp.com/s */
}
}
(note the linked article is from 200-effing-8)
My app outputs PDF using pdfkit/wkhtmltopdf and due to the above declaration all pdf output is black on white. The whole point of pdfkit/wkhtmltopdf (to me, in this app) is for PDF output to match the screen.
Is there any way for me to override this declaration in my stylesheets after Bootstrap is imported? I want it to be something along the lines of "auto" but that doesn't appear to be valid.
I can, of course, comment out the line in Bootstrap, but I'd rather avoid changing the source if I can (since I'm bringing it all in via the bootstrap-sass gem). I could also tell pdfkit/wkhtmltopdf to not use "print" stylesheets, but that creates different problems.
I've tried setting it to "inherit" but functionally that isn't what I'm after, and it doesn't seem to work anyway.
Thanks.
I would comment it out in the bootstrap css. The asterisk selector is a wildcard which will set all text content to black. Otherwise you would have to write out a lot of individual CSS rules using id or class to override. If most of the text content on your site is already set to black or a dark enough color, then you don't need that CSS print rule.