Photoshop to Wordpress to Web - Teil 2 - Entwicklung, Version 3

Alte Version

Dies ist eine alte Version des Inhalts in unserem Archiv. Besuchen Sie die aktuelle Version dieser Seite.

Diese Version wurde von Andreas Braun am 11. July 2014 um 10:08 Uhr erstellt.
Bemerkung des Bearbeiters: weiter8

Änderungen gegenüber vorheriger Version anzeigen


Photoshop to Wordpress Template - Teil 2 - Entwicklung

Die Grobstruktur

Nach einigen Trial und Error Ansätzen, habe ich für mich eine Vorgehensweise erarbeitet, mit der ich in der Lage bin, auch komplizierte Layouts zu entwickeln. Die Idee des Zerlegens stammt dabei ursprünglich aus Vorlesungen der Informatik. Wir wollen versuchen, das Layout im Vorfeld sinnvoll in die einzelnen Teile aufzusplitten, die wichtigen Elemente zu extrahieren und diese dann getrennt in einer lokalen Entwicklungsumgebung (XAMPP) zu programmieren. Nachfolgend sind die extrahierten Teile meines Layouts zu sehen:

Gesamtüberblick:

Aufteilung der Seite in die drei Teile:

  • Header
  • Content
  • Footer
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Navbar
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
2-Spalten Inhalt
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
3-Spalten Inhalt
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Social Icon Bar
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Single Post Seite
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
UI Elemente
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Die Feinstruktur

Anstatt einfach die HTML Struktur während des Programmierens zu entwickeln, ist es eine bessere Idee, sich vorher das soeben aufgeteile Layout noch genauer anzuschauen, und sich eine Block-Level Struktur (Div Layout) zu überlegen, die funktioniert, übersichtlich ist und möglichst simpel bleibt. Eine endlose Verschachtelung bringt uns nämlich sonst schnell in die Prädullie. Für diesen Schritt ist eine gute Erfahrung im schreiben von HTML Code von Vorteil.

Navbar
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Farben, Schrift, Schriftgröße, Abmessungen, Styles

Um Informationen über diese Elemente eleganter zu extrahieren, bieten sich einige Plugins für Photoshop an, über das ich bereits in einem früheren Artikel berichtet habe. Bei Interesse einfach den Artikel “Photoshop to Web Pentalogie” durchlesen. Ich verzichte hier auf eine genaue Beschreibung der Techniken. Folgende Informationen habe ich mir abgespeichert:

  • Hintergrundfarben
    Dunkelblau(#306285),Hellblau(#4b84d0),Hellgrau(#f0f0f0),
    Dunkelgrau(#1a1a1a),Schwarz(#121212)
  • Schriftgrößen für H1,H2,H3,H4 usw
  • Fonts : Droid Serif und Droid Sans
  • Schriftfarben (#808080, #9920d7, #ffffff)

Coding Workbench

Der Begriff bedeutet, dass wir für jeden der Teile eine eigene HTML Seite erstellen. Der Vorteil ist, dass wir dadurch lokal sehr schnell arbeiten können und durch den reduzierten Code bleibt alles schön übersichtlich.

Anlegen der Workbench

Ich habe mir ein neues Projekt (einen neuen Ordner in htdocs) auf meinem Localhost erstellt und eine sehr einfache Dateistruktur aufgebaut.

  • index.html
  • style.css
  • script.js
  • jquery.js
Initial index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link href="font-awesome.min.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script type="text/javascript">
        $( document ).ready(function() {
            
        })
    </script>
</body>
</html>
Initial styles - clearfix und resets  
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
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 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

Initial Javascript

Um schneller mit Editor und Browser arbeiten zu können, habe ich die JQuery Bibliothek heruntergeladen und lokal im Workbench Verzeichnis gespeichert.

Navigations Leiste

Die Navleiste wird vom Header umschlossen und als <nav> Element erstellt. Die Buttons sind Anchor Tags in Listenelementen in einer Unordered List. Der Aufbau sieht dann so aus:

index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="header">
        <nav role='navigation' class="clearfix">
            <ul>
                <li class="active"><a href="#"><i class="fa fa-home"></i>Home</a></li>
                <li class=""><a href="#"><i class="fa fa-book"></i>Tutorials</a></li>
                <li class=""><a href="#"><i class="fa fa-user"></i>About</a></li>
                <li class=""><a href="#"><i class="fa fa-envelope"></i>Contact</a></li>
            </ul>
        </nav>
    </div>
style.css  
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
#header{
  position: absolute;
  top:50px;
  width:100%;
  z-index: 2;
  min-width: 480px;
  -webkit-transition:all 0.5s;
 -o-transition:all 0.5s;
 transition:all 0.5s;
}
@media only screen
and (max-width : 1296px) {
  #header{
    top:0px;
    width:100%;
    z-index: 2;
     position: relative;
    
  }
  #header *{
    -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  }
  
}
@media only screen
and (max-width : 1024px) {
 
}

