Joomla Templates Club 406,261 posts

[pedrox Friend pedroxJoin date: July 2007Posts: 375Downloads:1Uploads:85 Thanks: 5 Thanked: 37 times in 1 posts]

#178176

Color block

How do I enlarge the space for the logo ?

Thanks

---

Attachments:

1. 

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#457588

Please make backup of all your file BEFORE editing.

First you need to get rid of the TEXT logo.
Open templates/ja_wall/index.php – [FONT=arial]line 118[/FONT]
This is where the JA WALL text is located – remove it.

THEN –
[FONT=arial]Open – /templates/ja_wall/css/template.css[/FONT]

1. Adjust height of the space for logo (.png file). The height of the menu must be adjusted accordingly.
This is a long process – so please be patient…or reconsider. 🙂
To add a logo – create the logo.png and place it in your templates/ja_wall/images/ folder.
Actually you can place it in the DEFAULT folder or anywhere you want…adjusting its location in the code below.

At line 835 – change from this:

#logo { border-bottom: 5px solid #84B12A
float: left;
height: 40px;
position: relative;
text-align: center;
width: 120px;
z-index: 1000;

}

}
[FONT=arial]
To this – and adjust the areas in red so that your logo shows fully:[/FONT]
#logo {
background: url("../images/logo.png") repeat scroll 0 0 transparent;
border-bottom: 5px solid #84B12A
float: left;
height: 40px;
width: 120px;
z-index: 1000;

}
You probably now have a logo that bleeds into your TOP MENU and/or your MAIN MENU.

NEXT – TOP MENU adjustments (main navigation) if needed.

Goto: templates/ja_wall/css/navigation.css – Line 15
Adjust the line below in RED to move the menu to the right if needed.

#mainnav { left: 120px;
position: absolute;
top: 0;
width: 100%;

}
NEXT – MAIN MENU adjustments (left sidebar) if needed
Goto: /templates/ja_wall/css/layout.css – line 173
Adjust the line below in red to move the sidebar to the left or right – pushing the main content area along with it.

body.has-sidebar #container .container-main { padding-left: 120px;

}
And ONLY after you have your sidebar positioned correctly horizontally…then
Goto: – line 177 to move the sidebar vertically. Change ONLY the line in red below!
(You should NOT change the margin-left and width below unless you need extra room for menu items)

#sidebar { margin-left: -120px;
position: fixed;
top: 60px;
width: 120px;

}
Being RESPONSIVE has its benefits…but any customization affects everything else and it can be a long frustrating process. 🙂

This should get you going. Please ask further questions if needed.

Have fun.
John.

3 users say Thank You to John Wesley Brett for this useful post

1. twweb
2. modum
3. awot

[awot Friend awotJoin date: November 2010Posts: 3Downloads:0Uploads:0 Thanks: 3]

#466142

Hi John,
Your guide works for me but I would like to put the logo at the horizontal center of the page above the menu bar. Can you suggest a solution. Thanks a lot,

A

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#466289

Hi awot,

This will be a long customize, you should BACKUP before editing.
I will give make an example for default theme only.
If you are using other theme, please adjust those size values.

templatesja_wallcsstemplate.css
line 1183:

#header .main {
height: 90px;
position: relative;
}


line 1188:

.logo-image,
.logo-text {
background: #690
border-bottom: 5px solid #84b12a
height: 40px;
text-align: center;
overflow: hidden;
}

line 1197:

.logo-image h1 {
color: #fff
display: block;
padding: 0;
}

line 1203:

.logo-image h1 a {
background: url(../images/logo.png) no-repeat 0px 0px;
display: block;
margin: 12px auto 0 auto;
text-indent: -999em;
width: 79px;
}

templatesja_wallcssnavigation.css
line 15:

#mainnav {
left: 0px; /* Space for Logo */
position: absolute;
width: 100%;
top: 45px;
}


line 27:

#mainnav .menu-inner {
position: absolute;
left: 0;
right: 340px;
}

line 156:

#mainnav .navnext {
right: 465px;
background: url(../images/arrow-navmore.png) no-repeat right top;
}


templatesja_wallcsslayout.css
line 145:

#container .main {
padding-top: 105px; /* Space for header */
padding-right: 0.1%;
}

line 181:

#sidebar {
margin-left: -120px;
position: fixed;
top: 115px; /* Space for header */
width: 120px;
}

templatesja_wallcsslayout-tablet.css
line 252:

#mainnav {
left: 0;
top: 45px;
width: 100%;
height: 45px;
}

line 259:

#mainnav .menu-inner {
left: 0px;
right: 135px;
}

line 265:

#mainnav .navprev {
left: 0;
}

line 269:


#mainnav .navnext {
right: 110px;
}

It should be like that.
You can use my attach package here.

Hope it helps.

Regards

---

Attachments:

1. layout.zip

2 users say Thank You to Wall Crasher for this useful post

1. awot
2. fitito

