Beiträge von ElKevo

ElKevo

okay, mit viel Kaffee und 3 zerbrochenen bleistiften hab ichs endlich mal geschaft alles so grob aussehen zu lassen wie ich es will. also text, überschrift und gepunktete linie über die ganze seite strecken usw. -> http://tinyurl.com/6xjoek7

leider komm ich an einer stelle einfach nicht mehr weiter... undzwar wie bekomm ich es hin, dass alle artikelbilder links positioniert sind und der text dann rechts daneben? (so wie im beispiel aus dem 1. beitrag http://folioway.iwakthemes.com/portfolio/bridge-museum/)

klar, könnte man jetzt wieder eine neue div-klasse erstellen und die dann jedes mal für den text und für die bilder irgendwie extra in den beitrag schreiben oder auch eine tabelle im beitrag anlegen aber gibt es da nicht sowas wie eine automatisierung der erkennt das der text in die rechte spalte gehört und jedes bild in die linke?

ElKevo

Hallo Wordpressler, Php-Gurus und CSS Künstler

Ich bin gerade dabei mein Design-Portfolio-Blog-Dingens eingerichtet und da ich keine Ahnung von CSS und PHP habe wollte ich euch mal ganz kurz um rat bitten.

Undzwar versuch ich mein bisheriges Layout http://tinyurl.com/6xjoek7 (Also die Blogartikel-ansicht)so wie dieses hier aussehen zu lassen:http://folioway.iwakthemes.com/portfolio/bridge-museum/

also sidebar rauskicken und das ganze Layout über die komplette Seite strecken, alle Bilder die im Artikel vorkommen auf die Linke Seite positionieren und den Text rechts daneben damit dieser ca. 20% (inkl. padding) der Seitenbreite einnimmt und die Bilder mit 80% den Hauptteil der Seite ausmachen. Das Kommentarlayout kann so bleiben... allerdings auch über die volle breite der Seite

klingt irgendwie kompliziert.. isses auch.. und ich kriegs überhaupt nicht hin :-/

Ich denke man muss die meisten Sachen in der Single.php und style.css ändern richtig? ich kann ja mal deren Inhalt hier reinkopieren auch wenn ich mir nicht sicher bin ob das euch weiterhilft

Single.php

PHP

<?php get_header(); ?>
<div id="content">


<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
<div id="content-wrap">
    
    <!-- BEGIN PAGE CONTENT-->
    <div id="page">
                
            <h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>            
                
                
                <ul id="entries">
                    <li>
                        <div class="entry single">
                            <?php the_content(); ?>
                            <br />
                        </div>
                        
                        <div class="tags">
                            <?php the_time('F jS, Y') ?>  <span>|</span> <?php the_author() ?>  <span>|</span>  <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> | <?php the_tags(); ?>
                        </div>
                    </li>
                </ul>
                
                
                <div class="author">
                    <h2>About The Author</h2>
                    <div class="pic"><?php echo get_avatar( get_the_author_email(), '78' ); ?></div>
                    <div class="info">
                        <h3><?php the_author_firstname(); ?> <?php the_author_lastname(); ?></h3>
                        <p><?php the_author_meta('description'); ?></p>
                    </div>    
                </div>
                
                
                <div id="comments">
                <?php comments_template() ?>
                </div>
                <!-- php display_comments(); -->
    
    <?php endwhile; else: ?>
    
    <?php include (TEMPLATEPATH . '/404.php'); ?>    
    
    <?php endif; ?>    
    
    
    
    
    <?php get_sidebar(); ?>
    </div>
    <!-- /END PAGE CONTENT -->
    
<?php get_footer(); ?>

Alles anzeigen

und die css könnt ihr euch hier ansehen: http://tinyurl.com/3j2ez2x

dann sag ich schonmal Danke für jede brauchbare Antwort :)

bis dann
Kevin

ElKevo

