Joomla Templates Club 406,261 posts

[dotflashop Friend dotflashopJoin date: May 2010Posts: 7Downloads:0Uploads:2 Thanks: 2]

#151461

Hi everyone, I attach a picture to better understand that i’d like to get.
In my version of Zeolite II, I would that the Joomfish flags are not in a module side, then I can to create this graphics solution that like me.
The problem is I don’t know where to create the second dark band.
I tried to adjust the css template.css entering (duplicating) the same range already this high, obviously renaming classes, but I can not put it under the green (or red, or blue) belt, because the band dark is overlaping.

Does anyone have any idea where I’m supposed to act? Sounds simple, but I can not solve.

Thanks

---

Attachments:

1. 

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#345311

dotflashop;180706Hi everyone, I attach a picture to better understand that i’d like to get.
In my version of Zeolite II, I would that the Joomfish flags are not in a module side, then I can to create this graphics solution that like me.
The problem is I don’t know where to create the second dark band.
I tried to adjust the css template.css entering (duplicating) the same range already this high, obviously renaming classes, but I can not put it under the green (or red, or blue) belt, because the band dark is overlaping.

Does anyone have any idea where I’m supposed to act? Sounds simple, but I can not solve.

Thanks

Hi, From memory the dark band is a background image the header (green logo area) sits upon, if you make the background area higher the band will show under the banner. That is , if the background layer is 170 px in height, and you change it to 200px, then an extra 30 px will show. given you do not increase the logo and banner size

I hope this makes sense to you

Cheers Shannon

[dotflashop Friend dotflashopJoin date: May 2010Posts: 7Downloads:0Uploads:2 Thanks: 2]

#345362

Hello and thanks for your reply.
The dark bar, is not an image, but a css class contained in the file template.css, just this:

#ja-cpanel .main {
height: 32px;
background: #34383B;
border-bottom: 1px solid #62DC25;
}

Then I thought of duplicating the same class as follows:

#ja-header .bottom {
height: 32px;
background: #34383B;
border-bottom: 1px solid #62DC25;
}

and in the corresponding file, templates ja_zeolite_ii layouts blocks header.php, I put like this:

<div id=”ja-header” class=”wrap”>
<div class=”main”>
<div class=”bottom”> <!– This is the new class write on the css
<div class=”inner clearfix”>

But unfortunately, as you see in the picture, this is what I get…

How can I do?

Thank’s!

---

Attachments:

1. 

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#345371

dotflashop;180773Hello and thanks for your reply.
The dark bar, is not an image, but a css class contained in the file template.css, just this:

#ja-cpanel .main {
height: 32px;
background: #34383B;
border-bottom: 1px solid #62DC25;
}

Thank’s!

Ok its a css generated “image” my mistake

as the cpanel main is a background layer, the green area will always sit on top of it, so if you want the black to show top and bottom just make the cpanel main height bigger than the green banner area is by an extra 32 px.

That is
cpanel main = 32px now and shows approx 30 px before the top edge of green banner area? the green banner is xx px , lets call it 200px, so to expand the cpanel main to allow the same area showing at the top and bottom we need to add the height of the banner (200px) plus at least 32px 32 +200 +32 =264px

so then we will have the black show 32px above and 32px below the banner of 200px
I’m thinking there should be no need to alter any other css from original ? that is to maintain the green area etc positioning.
Cheers Shannon

1 user says Thank You to uniquebiz for this useful post

1. dotflashop

[dotflashop Friend dotflashopJoin date: May 2010Posts: 7Downloads:0Uploads:2 Thanks: 2]

#345388

Hello, thanks again for your reply. Unfortunately, the CSS did not behave as you told me. I increased the size of the upper band from 32px to 264px, so that ran under the green and check out other 32px. Unfortunately this had the effect of pushing the green bar even lower.
But your intervention still tickled my brain and I got to work out this way:

1) In the file templates ja_zeolite_ii layouts blocks header.php, I put like this:

Immediately before the line

<! – MAIN NAVIGATION ->

towards the end of the file, I put the following code:

<div id=”ja-bottom” class=”wrap”>
<? Php if ($ this-> countModules (‘search’)) (?>
<div id=”ja-search”>
<jdoc:include type=”modules” name=”search” style=”raw” />
</ Div>
<? Php)?>

<div id=”ja-flags”>
<jdoc:include type=”modules” name=”flags” style=”raw” />
</ Div>
</ Div>

2) Then I duplicate the class ja-header renaming it like this:

# Ja-bottom (
line-height: normal;
position: relative;
z-index: 999;
height: 32px;
background-color: # 34383B;
top: 92px;
)

3) I increased the green bar to 32 px in ja-header. Main

4) I changed the direction of the class research and created this class to the flags:

# Ja-flags (
padding: 10px 10px 0px 0px;
float: right;
height: 22px;
font-size: 11px;
z-index: 1;
)

5) I added the file templateDetails.xml position flags

6) I added the module of Joomfish Selection Language disable the css style joomifish selected by default.

Perhaps all is not Orthodox (or you) but when it works on Firefox, Explorer, Safari and Chrome on Win Vista

If someone thinks will improve the whole, is welcome.

Thanks

Greetings

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#345419

dotflashop;180803Hello, thanks again for your reply. Unfortunately, the CSS did not behave as you told me. I increased the size of the upper band from 32px to 264px, so that ran under the green and check out other 32px. Unfortunately this had the effect of pushing the green bar even lower.
But your intervention still tickled my brain and I got to work out this way:

1) In the file templates ja_zeolite_ii layouts blocks header.php, I put like this:

Immediately before the line

<! – MAIN NAVIGATION ->

towards the end of the file, I put the following code:

<div id=”ja-bottom” class=”wrap”>
<? Php if ($ this-> countModules (‘search’)) (?>
<div id=”ja-search”>
<jdoc:include type=”modules” name=”search” style=”raw” />
</ Div>
<? Php)?>

<div id=”ja-flags”>
<jdoc:include type=”modules” name=”flags” style=”raw” />
</ Div>
</ Div>

2) Then I duplicate the class ja-header renaming it like this:

# Ja-bottom (
line-height: normal;
position: relative;
z-index: 999;
height: 32px;
background-color: # 34383B;
top: 92px;
)

3) I increased the green bar to 32 px in ja-header. Main

4) I changed the direction of the class research and created this class to the flags:

# Ja-flags (
padding: 10px 10px 0px 0px;
float: right;
height: 22px;
font-size: 11px;
z-index: 1;
)

5) I added the file templateDetails.xml position flags

6) I added the module of Joomfish Selection Language disable the css style joomifish selected by default.

Perhaps all is not Orthodox (or you) but when it works on Firefox, Explorer, Safari and Chrome on Win Vista

If someone thinks will improve the whole, is welcome.

Thanks

Greetings

Well whatever the method I’m glad it works and doesn’t break the site, there are probably many ways to achieve it glad I could assist in some way
Blessings Shannon

[Author]

Posts