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

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 14:11 Uhr erstellt.
Bemerkung des Bearbeiters: we1

Ä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

2-Spalten Inhalt

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
<div class="accent darkblue clearfix">
    <div class="wrapper">
        <div class="row">
            <div class="col2">
            <article class="clearfix">
              <h1>H1 Heading. Lorem ipsum dolor sit amet</h1>
              <h2>H2 Heading. Lorem ipsum dolor sit amet</h2>
              <h3>H3 Heading. Lorem ipsum dolor sit amet</h3>
              <h4>H4 Heading. Lorem ipsum dolor sit amet</h4>
              <h5>H5 Heading. Lorem ipsum dolor sit amet</h5>
              <h6>H6 Heading. Lorem ipsum dolor sit amet</h6>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium fugiat repellendus cupiditate cum, eligendi debitis beatae magni, impedit dolore nihil deleniti, cumque maxime doloremque in necessitatibus, commodi suscipit a obcaecati Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam corporis quam, officia ipsa recusandae <br />dignissimos explicabo eligendi iusto architecto quod sint veniam, quo sed. Eum, praesentium ex ad adipisci maxime.</p>
              <button class="actionbutton">Mehr</button>
           </article>
            </div>
       
            <div class="col2">
        <article class="clearfix">
                <h4 class="underlined">Paragraphs</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus magnam unde voluptatibus commodi sequi, eveniet! Corporis ipsam aut, dolorem maiores repudiandae aspernatur eos quis atque. Qui assumenda dicta, pariatur illum?</p></article>
        <article class="clearfix">
                <h4 class="underlined">Paragraph mit Bild ohne Text Wrap</h4><img class="text-wrap-right" src="http://placehold.it/350x150"><p class="text-wrap-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, harum accusamus iste, ipsa adipisci eum voluptate maxime saepe tenetur incidunt voluptatibus. Odit fuga sunt dolores repellendus libero ad, repellat nam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt corrupti pariatur quam deleniti ea repellat repudiandae rerum praesentium quis. Commodi earum recusandae voluptatibus non porro mollitia, quod dignissimos veniam illo. </p></article>
          <article class="clearfix">
            <h4 class="underlined">Paragraph mit Bild und Text Wrap</h4><img class="text-wrap-right" src="http://placehold.it/350x150"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, harum accusamus iste, ipsa adipisci eum voluptate maxime saepe tenetur incidunt voluptatibus. Odit fuga sunt dolores repellendus libero ad, repellat nam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt corrupti pariatur quam deleniti ea repellat repudiandae rerum praesentium quis. Commodi earum recusandae voluptatibus non porro mollitia, quod dignissimos veniam illo. </p></article>
            </div>
        </div>
    </div>
</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
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
body{
 
  margin:0;
  padding:0;
}   

h1,h2,h3,h4,h5,h6{
  font-family: 'Droid Serif';
  font-weight:normal;
  margin:0px;
  margin-bottom:15px;
  padding:0;
}
h1{
  font-size:2em;
  font-weight:normal;
}
h2{
  font-size:1.7em;
  font-weight:normal;
}
h3{
  font-size:1.4em;
  font-weight:normal;
}
h4{
  font-size:1.25em;
  font-weight:normal;
}
h5{
  font-size:1.1em;
  font-weight:normal;
}
h6{
  font-size:1em;
  font-weight:normal;
}

h4.underlined{
  border-bottom:1px solid rgba(255,255,255,0.4)
}

p,a,article{
  font-family: 'Droid Sans';
  font-weight:normal;
  font-size:1em;
  line-height:1.4em;
}
article{
  margin-bottom:15px
}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
.accent{
  width:100%;
  overflow:hidden;
  padding: 30px 0px 30px 0px;
}
.wrapper{
  max-width:1280px;
  margin:0 auto;
}
div.darkblue{
    display:block;
  background-color:#336699;
  color:#fff;
}