danke.... aber ich hab immernoch das gleiche problem :(

ElKevo

ok.... es funktioniert schonmal...
aaaaaber!
irgendwie zerschießt das ding mein layout -> *klick*
eigentlich soll bei "Bilder Zufall" und "Neue Bilder" noch ein rahmen rum wie bei den Kategorien.
hat jemand eine Lösung parrat?

ElKevo

gibt es mitlerweile ein php widget?!

ElKevo

Stimmt... Entschluldigung!

http://www.bratze-bunker.de --> Blog

ElKevo

Guten Tag!
Ich bin gerade dabei ein WordPress Blog in meine Seite einzufügen, Design usw. ist fertig nur hab ich noch ein Problem: Ich habe mein Blog Per I-Frame(height="544" width="867" ich weiß, I-Frames sind nicht die beste lösung ) in die Website eingebunden...
aber nach rechts sind noch ca. 400 px platz (dh. man knn nach rechts ins leere scrollen...)
ich zeig euch mal den CSS Code, vielleicht kann mir dann einer helfen.

Code

/*
Theme Name: BBB
Author: Kevin
*/


/* Basics and Typography */
body   { color: #000; font: 75%/1.2 "Trebuchet MS", Verdana, Arial, Sans-Serif; background: #eaebe5 url(images/background.gif); text-align: center; margin: 0; padding: 0 }
#header   { margin: 0 auto; padding: 0; position: relative; top: 0; width: 0; height: 0 }
#header h1  { font-size: 1.7em; text-align: center; margin: 0; padding: 0 0 0 }
#header h1 a {
 color: #fff;
}
#header h1 a:hover {
 color: #efefef;
 text-decoration: none;
}
#head {
 text-align:center;
}


p {
    font-size: 1em;
    margin: 0 0 1.2em;
    padding: 0;
    line-height: 1.5em;
}
ol, ul {
    font-size: 1em;
    line-height: 1.5em;
    margin: 1.2em 0 1.2em 3em;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {
    margin: .9em 0;
    font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
    color: #3e3f5f; 
}
h1, h2 {
    font-size: 1.3em;
}
h3 {
     font-size: 1.2em;
}
h4 {
    font-size: 1.0em;
}
a {
    text-decoration: none;
        background: none;
}
a:link {
    color: #000000;
}
a:visited {
    color: #000000;
}
a:hover, a:active {
    color: #cecece;
}
input, textarea, select {
    border: 1px solid #000;
    background: #c7c7c7;
    color: #000;
    font: 8pt/1.2 Tahoma, Arial, sans-serif;
}
.button {
    border: 1px solid #000;
    background: #c7c7c7;
    color: #000;
    font: bold 8pt/1.2 Tahoma, Arial, sans-serif;
}
blockquote  { font-size: 0.9em; background: #fff url(images/bqbg.gif) no-repeat right bottom; margin: 6px 4px; padding: 10px; border: solid 1px #ccc }
code {
    font-family: monospace;
    color: #666;
}
form, img {
    margin: 0;
    padding: 0;
    border: 0px none;
}
.small {
    font-size: 0.9em;
    color: #999;
}
#container   { background: #eaebe5; text-align: left; margin: 0 auto; padding: 0; width: 800px; border-style: none solid solid; border-width: 0; border-color: #999 }


#topcontentdouble {
 float: left;
 width: 300px;
 height: 27px;
 /*background: #fff;*/
 margin: 0 9px;
 display: inline;
}
#topcontent  { background: #fff; margin: 9px auto 0; width: 950px; height: 27px }
#bottomcontentdouble {
 display: inline;
 float: left;
 width: 500px;
 /*background: #fff;*/
 margin: 9px 9px 0 9px;
 height: 27px;
}
#content {
 float: left;
 width: 370px;
 margin:  0 9px;
 display: inline;
}


#singlecontent {
 width: 730px;
 padding:0;
 margin: 0 auto;
}
.post {
 margin: 0 6px 30px 5px;
 padding: 5px;
 background: #EAEBE5;
 border: 1px solid #000000;
}


.post a {
 color: #000000;
 text-decoration: none;
}
.post a:hover {
 color: #cecece;
}
.post a:visited {
 color: #000000;
}
.post h2 {
 color: #000000;
 font-size: 1.8em;
 margin: 40px 0 0 10px;
}
.post h3 {
 float: right;
 color: #000000;
 font-size: 1em;
 margin: 0; padding: 0;
}
.meta {
 font-size: .9em;
 line-height: 18px;
}
.feedback {
 text-align: right;
 font-size: 1.0em;
}
.author {
 width: 200px;
 float: right;
 text-align: right;
}




