WPESP Theme Fotos Skalieren

TodesEngel

Hallo liebe Community, ich verwende das Theme WPESP. Dort möchte ich gerne die angezeigten Fotos größer machen. Derzeit werden sie, wie auch immer (finde die entsprechende Codezeile nicht) wie folgt skaliert. 492px × 328px (skaliert auf 359px × 269px).
Link zur Website http://www.Hamburg-Digital.com/web

Folgende CSS Datein sind im Theme vorhanden:

CODA.CSS

Code

div#slider {margin: 0 auto 28px; position: relative; width: 946px;}


        div#slider img.scrollButtons {position: absolute; top: 200px; cursor: pointer}


                div#slider img.scrollButtons.left {left: -26px;}


                div#slider img.scrollButtons.right {right: -26px}


        /* .SCROLL */
        div#slider div.scroll {clear: left;height: 456px; overflow: auto; overflow-x: hidden; padding:56px 0 0; position: relative; /* fix for IE to respect overflow */width: 965px;}


                /* .PANEL */
                /* DIV.PANEL is close to DIV.FEATURED style from layout.css  */
                   div#slider div.scroll div.scrollContainer div.panel {height: 400px; overflow: hidden; padding: 0 1px 0; width: 945px;} /* 1px padding for a good view */
                        div#slider div.scroll div.scrollContainer div.panel div.info{float: left; width: 305px; position: absolute;}


                                div#slider div.scroll div.scrollContainer div.panel div.info dl dt{float: left; display: inline;}


                        div#slider div.scroll div.scrollContainer div.panel ul.view{margin-top: 285px; position: absolute; width: 640px;}
                                div#slider div.scroll div.scrollContainer div.panel ul.view li{display: inline; margin-right: 7px; }


                        div#slider div.scroll div.scrollContainer div.panel div.stick img.new{float: right; top: 241px; position: relative; z-index: 1000;}
                        div#slider div.scroll div.scrollContainer div.panel div.stick a.afternew{background-color: #fff;border: 1px solid #333; float: right; height: 369px; right: -66px;padding: 14px; position: right; width: 492px;}


                        div#slider div.scroll div.scrollContainer div.panel div.stick a{background-color: #fff;border: 1px solid #333; float: right; height: 369px; padding: 14px; position: relative; width: 492px;}
                        div#slider div.scroll div.scrollContainer div.panel div.stick a:hover{border: 1px solid #999;}


                                div#slider div.scroll div.scrollContainer div.panel div.stick a:hover img{opacity: .5; filter:alpha(opacity=50);}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

TodesEngel

LAYOUT.CSS

Code

/* --------------------------------------------------------------


        LAYOUT


-------------------------------------------------------------- */


/* --------------------------------------------------------------


        DEFAULT


-------------------------------------------------------------- */




