7 replies to this topic

[ce7]

Hi,

Can anyone please help? I am newbie in osc, css and php.

Trying to modify the header layout. Part of the header.php codes I used for are as below:

<div id="header" class="grid_24" style="margin-top:5px;">
  <div id="storeLogo">
  <?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">'
  . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?>
<div id="images" style="float:right;text-align:right;padding-right:0px;margin-top:-5px;">
  <?php echo tep_image(DIR_WS_IMAGES . image1.png', 'image1')?> </br>
  <?php echo tep_image(DIR_WS_IMAGES . 'image2.png', image2)?></br>
  <?php echo tep_image(DIR_WS_IMAGES . 'image3.png', 'image3')?>
</div>
<div id="PIM_SlideShow" style="margin-top:-15%">
  <?php require(DIR_WS_INCLUDES . 'slideshow.php'); // BOF PIM-oscSlideshow 1.0  ?>
</div>
</div>
</div>

Store Logo float on left and images float on right are without any problem, but the slideshow image in the middle, doesn't matter I put margin-top for -15% of 5px, it just doesn't come up to the position where I want it to be. At the earlier stage, I could make it on the right position, but after images on the right added, the middle SlideShow just doesn't work properly at all.

Can someone figure out how to move it up?

Many thanks in advance.

Lyn

Attached Files

•  header_layout.gif   25.43K   12 downloads

Edited by ce7, 21 June 2012 - 12:55 AM.

[Gasse1014life]

try replace

ce7, on 21 June 2012 - 12:50 AM, said:

<div id="header" class="grid_24" style="margin-top:5px;">
  <div id="storeLogo">
  <?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">'
  . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?>
<div id="images" style="float:right;text-align:right;padding-right:0px;margin-top:-5px;">
  <?php echo tep_image(DIR_WS_IMAGES . image1.png', 'image1')?> </br>
  <?php echo tep_image(DIR_WS_IMAGES . 'image2.png', 'Leon Parks')?></br>
  <?php echo tep_image(DIR_WS_IMAGES . 'image3.png', 'Lynn Chen')?>
</div>
<div id="PIM_SlideShow" style="margin-top:-15%">
  <?php require(DIR_WS_INCLUDES . 'slideshow.php'); // BOF PIM-oscSlideshow 1.0  ?>
</div>
</div>
</div>

by

<table>
<tr>
<td>
<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">'
  . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?>
</td>
<td>
<div id="PIM_SlideShow" style="margin-top:-15%">
  <?php require(DIR_WS_INCLUDES . 'slideshow.php'); // BOF PIM-oscSlideshow 1.0  ?>
</div>
</td>
<td>
<?php echo tep_image(DIR_WS_IMAGES . image1.png', 'image1')?> </br>
  <?php echo tep_image(DIR_WS_IMAGES . 'image2.png', 'Leon Parks')?></br>
  <?php echo tep_image(DIR_WS_IMAGES . 'image3.png', 'Lynn Chen')?>
</td>
</tr>
</table>

[ce7]

Hi Stephane,

Thank you very much for your help.
I had tried using table before but it did not work.

I copy and paste your code and tried again, it had similar result.

The slide image now in the right position, but the left hand side logo float down on top of infobox position,
and the left hand images completely disappear.

I need to have all of them above the header bar, just don't know how to make it works so far.

[multimixer]

How about using the 960 grid system?

<div id="header" class="grid_24">

  <div id="storeLogo" class="grid_3 alpha">
	<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?>
  </div>

  <div id="PIM_SlideShow" class="grid_18">
	<?php require(DIR_WS_INCLUDES . 'slideshow.php'); // BOF PIM-oscSlideshow 1.0 ?>
  </div>

  <div id="images" class="grid_3 omega">
	<?php echo tep_image(DIR_WS_IMAGES . 'image1.png', 'image1')?> </br>
	<?php echo tep_image(DIR_WS_IMAGES . 'image2.png', 'Leon Parks')?></br>
	<?php echo tep_image(DIR_WS_IMAGES . 'image3.png', 'Lynn Chen')?>
  </div>

</div>

You need to adjust the grid numbers to the size of your images, important to know is, that the total of grids within the grid_24 must be 24 too (in my example 3+3+18 = 24)

You can see an illustrated tutorial here

Edited by multimixer, 21 June 2012 - 04:03 AM.

[ce7]

thank you George,

I did make it appear after many tries.

However my boss decide not to use the image at the end.....

Thanks for all the help again!

Lyn

[multimixer]

Well Lyn, doesn't matter if your boss don't need this right now, you know how to do it, right? It's about the logic used

[ce7]

Hi George,

Thank you very much for your reply.

I actually read quite few of your articles on multimixer, helps a lot. Thanks again.

There are issues about the buttons which I really struggle with right now.

I put the remove button twice, one on localhost page which works perfectly, 2nd time I put it on web server,
this time somehow I did not make it work.

I did google search and make custom buttons which I really want to use them.

There are no website actually really tell you how to apply the buttons, I read another article of yours
http://multimixer.gr/16/05/2011/making-a-oscommerce-template-all-the-progress-step-by-step/

you mentioned the buttons in the middle of the article but I couldn't find where I should link to
buttons


my website buttons problems:
==============================================
cart content: CONTINUE button, it is a text link
Signup & login: CONTINUE button, it is a text link
Log in: same page as sign up, but the LOGIN button is default one, doesn't matter I made new buttons, put it in catalog/includes/language/english/images/buttons, and define them at catalog/includes/language/english.php
Signup: CONTINUE button, comes with default button style, not a text link
Product Information page
BACK (addon): works fine only at product information page
REVIEW: text link
Add to Cart: default button

here I also put an quantity input field refer to your page, but I can't figure out how to make the input field in between buttons and social book marks button (again refer to your website)

when you click on REVIEW on product information page
the review.php (I suppose) has three buttons
BACK: it is a text link
ADD to Cart: it is a text link
Write Review:  it is a text link

I don't know why some place they are text link, some place they are default button
and i use theme switch and themroller which make the infobox color exactly what I want,
but the button never appear in correct setting.

I had post about buttons, you also reply there, (thanks again),
Burt help to convert 2.3.1 using 2.2 image call, just I still have no idea how to do it yet.....

osc 2.3.1 buttons headache....

Lyn

Edited by ce7, 26 June 2012 - 01:01 AM.

[multimixer]

Lyn, to say something about your button issues, it would be good to see your website.

Also let's discuss this at the buttons related topic