Wygląd newslettera

Cześć formumowicze,
liczę na waszą pomoc przy zmianie wyglądu modułu newslettera. Na tą chwilę prezentuje się tak
a chciałabym aby wyglądał tak
należałoby go wyśrodkować i pewnie w kodach coś pozmieniać...walczę z tym od rana,ale już mi pomysłów brakuje tym bardziej,że są to moje początki na click shopie proszę o pomoc!

 

Trzeba zmodyfikować plik: boxes > Newsletter > box

Kod:

<div id="box_newsletter">
<div class="f-row">
<div class="f-grid-2">
  <div class="boxhead">
  <span><img src="{baseDir}/public/images/1px.gif" alt="" class="px1">{$boxNs->$box_id->title|escape}</span>
  </div>
  </div>
  <div class="f-grid-6">
  {if $boxNs->$box_id->text}<h5 class="boxintro">{$boxNs->$box_id->text}</h5>{/if}
  </div>
 
  <div class="f-grid-4">
 
  <form action="{route key='newsletterSign' full=true ssl=true}" method="post">
  <fieldset>
  {include file='formantispam.tpl'}
  <input type="text" name="email" value=""  placeholder="{translate key='Enter your e-mail address'}" class="newsletter-input">
  <button type="submit" class="btn btn-red">
  <img src="{baseDir}/public/images/1px.gif" alt="" class="px1">
  <span>{translate key="Subscribe"}</span>
  </button>
  </fieldset>
  </form>
  </div> </div>
  </div>

a w pliku user.css

Kod:

#box_newsletter{ border-bottom: 1px solid #ebebeb; border-top: 1px solid #ebebeb; margin-top:10px; margin-bottom:10px; padding-top:10px; padding-bottom:10px;height:40px;
  .boxhead{
  span{  color: #000;
  display: block;
  font-size: 22px;
  margin-top: 0;
  padding: 15px 15px 15px 0;
  text-transform: uppercase;}
  }
  .f-grid-6{
  h5.boxintro{ color: #000; margin:0;
  font-size:12px; padding-top:15px; padding-bottom:15px;}
  }
  .f-grid-4{
  form{margin:0; padding:0; border:none; background:#eff1f5;m argin-top:5px;
  .newsletter-input{margin:0; padding:0; border:none; background:none; color:#000; font-size:12px;  padding-left:10px; line-height:35px; height:35px;}
  .btn-red{ border:none; background:none; line-height:35px; height:35px;
  img{display:none;}
  span{display:block; color:#000; font-size:12px;}}
  }
  }
}

 

newsletter faktycznie zmienił wygląd na pożądany,ale co innego się posypało załączam zdjęcia jak powinno być
i jak się zmieniło menu po zmianie pliku newslettera.


Dla uściślenia zmiany wprowadziłam w



Przepraszam za tyle obrazów,ale chciałabym wprowadzić tę zmianę nie tracąc na walorach estetycznych

 

zmieniłam newslettera w trochę inny sposób,ale zadowalający dla mnie mimo wszystko dziękuję za pomoc

 

cześć, liczę na Waszą pomoc. Nie wiem czy to potrzebny skrypt - jeśli tak to jaki? Chciałabym umieścić box - newsletter u siebie w sklepie, po lewej stronie, z zaproszeniem do zapisu. Jest taka możliwość?
W pliku podgląd jak chciałabym, żeby to wyglądało.