[awot Friend awotJoin date: November 2010Posts: 3Downloads:0Uploads:0 Thanks: 3]

#466426

Thanks a lot!! I found your detailed guide very helpful. I was able to change the header part of the template to suit my needs.

Best Regards,

A

[fitito Friend fititoJoin date: June 2012Posts: 18Downloads:0Uploads:7 Thanks: 6]

#468003

<em>@Wall Crasher 337181 wrote:</em><blockquote>
You can use my attach package here.

Hope it helps.

Regards</blockquote>

Thank you very much @wall Crasher.

I have overwrited my CSS files with your layout package. But I have a problem when I scroll the article items. They appear under menu bar like this
Do you know any solution?
Thank you very much!!

---

Attachments:

1. 
2. 

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#468023

Hi fitito,

<blockquote>This will be a long customize, you should BACKUP before editing.
I will give make an example for default theme only.
If you are using other theme, please adjust those size values.</blockquote>

As I said, the customize above is apply for default theme only.
You should modify those value for other theme.
There are 8 themes in total and I can not show all of them.

Sorry but this is out of support scope.

Regards

[fitito Friend fititoJoin date: June 2012Posts: 18Downloads:0Uploads:7 Thanks: 6]

#468189

<em>@Wall Crasher 339568 wrote:</em><blockquote>Hi fitito,

As I said, the customize above is apply for default theme only.
You should modify those value for other theme.
There are 8 themes in total and I can not show all of them.

Sorry but this is out of support scope.

Regards</blockquote>

Yes I have understood. I have asked you because I am using DEFAULT THEME. I have only changed colors.
Do you have any idea?

Thank you very much.
Regards

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#468198

Hi fitito,

It really strange here.

First, backup your site and install a new JA Wall site.

Try to extract the package that I have uploaded <blockquote>You can use my attach package here. layout.zip</blockquote>
Extract this package to templatesja_wallcss

Clear system cache and try again.

And, please pm me your site information (url, admin/ftp) so I can take a look.

Regards

[fitito Friend fititoJoin date: June 2012Posts: 18Downloads:0Uploads:7 Thanks: 6]

#468397

<em>@Wall Crasher 339791 wrote:</em><blockquote>Hi fitito,

It really strange here.

First, backup your site and install a new JA Wall site.

Try to extract the package that I have uploaded
Extract this package to templatesja_wallcss

Clear system cache and try again.

And, please pm me your site information (url, admin/ftp) so I can take a look.

Regards</blockquote>

Sorry. You were right!! I had a problem with Filezilla and I hadn’t overwrited the file template.css

On the other hand, I would like to make the header bigger. Do you think I will have problems? And is it possible to include in the header social network icons?

And another problem I have found. When I use the mobile version, since I made the changes, when I click on an item, the article appears like in the image below.
It seems that there are two columns. Do you have any idea?

Thank you very much!!

---

Attachments:

1. 

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#468421

Hi fitito,

I do not know what you have made change, So I can not track down what is wrong here.

Please provide ftp/admin via pm so I can take a look.

Regards

[joncr Friend joncrJoin date: January 2009Posts: 17Downloads:3Uploads:0 Thanks: 6]

#468801

Thanks a million! I used your layout, and it works fine. I still have a small problem though. Since the logo is now missing, when I hover over the “pages” item on the menu, the menu opens under the sidebar, and looks like it’s transparent. Can you please tell me how to fix this?

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#468813

Hi joncr,

I am sorry, that is my mistake.

Please make change to /templates/ja_wall/css/template.css like this.

<blockquote>#header {
background: #333
border-bottom: 10px solid #e5e5e5 /* Seperate content and header while scroll page */
color: #CCC
height: 90px;
position: fixed;
top: 0;
z-index: 9999; /* chaneg here*/
}
</blockquote>
Hope it helps.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. joncr

[joncr Friend joncrJoin date: January 2009Posts: 17Downloads:3Uploads:0 Thanks: 6]

#468902

It worked fine. I’m trying to make the logo a little bigger though (I know, greedy!) and I’m not sure what lines to change. Let’s call the size A (width) x B (height). Can you tell me what values to change to be able to do that? I tried changing the values I thought were responsible, and ended up with (you guessed it) a mess. I would be really grateful if you could help me with this.

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#468948

Hi joncr,

To change the size of logo. Please open file templatesja_wallcsstemplate.css at line 1187.

.logo-image,
.logo-text {
background: #690
border-bottom: 5px solid #84b12a
float: left;
height: 40px;
position: relative;
width: 120px;
z-index: 1000;
text-align: center;
}

.logo-image h1 {
color: #fff
display: block;
height: 17px;
margin: 12px 0 0 20px;
padding: 0;
width: 79px;
}

.logo-image h1 a {
background: url(../images/logo.png) no-repeat 0px 0px;
display: block;
text-indent: -999em;
width: 79px;
}

You should adjust all ‘width’ and ‘height’ property above.

There might some configuration in /theme folder if you use other theme.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. joncr

[Author]

Posts