Joomla Templates Club 406,261 posts

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

#469016

I tried to adjust the numbers but I must be making something wrong. Even as it is, the background comes out black. Do you have any ideas?
Thanks again, you have been very helpful

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

#469189

Hi joncr,

I am sorry but I must know what you have done to track you problem.
Can you please provide ftp/admin access information and the url to take a look?

I am waiting for you information.

Regards

[titanrocks Friend titanrocksJoin date: August 2012Posts: 18Downloads:9Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#469793

Am I missing something or is the template .css different than what i downloaded?

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

#469993

I have been able to more or less work out an answer. Thanks for your help. Now, if I can, I need to ask you something else. I used the layout of the mobile (which I like a lot) to all the formats and it worked great for me. I did lose three things though, and if you can help I would be grateful.
1. The logo and the navigation now scroll together with the content. How can I retain the relative scolling of the content?
2. The beautiful shadow of the items on hovering is gone. How do I get it back?
2. The size of the menus now is across the whole page. How can I make them smaller (a certain size)?
If I could have these I would be a happy man!!!
Thanks a lot for your support. It makes such a difference.

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

#470334

Hi joncr,

=> Open templates/ja_wall/css/layout-mobile.css

1. The logo and the navigation now scroll together with the content. How can I retain the relative scolling of the content?
/* HEADER
——————————————————— */
#header {
height: 90px;
position: absolute; /* Enable full page scrolling */
}

Please remove position: absolute; /* Enable full page scrolling */. I believe on mobile, the top navigation should scroll up so that we have more rooms for other content.

2. The beautiful shadow of the items on hovering is gone. How do I get it back?
.item:hover .item-inner {
box-shadow: none;
}

=> Please remove this block code.

2. The size of the menus now is across the whole page. How can I make them smaller (a certain size)?
#mainnav .menu-inner {
width: 100%;
}

You can change this value to any value you want. This would require a whole lot customizations and may lead to other issues as well, hence consider on your own discretion.

We have optimized for better experience on mobile browser. All further modifications for the above may result to unexpected issues.

Hope it helps

Regards

[ncarter Friend ncarterJoin date: July 2012Posts: 72Downloads:2Uploads:7 Thanks: 7 Thanked: 1 times in 1 posts]

#471004

Wall Crasher,
Can you please assist me in doing this for the Color Block theme???

[jacks5048 Friend jacks5048Join date: July 2012Posts: 1Downloads:0Uploads:0]

#479547

Thank You! Very helpful

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

#479553

Oh, I am very sorry, ncarter.
I have been lost track of this thread.
First, please do as step by step as described in thread.
If you still have problem, please tell me where you get stuck, I will help you then.

Regards

[stefane Friend stefaneJoin date: May 2013Posts: 20Downloads:1Uploads:10 Thanks: 8]

#491923

Hello,
My CSS “template.css” file is different from what you mention here.
I want to change the logo to a larger and higher logo.
Could you help me?
I’ve changed the width of the navigation column on the left with 200px
I would like my logo to be fixed on the width …
Is that possible?
🙂

<em>@jwbrett 325591 wrote:</em><blockquote>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.</blockquote>

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

#491947

Hi stefane,

Yes, it is possible.

1. First, you need to BACKUP your site first
2. Replace your logo in the appropriate folder
3. Change the logo size in css (should be correct with the real logo size) templatesja_wallcsstemplate.css line 1206

.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;
}


4. Change the header height: templatesja_wallcsstemplate.css line 1186

#header {
background: #333
border-bottom: 10px solid #e5e5e5 /* Seperate content and header while scroll page */
color: #CCC
height: 45px; /* logo height + 5px */
position: fixed;
top: 0;
z-index: 999;
}

5. Adjust the main content templatesja_wallcsslayout.css line 145

#container .main {
padding-top: 60px; /* Space for header = logo height + 20px */
padding-right: 0.1%;
}

line 176

/* Sidebar ---*/
body.has-sidebar #container .container-main {
padding-left: 120px; /* Space for sidebar - same as sibar width */
}

6. Adjust sidebar top templatesja_wallcsslayout.css line 181

#sidebar {
margin-left: -120px; /* sizebar width and logo width should be the same */
position: fixed;
top: 70px;
/* Space for header = logo height + 30 */
width: 120px; /* sizebar width and logo width should be the same */
}

7. Adjust the menu left \templatesja_wallcssnavigation.css line 16

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

line 160

#mainnav .navnext {
right: 465px; /* change this value to fit your layout */
background: url(../images/arrow-navmore.png) no-repeat right top;
}


Though JA Wall is a responsive template. You may need to change more css styles for other devices.

Some CSS knowledge should be required here, so if it is hard for you, please consider to hire a developer at: http://www.joomlancers.com/ to help you to get it done.

Regards

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

1. stefane

[stefane Friend stefaneJoin date: May 2013Posts: 20Downloads:1Uploads:10 Thanks: 8]

#492352

Hello,
I tried these changes but I admit my limitations in this matter … Pity that the management of the logo is so complicated (unlike many template).
I’ll go inside these operations quietly.
Thank you anyway.

[ibewguy Friend ibewguyJoin date: July 2011Posts: 255Downloads:18Uploads:6 Thanks: 62 Thanked: 9 times in 2 posts]

#522083

Thank you all for your tutorials on this thread – it is the ONLY thread of it’s kind that directly deals with changing the Wall Logo – if you are a new subscriber or one that continues to update your wall template then this tutorial is only partially helpful because the css files have indeed changed a great deal.

I was unable to find a good fit here even with several gyrations and I am pretty adept – so be careful, much of this only applies to older versions of the Wall!!

Thanks anyway for your work here!

[markwilliam Friend markwilliamJoin date: January 2014Posts: 39Downloads:1Uploads:2 Thanks: 10]

#522574

Hi,
I’m also struggling with this issue.
I’m using the Retro theme and I’ve tried to change the logo with no success.
I’d be happy to keep the original image of the demo and just change the text as a preliminary measure if possible.
Any suggestions?
Thanks,
Mark

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

#522608

Hi Mark,

Please provide a screenshot of logo that you want to get (you can draw it via any paint tool, e.x photoshop)

And also PM me your site’s ftp/admin information, I will try to help you out

Regards

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

1. ibewguy

[ibewguy Friend ibewguyJoin date: July 2011Posts: 255Downloads:18Uploads:6 Thanks: 62 Thanked: 9 times in 2 posts]

#522619

Wall Crasher – you are definitely a support hero!!

Mark,

I decided to use the CORNER STAMP position for an HTML module. It worked out great….my logo is now on the upper right hand side of my screen. It is an easy option, looks wonderful, and keeps the wall looking great!

[Author]

Posts