/* Page Navigation */
.postnavigation {
 height: 45px;
}
.left  { padding-left: 0; float: left }
.right  { padding-right: 0; float: right }
.leftdouble {
 float: left;
 padding-left: 10px;
}
.rightdouble {
 float: right;
 padding-right: 10px; 
}




/* Sidebars */
#sidebar2 {
 position: relative;
 float: right;
 width: 200px;
 margin: 10px 0 0 0;
 display: inline;
}
#sidebar {
 position: relative;
 float: left;
 width: 200px;
 margin: 10px 0 0 10px;
 display: inline;
}
#sidebar h2 {
 margin:0; padding: 3px 0;
 color: #000000;
}
#sidebar ul, #sidebar2 ul {
 padding:0; margin:0;
}
#sidebar ul li, #sidebar2 ul li  { list-style-type: none; list-style-image: url(none) }
#sidebar ul, #sidebar ul li {
 margin: 0;
 padding: 0;
}
#sidebar ul li ul, #sidebar2 ul li ul {
 margin: 0 5px 0 0;
 padding: 2px 3px 5px 3px;
}
#sidebar ul li ul li, #sidebar2 ul li ul li  { background: url(images/bullet.gif) no-repeat 0 0.6em; display: block; margin: 0; padding: 0 0 0 10px }
#sidebar ul li ul li a {
 display: block;
 height:1%; /* IE WIN */
}
#sidebar ul li ul li a:hover {
 text-decoration: none;
}
#sidebar ul li ul li ul {
 margin: 0;
 padding: 0;
}
#sidebar2 ul, #sidebar ul li {
 margin: 0;
 padding: 0; 
}
.sidebg   { background: #eaebe5 url(images/sidebg.gif) repeat-y; padding: 5px }


/* The following is the fix for 3-pixel-jog bug in IE */
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #content {
 /*margin-right: 7px;*/
}
 
* html #sidebar, * html #sidebar2 {
 height: 1%;
}
/* End hide from IE5/mac */




/* Comments */


#response {
 margin: 0px 110px;
}
#commentlist {
 padding: 0px 10px 0px 10px;
 margin-left: 10px;
 margin-right: 10px;
 color: #777;
 list-style-type: none; 
 text-align: justify;
}
#commentlist li  p{
 padding: 0px;
 margin: 8px 0px 0px 0px;
}
.commentname {
 width: 220px;
 float: left;
 font-size: 0.9em;
 margin: 0;
 padding: 0  0 2px 0;
}
.commentinfo{
 width: 250px;
 float: right;
 text-align: right;
}
.commenttext {
 clear: both;
 padding-top: 0px;
 margin-top: 0px;
 margin-bottom: 70px;
 border-top: 1px solid #e4ebef;
 text-align:left; 
 line-height:16px;
}


/* Comment Form  */
h2#postcomment {
 margin: 40px 0px 0px 0px;
 padding: 0 0 20px 10px;
}
#commentform {
 padding: 1px 20px;
 margin: 0;
}
#commentboxes {
 width: 200px;
 float: left;
 color: #000;
 font-size: 0.9em;
}


#inputbox {
 clear: both;
 color: #777;
 font-size: 0.9em;
}
#button {
 padding-top: 0.5em;
}
#commentsbottom {
 margin: 0;
 padding: 0;
 height: 22px;
}


/* Credits */
#footer {
 margin: 10px auto;
 width: 950px;
 font-size: .8em;
}
#footer p {
 margin-top: 0;
}
.clearer {
 clear: both;
 line-height: 0px;
}




/* Typography */


.post {
 color: #000;
 text-align: left;
}


