Developer's Forum

Solving daily Web Developing problems

Developer's Forum Logo

Problem Add Picture

Tags:

No tags yet.

  1. Krite

    into the Matrix
    Joined: Nov '10
    Posts: 129

    offline

    Question
    1.from this content :
    Originally, I had planned to use CSS3's nth-child() pseudo class to select the various list items in my HTML, but after some consideration — and, frankly, some trial and error — I ended up adding a class name to the various list items. Here is the amended HTML for the five-image collage.
    <div id="content-slider">
    <ul class="five-img-slide">
    <li class="slide5-1">getSkinUrl(images) ?>/hero-1-of-5.jpg" alt="hero one of five"/>
    <li class="slide5-2">getSkinUrl(images) ?>/hero-2-of-5.jpg" alt="some copy"/>
    <li class="slide5-3">getSkinUrl(images) ?>/hero-3-of-5.jpg" alt="some copy"/>
    <li class="slide5-4">getSkinUrl(images) ?>/hero-4-of-5.jpg" alt="some copy"/>
    <li class="slide5-5">getSkinUrl(images) ?>/hero-5-of-5.jpg" alt="some copy"/>

    </div><!--end content-slider-->
    If i want add in static block . what did i do?

    Question 2.
    from this content :
    I begin by navigating to styles.css at skin > frontend > default > abn > css in the Magento hierarchy. I head to about line 115 and add the following description.

    /*Content Slider & Hero Images */
    #content-slider img {border: #fff solid 5px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px;}

    By setting the unordered list's position to relative and the list item's position to absolute, I create a box of sorts, where I will position the list items that contain the images.

    #content-slider .five-img-slide {list-style: none; margin: 0 0 0 -8px; position: relative; width: 960px; height:470px;}
    #content-slider .five-img-slide li {display: inline; position: absolute;}

    By setting the unordered list's position to relative and the list item's position to absolute, I create a box of sorts, where I will position the list items that contain the images.
    #content-slider .five-img-slide .slide5-2 {left: 370px;}
    #content-slider .five-img-slide .slide5-3 {left: 370px; top: 280px;}
    #content-slider .five-img-slide .slide5-4 {left: 570px; top: 280px;}
    #content-slider .five-img-slide .slide5-5 {left: 720px;}

    Remark : My theme in about line 115 is
    { background:#fff; border:1px solid #bbb; border-top:0; border-bottom-color:#666; padding:16px 16px 50px; min-height:1448px; }
    -->
    .main{padding:16px 16px 50px; min-height:350px; color: #fff; }

    /* Base Columns */
    .col-left { float:left; width:220px; padding:0 0 1px; }
    .col-main { float:left; width:686px; padding:0 0 1px; }
    .col-right { float:right; width:220px; padding:0 0 1px; }

    /* 1 Column Layout */
    .col1-layout .main { padding:16px 30px 40px; }
    .col1-layout .col-main { float:none; width:auto; }

    /* 2 Columns Layout */
    .col2-left-layout .col-main { float:right; }
    .col2-right-layout .col-main {}

    /* 3 Columns Layout */
    .col3-layout .col-main { width:452px; }
    .col3-layout .col-wrapper { float:left; width:689px; }
    .col3-layout .col-wrapper .col-main { float:right; }

    /* Content Columns */
    .col2-set .col-1 { float:left; width:48.5%; }
    .col2-set .col-2 { float:right; width:48.5%; }
    .col2-set .col-narrow { width:32%; }
    .col2-set .col-wide { width:65%; }

    .col3-set .col-1 { float:left; width:32%; }
    .col3-set .col-2 { float:left; width:32%; margin-left:2%; }
    .col3-set .col-3 { float:right; width:32%; }

    .col4-set .col-1 { float:left; width:23.5%; }
    .col4-set .col-2 { float:left; width:23.5%; margin:0 2%; }
    .col4-set .col-3 { float:left; width:23.5%; }
    .col4-set .col-4 { float:right; width:23.5%; }

    what did i do if i want follow a content but i not see line 115 add a code.
    Please help me thank you very much.

    Note : i add in style.css but i don't know true or fale please help me thank you very much
    /* 2 Columns Layout */
    .col2-left-layout .col-main { float:right; }
    .col2-right-layout .col-main {}

    /*Content Slider & Hero Images */
    #content-slider img {border: #fff solid 5px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px;}
    #content-slider .five-img-slide {list-style: none; margin: 0 0 0 -8px; position: relative; width: 980px; height:558px;}
    #content-slider .five-img-slide li {display: inline; position: absolute;}
    #content-slider .five-img-slide .slide5-1 {width: 655px; height:372px;}
    #content-slider .five-img-slide .slide5-2 {width: 325px; height:185px;}
    #content-slider .five-img-slide .slide5-3 {width: 325px; height:186px;}
    #content-slider .five-img-slide .slide5-3 {width: 655px; height:187px;}
    #content-slider .five-img-slide .slide5-5 {width: 325px; height:187px;}

    /* 3 Columns Layout */
    .col3-layout .col-main { width:452px; }
    .col3-layout .col-wrapper { float:left; width:689px; }
    .col3-layout .col-wrapper .col-main { float:right; }

    Posted 6 months ago #
  2. Rick

    Administrator
    Joined: May '10
    Posts: 397

    offline

    Hi there Krite,

    For the first question you just need to create an static block from the admin.

    Then you have to show it in your there (wherever you want).

    Here's how: http://php.quicoto.com/how-to-show-static-block-in-theme-magento/

    About the 2nd questions I don't fully understand it... In any case.. I'd recommend to download all the CSS folder and then search for the style you need.
    THe theme is probably loading more than 1 style.

    Posted 6 months ago #
  3. Krite

    into the Matrix
    Joined: Nov '10
    Posts: 129

    offline

    i want add image same this picture
    I have 5 picture in skin\frontend\default\mytheme\images\media
    picture 1 size is 655*372 pixels doc size 23.11*13.12 cm
    picture 2 size is 325*186 pixels doc size 11.47*6.56 cm
    picture 3 size is 325*185 pixels doc size 11.47*6.53 cm
    picture 3 size is 325*187 pixels doc size 11.47*6.60 cm
    picture 3 size is 655*187 pixels doc size 23.11*6.60 cm

    I tries edit code in app\design\frontend\default\mytheme\template\page\3columns.phtml
    <div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>

    <div id="content-slider">
    <ul class="five-img-slide">
    <li class="slide01">getSkinUrl(images) ?>/slide01.jpg" alt="Train LEGO"/>
    <li class="Hotproduct">getSkinUrl(images) ?>/Hotproduct.jpg" alt="Hotproduct"/>
    <li class="newproduct">getSkinUrl(images) ?>/newproduct.jpg" alt="newproduct"/>
    <li class="vertical">getSkinUrl(images) ?>/vertical.jpg" alt="vertical"/>
    <li class="freeshipping">getSkinUrl(images) ?>/freeshipping.jpg" alt="freeshipping"/>

    </div><!--end content-slider-->

    <?php /*</div>*/ ?>
    </div>
    <?php echo $this->getChildHtml('footer') ?>
    <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
    </div>
    <?php echo $this->getAbsoluteFooter() ?>
    </body>
    </html>

    and I tries edit code in skin\frontend\default\mytheme\css\style.css

    /* 2 Columns Layout */
    .col2-left-layout .col-main { float:right; }
    .col2-right-layout .col-main {}

    /*Content Slider & Hero Images */
    #content-slider img {border: #fff solid 5px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px;}
    #content-slider .five-img-slide {list-style: none; margin: 0 0 0 -8px; position: relative; width: 980px; height:558px;}
    #content-slider .five-img-slide li {display: inline; position: absolute;}
    #content-slider .five-img-slide .slide01 {width: 655px; height:372px;}
    #content-slider .five-img-slide .Hotproduct {width: 325px; height:185px;}
    #content-slider .five-img-slide .newproduct {width: 325px; height:186px;}
    #content-slider .five-img-slide .vertical {width: 655px; height:187px;}
    #content-slider .five-img-slide .freeshipping {width: 325px; height:187px;}

    /* 3 Columns Layout */
    .col3-layout .col-main { width:452px; }
    .col3-layout .col-wrapper { float:left; width:689px; }
    .col3-layout .col-wrapper .col-main { float:right; }

    but It not show picture Where is Error Please help me. Thank you very much

    Posted 6 months ago #
  4. Rick

    Administrator
    Joined: May '10
    Posts: 397

    offline

    If you see the source code of the page, can you find the images ?

    Just to make sure the code you pasted in 3columns.phtml is working.

    If you find the images in the source try to "copy & paste" the URL to your browser to check if the images actually extists.

    Regards

    Posted 6 months ago #
  5. Krite

    into the Matrix
    Joined: Nov '10
    Posts: 129

    offline

    I am tries any choice but not work please tech me step by step . thank you.

    Posted 6 months ago #

Reply

You must log in to post.