Your SlideShare is downloading. ×
0
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS Techniques Explained

2,060

Published on

Presentation given by Robin Poort at the Joomladay 2011 in the Netherlands

Presentation given by Robin Poort at the Joomladay 2011 in the Netherlands

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,060
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
48
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Technieken toegelicht
      Robin Poort, CEO & Co-founder, FinishJoomla Joomla!dagen Nederland, april 2011
  • 2. Alle bestanden van de voorbeelden in deze presentatie zijn hier te vinden: http://www.finishjoomla.com/media/css-technieken-toegelicht.zip
  • 3.  
  • 4.  
  • 5. CSS technieken toegelicht Een goede basis
  • 6. CSS – Een goede basis
  • 13. Source: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
  • 14. Source: http://meyerweb.com/eric/tools/css/reset/
  • 15. Source: http://960.gs/demo.html
  • 16. div.example { background-color : #FFFFFF; background-image : url(img.png) ; background-position : left top; background-repeat : repeat-x; border-width : 1px; border-style : solid; border-color : #000000; margin-top : 10px; margin-right : 10px; margin-bottom : 10px; margin-left : 10px padding-top : 10px; padding-right : 15px; padding-bottom : 20px; padding-left : 15px; } div.example2 { font-family : Arial, sans-serif; font-size : 12px ; line-height : 1.5em; font-weight : bold; font-style : italic; font-variant : small-caps; list-style-type : disc; list-style-position : inside; list-style-image : url(img.png) ; }
  • 17. div.example { background : #FFFFFF url(example.png) left top repeat-x; border : 1px solid #000000; margin : 10px; padding : 10px 15px 20px; } div.example2 { font : bold italic small-caps 1em/1.5em Arial,sans-serif; list-style : disc inside url(example.png) ; }
  • 18. Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
  • 19. * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style= "" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ Source: http://www.w3.org/TR/CSS2/cascade.html
  • 20. !important
  • 21. .example { color : red !important } Wint van <div class= ” example ” style= ” color : blue; ” >
  • 22. <div class= ” clear ” ></div> & <div class= ” clearfix ” ></div>
  • 23. HTML markup <div class= ” wrapper ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> </div> Resultaat CSS .wrapper { background : #FFF; border : 5px solid #29BDBD; margin : 10px; padding : 10px; } .floatbox { background : #FFF; border : 5px solid #333; padding : 10px; float : right ; }
  • 24. HTML markup <div class= ” wrapper ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat CSS (in 960 grid system) .clear { clear : both; display : block; overflow : hidden ; visibility : hidden; width : 0; height : 0; }
  • 25. HTML markup <div class= ” wrapper clearfix ” > Lorem ipsum <div class= ” floatbox ” > Floating box </div> </div> Resultaat CSS (in 960 grid system) .clearfix:before,.clearfix:after { content : '0020' ; display : block; overflow : hidden; visibility : hidden; width : 0; height : 0; } .clearfix:after { clear : both; } .clearfix { zoom : 1; }
  • 26. Code commenting
    • Voor jezelf later
    • 27. Voor anderen na jou
    • 28. Bij hacks en adjustments
    /* Als kopjes in je CSS file */ h3 { font-size : 1em;} h3 { font-size : 1em;} /* Achter bepaalde styles */
  • 29. CSS technieken toegelicht Goed om te weten
  • 30. CSS – goed om te weten
  • 35. HTML markup <div class= ” container ” > <div class= ” absolute ” > Absolute </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat in IE7 CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }
  • 36. HTML markup <div class= ” container ” > <div> <div class= ” absolute ” > Absolute </div> </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }
  • 37. HTML markup <div class= ” container ” > <div class= ” IE-div ” > <div class= ” absolute ” > Absolute </div> </div> <div class= ” floatbox ” > Floating box </div> <div class= ” clear ” ></div> </div> Resultaat CSS .container { position : relative; z-index : 1; } .absolute { right : 10px; position : absolute; top : 10px; z-index : 2; } .floatbox { float : left; }
  • 38. <div class= ” class stacking ” ></div>
  • 39. HTML markup <div class= ” blockBigBoldRed ” > Example </div> <div class= ” blockBigBlue ” > Example </div> Resultaat CSS .blockBigBoldRed { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; font-size : 2em; color : red; font-weight : bold; } .blockBigBlue { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; font-size : 2em; color : blue; }
  • 40. HTML markup <div class= ” block ” > <div class= ” bigFont ” > <div class= ” boldFont ” > <div class= ” redFont ” > Example </div> </div> </div> </div> <div class= ” block ” > <div class= ” bigFont ” > <div class= ” blueFont ” > Example </div> </div> </div> CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .blueFont { color : blue;} .boldFont { font-weight : bold;} Resultaat
  • 41. HTML markup <div class= ” block bigFont boldFont redFont ” > Example </div> <div class= ” block bigFont blueFont ” > Example </div> Resultaat CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .blueFont { color : blue;} .boldFont { font-weight : bold;}
  • 42. .class.class
  • 43. HTML markup <div class= ” block bigFont redFont ” > Example <div class= ” caption redFont ” > Example </div> </div> Resultaat CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .caption { background : #CCC; padding : 10px; }
  • 44. HTML markup <div class= ” block bigFont redFont ” > Example <div class= ” caption redFont ” > Example </div> </div> Resultaat CSS .block { background : #FFFFFF; border : 1px solid #CCCCCC; margin : 10px; padding : 10px; } .bigFont { font-size : 2em;} .redFont { color : red;} .caption { background : #CCC; padding : 10px; } .caption.redFont { color : darkred;}
  • 45. #id.class
  • 46. HTML markup <div id= ” bar1 ” class= ” grid_4 ” > Example </div> <div id= ” bar2 ” class= ” grid_4 ” > Example </div> <div id= ” bar3 ” class= ” grid_4 ” > Example </div> CSS .grid_4 { display : inline; float : left; margin-left : 10px; margin-right : 10px; position : relative; width: 300px; }
  • 47. HTML markup <div id= ” bar1 ” class= ” grid_4 ” > Example </div> <div id= ” bar2 ” class= ” grid_4 ” > Example </div> <div id= ” bar3 ” class= ” grid_4 ” > Example </div> CSS .grid_4 { display : inline; float : left; margin-left : 10px; margin-right : 10px; position : relative; } #bar1.grid_4 { margin-left : 0;} #bar3.grid_4 { margin-right : 0;}
  • 48. Handige CSS selectors E F Matches any F element that is a descendant of an E element. E > F Matches any F element that is a child of an element E. E + F Matches any F element immediately preceded by a sibling element E. E:first-child Matches element E when E is the first child of its parent. E[foo] Matches any E element with the &quot;foo&quot; attribute set (whatever the value). E[foo=&quot;warn&quot;] Matches any E element whose &quot;foo&quot; attribute value is exactly equal to &quot;warn&quot;. E[foo~=&quot;warn&quot;] Matches any E element whose &quot;foo&quot; attribute value is a list of space-separated values, one of which is exactly equal to &quot;warn&quot;. Source: http://www.w3.org/TR/CSS2/selector.html
  • 49. E > F HTML markup <div class= ” blog ” > <p> Introduction </p> <div class= ” story ” > <p> Lorem ipsum dolor </p> <div class= ” date ” > <p> Date </p> </div> </div> </div> CSS .blog p { font-family : Arial, sans-serif; font-size : 1em; color : #555; } .story p { font-size : 1.3em; color : #111; } Resultaat
  • 50. E > F HTML markup <div class= ” blog ” > <p> Introduction </p> <div class= ” story ” > <p> Lorem ipsum dolor </p> <div class= ” date ” > <p> Date </p> </div> </div> </div> CSS .blog p { font-family : Arial, sans-serif; font-size : 1em; color : #555; } .story > p { font-size : 1.3em; color : #111; } Resultaat
  • 51. E + F HTML markup <div class= ” blog ” > <h1> Title </h1> <h2> Subtitle </h2> <h2> Subtitle </h2> <p> Lorem ipsum </p> <h2> Subtitle </h2> <p> Lorem ipsum </p> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; } h2 { margin : 0 0 .5em 0; font-size : 1.4em; color : #000; }
  • 52. E + F HTML markup <div class= ” blog ” > <h1> Title </h1> <h2> Subtitle </h2> <h2> Subtitle </h2> <p> Lorem ipsum </p> <h2> Subtitle </h2> <p> Lorem ipsum </p> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; } h2 { margin : 0 0 .5em 0; font-size : 1.4em; color : #000; } h1 + h2 { margin-top : -1em; font-style : italic; }
  • 53. E:first-child HTML markup <div class= ” blog ” > <h1> Title </h1> <p> Lorem ipsum </p> <p> Lorem ipsum </p> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; color : #222; } p { color : #444; margin-bottom : 1em; } .blog p:first-child { font-family : serif; font-style : italic; color : #000; }
  • 54. E:first-child HTML markup <div class= ” blog ” > <h1> Title </h1> <div class= ” story ” > <p> Lorem ipsum </p> <p> Lorem ipsum </p> </div> </div> CSS h1 { margin : 0 0 1em 0; font-size : 2em; color : #222; } p { color : #444; margin-bottom : 1em; } .story p:first-child { font-family : serif; font-style : italic; color : #000; }
  • 55. E[foo=&quot;warn&quot;] HTML markup <label> Naam </label><br /> <input type= &quot;text&quot; /> <label> Geslacht </label><br /> <label> <input type= &quot;radio&quot; /> Man </label> <label> <input type= &quot;radio&quot; /> Vrouw </label> CSS input[type=&quot;text&quot;] { width : 200px; border : 1px solid #CCC; background : #F5F5F5; padding : 5px; } input[type=&quot;radio&quot;] { margin-left : 1em; }
  • 56. CSS technieken toegelicht CSS in gebruik
  • 57. CSS – In gebruik
  • 62. Source: http://www.google.com/webfonts?subset=latin&sort=pop
  • 63. HTML markup <!-- Begin plaats in <head> --> <link href= ”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu” rel= ”stylesheet” type= ”text/css” /> <!-- Eind plaats in </head> --> <h1> Title </h1> <p> The quick brown fox jumps over the lazy dog. </p> CSS h1 { font-family : 'Yanone Kaffeesatz' , arial, serif; } p { font-family : 'Ubuntu' , arial, serif; }
  • 64.  
  • 65.  
  • 66. HTML markup <ul> <li><a class= ” doc-icon ” href= &quot;test.doc&quot; > Lorem ipsum dolor </a></li> <li><a class= ” pdf-icon ” href= &quot;test.pdf&quot; > Sit amet consect </a></li> <li><a class= ” xls-icon ” href= &quot;test.xls&quot; > Lorem ipsum dolor </a></li> <li><a class= ” png-icon ” href= &quot;test.png&quot; > Sit amet consectet </a></li> </ul> CSS li a.doc-icon { background : url(doc.gif) no-repeat; } li a.pdf-icon { background : url(pdf.gif) no-repeat; } li a.xls-icon { background : url(xls.gif) no-repeat; } li a.png-icon { background : url(png.gif) no-repeat; }
  • 67. HTML markup <ul> <li><a href= &quot;test.doc&quot; > Lorem ipsum dolor </a></li> <li><a href= &quot;test.pdf&quot; > Sit amet consectetuer </a></li> <li><a href= &quot;test.xls&quot; > Lorem ipsum dolor </a></li> <li><a href= &quot;test.png&quot; > Sit amet consectetuer </a></li> </ul> <ul> <li><a href= &quot;http://twitter.com/finishjoomla&quot; > Twitter </a></li> <li><a href= &quot;http://www.facebook.com/profile.php&quot; > Facebook </a></li> <li><a href= &quot;http://www.linkedin.com/company/&quot; > Linkedin </a></li> <li><a href= &quot;http://www.youtube.com/user/&quot; > Youtube </a></li> </ul>
  • 68. CSS li a[href$='.doc'] , li a[href$='.pdf'] , li a[href$='.xls'] , li a[href$='.png'] , li a[href*='twitter.com'] , li a[href*='facebook.com'] , li a[href*='linkedin.com'] , li a[href*='youtube.com'] { padding-left :40px; min-height :24px; display :inline-block; line-height :24px; }
  • 69. CSS li a[href$='.doc'] { background : url(doc.gif) no-repeat; } li a[href$='.pdf'] { background : url(pdf.gif) no-repeat; } li a[href$='.xls'] { background : url(xls.gif) no-repeat; } li a[href$='.png'] { background : url(png.gif) no-repeat; } li a[href*='twitter.com'] { background : url(twitter.gif) no-repeat; } li a[href*='facebook.com'] { background : url(facebook.gif) no-repeat; } li a[href*='linkedin.com'] { background : url(linkedin.gif) no-repeat; } li a[href*='youtube.com'] { background : url(youtube.gif) no-repeat; }
  • 70.  
  • 71. HTML markup <p> <span class= ” dropcap ” > L </span> orem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p { font-family : Arial, sans-serif;} span.dropcap { font-size : 3em; color : #29BDBD; float : left; margin : 10px 10px 0 0; display : block; }
  • 72. HTML markup <p class= ” dropcap ” > Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap { font-family : Arial, sans-serif;} p.dropcap:first-letter { font-size : 3em; color : #29BDBD; float : left; margin : 10px 10px 0 0; }
  • 73. HTML markup <p class= ” dropcap ” > Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap { font-family : 'Old Standard TT' , Times, serif;} p.dropcap:first-letter { font-family : 'UnifrakturMaguntia' , Times, serif; font-size : 3em; color : #29BDBD; float : left; margin : 10px 10px 0 0; }
  • 74.  
  • 75. Source: http://www.flickr.com/photos/shadeofmelon/3584367692/
  • 76. HTML markup <ul> <li><a href= &quot;#&quot; > Item 1 </a></li> <li class= &quot; parent &quot; ><a href= &quot;#&quot; > Item 2 </a> <ul> <li><a href= &quot;#&quot; > Sub item 1 </a></li> <li><a href= &quot;#&quot; > Sub item 2 </a></li> <li class= &quot; parent &quot; ><a href= &quot;#&quot; > Sub item 3 </a> <ul> <li><a href= &quot;#&quot; > Sub sub item 1 </a></li> <li><a href= &quot;#&quot; > Sub sub item 2 </a></li> </ul> </li> <li><a href= &quot;#&quot; > Sub item 4 </a></li> </ul> </li> <li><a href= &quot;#&quot; > Item 3 </a></li> </ul>
  • 77.  
  • 78. ul li { float :left; position :relative; background :#555;} ul li a { color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;}
  • 79.  
  • 80. ul li { float :left; position :relative; background :#555;} ul li a { color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display:none; } ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;}
  • 81.  
  • 82. ul li { float :left; position :relative; background :#555;} ul li a { color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover ul {display:block;} ul li:hover {background:#333;}
  • 83.  
  • 84. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li:hover { background :#333;}
  • 85.  
  • 86. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li:hover { background :#333;} ul li:hover {background:#333;} ul li li:hover {background:#111;} ul li li:hover {background:#000;}
  • 87.  
  • 88. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li.parent:hover { background :#333;} ul li:hover { background :#333;} ul li li:hover { background :#111;} ul li li:hover { background :#000;} ul li.parent a {background:url(arrow_down.png) no-repeat right 20px;}
  • 89.  
  • 90. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li.parent:hover { background :#333;} ul li:hover { background :#333;} ul li li:hover { background :#111;} ul li li:hover { background :#000;} ul li.parent > a { background : url(arrow_down.png) no-repeat right 20px;}
  • 91.  
  • 92. ul li { float :left; position :relative;} ul li a { background :#555; color :#FFF; display :block; padding :5px 20px;} ul li ul { position :absolute; display :none;} ul li li { float :none;} ul li li a { width :200px; padding :5px 10px;} ul li li ul { left :220px; top :0;} ul li:hover > ul { display :block;} ul li.parent:hover { background :#333;} ul li:hover { background :#333;} ul li li:hover { background :#111;} ul li li:hover { background :#000;} ul li.parent > a { background : url(arrow_down.png) no-repeat right 20px;} ul li li.parent > a {background:url(arrow_side.png) no-repeat right 15px;}
  • 93.  
  • 94.  
  • 95.  
  • 96. HTML markup <img class= ” img1 ” src= ”image.png” alt= ” image ” /> CSS img.img1 { background : #FFF; padding : 2px; border : 2px solid #AAA; }
  • 97. HTML markup <img class= ” img2 ” src= ”image.png” alt= ” image ” /> CSS img.img2 { background : url(seamless.png) ; padding : 4px; }
  • 98. HTML markup <img class= ” img3 ” src= ”image.png” alt= ” image ” /> CSS img.img3 { background : url(seamless.png) ; padding : 3px; border : 1px solid #000; }
  • 99. HTML markup <img class= ” img4 ” src= ”image.png” alt= ” image ” /> CSS img.img4 { background : #000 ; padding : 1px; border : 2px solid #FFF; outline : 1px solid #AAA; }
  • 100. Vragen?
  • 101.
      Coupon code JD11NL
      – 15% discount on all our products – Valid until 2 weeks from now – 50 coupons available
      Robin Poort
      [email_address]
      Twitter: @finishjoomla

×