body{/* background: #fff url('../images/gridbg.gif') repeat; */ background-color: #efefef;} /* background: just for developing */




/* --------------------------------
        CLASSES
-------------------------------- */


        /* --------------------------------
                Float
        -------------------------------- */


        .fl{float: left;}
        .fr{float: right;}


        .alignleft{float: left; padding-right: 14px; margin-bottom: 18px;}
        .alignright{float: right; padding-left: 14px; margin-bottom: 18px;}


        /* --------------------------------
                Rounder Cornes (Just Firefox, Safari and Ie8 at this moment)
        -------------------------------- */


        .br-rd4{border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px;}
        .br-rd2{border-radius: 4px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px;}




/* --------------------------------
        CENTER ALL 946px
-------------------------------- */


        div#header, div#navigation div#menu, div#submenu ul, div.featured, div#works, div#content, div#foot{margin: 0 auto; overflow: hidden; width: 946px;}




/* --------------------------------------------------------------


        TOP (header)


-------------------------------------------------------------- */




/* --------------------------------
        Headre
-------------------------------- */


        div#header{padding: 28px 0;}


                div#header h1 {float: left;}
                        div#header h1 a{background: transparent url('../images/entwurf3_esp.png') no-repeat;border: none;display: block;height: 60px;overflow: hidden;text-indent: -2000px;width: 568px;}


                div#header p{float: right; width: 304px;}




/* --------------------------------
        Navigation
-------------------------------- */


        div#navigation {background-color: #333;}


                div#navigation div#menu {height: 56px; overflow: hidden;}


                div#navigation div#menu ol {float: left;}
                div#navigation div#menu ol li{border-left: 1px solid #666;float: left;}
                div#navigation div#menu ol li#menulast{border-right: 1px solid #666;}
                        div#navigation div#menu ol li a {display: block; height: 56px; padding-left: 31px; width: 129px;}


                                /* Vertical centring with line-height:0 and marging-top */
                                div#navigation div#menu ol li a small{display: block; line-height:0; margin-top: -7px;}


                div#navigation div#menu div#feed{display: inline; float: right;}
                        div#navigation div#menu div#feed a {background: transparent url('../images/feed-nav.gif') no-repeat;display: block; height: 56px; width: 66px;}
                        div#navigation div#menu div#feed a:hover{background-position: 0 -56px;}
                                div#navigation div#menu div#feed a span{display:none;}




/* --------------------------------------------------------------


        WORK PAGES


-------------------------------------------------------------- */




/* --------------------------------
        Featured
-------------------------------- */


        div.featured{margin: 56px auto;}
                div.featured div.info{float: left; width: 505px; position: absolute;}


                        div.featured div.info dl dt{float: left; display: inline;}


                        div.featured ul.view{margin-top: 285px; position: absolute; width: 505px;}
                                div.featured ul.view li{display: inline; margin-right: 7px;}


                div.featured div.stick a{background-color: #fff;border: 1px solid #333; float: right; height: 369px; padding: 14px;width: 492px;}
                div.featured div.stick a:hover{border: 1px solid #999;}


                        div.featured div.stick a img{background-color: #fff;opacity: 1; filter:alpha(opacity=100); width: 492px;}
                        div.featured div.stick a:hover img{background-color: #fff;opacity: .5; filter:alpha(opacity=50); width: 492px;}




/* --------------------------------
        Works
-------------------------------- */


        div#works{margin-top: 56px;}


                div#works div.minus14{margin-left: -14px; overflow: hidden; width: 960px;} /* Why width=960px? We have add the negative margin-left (-14px=+14px) to the div#workd width (946px). */


                div#works div.minus14 div.thumb{margin-left: 14px; padding-bottom: 28px; display: inline; float: left; width: 60px;}
                        div#works div.minus14 div.thumb a{background-color: #fff;border: 1px solid #333; display: block; height: 60px; padding: 5px 0; text-align: center; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px;}
                        div#works div.minus14 div.thumb a:hover{border: 1px solid #999;}


                                div#works div.minus14 div.thumb a img{background-color: opacity: 1; filter:alpha(opacity=100); #fff; width: 40px; height: 60px;}
                                div#works div.minus14 div.thumb a:hover img{background-color: #fff; opacity: .5; filter:alpha(opacity=50); width: 40px; height: 60px;}

Alles anzeigen

TodesEngel

Code

/* --------------------------------------------------------------


        CONTENT


-------------------------------------------------------------- */




/* --------------------------------------------------------------
        CASE STUDY & ABOUT PAGES
-------------------------------------------------------------- */


div#content{padding: 56px 0;}


        /* --------------------------------
                Ct-info
        -------------------------------- */


        div#content div#ct-info{display: inline; float: left; width: 626px;}


                div#content div#ct-info a.brd{background-color: #fff; border: 1px solid #333;display: block;}
                div#content div#ct-info a.brd:hover{border: 1px solid #999;}
                        div#content div#ct-info a.brd:hover img{background-color: #fff;opacity: .5; filter:alpha(opacity=50); width: 622px;}


                div#content div#ct-info img {margin: 0 0 -0.5em;} /* The height should be multiple of 18px */


                div#content div#ct-info ul, div#content div#ct-info ol {margin-left:66px; padding-left:14px;}
                        div#content div#ct-info ul ul, div#content div#ct-info ol ol {margin-left:26px;}


        /* --------------------------------
                Featured
        -------------------------------- */


        div.featured div.stick img.new{float: right; top: 241px; position: relative; z-index: 1000;}
        div.featured div.stick a.afternew{background-color: #fff;border: 1px solid #333; float: right; height: 369px; right: -666px;padding: 14px; position: relative; width: 492px;}




                /* --------------------------------------------------------------
                        CONTACT
                -------------------------------------------------------------- */


                div#content div#ct-info div#contact{background-color: #ccc; margin: 0; padding: 52px 66px;}


                        div#content div#ct-info div#contact div#usermessageb.failure{border: 2px solid #ccc; clear: both; padding: 4px;}


                        div#content div#ct-info div#contact form legend {display: block;}


                        div#content div#ct-info div#contact form fieldset.cf_hidden{display: none;}


                        div#content div#ct-info div#contact form fieldset ol{margin: 0; padding: 0;}


                                div#content div#ct-info div#contact form fieldset ol li{list-style: none; margin: 0;}


                                        div#content div#ct-info div#contact form fieldset ol li input {border: 0; margin-bottom: 14px; padding: 1px; width: 480px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px;}
                                        div#content div#ct-info div#contact form fieldset ol li textarea{border: 0;  padding: 1px; width: 480px; margin-bottom: 18px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px;}


                                div#content div#ct-info div#contact form p input{background-color: #fff; border: 0; color: #000;  height: 18px; width: 190px; border-radius: 1px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px;}




        /* --------------------------------
                Sidebar
        -------------------------------- */


        div#content div#sidebar{display: inline; float: right; margin-top: 4.2em; text-align: left; width: 264px;}
                div#content div#sidebar dl dt{float: left; display: inline;}
                div#content div#sidebar dl dd{border-bottom: 1px solid #333;}


                div#content div#sidebar ul {margin-top: -8px;} /* After dl */
                                div#content div#sidebar ul li {display: inline;}
                                        div#content div#sidebar ul li a{border-bottom: 1px solid #333; display: block; padding: 9px 0 8px;}


                div#content div#sidebar div.vcard img{margin-bottom: 1.6em;}


                div#content div#sidebar div.vcard a.card{background: transparent url('../images/vcard.png') no-repeat 0 100%; padding-left: 24px;}


                div#content div#sidebar div.vcard span{margin: 0; padding: 0;}




/* --------------------------------------------------------------


        FOOTER


-------------------------------------------------------------- */


        div#footer{background: #333;height: 120px;}
                div#footer div#foot{padding: 0 14px;}
                        div#footer div#foot ol#footnav{padding: 56px 0 9px; overflow: hidden;}
                                div#footer div#foot ol#footnav li{display: inline;float: left; margin-right: 7px;}


        div#footer div#foot p.rss{background: url('../images/feed-icon.gif') no-repeat 0 50%; padding-left: 18px;}

Alles anzeigen

Ich wäre euch sehr dankbar wenn ihr mir einen Tipp geben könntet, wenn nicht sogar eine Lösung. Vielen Dank[/CODE]

kaiser

Ich glaube da kann Dir niemand helfen, weil wir ja keinen Link haben und daher auch nicht wissen sollten, nach was wir suchen sollen (siehe Forenregeln: Link posten).

Wenn Du in meine Signatur schaust, dann findest Du dort einen Link für das FF-Addon Firebug. Damit kannst Du Dir Elemente leicht raussuchen (Karteireiter Html) und siehst rechts davon auch gleich wo die dazugehörigen Style-Definitionen gesetzt sind (welche Datei). Weiters kannst Du dort auch gleich probieren wie sich welche Änderung auswirken wird.

TodesEngel

Hi, vielen Dank für den Tipp mit dem Add On.

Link: http://www.Hamburg-Digital.com/web

TodesEngel

Ich komme trotz Addon leider nicht weiter

Habe nun den Code im Quelltext gefunden

Code

<div class="stick">
<a class="br-rd4" title="Go to View Case Study page Querformat" href="http://hamburg-digital.com/web/querformat/">
<img width="359" height="269" title="panel image of Querformat" alt="Querformat" src="http://hamburg-digital.com/web/wp-content/uploads/galerie/portfolio/quer.jpg"/>




</a>




</div>

Alles anzeigen

Ich hoffe, ihr könnt mir weiterhelfen.

Lg

kaiser

Poste einmal den Teil von Deinem Template, wo der Slider aufgebaut wird (und falls vorhanden auch den Teil der via Funktion eingebunden wird). In keiner der Css-Files ist etwas definiert. (Notiz: div#slider div.scroll div.scrollContainer div.panel div.stick img.new kann ich zwar in layout.css &coda.css finden, aber im Html nirgends). Auch im coda-slider.js ist nichts dergleichen definiert. Bleibt also nur das Templage oder der Admin-Bereich.

Edit: Such zuerst in den Templates und dann in etwaigen Template-Admin-Dateien. Ist wahrscheinlicher es direkt im Template im ScrollContainer-Div oder der eingebundenen Funktion zu finden.

TodesEngel

Hallo Kaiser, vielen Dank für deine Antwort.
Dies ist der Link direkt zum WP Theme http://wpesp.com/

Hier die home.php, dort wird Slider eingebundenm jedoch ohne zusätzliche Angaben.

PHP

<?php
/*
Template Name: Home
*/
?>
<?php // http://codex.wordpress.org/Pages#Alternate_Methods_for_Setting_the_Front_Page | Alternate Methods for Setting the Front Page ?>


<?php get_header(); ?>


        <div id="slider">




                <!-- =============================================================
                        #PANEL
                ============================================================= -->


                <!-- element with overflow applied -->
                <div class="scroll">
                        <!-- the element that will be scrolled during the effect -->
                        <div class="scrollContainer">


                                <?php
                                        $the_query = new WP_Query('category_name=featured&showposts=8');
                                        while ($the_query->have_posts()) : $the_query->the_post();
                                        $do_not_duplicate = $post->ID;
                                        // We show just 1 post of category panel order by post date descendent and don't be show after | http://codex.wordpress.org/The_Loop#Multiple_Loops_in_Action
                                ?>
                                        <div class="panel">
                                                <?php portfolio_panel() ?>
                                        </div>
                                <?php endwhile; ?> <!-- End panel -->






                <?php
                        query_posts('category_name=work');
                        // http://codex.wordpress.org/Template_Tags/query_posts | We show posts from category Work
                ?>




                        <?php
                                if (have_posts()) : while (have_posts()) : the_post();
                                if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts);
                                // http://codex.wordpress.org/The_Loop#Multiple_Loops_in_Action
                        ?>
                                <div class="panel">
                                        <?php portfolio_panel() ?>
                                </div>
                        <?php endwhile; endif; ?>


                        </div><!-- .scrollContainer -->
                </div><!-- .scroll -->




                <!-- =============================================================
                        #WORKS
                ============================================================= -->




        </div><!-- #slider -->




<?php get_footer(); ?>

Alles anzeigen

In der Datei portfolio_panel.php ist der eigentliche Aufbau des Sliders, soweit ich da beurteilen kann.

PHP

<?php
function portfolio_panel(){
        global $post;
        // CUSTOM FIELDS | http://codex.wordpress.org/Using_Custom_Fields


        $client = get_post_meta($post->ID, "client_value", $single = true);
        $company = get_post_meta($post->ID, "company_value", $single = true);
        $deliverables = get_post_meta($post->ID, "deliverables_value", $single = true);
        $src_featured_image = get_post_meta($post->ID, "src_featured_image_value", $single = true);
        $view_web_site = get_post_meta($post->ID, "view_web_site_value", $single = true);
?>


<!-- INFO -->
<div class="info">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Go to View Case Study of <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>


        <?php if($client or $company or $deliverables !== '') { ?>
                <dl>
                        <?php if($client !== '') { ?><!-- If have Cliente print it -->
                                <dt><strong>Client</strong>:&nbsp;</dt>
                                <dd><?php echo $client; ?></dd>
                        <?php } ?>


                        <?php if($company !== '') { ?>
                        <dt><strong>Company</strong>:&nbsp;</dt>
                        <dd><?php echo $company; ?></dd>
                        <?php } ?>


                        <?php if($deliverables !== '') { ?>
                        <dt><strong>Deliverables</strong>:&nbsp;</dt>
                        <dd><?php echo $deliverables; ?></dd>
                        <?php } ?>
                </dl>
        <?php } ?>


        <?php the_excerpt(); ?>


</div><!-- #info -->


<!-- VIEW -->
<ul class="view">
        <li><a href="<?php the_permalink() ?>" title="Go to View Case Study page <?php the_title_attribute(); ?>"><strong>View Case Study</strong></a></li>


        <li>&Iota;</li>


        <li><a href="<?php echo $view_web_site; ?>" title="Go to View Web Site"><strong>View Web Site</strong></a></li>


        <?php edit_post_link('Edit', '<li> | <li></li><li>', '</li>'); ?>
</ul><!-- #view -->




<!-- STICK -->
<div class="stick">
        <?php if (in_category(5)): // Featured Category (in our case id=5) ?>
                <img class="new" src="<?php bloginfo('template_url'); ?>/style/images/new.png" width="66" height="28" alt="New!" />
        <?php endif ?>
        <a class="<?php if (in_category(5)): // Featured Category (in our case id=5) ?>afternew <?php endif ?>br-rd4" href="<?php the_permalink() ?>" title="Go to View Case Study page <?php the_title_attribute(); ?>"><img src="<?php echo $src_featured_image; ?>" width="359" height="269" alt="<?php the_title_attribute(); ?>" title="panel image of <?php the_title_attribute(); ?>" /></a>
</div><!-- #stick -->
<?php } ?>

Alles anzeigen

kaiser

hm. ich komm da jetzt auch nicht drauf. Das einzige, was mir aufgefallen ist, dass da wirklich ein img.new daher kommt, das aber auf der Seite nirgendwo auftaucht. Weiters hast Du in der home.php [COLOR=#000000][COLOR=#0000BB]<?php portfolio_panel[/COLOR][COLOR=#007700]() [/COLOR][COLOR=#0000BB]?> drinnen. Da fehlt ein ";" am Ende (2 mal in der Datei)

Ich verwende näml derzeit selbst dieselbe Slider-Technik und definiers in einem Css-File, kann mich aber erinnern, dass ich das auch selbst eine Zeitlang gesucht habe.

Tip Am Rand: Installier Dir zB Proton-Code-Editor, gib die Zahl ein und fahr einfach einmal eine Suche über alle Dateien. Falls es dort nicht auftaucht, dann schau bitte nochmal in deinen Admin-Einstellungen durch.
[/COLOR][/COLOR]

TodesEngel

Vielen vielen Dank. Der Tipp mit ALLEN Datei suchen war die Lösung.

In der portfolio_panel.php Zeile 57

PHP

<a class="<?php if (in_category(5)): // Featured Category (in our case id=5) ?>afternew <?php endif ?>br-rd4" href="<?php the_permalink() ?>" title="Go to View Case Study page <?php the_title_attribute(); ?>"><img src="<?php echo $src_featured_image; ?>"  alt="<?php the_title_attribute(); ?>" title="panel image of <?php the_title_attribute(); ?>" /></a>

Dort war die größe mit angegeben ! Perfekt. Vielen Dank !

Willkommen! Melden Sie sich an oder registrieren Sie sich.

WPESP Theme Fotos Skalieren

Jetzt mitmachen!