.row .col2:first-child{
  margin-right:1%;
}
.row .col2:last-child{
  margin-left:1%;
}
.col2{
  width: 49%;
  float:left;
   -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
}
@media only screen
and (max-width : 1024px){
  .col2{
    width: 100%;
    float:left;
  }
  .row .col2:first-child{
    margin-right:0%;
  }
  .row .col2:last-child{
    margin-left:0;
    width:100%;
  }
}
img.text-wrap-right{
  float:left;
  margin-right:10px;
}
p.text-wrap-right{
  overflow:hidden;
}
.actionbutton{
    font-family: 'Droid Sans';
  font-weight:normal;
  border: 2px solid rgba(255,255,255,0.75);
  background-color: transparent;
  padding:15px 45px;
  cursor:pointer;
  outline: none;
  color:#fff;
  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
Ergebnis ist bewusst nicht 100% wie die Vorlage. Mir gefiel dieses Layout besser beim erstellen.

Der CSS Code wurde so angelegt, dass sich der Inhalt sauber responsive verhält und bei kleinen Bildschirmbreiten anpasst. Die Animation dabei ist mit CSS3 Transitions realisiert.

Der vierspaltige Footer baut auf dem responsiven Layout des 2 und 3 Spaltigen Inhalts auf.

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
<div id="footer">
<div class="accent darkgrey clearfix">
    <div class="wrapper">
        <div class="row">
        <section class="col4">
          <h3>Tags</h3>
          <p>Comic CG Drawing Tutorial News Video</p>
      </section>
        <section class="col4">
          <h3>Recent Comments</h3>
          <article>
            <ul >
              <li class="excerpt">Blablabal on lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, quis voluptatibus temporibus dolorum ipsam beatae, architecto laudantium accusantium sapiente asperiores iure. Nam earum doloribus magni. Qui corrupti distinctio temporibus eligendi.
              </li>
               <li>Nam earum doloribus magni. Qui corrupti distinctio temporibus eligendi.
              </li>
               <li class="excerpt">Nam earum doloribus magni. Qui corrupti distinctio temporibus eligendi. consectetur adipisicing elit. Veniam, quis voluptatibus temporibus dolorum ipsam beatae, architecto laudantium accusantium sapiente asperiores iure. Nam earum doloribus magni. Qui corrupti disti
              </li>
            </ul>
          </article>
      </section>
        <section class="col4">
          <h3>Archives</h3>
          <ul>
            <li>Januar 2014</li>
            <li>Februar 2014</li>
            <li>März 2014</li>
          </ul>
      </section>
        <section class="col4">
          <h3>Recent Posts</h3>
           <article>
             <h6><b>Needles</b></h6>
             <p>Neues Artwork herausgegeben. Sonst nichts weiter.</p>
              </article>
          <article>
          <h6><b>Needles</b></h6>
          <p>Neues Artwork herausgegeben. Sonst nichts weiter.</p></article>
      </section>
    </div>  
    </div>
</div>
 
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
body{

  margin:0;
  padding:0;
}   
strong, b 
{
  font-weight: bold;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Droid Serif';
  font-weight:normal;
  margin:0px;
  padding:0;
}
h1,h2,h3,h4{
  margin-bottom:15px;
}
h1{
  font-size:2em;
  font-weight:normal;
}
h2{
  font-size:1.7em;
  font-weight:normal;
}
h3{
  font-size:1.4em;
  font-weight:normal;
}
h4{
  font-size:1.25em;
  font-weight:normal;
}
h5{
  font-size:1.1em;
  font-weight:normal;
}
h6{
  font-size:1em;
  font-weight:normal;
}

p,a,article,li{
  font-family: 'Droid Sans';
  font-weight:normal;
  font-size:1em;
  line-height:1.4em;
}
#footer li{
  border-bottom:1px solid rgba(255,255,255,.05);
  line-height:2em;
}
article, section{
  margin-bottom:15px
}
.excerpt{
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}
.accent{
  width:100%;
  overflow:hidden;
  padding: 30px 0px 30px 0px;
}
.wrapper{
  max-width:1280px;
  margin:0 auto;
}
div.darkgrey{
  display:block;
  background-color:#1a1a1a;
  color:#848484;
}

