I have a simple scaffold rails application that is doing validataes_presence_of.
The validation is making each textfield bordered. I just want the error messages to be displayed on top.
How can I make these type of changes or color changes to the validation
Rails applications store their CSS in [application_root]/public/stylesheets. A new rails app will have a file called default.css in this directory. This file contains the following:
#errorExplanation {
width: 400px;
border: 2px solid red;
padding: 7px;
padding-bottom: 12px;
margin-bottom: 20px;
background-color: #f0f0f0;
}
#errorExplanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
background-color: #c00;
color: #fff;
}
#errorExplanation p {
color: #333;
margin-bottom: 0;
padding: 5px;
}
#errorExplanation ul li {
font-size: 12px;
list-style: square;
}
If you play about with the values of some of the parameters here - in particular border - you might find something that looks more to your taste.
Have you checked rails guide about validation errors?
I would suggest having a look at Formtastic. Easy to setup, works great with scaffold-type apps and has some nice clean HTML and CSS.
Related
I need to create an usage instruction document and wanted to use Markdown for it.
To do this I need to create "eye catching" textbox like blocks containing definitions, warnings etc.
examples in this link
how do I do something like that ?
Edit 1:
I discovered callouts, this semms exactly what I need, but I fail to use them in Markdown. Any tips on that?
That is not possible directly in Markdown. However, most Markdown convertes allow you to use HTML and CSS code mixed in the Markdown code. For example:
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;">
I am a success message
</div>
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #a94442; background-color: #f2dede; border-color: #ebccd1;">
I am an error message
</div>
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #31708f; background-color: #d9edf7; border-color: #bce8f1;">
I am a info message
</div>
<div style="padding: 15px; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #8a6d3b;; background-color: #fcf8e3; border-color: #faebcc;">
I am a warning message
</div>
The result looks like that:
Is there a simple way or a plugin to display any custom message on Jenkins pages for all users? I wanted to display important changes or actions directly on Jenkins instead of emailing everyone.
What I mean is to have configurable panel similar to "Jenkins is going to shut down" which I could display and possibly change color. I tried to find plugins for that but found nothing.
Ok, I'll answer my dummy question, maybe someone will look for it later.
There's a plugin for injecting code to page header and footer:
https://wiki.jenkins-ci.org/display/JENKINS/Page+Markup+Plugin
It's not as easy to find as it should be downloaded from creators' page (link in description).
Without an extra plugin: In my case it was simpler as it was enough to add system message (manage jenkins -> configure system -> system message).
You can add CSS to Jenkins\war\css\style.css and use it in system message. I reused "shutdown-msg" which is displayed when jenkins is going to shut down.
#shutdown-msg {
font-weight: bold;
color: white;
background-color: #ef2929;
text-align: center;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 0.5em;
padding: 0.5em;
-moz-border-radius: 0.5em;
}
#yellow-msg {
font-weight: bold;
color: black;
background-color: #eded78;
text-align: center;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 0.5em;
padding: 0.5em;
-moz-border-radius: 0.5em;
}
#green-msg {
font-weight: bold;
color: white;
background-color: #34ba51;
text-align: center;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 0.5em;
padding: 0.5em;
-moz-border-radius: 0.5em;
}
#blue-msg {
font-weight: bold;
color: white;
background-color: #2d72d8;
text-align: center;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 0.5em;
padding: 0.5em;
-moz-border-radius: 0.5em;
}
#grey-msg {
font-weight: bold;
color: white;
background-color: #6b7777;
text-align: center;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 0.5em;
padding: 0.5em;
-moz-border-radius: 0.5em;
}
<div id="shutdown-msg">Red message</div>
<div id="green-msg">Green message</div>
<div id="yellow-msg">Yellow message</div>
<div id="blue-msg">Blue message</div>
<div id="grey-msg">Grey message</div>
On my site, I have a few footer links that are showing the wrong border color for iOS devices when the link is visited. This is happening on Chrome and Safari for iOS.
Desktop
iOS
I searched through my code and I am not setting this style anywhere.
I have tried reproducing this in a fiddle/codepen, but since they don't let you redirect, I can't see what the a:visited looks like for mobile.
Code
.productsalessection {
width: 34%;
padding-top: 10px;
padding-right: 1%;
padding-bottom: 10px;
float: left;
font-family: Lato, sans-serif;
}
.productsalesbox {
width: 100%;
padding: 14px 12px;
float: left;
border-right: 1px solid #e2e2e2;
}
.productsalesbadge {
width: 80px;
height: 100%;
margin-right: 6px;
float: left;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
.productsalesheading {
margin-top: 3px;
color: #444;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
.productsalestext {
font-size: 12px;
line-height: 14px;
color: #777;
}
<a class="w-clearfix productsalessection" target="_blank" href="http://www.google.com">
<div class="w-clearfix productsalesbox">
<div class="productsalesbadge"><img src="http://www.chicmarket.com/images/SJ.svg">
</div>
<div class="productsalesheading">Trusted</div>
<div class="productsalestext">We proudly maintain a strong relationship with our customers.</div>
</div>
</a>
Changing the color of the a:visited works.
a:visited {
color: #C8C8C8;
}
But this solution is not ideal because this will mess with other a tags on my site.
I have also tried.
a:visited {
color: rgba(0, 0, 0, 0.0);
}
But instead of making the color transparent, it just makes the border black.
I don't normally post links to external sites, but if you would like to take a look and see the problem for yourself, you can check it out here.
Is there a simple fix for this that doesn't require me to set the a:visited color for each a tag that I have?
Looks like this was only happening to borders of divs inside of <a> tags on mobile. In order to fix this I had to not only set color: rgba(0, 0, 0, 0.0); for a:visited, but I had to select the specific div that had the border.
a:visited .productsalesbadge {
color: rgba(0, 0, 0, 0.0);
}
This completely removed the purple visited border I was seeing on mobile.
I've been following along with the examples in the book in making a online catalog and am having a couple of discouraging difficulties in Chapter 8 task C: Catalog display.
I have input the code for the stylesheets as instructed but it has created a slightly skewed result as compared to what is shown in the book. Whilst minor and aesthetic in nature its a little shock to my confidence and slightly irritating when trying to carry on through the book.
As you can see the border seems a little confused and the image at the top is covering the header text.
I've been through the code time and time again but can't seem find out where I've gone wrong. Could anybody give me some clues?
Code from application.css.scss (I'm assuming its here)
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 1em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
colour: #bfb;
font-size: small;
}
}
}
}
The only thing that gives me a hint is in sublime text 2 all beginning with a hash (#banner, #notice etc) are green, but #main is not for some reason?
Same happens to me. I am not sure what to make of this problem as the #banner.img should float left. When examining the compiled application.css, I find the following:
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center; }
#banner img {
float: left; }
As shown above, we have a "#banner img {" starting block which is properly closed, and the #banner block is correctly closed just before that on the same line as 'text-align: center;'. Even if I eliminate all other css elements after the #banner and #banner img blocks, the problem persists.
With my limited CSS knowledge, the only semblance of correct positioning I could quickly figure out was to remove the text-align: center from the #banner block, and add some padding, or alternatively, set the left-margin of the #banner.img to -400px or something. It's not very elegant nor perfectly functional (resizing screws it all up).
I need a quick solution to getting some decent layout working within the tabnav widget display area. I'm already using blueprint css for other aspects of the layout but I don't have enough CSS chops to figure out how to get blueprint containers to display within the tabnav's content area.
The tabnav's content area is <div class="main_tabnav_content" id="main_tabnav_content">
and this is the related css:
.main_tabnav {
color: #000;
border-bottom: 1px solid #ccc;
margin: 13px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
.main_tabnav ul {
margin: 0px;
padding: 0px;
}
.main_tabnav li {
display: inline;
overflow: hidden;
list-style-type: none; }
.main_tabnav li span.disabled {
color: #888888;
background: #FAFAFA;
border: 2px solid #DDDDDD;
border-bottom: none;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none;}
.main_tabnav a, main_tabnav a.active {
color: #000000;
background: #EEEEEE;
font-weight: bold;
border: 1px solid #ccc;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none; }
.main_tabnav a.active {
background: #FFFFFF;
border-bottom: 3px solid #FFFFFF; }
.main_tabnav a:hover {
color: #FFFFFF;
background: #CCCCCC; }
.main_tabnav a:visited {
color: #000000; }
.main_tabnav a.active:hover {
background: #FFFFFF;
color: #000000; }
.main_tabnav_content {
background: #FFFFFF;
padding: 20px;
border:1px solid #ccc;
border-top: none;
z-index: 2;
}
I'd like to be able to put some columns inside the main_tabnav_content area like this
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
At the moment the columns are displayed but the main_tabnav_content box doesn't expand around them. Any suggestions for how to get the blueprint layout nested inside the main_tabnav_content area?
From Blueprint: screen.css:
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;}
.last, div.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
and also:
div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
I think if you add this <div class="clearfix"></div> before the end of the main_tabnav_content div it should fix the float problem.
Do you have the css for the span-5 & colborder classes? It sounds like it might be a float problem. Basically what's happening is when you add the columns to the main_tabnav_content div, the div doesn't expand, right?