Joomla Templates Club 406,261 posts

[Jackie_chan Friend Jackie_chanJoin date: September 2006Posts: 42Downloads:0Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#139596

Hello everybody,

I relly like JA templates but they all seem to have the same structure, at least the top section looks the same in all templates:

Logo area —> Top menu —> Banner image (Slideshow image)

As I said i like the templates, but sometime I feel the need for something different. For some web-site projects I really do not need to integrate logo on top i.e. I don’t need logo area. Instead the web-site starts with Banner (Banner image, slideshow, image ) and then comes the top menu. I can not find such structure in JA templates. Maybe the developers could work on template with such structure.

For this purpose I want to edit Sandine template and give a slight different look. I want to cut the logo area and bring the top menu under the slideshow. This is it, no big changes. However, I am not a CSS profi and need your help. I attached a screenshot of what I have in mind.

Sreenshot preview:

If you could help me with template editing, I would be very glad. 😎

Thanx

Jackie

---

Attachments:

1. 

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#298237

Hey Jackie, Just went through the template.css and index.php of Ja Sanidine, this is what i could do easily. But not yet sure from where the extra space (marked with red arrow) is originating.

When i tried the online demo at http://template15.joomlart.com/ja_sanidine/ . i see the same space.

if this helps i can put down what i did to achieve that, not a big deal of work though.

[Jackie_chan Friend Jackie_chanJoin date: September 2006Posts: 42Downloads:0Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#298241

<em>@drarvindc 120538 wrote:</em><blockquote>Hey Jackie, Just went through the template.css and index.php of Ja Sanidine, this is what i could do easily. But not yet sure from where the extra space (marked with red arrow) is originating.

When i tried the online demo at http://template15.joomlart.com/ja_sanidine/ . i see the same space.

if this helps i can put down what i did to achieve that, not a big deal of work though.</blockquote>

Nice work man. This is pretty much what I imagined. What we need now is to get rid of that extra space. I hope someone has an idea how to fix that.

Could you put down what you did, I want to try that.

Thanks

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#298246

To me the extra space is visible on the demo site also at http://template15.joomlart.com/ja_sanidine/ . Checked in IE 7 & IE 8, FF and safari. Attaching herewith both template.css and index.php (from sanidine folder). for your reference. You can compare those with original. i have not removed the comments so yo ucan search the files for “header” “breadcrums” “search” so on and compare them.

It basically involves removing the header coding from index.php and associated codes from template.css. To move the menu below slideshow. search for <!– BEGIN: MAIN NAVIGATION –> in index.php copy the complete block and paste it below <!– END: TOP SPOTLIGHT –>.

This may not be the standard way of doing it, but if i am to do it, thats the way, until corrected by others. :p

---

Attachments:

1. attachment.zip

[Jackie_chan Friend Jackie_chanJoin date: September 2006Posts: 42Downloads:0Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#298284

I have used your files, and seems that you have changed them for dark version of Sandine. I am working on the light version so I edited the light version’s template.css. I uploaded it and index.php that I receivd from you. It is not working properly. The top menu has shifted to the center and I am confused why.

Have a look at http://www.partnerfamilie.eu

Thanks

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#298286

yaa, checked you site. Will try to fix the lighter version for you and attach the file here. gimme some time, hope you wont mind that :p . Noticed the lighter version now, lol. din knew it had this color variation too. Have started to like this template now.

[Jackie_chan Friend Jackie_chanJoin date: September 2006Posts: 42Downloads:0Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#298287

OK, I can wait. Thanks for your input .:D

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#298320

Sanidine II seems difficult. Sorry mate, could not achieve the results. menu just floats to the center. Now we wait for feedback from other JA members. Most of them are far better than me in template customization. I am good at removing stuff from template. :p

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#298348

use the index.txt attached, rename to index.php

change your template.css (line 868)

#ja-header {
background:#FFFFFF url(../images/header-bg.gif) repeat-x scroll 0 19px;
border-bottom:3px solid #D58400;
border-top:1px solid #CCCCCC;
height:19px;
line-height:normal;
margin:0 10px;
padding:0;
position:relative;
z-index:999;
}

notice that the background of the active menu is white?
u need to do some photoshop on this file to change the bg to the striped dark gray (too much work for me on this)
/templates/ja_sanidineii_light//images/mainnav-active.gif

---

Attachments:

1. index.txt

[Jackie_chan Friend Jackie_chanJoin date: September 2006Posts: 42Downloads:0Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#298422

<em>@jsliao 120677 wrote:</em><blockquote>use the index.txt attached, rename to index.php

change your template.css (line 868)

#ja-header {
background:#FFFFFF url(../images/header-bg.gif) repeat-x scroll 0 19px;
border-bottom:3px solid #D58400;
border-top:1px solid #CCCCCC;
height:19px;
line-height:normal;
margin:0 10px;
padding:0;
position:relative;
z-index:999;
}

</blockquote>

What will this code change? I am confused… Will it remove the floating menu? It doesn’t suggest this.

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#298467

this code removes the white space which used to house the logo image and login module

1 user says Thank You to jsliao for this useful post

1. Jackie_chan

[Jackie_chan Friend Jackie_chanJoin date: September 2006Posts: 42Downloads:0Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#298493

<em>@jsliao 120811 wrote:</em><blockquote>this code removes the white space which used to house the logo image and login module</blockquote>

Thanks mate, Now I have what I want. :laugh:

darvindc, thanks to u too 😉

[Jackie_chan Friend Jackie_chanJoin date: September 2006Posts: 42Downloads:0Uploads:5 Thanks: 7 Thanked: 1 times in 1 posts]

#298515

<em>@jsliao 120811 wrote:</em><blockquote>this code removes the white space which used to house the logo image and login module</blockquote>

One more thing to change:

how do you remove breadcumb area with “search” area?

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#298524

<em>@Jackie_chan 120842 wrote:</em><blockquote>Thanks mate, Now I have what I want. :laugh:

darvindc, thanks to u too ;)</blockquote>

You are welcome, but i worked on the wrong template :p.

Thanks jsliao, Now i know whom to contact for my template customization >> :D:)

[Author]

Posts