nav{
  background-color:#fff;
  max-width:1280px;
  margin:0px auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-width: 507px;
}
nav ul{
  list-style-type: none;
  padding:0;
  margin:0;
}
nav ul li{
  float:left;
  border-right:1px solid #f6f0ec;
}
nav ul li:last-child{
  border-right:none;
  vertical-align: middle;  
}
nav ul li a{
  padding:15px 25px;
  display:inline-block;
  font-family: 'Droid Sans', sans-serif;
  font-size:15px;
  color:#868686;
  text-decoration: none;
}

nav ul li a i{
  margin-right:10px;

}
nav ul li span{
  padding:13px 25px;
  display:inline-block;
   font-family: 'Droid Sans', sans-serif;
    color:#868686;
    font-size:15px;
}
nav ul li span input{
  border:1px solid transparent;
  width:30px;
}
nav ul li span input:focus{
  border:1px solid #f6f0ec;
  width:200px;
}

Ergebnis im Browser

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Nun wirds etwas fortgeschrittener. Für den Carousel Slider habe ich ein Plugin geschrieben, damit ich den das Carousel sowohl für Bilder als auch für den “Recent-Posts” Bereich verwenden kann.

index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="pageblock clearfix imgwall">
            <a href="#" id="prev" class="csbtn_prev"></a>
            <a href="#" id="next" class="csbtn_next"></a>
        <div class="carousel" id="imgcarousel">

            <ul id="slides">
                <li class="slide" id="slide1">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                        <button class="actionbutton">Enter the trip</button>
                    </div>
                    <img src="slide1.png" alt="" />
                </li>
                <li class="slide" id="slide2">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                    </div>
                    <img src="slide2.png" alt="" />
                </li>
                <li class="slide" id="slide3">
                    <div class="slideText">
                        <h2>The torturer</h2>
                        <p>Das ist Needles. Er ist das Paradebeispiel seiner Art.</p>
                    </div>
                    <img src="slide3.png" alt="" />
                </li>
            </ul>
        </div>
    </div>

<script type="text/javascript">

$( document ).ready(function() {
    $('#imgcarousel').listCarousel({
        maxcarouselWidth: 1280,
        maxcarouselHeight: 720,
        slide_by: 1,
        showSlides: 1,
        scaleProp: 'true',
    }); 
});
</script>
style.css  
css
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
.imgwall{
 background:url(slider_bg.jpg) 0 0;
}
#latest-posts-title{
  float:left;
  margin-right:30px;
}
.carousel-parent{
  margin-left:50px;
  position:relative;
  margin-right:50px;
  overflow:hidden;

}
#recent-posts-ticker-list p{
  width:95%;
}
.carousel{
  /* width:100%; */
 position:relative;
 overflow:hidden;
 
  margin:0 auto;
}
.carousel img{
  max-width: 100%;
  max-height: 100%;
}
.carousel ul {
  list-style-type: none;
  padding:0;
  overflow: hidden;
  position:absolute;
  margin: 0;
  padding: 0;
}
.carousel ul li{
  float:left; 
  position: relative
}
.slideText{
  width:30%;
  height:50%;
  position: absolute;
  z-index: 2;
  color:#fff;
  font-weight:normal;
  top: 16%;
}
.slideText h2{
  font-size: 48px
}