.title a  {
 clear:both;
 text-align: left;
 height: 20px;
 color: #000000;
 display: block;
 text-decoration: none;
 font-size: 1.6em;
 padding: 8px 0 6px 0;
}
.title a:hover {
 color: #cecece;
}
.storycontent {
 padding: 0px 0px 5px 0px;
}
.singlepages p {
 text-align: left;
 margin: 0px 105px 80px 105px;
 line-height: 20px;
}
.storycontent a {
 color: #000000;
 text-decoration: underline;
}
.storycontent a:hover {
 color: #cecece;
}
.storycontent a:visited {
 color: #000000;
}


/* Page Navigation */
.left a {
 color: #000000;
 font-size: 0.9em;
}
.right a{
 font-size: 0.9em;
 color: #000000;
}
.leftdouble a{
 color: #000000;
 font-size: 0.9em;
}
.rightdouble a{
 font-size: 0.9em;
 color: #000000;
}




/* Comments */
.commentauthor {
 font-weight: bold;
 font-size: 1.2em;
 padding: 0 0 2px 0;
 margin: 0;
 color: #000000;
}
.commentauthor a  { font-weight: bold; background: url(images/bullet.jpg) no-repeat right top; margin: 0; padding: 0 20px 0 0 }
.commentdate {
 font-size: 0.8em;
 text-align: right;
 line-height: 18px;
 padding: 0;
 margin: 0;
}
#nocomment, #commentsclosed {
 text-align: center;
 color: #777;
 font-size: 1.1em;
}


/* Comments Form */
#comment  {
 width: 320px;
}
#comment, #author, #url, #email, #press{
 background: #fff;
 font-size: 1.1em;
 color: #777;
 padding: 1px 2px 1px 1px;
}
#comment, #author, #url, #email{
 border: 1px solid #000;
}
#comment:hover, #author:hover, #url:hover, #email:hover{
 border: 1px solid #777;
}
#comment:focus, #author:focus, #url:focus, #email:focus{
 background: #fff;
 border: 1px solid #000;
 color: #777;
 padding: 1px 2px 1px 1px;
}
#commentboxes p {
 margin: 0;
 padding-bottom: 0.9em;
}




h2#comments {
 margin-bottom:40px;
}




p.feeds {
 float: right;
 margin-top: -1.8em;
 font-size: 0.9em;
}




p.feeds a, p.feeds a:hover  {
 text-decoration: none;
}




p.feeds a:hover {
 color: #000000;
}
#inputbox {
 clear: both;
 color: #777;
 font-size: 0.9em;
}
#inputbox a {
 color: #777;
}
#inputbox a:hover {
 color: #FFFFFF;
}




p.inputbox {
 margin: 0;
 padding-bottom: 10px;
}




p.pages  { text-align: center; margin: 0; padding: 0 0 40px }




p.pages a {
 color: #cecece;
}




/* Credits */
p.credits {
 padding: 0px;
 text-align: center;
 margin: 10px 0px; 
 color: #999;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 0.9em;
}




/* Search/Archives/Categories Results Pages */
.searchresult, .searchresult h2 {
 padding: 0;
 margin: 0;
}
.searchresult a {
 color: #000000; 
}
.searchinfo {
 font-size: .9em;
 line-height: 18px;
 padding: 0 0 2px 0;
 color: #000;
 margin: 0 ;
}
.searchdetails {
 font-size: .9em;
 line-height: 18px;
 padding: 0 0 2px 0;
 color: #000;
 margin: 0 ;
 border-bottom: 1px solid #d6debb;
}


/* 
This piece of code is for clearing
the floats without structural markup
Don't modify it
*/
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}
.clearfix {
 display: inline-table;
}


/* Hides from IE-mac \*/
* html .clearfix {
 height: 1%;
}
.clearfix {
 display: block;
}
/* End hide from IE-mac */
.alt {
        border-bottom: 1px solid #efefef;
        }
.notice  { color: black; font-size: 1.2em; font-weight: bold }
.notice2  { color: black; font-weight: bold }
#wp-calendar a  { background: #eaebe5 }

Alles anzeigen

Danke im vorraus
Kevin

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Beiträge von ElKevo

Template anpassung... bräuchte da mal kurz eure hilfe

Template anpassung... bräuchte da mal kurz eure hilfe

PHP in Widgets?

PHP in Widgets?

PHP in Widgets?

Blog "sprengt" I-Frame

Blog "sprengt" I-Frame