CSS 3 and Symfony 2
Symfony 2 and CSS 3 is the subject of this how to. Styling a project can make the difference between buy or not to buy. so even if you have the best functional application, you need to css style it nicely to be able to attract people to it. We will go through styling your project from ground and also some additional tips that I have learn along my day to day work with Symfony 2.
Note: I have created a few more Symfony 2 posts, saying how to install a server and also about how to change a Symfony 2 project from development to production environment. our you can check all of my Symfony related posts here.
Well, when you are going to style a project the first thing is to add the style sheets. In Symfony 2 for instance in my base.html.twig (Find it in SymfonyProject/app/Resources/views) I has this in my header:
{% stylesheets
'@OsdRetireBundle/Resources/public/css/main.css'
%}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}Where @OsdRetireBundle is my @MyProjectMyBundle and then /Resources/public/css/main.css is the path to the actual css style sheet. Now we have added the reference to a style sheet to the project. But the style sheet does not exist in our Symfony 2 project. So we create it, and for that we create the folder called public. If it does not exists in SymfonyProject/src/Osd/RetireBundle/Resources/public/css Osd is my project name, RetireBundle is the name of my bundle. We create it and do the same also with css inside it. Then create your style sheet page in my case main.css. Now we have created our style sheet in Symfony 2 the rest is the same as any other css style sheet, I have this form:
<div id="search-box">
<fieldset><legend>Select the search criteria</legend>
{% block form_row %}
{% spaceless %}
<form action="{{ path('osd_retire_searchpage') }}" method="post"
{{ form_enctype(searchWorkerForm) }} >
{{ form_row (searchWorkerForm._token) }}
<div id="omang-label">
{{ form_label(searchWorkerForm.omang) }}
{{ form_errors(searchWorkerForm.omang) }}
{{ form_widget(searchWorkerForm.omang) }}
</div>
{% if searchWorkerForm.workerTitle is defined %}
<div id="title-worker">
{{ form_label(searchWorkerForm.workerTitle) }}
{{ form_errors(searchWorkerForm.workerTitle) }}
{{ form_widget(searchWorkerForm.workerTitle) }}
</div>
{% endif %}
<div id="name-worker">
{{ form_label(searchWorkerForm.workerName) }}
{{ form_errors(searchWorkerForm.workerName) }}
{{ form_widget(searchWorkerForm.workerName) }}
</div>
<div id="surname-worker">
{{ form_label(searchWorkerForm.workerSurname) }}
{{ form_errors(searchWorkerForm.workerSurname) }}
{{ form_widget(searchWorkerForm.workerSurname) }}
</div>
<div id="Worker-status">
{{ form_label(searchWorkerForm.aIdWorkerStatus, 'Worker Status') }}
{{ form_errors(searchWorkerForm.aIdWorkerStatus) }}
<div id="status-worker">{{ form_widget(searchWorkerForm.aIdWorkerStatus) }}</div>
</div>
<div id="birthday">
{{ form_label(searchWorkerForm.birthDay) }}
{{ form_errors(searchWorkerForm.birthDay) }}
<div id="worker-birthDay">{{ form_widget(searchWorkerForm.birthDay) }}</div>
</div>
<div id="Date-of-employment">
{{ form_label(searchWorkerForm.dateOfEmployment) }}
{{ form_errors(searchWorkerForm.dateOfEmployment) }}
<div id="first-appointment">{{ form_widget(searchWorkerForm.dateOfEmployment) }}</div>
</div>
<div id="File-number">
{{ form_label(searchWorkerForm.fileNumber) }}
{{ form_errors(searchWorkerForm.fileNumber) }}
<div id="fine-number-field">{{ form_widget(searchWorkerForm.fileNumber) }}</div>
</div>
<div>
<div id="form-submit">
{{ form_widget(searchWorkerForm.search) }}
</div>
</div>
</form>
{% endspaceless %}
{% endblock form_row %}
</fieldset>
</div>Note: Of curse this is not the only content of the project.
And the style for it are these:
html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
font-family: Tahoma, Geneva, sans-serif;
}
html, body {
margin:0;
padding:0;
height:100%;
}
body {
padding: 0 2em;
background-size: cover;
/*background-size: cover;*/
background: #86c9f5 no-repeat ;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #589ac4 0%, #000000 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #589ac4 0%, #000000 100%);
/* Opera */
background-image: -o-linear-gradient(top, #589ac4 0%, #000000 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom
, color-stop(0, #589ac4), color-stop(1, #000000));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #589ac4 0%, #000000 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #589ac4 0%, #000000 100%);
}
table {/* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
margin-left:auto;
margin-right:auto;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
a img {
border: 0;
}
#separator {
padding: 0.5em;
}
.content-box
{
background-color: #fff;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
padding-top: 2em;
padding-bottom: 2em;
text-align: center;
position: relative;
}
a{
}
a:hover,
a:focus,
a:active {
color: #1982d1;
/*font-weight: bold;*/
}
/* Headings */
h1,h2,h3,h4,h5,h6 {
clear: both;
}
/*Site title, titulo del sitio*/
#site-title {
text-align: right;
padding-bottom: 0.1em;
padding-right: 1em;
}
#site-title a {
color: #660066; /*#ED6464*/
font-size: 24px;
font-weight: bold;
line-height: 28px;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
}
#page-title div{
float: left;
width: 10em;
text-align: right;
clear: left;
margin-right: 5px
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: darkblue; /*#1982d1*/
}
/*Menu*/
#nav{
padding-bottom: 1em;
text-align: center;
}
#nav a{
color: crimson;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 17px;
}
#nav a:hover,
#nav a:focus,
#nav a:active {
color: #1982d1;
font-weight: bold;
}
/*Footer*/
#footer-area a {
color: #CCCCCC;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
}
#footer-area a:hover,
#footer-area a:focus,
#footer-area a:active {
color: #1982d1;
font-weight: bold;
}
.data-background{
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
background: -webkit-linear-gradient(#CCCCCC, #EEEEEE);
margin: auto;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 24px;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
position: relative;
width: 85%;
}
/*Form*/
fieldset {
text-align: center;
}
form label {
float: left;
width: 40em;
text-align: right;
clear: left;
margin-right: 15px;
}
input {
display: block;
margin:5px 0;
clear:right;
}
#worker-title {
width: 46em;
margin:5px 0;
}
#status-worker {
float: left;
margin:5px 0;
}
#worker-surname-field
{
float: left;
}
#worker-birthDay
{
float: left;
}
#first-appointment {
float: left;
}
#fine-number-field {
float: left;
}
#form-submit {
clear:both;
}
#search-results {
width: 100%;
margin: 0 auto;
}
Symfony 2. Retirement system search
The end result is the for as shown in the next image.
This is it for today, as you might have appreciated creating styles in Symfony 2 is very possible.
Thank you for your time.