@media only screen
and (max-width : 1296px) {
  .slideText{top:0;}
}

#prev:hover, #next:hover{
  width:90px; 
}

#prev {
  background:url(left.png) 0 0px no-repeat; 
  position:absolute;
  left:0;
  top: 50%;
  -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color:rgba(0,0,0,0.5);
background-position:center center;
  z-index: 5;
  margin-top: -53px;
   display:block; 
  width:61px; 
  height:107px;
  text-indent:-999em;
  outline:0;
  -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}
#next {
  background:url(right.png) 0 0 no-repeat; 
  position:absolute;
  right:0;
  top: 50%;
 -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color:rgba(0,0,0,0.5);
background-position:center center;
  z-index: 5;
  margin-top: -53px;
   display:block; 
  width:61px; 
  height:107px;
  text-indent:-999em;
  outline:0;
  -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}
jQuery.fn.listCarousel.js  
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
(function($){
    $.fn.listCarousel = function(options) {
         
        var
          defaults = {
              maxcarouselWidth: 1280,
              maxcarouselHeight: 720,
            slide_by: 1,
            showSlides: 3,
            scaleProp: 'false',
          },
          settings = $.extend({}, defaults, options);
           
          this.each(function() {
            var $this = $(this);
            //Anzahl der Slides
              var slides_count = $this.find('li').length;
              var slides = $this.find('li');
              var firstSlide = $this.find('li:first');
              var lastSlide = $this.find('li:last');
              var slidesUL = $this.find('ul');
            var prevBtn = $this.siblings('.csbtn_prev');
              var nextBtn = $this.siblings('.csbtn_next');
            

              $this.css('max-height', settings.maxcarouselHeight);
              $this.css('max-width', settings.maxcarouselWidth);
              var prop_scale_factor = settings.maxcarouselHeight/settings.maxcarouselWidth;
         
              currentCarouselWidth = $this.outerWidth();
              currentCarouselHeight = currentCarouselWidth*prop_scale_factor;
               if(settings.scaleProp === 'true'){
              $this.css('height',currentCarouselHeight +"px");
              slides.css("height", currentCarouselHeight +"px");
              slidesUL.css("height", currentCarouselHeight);
              }else{
            $this.css('height',settings.maxcarouselHeight +"px");
              slides.css("height", settings.maxcarouselHeight +"px");
              slidesUL.css("height", settings.maxcarouselHeight);
              }

            //Slides auf Breite des Wrappers skalieren
              slides.css("width", currentCarouselWidth/settings.showSlides +"px");
              //Setzen der UL Breite beim Site Load
              slidesUL.css("width", currentCarouselWidth * slides_count+"px");
              //Den letzten Slide vor den Ersten setzen
              firstSlide.before(lastSlide);
               //Die UL nach links verschieben um einen Slide
              slidesUL.css("left", currentCarouselWidth * (-1)+"px");

              
              //Previous Button Click
              prevBtn.click(function() {
                  currentCarouselWidth = $this.outerWidth();
                  firstSlide = $this.find('li:first');
                  lastSlide = $this.find('li:last');
                  var left_indent = parseInt(slidesUL.css('left')) + (currentCarouselWidth/settings.showSlides)*settings.slide_by;
                  slidesUL.animate({'left' : left_indent}, 200,function(){
                      firstSlide.before(lastSlide);
                      slidesUL.css("left", currentCarouselWidth * (-1)+"px");
                  });
                  return false;
              });

            //Next Button Click
            nextBtn.click(function() {
                firstSlide = $this.find('li:first');
                  lastSlide = $this.find('li:last');
                  currentCarouselWidth = $this.outerWidth();
                var left_indent = parseInt(slidesUL.css('left')) - (currentCarouselWidth/settings.showSlides)*settings.slide_by;
                slidesUL.animate({'left' : left_indent}, 200,function(){
                    lastSlide.after(firstSlide);
                    slidesUL.css("left", currentCarouselWidth * (-1)+"px");
                });
                return false;
            });

            $(window).resize(function(){
                currentCarouselWidth = $this.outerWidth();
                if(settings.scaleProp === 'true'){
                  currentCarouselHeight = currentCarouselWidth*prop_scale_factor;
                  $this.css('height',currentCarouselHeight +"px");
                  slides.css("height", currentCarouselHeight +"px");
                  slidesUL.css("height", currentCarouselHeight);}
                //Slides auf Breite des Wrappers skalieren
                  slides.css("width", currentCarouselWidth/settings.showSlides +"px");
                  //Setzen der UL Breite beim Site Load
                  slidesUL.css("width", currentCarouselWidth * slides_count+"px");
                //Die Linksverschiebung anpassen
                slidesUL.css("left", currentCarouselWidth * (-1)+"px");
                 });



          });
          return this;
    }
})(jQuery);

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Der Slider hat einige Optionsparameter u.a. proportionales Skalieren beim resizen des Browserfensters. Somit ist der Inhalt auch für mobile Geräte gut sichtbar, da die Bilder und die Steuerung skalieren.

