Joomla Templates Club 406,261 posts

[drmaalghamdi Friend drmaalghamdiJoin date: October 2009Posts: 13Downloads:0Uploads:6 Thanks: 5]

#147801

Hi guys,
I wanted to have an implimentation of the same header image technique in ja purity which changes on every browser refresh to put in the header of the ja seleni.
How can i go on doing this?
Thank you.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#329911

Hello guy!

Please open the file: templates/ja_seleni/layout/blocks/header.php and find code at line 1:

<div id=”ja-header” class=”wrap”>
<div class=”main”>

Replace:
[PHP]
<div id=”ja-header” class=”wrap”>
<div class=”main” style=”background-image: url(<?php echo $this->templateurl(); ?>/images/header/<?php echo $this->getRandomImage($this->templatepath().DS.’images/header’); ?>);”>
[/PHP]

Now, you create a forlder inside the “ templates/ja_seleni/images” folder , named is “header“, you put images in there.

Good luck

[drmaalghamdi Friend drmaalghamdiJoin date: October 2009Posts: 13Downloads:0Uploads:6 Thanks: 5]

#330076

<em>@tienhc 161256 wrote:</em><blockquote>Hello guy!

Please open the file: templates/ja_seleni/layout/blocks/header.php and find code at line 1:

<div id=”ja-header” class=”wrap”>
<div class=”main”>

Replace:
[PHP]
<div id=”ja-header” class=”wrap”>
<div class=”main” style=”background-image: url(<?php echo $this->templateurl(); ?>/images/header/<?php echo $this->getRandomImage($this->templatepath().DS.’images/header’); ?>);”>
[/PHP]

Now, you create a forlder inside the “ templates/ja_seleni/images” folder , named is “header“, you put images in there.

Good luck</blockquote>
Thank you tienhc,
that worked but i need to find out the size of the header images so to fit into the JA seleni header area.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#330873

hello guy

please open the file : template.css and try to find code

#ja-header .main {
height:100px;
}

Replace:

#ja-header .main {
background-position:right top;
background-repeat:no-repeat;
height:100px;
}

[drmaalghamdi Friend drmaalghamdiJoin date: October 2009Posts: 13Downloads:0Uploads:6 Thanks: 5]

#330926

Thenk you tienhc.

[drmaalghamdi Friend drmaalghamdiJoin date: October 2009Posts: 13Downloads:0Uploads:6 Thanks: 5]

#331243

<em>@tienhc 162587 wrote:</em><blockquote>hello guy

please open the file : template.css and try to find code

#ja-header .main {
height:100px;
}

Replace:

#ja-header .main {
background-position:right top;
background-repeat:no-repeat;
height:100px;
}
</blockquote>

Thank you tienhc for your time, but there is still one more thing that i couldn’t figure out; that is how to put a trnsparent mask over the images like in the ja purity header.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#331980

i saw that your thread is the solve status, ? did you make this done ?

[drmaalghamdi Friend drmaalghamdiJoin date: October 2009Posts: 13Downloads:0Uploads:6 Thanks: 5]

#332095

No I did not put the solve status on the thread.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#332246

Now,

1 ) Please get this image: http://templates.joomlart.com/ja_purity_ii/templates/ja_purity_ii/images/header-mask.png a and put it into the templates/ja_seleni/images folder
2) find codes at line 23 inside the header.php file:
<div class=”inner clearfix”>
replace:

<div class=”inner clearfix”>
<div class=”ja-headermask”> </div>
3) and add the follow css into the template.css file:

.ja-headermask {
background: url(../images/header-mask.png) no-repeat top right;
display: block;
height: 80px;
position: absolute;
right: -1px;
top: 0;
width: 602px;
z-index: 0;
}

good luck

[drmaalghamdi Friend drmaalghamdiJoin date: October 2009Posts: 13Downloads:0Uploads:6 Thanks: 5]

#332311

Thank You for your assistance

[Author]

Posts