Joomla Templates Club 406,261 posts

[dr4christ Friend dr4christJoin date: December 2012Posts: 133Downloads:9Uploads:15 Thanks: 34 Thanked: 2 times in 1 posts]

#529010

<em>@wingly 419157 wrote:</em><blockquote>@dr4christ;

Sorry for the mobile display, i wanted to see how the desktop works first; So in order to fix the mobile layout add the following to the code:

templates/ja_wall/themes/color_black/css/ and open file theme.css

on line 2126 find the following code:


#header #logo h1 a {
float: none;
}


and replace it with this one:


#header #logo h1 a {
display: block;
float: left;
margin-left: 50px;
}
#header #logo h1 a span{
display: none;
}


Let me know how it works.</blockquote>

It is now working GREAT!! Thank you Wingy!!

[dr4christ Friend dr4christJoin date: December 2012Posts: 133Downloads:9Uploads:15 Thanks: 34 Thanked: 2 times in 1 posts]

#548338

Dear Wingly – Site is now Joomla 3.3.3 with all extensions updated.

We just updated JA Wall to 1.2 and the logo went back to the exact same problem. Looks as though they never addressed this issue. Which specific updates above should we implement to get the logo to display correctly on desktop and mobile? I’m supposing that the updated JA Wall reverted the .css but I;m not sure which changes you recommend for the updated version.

Tom
http://www.DR4Christ.com

[dr4christ Friend dr4christJoin date: December 2012Posts: 133Downloads:9Uploads:15 Thanks: 34 Thanked: 2 times in 1 posts]

#548507

Not sure if Wingly is still out there. If anyone else knows how to resize and could look at this and figure out which code will work in the new JA Wall 1.2 – we would appreciate it.

Tom
http://www.DR4Christ.com

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#548696

Hi Tom,

Please open file root_folder/templates/ja_wall/css/template.css and add this code at the end of file :

#header,
#header .main {
height: auto;
}
#header .logo,
#header #logo {
width: auto;
height: auto;
}
#header .logo-image h1 a {
width: 200px; /* adjust this value to suite your need */
height: 200px; /* adjust this value to suite your need */
}
#header #mainnav {
left: 200px; /* adjust this value to push Main Menu to the right, give space for new logo */
}
#container .main {
padding-top: 200px; /* adjust this value to suite new logo height */
}
#container #sidebar {
top: 200px; /* adjust this value to suite new logo height */
}

Save your file and recheck.

1 user says Thank You to Adam M for this useful post

1. dr4christ

[dr4christ Friend dr4christJoin date: December 2012Posts: 133Downloads:9Uploads:15 Thanks: 34 Thanked: 2 times in 1 posts]

#548756

O.K. Adam – On the desktop in both Safari and Firefox the logo now appears correctly however this fix has also A.) messed up the menu (highlighted home button is cut off) B.) the main space and side menu both have been forced downwards 1.25 inches (at the least) leaving a large awkward space.

Tom
http://www.DR4Christ.com

P.S. On the Moblile phone the logo has overwritten text an both the A.) menu and the B.) space problem have now appeared.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#548794

Hi Tim,

You will see that I did comment in CSS code that the value for width / height is just a sample and you will have to adjust them to suite your need as I’m not sure about your logo width / height you’re going to use.

If you can clarify a little bit about your idea so I can help you with correct values.

1 user says Thank You to Adam M for this useful post

1. dr4christ

[dr4christ Friend dr4christJoin date: December 2012Posts: 133Downloads:9Uploads:15 Thanks: 34 Thanked: 2 times in 1 posts]

#553721

Dear Adam M

We did manage to reply to your post yesterday. All that beautiful work is now poof – :-*

So doing a short recap – http://www.DR4Christ.com is on Joomla 3.3.6 – running the latest JA Wall template, extensions ect.

YOUR FIXES WORKED – except that the logo (shifted to the right) is cut off in Mobile Devices. I think this could be corrrected if the logo was centered or justified to the left. Here is a pic I took from the Web Developer Tools (View Responsive Layout)