Eine einfache unordered List mit ein wenig CSS Styling genügt für die Umsetzung wie im Design Layout

index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<div class="accent grey">
            <div class="wrapper clearfix">
                <ul id="feature_images_list">
                    <li><a href="featured/001.jpg" class="fancybox" title=""><img src="featured/001.jpg" alt=""></li></a>
                    <li><a href="featured/002.jpg" class="fancybox" title=""><img src="featured/002.jpg" alt=""></li></a>
                    <li><a href="featured/003.jpg" class="fancybox" title=""><img src="featured/003.jpg" alt=""></li></a>
                    <li><a href="featured/004.jpg" class="fancybox" title=""><img src="featured/004.jpg" alt=""></li></a>
                    <li><a href="featured/005.jpg" class="fancybox" title=""><img src="featured/005.jpg" alt=""></li></a>
                </ul>
            </div>
        </div>
<script type="text/javascript">
$( document ).ready(function() {
    $(".fancybox").fancybox({
        openEffect    : 'none',
        closeEffect    : 'none'
    });
});
style.css  
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
#feature_images_list{
  width:100%;
  list-style-type: none;
height:150px
 }
 #feature_images_list li{
  display:block;
  float:left;
 }
 #feature_images_list li img{
  max-height:100%;
  max-width:100%;
 }

Javascript

Für die Großansicht der Thumbnails möchte ich einen schönen Lightbox Effekt. Daher lade ich mir das Plugin “fancybox2” herunter und integrier es in mein script.

Das Plugin kann hier heruntergeladen werden. Entpacken in Ordner fancybox im Haupverzeichnis.

Im <head> der index.html diese beiden Zeilen einfügen:

<script src="fancybox/jquery.fancybox.pack.js"></script>

<link href="fancybox/jquery.fancybox.css" rel="stylesheet">

Das Ergebnis im Browser

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Beim Klick auf eines der Bilder öffnet sich wenn alles richtig gemacht wurde die Lightbox. Ihr solltet natürlich eigene Bilder einbinden. Ich setzte zumindest soviel Grundverständnis voraus, dass ihr wisst, welche Zeilen im Code dazu geändert werden müssen. Andernfalls ist wohl eh alles zu spät ;)

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

Durch die Wiederverwendung des jquery plugins “listSlider” reduziert sich der Code auf diese Zeilen:

index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="accent grey">
        <div class="wrapper">
            <img src="latest_posts.png" alt="" id="latest-posts-title">
            <div class="carousel" >
                <a href="#" id="rpprev" class="csbtn_prev"></a>
                <a href="#" id="rpnext" class="csbtn_next"></a>
                <div class="carousel-parent" id="recent-post-carousel">
                <ul id="recent-posts-ticker-list">
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Needles Art released</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Mr Snuggles Art released</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #6</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #5</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #4</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #3</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #2</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                    <li class="recent-posts-ticker-list-item">
                        <h2 class="h2violett">Post #1</h2>
                        <p>I just released my newest work to public. It is called needles and features my main character.</p>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
    </div>
