Joomla Templates Club 406,261 posts

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#164313

Hello,

I have seen this done before in a travelogue Joomla website, so it is doable.

Starting point:
I like to keep the header region clean, except for the logo. In this

Sandbox (Modified Mesolite II)

I placed the Main Menu navigation at the very top so that the following are adjacent in the following order:

1. Main Navigation
2. Header => right side is empty
3. Slideshow

Question 1:

Is there a way to include that unused (black) space to the right of the header to become part of the slideshow space?

Advantage:
This will increase the height of the slideshow region — making it easier to integrate “vertical” images in a slideshow.

Question 2:
Even better: How does one float the “logo” in the header, so that the entire “header” position may be integrated as part of the slideshow area?

I appreciate constructive responses.

Cornelio

N.B.
Responses from khoand allowed the modifications shown in the

Sandbox (Modified Mesolite II)

Thanks khoand.

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#392647

Hi,
Did you maybe solve question 1?

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#392649

Question 2:
Do you want website like this?

---

Attachments:

1. 

1 user says Thank You to khoand for this useful post

1. cgc0202

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#392656

This will increase the height of the slideshow region — making it easier to integrate “vertical” images in a slideshow.

You increase slide height field when you edit slideshow module

1 user says Thank You to khoand for this useful post

1. cgc0202

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#392675

Thanks very much khoand.

<em>@khoand 242273 wrote:</em><blockquote>Hi,
Did you maybe solve question 1?</blockquote>

I was able to move and rearrange the position modules so that the Main Nav is at the very top, and the Header and Slideshow are adjacent to each other. However, I think there is a need for a script change so that total height of the slideshow will encompass the height of the header and slideshow. That is:

Header => 100px
Slideshow => 300px
NewSlideshow height total => 400px

for the Frontpage only. In other inside pages, where the slideshow, is not shown. The header remains 100px in height.

<em>@khoand 242275 wrote:</em><blockquote>Question 2:
Do you want website like this?</blockquote>

Something like the image you showed. But perhaps the background of the logo will be 20-30% opage.

What will be the script changes to achieve the above?

<em>@khoand 242282 wrote:</em><blockquote>You increase slide height field when you edit slideshow module</blockquote>

I did increase the Slideshow height in the Slideshow Edit Module, but doing so, without any script change only increases the height of the slideshow in the “Slideshow” position. It will not overlap with the Header position.

I think there is a need for a script change so that both the total height, as indicated, for the Header and Slideshow positions:

Header => 100px
Slideshow => 300px
NewSlideshow height total => 400px

become the area (980×400) for the Slideshow presentation.

Cornelio

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#393103

Sorry about late response.
Q2: You replace this code from templatesja_mesolite_iilayoutsblocksheader.php


<div id="ja-header" class="wrap">
<div class="main clearfix">

with


<div id="ja-header">
<div class="clearfix">

You replace this code from /templates/ja_mesolite_ii/css/layout.css file


#ja-header {
}

with
#ja-header {
position: absolute;
top: 80px;
z-index: 9999;
}

1 user says Thank You to khoand for this useful post

1. cgc0202

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#393204

<em>@khoand 242897 wrote:</em><blockquote>Sorry about late response.
Q2: You replace this code from templatesja_mesolite_iilayoutsblocksheader.php


<div id="ja-header" class="wrap">
<div class="main clearfix">

with


<div id="ja-header">
<div class="clearfix">

You replace this code from /templates/ja_mesolite_ii/css/layout.css file


#ja-header {
}

with
#ja-header {
position: absolute;
top: 80px;
z-index: 9999;
}</blockquote>

Thanks very much khoand,

It works well for the Frontpage, and that is the effect I wanted to achieve. But, it messed up the other pages, as shown here:

Sandbox[/url]

The logo as you can see covers some portion of the left and content regions in the other pages.

Cornelio

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#393328

Because another pages don’t use slideshow module. How do you want logo to like on pages that don’t use slideshow module?

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#393338

<em>@khoand 243176 wrote:</em><blockquote>Because another pages don’t use slideshow module. How do you want logo to like on pages that don’t use slideshow module?</blockquote>

Thanks khoand,

Yes, I realized that. On other pages, the logo should be directly below where the Main Navigational (very top) menu is now. This way, the CSS for the logo would remain the same.

Most likely, black background too. If you have some suggestions, to make it look nicer, I would appreciate it.

Cornelio

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#393382

You try this way:
You replace this code from templatesja_mesolite_iilayoutsblocksheader.ph p

<div id="ja-header" class="wrap">
<div class="main clearfix">

with


<?php if( $this->countModules('slideshow') ): ?>
<div id="ja-header" style="position:absolute;top:80px;z-index:9999;">
<div class="clearfix">
<?php else:?>
<div id="ja-header" class="wrap">
<div class="main clearfix">
<?php endif; ?>

– You restore this code from /templates/ja_mesolite_ii/css/layout.css file, it means:

#ja-header {
}


Most likely, black background too. If you have some suggestions, to make it look nicer, I would appreciate it.

I can’t help you solved it. Because i’m not web designer, I don’t know how to make it look nicer. I just change it as you want to

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#393415

<em>@khoand 243254 wrote:</em><blockquote>You try this way:
You replace this code from templatesja_mesolite_iilayoutsblocksheader.ph p

<div id="ja-header" class="wrap">
<div class="main clearfix">

with


<?php if( $this->countModules('slideshow') ): ?>
<div id="ja-header" style="position:absolute;top:80px;z-index:9999;">
<div class="clearfix">
<?php else:?>
<div id="ja-header" class="wrap">
<div class="main clearfix">
<?php endif; ?>

– You restore this code from /templates/ja_mesolite_ii/css/layout.css file, it means:

#ja-header {
}

</blockquote>

Hi khoand,

The above script change did not solve the issue. Please view

Sandbox[/url]

to see the effect/

I was thinking about it some more and the solution if doable may be outlined in a new thread;

“How does one create a logo module?”

Cornelio

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#393500


#ja-header {
position: absolute; <remove
top: 80px;<remove
z-index: 9999;<remove
}

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#393723

<em>@khoand 243408 wrote:</em><blockquote>

#ja-header {
position: absolute; <remove
top: 80px;<remove
z-index: 9999;<remove
}
</blockquote>

Hi khoand,

I did include that in the layout.css


/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
.wrap { width: 100%; clear: both; }
.main { width: 980px; max-width: 1200px; margin: 0 auto; position: relative;} /* --- width: 951px; max-width: 1200px; --- */
#ja-header {
}

.column { overflow: hidden; float: left; }

.ja-mass { clear: both; }


as you suggested in your previous response. However, it did not produce the correct layout for the header in the other pages.

Could we try a different approach, as I outlined in a different thread:

How to create a stand-alone logo module?

In this approach, the default position of the header is retained for other pages. For the Frontpage, the logo is floating stand-alone module inside the slideshow module.

Cornelio

[Author]

Posts