Inquiring Minds Want To Know:

A. What did you do to fix all these format errors?

B. Can these same fixes be applied to all the Theme’s/ Styles in JA Wall or does each Style require different fixes?

C. In each subsequent version of Joomla – Joomla 3.4 , 3.5 ect. ect. will these fixes be required again and if so – how can we avoid going through this again?

Tom
http://www.DR4Christ.com

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#553739

Hi Tom,

1. You can see all additional CSS code I have made at the end of template.css file :

#header .logo,
#header #logo {
width: auto;
}
#header .logo-image h1 {
margin: 3px 30px;
}
#header .logo-image h1 a {
float: none;
display: block;
width: 120px; /* adjust this value to suite your need */
height: 40px; /* adjust this value to suite your need */
}
#header #mainnav {
padding-left: 0;
}
#header #mainnav .menu-inner {
left: auto;
right: auto;
} @media only screen and (min-width:985px) {
#header #mainnav {
left: 180px; /* adjust this value to push Main Menu to the right, give space for new logo */
}
} @media only screen and (min-width:720px) and (max-width: 985px) {
#header #mainnav {
left: 225px; /* adjust this value to push Main Menu to the right, give space for new logo */
}
}
#container .main {
/* padding-top: 200px; adjust this value to suite new logo height */
}
#container #sidebar {
/* top: 200px; adjust this value to suite new logo height */
}

2. Yes, it will be applied to all styles of your current template.

3. Whenever you update the template, just copy and paste the code as noted in point 1 to new template.

Please open file root_folder/templates/ja_wall/css/template.css and add this code to fix the problem with your logo :

@media only screen and (max-width:480px) {
#header #logo h1 {
width: auto;
margin: 3px 90px 3px 45px;
}
}

Look for this code :

#header .logo-image h1 a {
float: none;
display: block;
width: 120px; /* adjust this value to suite your need */
height: 40px; /* adjust this value to suite your need */
}

then change as below :

#header .logo-image h1 a {
float: none;
display: inline-block;
width: 120px; /* adjust this value to suite your need */
height: 40px; /* adjust this value to suite your need */
}

1 user says Thank You to Adam M for this useful post

1. dr4christ

[dr4christ Friend dr4christJoin date: December 2012Posts: 133Downloads:9Uploads:15 Thanks: 34 Thanked: 2 times in 1 posts]

#553790

Dear Adam M

Added code beginning on line 2038 and changed code on line 2011 as instructed in template.css and it appears that the logo is now shifted even further to the right on the mobile display further cutting it off. PM’ing you my FTP info just in case you lost it with Joomlart going down.

Tom
http://www.DR4Christ.com

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#553882

Hi Tom,

There’s a problem with the FTP account you provided so I couldn’t connect to your site. Anyway, just look for my previous code in template.css file :

@media only screen and (max-width:480px) {
#header #logo h1 {
width: auto;
margin: 3px 90px 3px 45px;
}
}

then update as below, it will fix the problem :

@media only screen and (max-width:480px) {
#header #logo h1 {
width: auto !important;
margin: 3px 90px 3px 45px;
}
}

1 user says Thank You to Adam M for this useful post

1. dr4christ

[dr4christ Friend dr4christJoin date: December 2012Posts: 133Downloads:9Uploads:15 Thanks: 34 Thanked: 2 times in 1 posts]

#553962

Dear Adam

Made the change – but unfortunatly – its still shifted to the right. Tested FTP – working great. PM’d you my info again.

Tom

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#554093

Hi Tom,

I checked your template.css file and see that there’s a minor problem, your current code is :

width: auto; important;

but the correct code should be :

width: auto !important;

I fixed it for you, please check the result.

1 user says Thank You to Adam M for this useful post

1. dr4christ

[dr4christ Friend dr4christJoin date: December 2012Posts: 133Downloads:9Uploads:15 Thanks: 34 Thanked: 2 times in 1 posts]

#554124

Yes!! You are the Dark Monk of Code!! Thank you Thank you Thank you!

[Author]

Posts