<script type="text/javascript">

    $('#recent-post-carousel').listCarousel({
        maxcarouselWidth: 1280,
        maxcarouselHeight:100,
        slide_by: 1,
        showSlides: 3,
        scaleProp: 'false',
    });
</script>
style.css  
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#latest-posts-title{
  float:left;
  margin-right:30px;
}
.carousel-parent{
  margin-left:50px;
  position:relative;
  margin-right:50px;
  overflow:hidden;
}
#recent-posts-ticker-list p{
  width:95%;
}
.carousel{
 position:relative;
 overflow:hidden;
  margin:0 auto;
}
.carousel ul {
  list-style-type: none;
  padding:0;
  overflow: hidden;
  position:absolute;
  margin: 0;
  padding: 0;
}
.carousel ul li{
  float:left; 
  position: relative
}
#rpprev {
  display:block; 
  width:22px; 
  height:52px;    
  background:url(latest_post_leftarrow.png) 0 0px no-repeat; 
position:absolute;
   left:0;
  top:50%;
  margin-top:-26px;
  z-index:2;
}
#rpnext {
  display:block; 
  width:22px; 
  height:52px;    
  background:url(latest_post_nextarrow.png) 0 0px no-repeat; 
position:absolute;
  right:0;
  top:50%;
  margin-top:-26px;
  z-index:2;
}

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung

UI Elemente

index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="message" id="reminder">
        <h4>A friendly reminder</h4>
        <p>You need to be registered and logged in to comment</p>
    </div>
    
    <div class="message" id="admin">
        <h4>A note from the admin</h4>
        <p>You need to be registered and logged in to comment</p>
    </div>

    <div class="message" id="hint">
        <h4>Just a hint</h4>
        <p>You need to be registered and logged in to comment</p>
    </div>
    
    <div class="short" id="hint">
        <i class="icon-exclamation-sign icon-2x"></i> Just a short hint
    </div>
    
    <div class="short" id="tip">
        <i class="icon-star-empty icon-2x"></i> Just a short tip
    </div>

    <div class="short" id="warning">
        <i class="icon-warning-sign icon-2x"></i> Just a short warning
    </div>
style.css  
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
@import url("reset.css");
body{
  background-color:#4b84d0;
}
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: normal;
src: url("DroidSans.ttf"); 
}

/*Message*/
.message{
  background-color: #ecf0f1;
  padding:20px;
  line-height: 25px;
  display:inline-block;
}
.message h4{
  font-size:19px;
  font-family:"Droid Sans";
}
.message p{
  color:#4e4e4e;
  font-size:15px;
  font-family:"Droid Sans";
}
.message#reminder{
  border-left:5px solid #3c60e7;
}
.message#reminder h4{
  color: #3c60e7;
}
.message#admin{
  border-left:5px solid #e74b3c;
}
.message#admin h4{
  color: #e74b3c;
}
.message#hint{
  border-left:5px solid #31be6a;
}
.message#hint h4{
  color: #31be6a;
}
/*Shorts*/
.short{
  padding:20px;
  display:inline-block;
   font-size:15px;
  font-family:"Droid Sans";
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.short#hint{
  color: #647c99;
  background-color: #d9edf6;
}
.short#tip{
  color: #5a7956;
  background-color: #e0efda;
}
.short#warning{
  color: #9c4546;
  background-color: #f2dedf;
}
[class^="icon-"]{
  vertical-align: middle;
  margin-right:5px;
}

/*Buttons*/

.actionbutton{
  border: 2px solid rgba(255,255,255,0.75);
  background-color: transparent;
  padding:15px 45px;
  cursor:pointer;
  outline: none;
  color:#fff;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -webkit-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;
}
.actionbutton:hover{
background-color: #fff;
color:#6B58CD;
  }

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung