You are not logged in.

W2D 8.0 Seyffenbrandt Anpassung Eyecatcher

Controlpanel

Statistic

  • Members: 13113
  • Threads: 18186
  • Postings: 119693 (ø 46.07/day)

  • Greetings to our newest member: mislonly

w2d Premium-Support

Die Experten für web to date / shop to date

Facebook

harlekin8

Intermediate

  • "harlekin8" started this thread

Posts: 280

  • Send private message

1

Sunday, October 30th 2011, 12:24pm

Seyffenbrandt Anpassung Eyecatcher

Moin,

das Design Seyffenbrandt ist teilweise sehr eigensinnig. Bei Auflösungen > 1280px wird der Kopbereich skaliert, so daß es zu unschönen Effekten kommen kann.

! Originaldateien immer vorher sichern !

Hier ein Lösungsweg um das zu umgehen:

Die navigation ccml wurde so angepasst:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<style type="text/css">
<cc:if cond="&topic.properties.design.topic.eyecatcher.visible">
#logocontainer {
width: 100%;
max-width: 1280px;
height: 400px;
overflow: hidden;
position: relative;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
margin: 0 auto;
}
<cc:else>
#logocontainer {
width: 100%;
max-width: 1280px;
height: 60px;
overflow: hidden;
position: relative;
  margin: 0 auto;
}
</cc:if>


weiter unten im Javascript einfach den Bereich "searchcontainer" auskommentieren:

Javascript source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

...
...
function reflow() {
  $('#menu').css({'left': (Math.floor($('#logocontainer').width() - 20 - $('#menu').width())/2)+'px', 'visibility': 'visible'});
$('#logocontainer h1').css({'left': (Math.floor($('#logocontainer').width() -  $('#menu').width())/2)+'px', 'visibility': 'visible'});
$('#logocontainer h2').css({'left': (Math.floor($('#logocontainer').width() -  $('#menu').width())/2)+'px', 'visibility': 'visible'});

/*if ($('#logo').length==0) {
$('#searchcontainer').css({'left': 650+(Math.floor($('#logocontainer').width() - $('#menu').width())/2)+'px', 'top':'120px', 'visibility': 'visible'});
} else {
$('#searchcontainer').css({'left': 650+(Math.floor($('#logocontainer').width() - $('#menu').width())/2)+'px', 'visibility': 'visible'});
}*/

...
...


weiter unten verschiebt ihr diesen code-Schnipsel

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div id="menu">

<ul>
<cc:loop type="maintopic" obj="mymaintopic">
   <li><a <cc:if  cond="&mymaintopic.ispagemaintopic">class="current"</cc:if>  href="<cc:print value="&mymaintopic.url">"><cc:print  value="&mymaintopic.caption"></a>
  <cc:if cond="&mymaintopic.topiccount gt 0">
<ul>
<cc:loop type="topic" obj="mytopic" maintopic="&mymaintopic.number">
   <li><a <cc:if  cond="&mytopic.ispagetopic">class="current"</cc:if>  href="<cc:print value="&mytopic.url">"><cc:print  value="&mytopic.caption"></a>
  <cc:if cond="&mytopic.subtopiccount gt 0">
<ul>
    <cc:loop type="subtopic" obj="mysubtopic" maintopic="&mymaintopic.number" topic="&mytopic.number">
       <li><a <cc:if  cond="&mysubtopic.ispagesubtopic">class="current"</cc:if>  href="<cc:print value="&mysubtopic.url">"><cc:print  value="&mysubtopic.caption"></a></li>
</cc:loop>
</ul>
  </cc:if>
  </li>
</cc:loop>
</ul>
  </cc:if>
  </li>
</cc:loop>
</ul>

</div>



von Zeile 251 in Zeile 208, also innerhalb von "div id="logocontainer"

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div id="logocontainer">
...
...
<div id="menu">

<ul>
<cc:loop type="maintopic" obj="mymaintopic">
  <li><a <cc:if cond="&mymaintopic.ispagemaintopic">class="current"</cc:if> href="<cc:print value="&mymaintopic.url">"><cc:print value="&mymaintopic.caption"></a>
  <cc:if cond="&mymaintopic.topiccount gt 0">
<ul>
<cc:loop type="topic" obj="mytopic" maintopic="&mymaintopic.number">
  <li><a <cc:if cond="&mytopic.ispagetopic">class="current"</cc:if> href="<cc:print value="&mytopic.url">"><cc:print value="&mytopic.caption"></a>
  <cc:if cond="&mytopic.subtopiccount gt 0">
<ul>
    <cc:loop type="subtopic" obj="mysubtopic" maintopic="&mymaintopic.number" topic="&mytopic.number">
      <li><a <cc:if cond="&mysubtopic.ispagesubtopic">class="current"</cc:if> href="<cc:print value="&mysubtopic.url">"><cc:print value="&mysubtopic.caption"></a></li>
</cc:loop>
</ul>
  </cc:if>
  </li>
</cc:loop>
</ul>
  </cc:if>
  </li>
</cc:loop>
</ul>

</div>
...
...
</div>


und weiter unten verschiebt ihr :

Source code

 
1
2
3
4
5
6
7
8
9
10

<cc:if cond="&site.ftsfile">
<div id="searchcontainer">
<div id="searchbox">
<form action="<cc:print value="&site.ftsfile">" method="get">
 <input id="searchcriteria" value="<cc:print  value="&site.ressource.search"> ..." type="text" name="criteria"  maxlength="30" />
<input id="searchsubmit" type="image" src="<cc:printpictureurl obj="pic.search">" />
</form>
</div>
</div>
</cc:if>


innerhalb von:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="content">

<cc:if cond="&site.ftsfile">
<div id="searchcontainer">
<div id="searchbox">
<form action="<cc:print value="&site.ftsfile">" method="get">
<input id="searchcriteria" value="<cc:print value="&site.ressource.search"> ..." type="text" name="criteria" maxlength="30" />
<input id="searchsubmit" type="image" src="<cc:printpictureurl obj="pic.search">" />
</form>
</div>
</div>
</cc:if>

<cc:print value="&page.content.text">
<cc:if cond="&site.properties.design.footertext">
<p style="text-align:center;"><cc:print value="&site.properties.design.footertext"></p>
</cc:if>
</div>


Die style_menu.css wurde so angepaßt:

Cascading style sheet

 
1
2
3
4
5
6
7
8
9
10
11
12

#menu {
background: url(../assets/<cc:print value="&pic.back.nav.filename">);
width: 960px;
height: 36px;
padding: 10px;
display: block;
position: absolute;
top: 20px;
left: 10px;
visibility: hidden;
z-index: 200;
}



Die style_content.css wurde so angepaßt:

Cascading style sheet

 
1
2
3
4
5
6
7
8
9

#searchcontainer {
  position: absolute;
  top: -20px;
  right: 0;
width: 298px;
height: 50px;
padding: 0 10px 10px 10px;
background: url(../assets/<cc:print value="&pic.back.search.filename">) no-repeat;
}


und weiter unten:

Cascading style sheet

 
1
2
3
4
5
6

#maincol {
width: 960px;
margin: 0 auto;
padding: 30px 0;
position: relative;
}


... Viele Änderungen notwendig ...

Schöne Grüße
Schöne Grüße aus dem sonnigen Süden, 8)

Ingo

--------------------------------------------------------------------

NICHTS IST SELBSTVERSTÄNDLICH ...

--------------------------------------------------------------------

This post has been edited 4 times, last edit by "harlekin8" (Oct 31st 2011, 7:36pm)

Similar threads

Used tags

Eyecatcher, Header, Kopfgrafik, skalieren, verzerren