What we will do in this part of the tutorial is rather quicklsrc/AppBundle/Resources/public/css/screen.css file colors #’s to match those from the src/AppBundle/Resources/public/css/bootstrap.css file.

The color to find is

ae0800

and replace with color #:

337ab7

The completed file should now look like this:

/* src/AppBundle/Resources/public/css/screen.css /*
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
 
body { line-height: 1;font-family: Arial, Helvetica, sans-serif;font-size: 12px; width: 100%; height: 100%; color: #000; font-size: 14px; }
.clear { clear: both; }

#wrapper { margin: 10px auto; width: 1000px; }
#wrapper a { text-decoration: none; color: #337ab7; }
#wrapper span.highlight { color: #337ab7; }

#header { border-bottom: 1px solid #ccc; margin-bottom: 20px; }
#header .top { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
#header ul.navigation { list-style: none; text-align: right; }
#header .navigation li { display: inline }
#header .navigation li a { display: inline-block; padding: 10px 15px; border-left: 1px solid #ccc; }
#header h2 { font-family: 'Irish Grover', cursive; font-size: 92px; text-align: center; line-height: 110px; }
#header h2 a { color: #000; }
#header h3 { text-align: center; font-family: 'La Belle Aurore', cursive; font-size: 24px; margin-bottom: 20px; font-weight: normal; }
 
.main-col { width: 75%; display: inline-block; float: left; border-right: 1px solid #ccc; padding: 20px; margin-bottom: 20px; }
.sidebar { width: 25%; padding: 10px; display: inline-block; }
 
.main-col a { color: #337ab7; }
.main-col h1,
.main-col h2
    { line-height: 1.2em; font-size: 32px; margin-bottom: 10px; font-weight: normal; color: #337ab7; }
.main-col p { line-height: 1.5em; margin-bottom: 20px; }
 
#footer { border-top: 1px solid #ccc; clear: both; text-align: center; padding: 10px; color: #aaa; }

Then there quite a few things to change in the app/Resources/views/base.html.twig file. For now I’m doing this as a quick way of getting started. So here’s my new file:

    
        
        {% block stylesheets %}
            
        {% endblock %}
        

    
	

		

  			
				
	
  		

			
				
				
	
 
    	
{% block header %}
	

		

	    
{% block blog_title %}{% trans %}blog.title{% endtrans %}{% endblock %}
                
{% block blog_tagline %}{% trans %}blog.tagline{% endtrans %}{% endblock %}
             
	     		
	
{% endblock %}

	     	
{% block navbar %}

{% endblock %}
	     	
			

    
    
		
				



      
        

            {% block body %}{% endblock %}
        
        
                {% block sidebar %}{% endblock %}
        

        
    

   
   

  				
   

      
         
    

	  	{% block footer %}
	  	    {% trans %}footer.copy{% endtrans %} © {{ "now" | date("Y") }} {% trans %}footer.mail.title{% endtrans %}
	  	    
	  	    

	  	    {% trans %}legal.terms{% endtrans %}  |  
	  	    {% trans %}legal.disclaimer{% endtrans %}  |  
	  	    {% trans %}legal.privacy{% endtrans %}  |  
	  	    {% trans %}legal.trademarks{% endtrans %}  |  
	  	    {% trans %}legal.imprint{% endtrans %}
	  	{% endblock %}
	
  
  				

	     	     	
	        {% block javascripts %}
	           	
			
	        {% endblock %}
    		
    	

    

Please NOTE!!!
I did this from memory, so maybe something might not work. Let me know about it.

The post Building with Symfony3 – part10 (UseTwBootrap) appeared first on HubShark™.