.row .col4:last-child{
  padding-left:1%;
  padding-right:0%;
  margin-right:0%;
  border: none;
}
.row .col4:first-child{
  padding-right:1%;
}
.col4{
  padding-left:1%;
  padding-right:1%;
  width: 23%;
  float:left;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.col4 h3{
  border-bottom:1px solid rgba(255,255,255,0.1);
}
@media only screen
and (max-width : 1024px){
  .col4{
    width: 48%;
    float:left;
    border:none;
  }
  .row .col4:first-child{
    margin-right:0%;
  }
  .row .col4:last-child{
    
  }
}
@media only screen
and (max-width : 480px){
  .col4{
    width: 98%;
    float:left;
    border:none;
  }
  .row .col4:first-child{
    margin-right:0%;
  }
  .row .col4:last-child{
    
  }
}
 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
$( document ).ready(function() {
/*Equalize column heights*/
$.fn.equalizeHeights = function() {
  var maxHeight = this.map(function( i, e ) {
    return $( e ).height();
  }).get();
  return this.height( Math.max.apply( this, maxHeight ) );
};
$('#footer section').equalizeHeights();
});

Mit diesem kurzen Script lassen sich unterschiedlich hohe Sections im Footer auf gleiche Höhe bringen. Das ist wichtig um beim responsiven Umbruch saubere Abstände zu bekommen. Sonst schieben sich die Blöcke ineinander und es sieht unprofessionell aus.

Ergebnis im Browser:

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

Beim Verkleinern auf 1024px Breite:

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

Und bei 480px:

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

Social Icons Bar

Die Social Icons können hier nicht besonders viel. Es sind nur etwas hübscher gestaltete Hyperlinks zu meinen diversen Profilseiten im Netz. Wenn noch Interesse besteht erweitere ich die Icons um die typischen Social Activities wie "Tweeten, Sharen, Liken usw"

index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 <div id="socialsbar">
    <div class="wrapper">
      <ul>
  <li><a data-s="Deviantart" href="http://monkeyb07.deviantart.com" target="_blank"><i class="fa fa-deviantart fa-lg"></i></a></li>
  <li><a data-s="Dribbble"   href="https://dribbble.com/NDBraun" target="_blank"><i class="fa fa-dribbble fa-lg"></i></a></li>
  <li><a data-s="Codepen"    href="http://codepen.io/voodoocoder" target="_blank"><i class="fa fa-codepen fa-lg"></i></a></li>
  <li><a data-s="Flickr"     href="https://www.flickr.com/photos/84683288@N06/" target="_blank"><i class="fa fa-flickr fa-lg"></i></a></li>
  <li><a data-s="Github"     href="https://github.com/voodoocoder" target="_blank"><i class="fa fa-github-alt fa-lg"></i></a></li>
  <li><a data-s="Google+"    href="https://plus.google.com/u/0/+AndyBraunDE/posts" target="_blank"><i class="fa fa-google-plus fa-lg"></i></a></li>
  <li><a data-s="LinkedIn"   href="http://de.linkedin.com/pub/andy-urban/8b/824/27a/" target="_blank"><i class="fa fa-linkedin-square fa-lg"></i></a></li>
  <li><a data-s="Pinterest"  href="http://de.pinterest.com/andreasbraunde/" target="_blank"><i class="fa fa-pinterest fa-lg"></i></a></li>
  <li><a data-s="Youtube"    href="https://www.youtube.com/user/Bifryst" target="_blank"><i class="fa fa-youtube fa-lg"></i></a></li>
  <li><a data-s="Behance"    href="https://www.behance.net/andronaut" target="_blank"><i class="fa fa-behance fa-lg"></i></a></li>
</ul> 
  </div>
</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
#socialsbar{
  height:55px;
  background-color:#000;
  
}
#socialsbar ul{
  list-style-type: none;
  float:right;
}
#socialsbar ul li{
   float:left;
   padding:10px;
}
#socialsbar ul li a{
  color:rgba(255,255,255,1);
  opacity:0.5;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
}

#socialsbar ul li a:hover{
  opacity:1;
}

a[data-s]:hover:before {
  content:"";
  position:absolute;
 border-color: transparent transparent rgba(255,255,255,1) transparent ;
border-style: solid;
border-width: 10px;
  left:50%;
  margin-left:-10px;
  top:-25px;
  z-index:5;
}
a[data-s]:hover:after {
   display: block;
  content:attr(data-s);
  width:100px;
  padding:15px;
  font-family:"Droid Sans";
  font-size:15px;
  color:#565656;
  position:absolute;
  left:50%;
  text-align:center;
  margin-left:-65px;
  top:-70px;
  white-space:nowrap;
  z-index:5;
  border-radius:2px;
  background:rgba(255,255,255,1);
  box-shadow:-1px 5px 15px rgba(0,0,0,0.1);
}

Ergebnis im Browser:

Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Bild zu Photoshop to Wordpress to Web - Teil 2 - Entwicklung
Der Hovereffekt nutzt Pseudo Elemente :before und :after um das Popup zu zeigen