I'm new to struts to How to decorate the action message and action errors in struts2 jsp page?
<s:actionmessage/>
<s:actionerror/>
you can use the css styles as well as jquery theme attribute to decorate your action error and action message.
<div class="error"><s:actionerror theme="jquery"/></div>
<div class="message"><s:actionmessage theme="jquery"/></div>
.message li
{
font-size: 14px;
color: #000066;
text-align: center;
list-style: none;
font-family: Trebuchet MS,sans-serif,inherit,Arial,monospace;
}
.error li
{
font-size: 14px;
color: #990000;
text-align: center;
list-style: none;
padding-right: 50px;
}
Hi here i am posting solution for your problem if you want your action messages and error messages to decorate use this code
<div id="sucessMsg"><s:actionerror /></div>
sucessMsg is the class that is using by struts2 internally so override this so kindly put the below code inside the css
#sucessMsg {
text-align: center;
font-weight: bolder;
color: #6A2A91;
list-style: none;
margin: auto;
}
#errorMsg {
text-align: center;
font-weight: bolder;
color: red;
list-style: none;
width: 350px;
margin: auto;
}
You should view the HTML source after it is rendered to see the CSS classes and HTML structure that Struts uses to render the message. You can also look in the template files.
By Default struts renders each action message as follows:
<ul>
<li><span class="actionMessage">${message}</span></li>
</ul>
Every message will have a <li><span class="actionMessage">${message}</span></li>.
You can create CSS for actionMessage or change the template file to render these however you want.
The template files for these are located in:
/template/simple/actionerror.ftl
/template/simple/actionmessage.ftl
Field Error might be useful to you as well:
/template/simple/fielderror.ftl
note: if you are using the xhtml theme those files may be located in that folder under template
Related
I want to change the colors and style a dropdown in rails to match the rest of my web app styling. I am using Rails, Bootstrap, and select2 and I have no idea where to add css and how to even begin accessing the the different parts of the dropdown so that I can color them and make them fit with the rest of the design on the app.
this is the implementation of the dropdown
<%= collection_select(:id, :name, #product, :id, :name,{:include_blank => true},{class: "js-example-basic-single" }) %>
Please advise me on how to accomplish styling this item, thanks.
I'm not sure what your question is so I will try to answer it as best as I can. I believe you should be adding your CSS to the application.css file that should be under app\assets\stylesheets. Then if you want to customize all your dropdowns the same you can use the select tag in css. Here is an example
select {
position: relative;
display: inline-block;
cursor: pointer;
text-align: center;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
border-radius: 3px;
border: none;
background: #f1f1f1;
padding: 2px;
}
select:hover {
background-color: dodgerblue;
}
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Quick update
adding the below worked for me... suprising this isnt in the bootstrap gem
select {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
Trying to get a logo onto a website. Eventually use it as a link to the main page. But it wont even show up when I use css. It does link when I use HTML So i know its not the image. CSS is in its own folder, and Image is in its own folder. So I dont think i have the url incorrect.
CSS
.logo {
background-image: url(../images/logo.png);
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
width: 1000px;
height: 100px;
}
HTML
<body>
<div class="logo">
</div>
</body>
Feel like Ive tried everything.
HERE IS THE ANSWER
css
.logo {
background: url(../images/logo.png) ;
background-size: 200px 200px;
width: 200px;
height:200px;
}
Try changing background-image to background and adding quotation marks.
.logo{
background: url('../images/logo.png');
i am new in jquery, i am using rails 3.2.19 and jquery-ui-rails 5.0.0.
I am create button using css class="button", when ajax call it override css property
like this class="button_new ui-button ui-widget ui-state-default ui-corner-all how to avoid this.
.button_new {
background: #3b5998;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color: #ffffff;
font-size: 11px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.button_new:hover {
border-top-color: #edf0f5;
background: #edf0f5;
color: #ff0000;
}
.button_new:active {
border-top-color: #dfe7eb;
background: #dfe7eb;
}
First, I would add an ID to the button so we don't override some instances where you want jQuery UI to set its own classes.
<button id="my-button" class="button">My Button</button>
Then you can load your own jQuery script after jQuery UI is executed and use something like this:
$(document).ready(function() {
// remove jQuery UI classes
$('#my-button').removeClass('button_new ui-button ui-widget ui-state-default ui-corner-all');
// add button class back
$('#my-button').addClass('button');
});
This will replace the auto-generated classes with your classes, while not conflicting with other instances where you need jQuery UI to exhibit this behavior.
My image sprite works fine as long as I delete my hover text links on the same css page. The hover in the image sprite and the hover in the text link style seem to be conflicting. How do I get the text link styles back? Do I use a separate css for the text link, will it still conflict?
HTML
><div id="page-bg"><img src="x" width="100%" height="100%" /></div>
<div id="container">
<div id="header1">
<ul id="navlist1">
<li id="login"></li>
<li id="getmail"></li>
<li id="quotebtn"></li>
</ul>
</div>
</div>
CSS
>body { color:#333; font-size: 9px; }
#page-bg {
position:fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#container {
position: relative;
background: #C35A26;
width: 900px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
#header1 {
width: 900px;
height: 232px;
position: relative;
background-image:url(x)
}
#navlist1 {position:relative;}
#navlist1 li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist1 li, #navlist1 a{height:44px;display:block;}
#login{left:0px;width:94px;}
#login{background:url('x') 0 0;}
#login a:hover{background: url('x') 0 -363px;}
#getmail{left:94px;width:93px;}
#getmail{background:url('x') -94px 0;}
#getmail a:hover{background: url('x') -94px -363px;}
#quotebtn{left:775px;width:125px;}
#quotebtn{background:url('x') -775px 0;}
#quotebtn a:hover{background: url('x') -775px -363px;}
a {
font-family: Arial, Helvetica, sans-serif;
font-size:0.75em;
color: #900;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #900;
}
**a:hover {
text-decoration: underline;
color: #F00;**
}
a:active {
text-decoration: none;
color: #F60;
I got it to work now. All I did was open a blank page and added css to the page properties for links and headers, etc., to see how they layed out the css and re-arranged my css to be like the one that dreamweaver makes as far as where the tags are in order. Anyway, it fixed the problem.
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.