Baralin (baralin) wrote in s2expressive,
Baralin
baralin
s2expressive

  • Mood:

Need help with Image Map As Header / SOLVED


Hi,

I really could use some help. I use the Expressive Subway blue and tried to make an Image Map as Header following this tutorial. Well, it wont work and I do not know what I did wrong, I had to change some things to adjust it to my journal, maybe I did somethng wrong there. Thankfully I tweak all new layouts in my test journal at first and only apply them to the main journal when everything works fine.

I would be greatful for some help.




Custom CSS:

#header-inner {

    background-image: url("http://i281.photobucket.com/albums/kk221/Lintalome/LJ%20Layout/vintage_header_8_Lin.jpg");

            height: 280px;

}

 

 

#header {

    background-image: none;

}

 

 

#header-name { display:none; }

#header-description { display: none; }

.nav { display: none; }

 

 

/* Set the size of the definition list dl and add the background image. */

#imap {

display:block;

background:url("http://i281.photobucket.com/albums/kk221/Lintalome/LJ%20Layout/vintage_header_8_Lin.jpg") no-repeat;

position:relative;

}

 

 

/* Place the dd's in the correct absolute position. */

#imap dd {

position:absolute;

padding:0;

margin:0;

}

#imap #picusername {

left:0px;

top:150px;

z-index:20;

}

#imap #picrecent {

left:0px;

top:0px;

z-index:20;

}

#imap #picarchive {

left:189px;

top:0px;

z-index:20;

}

#imap #picfriends {

left:377 px;

top:0px;

z-index:20;

}

#imap #picuserinfo {

left:565 px;

top:0px;

z-index:20;

}

#imap #picmemories {

left:753 px;

top:0px;

z-index:20;

}

 

 

/* Style the dd and a links physical size and the background for the hover. */

#imap a#username {

display:block;

width:940px;

height:108px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#recententries {

display:block;

width:188px;

height:142px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#archive {

display:block;

width:188px;

height:142px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#friends {

display:block;

width:188px;

height:142px;

background:transparent url -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#userinfo {

display:block;

width:188px;

height:142px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#memories {

display:block;

width:188px;

height:142px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

 

 

/* style the span text so that it is not displayed */

#imap a span, #imap a:visited span {

display:none;

}

 

 

#container-inner {

    border: 0;

}

 

 

body {

background-image: url("http://i281.photobucket.com/albums/kk221/Lintalome/LJ%20Layout/back_3.jpg");

background-repeat: repeat;

background-attachment: fixed ;

}

 

.asset-footer {

margin-bottom : 30px;

border-bottom : 1px solid #999;

}

 

.powered-widget {

display: none;

}

 

.designed-widget {

    display: none;

}

 

#header-content-inner {

    margin: 180px 15px 117px 10px;

}

 

 

#container-inner {

    border: 0;

}






Layout Specific Layer:

layerinfo "type" = "theme";

layerinfo "Vintage" = "";

set base_theme = "subway-blue";

function Page::lay_print_header_links() {

# Menu start

"""<div id="message-window" class="hidden"></div>\n""";

container_open("header");

container_open("header-content");

 

"""

<dl id="imap">

<dd id="picusername">

<a id="baralin" title="baralin" href="http://baralin.livejournal.com"><span>baralin</span></a>

</dd>

<dd id="picrecent">

<a id="recententries" title="Recent Entries" href="http://baralin.livejournal.com/"><span>Recent Entries</span></a>

</dd>

<dd id="picuserinfo">

<a id="userinfo" title="Userinfo" href="http://baralin.livejournal.com/profile"><span>Userinfo</span></a>

</dd>

<dd id="picmemories">

<a id="memories" title="Memories" href="http://www.livejournal.com/tools/memories.bml?user= baralin"><span>Memories</span></a>

</dd>

<dd id="picarchive">

<a id="archive" title="Archive" href="http://baralin.livejournal.com/calendar"><span>Archive</span></a>

</dd>

<dd id="picfriends">

<a id="friends" title="Friends" href="http://baralin.livejournal.com/friends"><span>Friends</span></a>

</dd>

</dl>

""" ;

 

"""<div id="header-photo">\n<div id="header-photo-inner"></div>\n</div>\n""";

"""<div id="header-text"><ul class="nav">\n""" ;

 

# Standard Journal Pages (Recent, Archive, Friends, Userinfo)

foreach var string v ($.views_order) {

var string url = $.view_url{$v};

var string text = lang_viewname($v);

var string class = "item";

if($v == $.view) {

$class = $class + " current";

}

if($v == $.views_order[0]) {

$class = $class + " first";

}

 

$class = " class=\"$class\"";

 

}

 

var Link memories_url = $.journal->get_link("memories");

 

# Memories

if($memories_url.url != "") {

println """<li class="item"><a href="$memories_url.url" title="$*text_view_memories">$*text_view_memories</a></li>""";

}

 

# Menu end

"""

</ul>

<div id="header-name">""";

var string base_url = $.journal->base_url();

var string friends_url = $.view_url{"friends"};

if ($this isa FriendsPage) {

"""<a href="$friends_url"><span class="title">""" + $this->view_title() + """</span></a>""";

} else {

"""<a href="$base_url"><span class="title">$.global_title</span></a>""";

}

"""

</div>""";

 

if(not $this isa FriendsPage) {

"""

<div id="header-description"><span class="subtitle">$.global_subtitle</span></div>""";

}

 

"""

</div>

</div><span id="header-content-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header Content -->

</div><span id="header-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header -->""";

}



Tags: header:image, s2:theme layer
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 9 comments