Joomla Templates Club 406,261 posts

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

#196276

Getting close. But the instructions for making the logo area larger on the forum seem to be for an older version of Joomla – Line #’s, ect. are not matching up. All I want to do is get this logo.png to show correctly universally across the entire site. Inserted it but it still looks terrible on http://www.DR4Christ.com

Tom Franklin
http://www.DR4Christ.com

---

Attachments:

1. 

[wingly Friend winglyJoin date: February 2014Posts: 310Downloads:0Uploads:87 Thanks: 80 Thanked: 83 times in 48 posts]

#528578

<em>@dr4christ 418762 wrote:</em><blockquote>Getting close. But the instructions for making the logo area larger on the forum seem to be for an older version of Joomla – Line #’s, ect. are not matching up. All I want to do is get this logo.png to show correctly universally across the entire site. Inserted it but it still looks terrible on http://www.DR4Christ.com

Tom Franklin
http://www.DR4Christ.com

</blockquote>

in custom.css insert the following code


.logo {
margin-bottom: 0px;
margin-left: 64px;
margin-top: 3px;
}

.logo a {
width: 120px;
height: 40px;
}


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

#528582

Where is custom.css located? Again

[wingly Friend winglyJoin date: February 2014Posts: 310Downloads:0Uploads:87 Thanks: 80 Thanked: 83 times in 48 posts]

#528588

<em>@dr4christ 418769 wrote:</em><blockquote>Where is custom.css located? Again</blockquote>

Templates/ja_wall/css/

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

#528589

<em>@wingly 418777 wrote:</em><blockquote>Templates/ja_wall/css/</blockquote>

Oh no. Its not there. What do I do?

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

#528590

Do I make a new one?

[wingly Friend winglyJoin date: February 2014Posts: 310Downloads:0Uploads:87 Thanks: 80 Thanked: 83 times in 48 posts]

#528591

<em>@dr4christ 418778 wrote:</em><blockquote>Oh no. Its not there. What do I do?</blockquote>

I am sorry modify templates/ja_wall/themes/color_block/css/ the theme.css

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

#528595

Do I insert this anywhere – there are 2538 lines of code in this?

[wingly Friend winglyJoin date: February 2014Posts: 310Downloads:0Uploads:87 Thanks: 80 Thanked: 83 times in 48 posts]

#528596

<em>@dr4christ 418786 wrote:</em><blockquote>Do I insert this anywhere – there are 2538 lines of code in this?</blockquote>

before line 9

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

#528599

<em>@wingly 418787 wrote:</em><blockquote>before line 9</blockquote>

Well I inserted the code and it didn’t do anything. Maybe I’m not inserting the code correctly – no idea.

Tom
http://www.DR4Christ.com

[wingly Friend winglyJoin date: February 2014Posts: 310Downloads:0Uploads:87 Thanks: 80 Thanked: 83 times in 48 posts]

#528600

<em>@dr4christ 418790 wrote:</em><blockquote>Well I inserted the code and it didn’t do anything. Maybe I’m not inserting the code correctly – no idea.

Tom
http://www.DR4Christ.com</blockquote>

I am very very sorry to make this thread so long. I have been posting and debugging your site from mobile. Now i am at PC so let’s make this work.

Go to templates/ja_wall/css/ and in file template.css find this code about line 1231:


.logo-image h1 a {
background: url(../images/logo.png) no-repeat top left;
height: 24px;
float: right;
text-indent: -999em;
width: 56px;
}


replace it with

.logo-image h1 a {
background: url(../images/logo.png) no-repeat top left;
height: 40px;
float: right;
text-indent: -999em;
width: 120px
}

and a bit above it find the code:

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

and replace it to:

.logo-image h1 {
color: #fff
display: block;
margin-bottom: 0px;
margin-left: 64px;
margin-top: 3px;
}

This should do it

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

#528630

<em>@wingly 418794 wrote:</em><blockquote>I am very very sorry to make this thread so long. I have been posting and debugging your site from mobile. Now i am at PC so let’s make this work.

Go to templates/ja_wall/css/ and in file template.css find this code about line 1231:


.logo-image h1 a {
background: url(../images/logo.png) no-repeat top left;
height: 24px;
float: right;
text-indent: -999em;
width: 56px;
}


replace it with

.logo-image h1 a {
background: url(../images/logo.png) no-repeat top left;
height: 40px;
float: right;
text-indent: -999em;
width: 120px
}

and a bit above it find the code:

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

and replace it to:

.logo-image h1 {
color: #fff
display: block;
margin-bottom: 0px;
margin-left: 64px;
margin-top: 3px;
}

This should do it</blockquote>

Nope – this correction pushed the logo to the far right – logo in either position never changed or was resized. Made a small correction from right to left and this is how the code shows currently. But it still is the logo is unchanged on http://www.dr4christ.com Lines 1217 – 1285

/* Logo Image —*/
.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;
margin-bottom: 0px;
margin-left: 64px;
margin-top: 3px;
}

.logo-image h1 a {
background: url(../images/logo.png) no-repeat top left;
height: 40px;
float: left;
text-indent: -999em;
width: 120px;
}

/* Logo text —*/
.logo-text h1 {
font-size: 22px;
font-weight: normal;
line-height: normal;
}

.logo-text h1 span {
display: inline-block;
font-size: 10px;
line-height: normal;
padding-right: 0;
padding-top: 5px;
vertical-align: top;
}

.logo-text h1 a {
color: #fff
display: inline-block;
font-weight: bold;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.7);
text-transform: uppercase;
}

.logo-text:hover h1 a,
.logo-text h1 a:hover,
.logo-text h1 a:active,
.logo-text h1 a:focus {
color: #fff
}

.logo-text p {
color: #dfedc3
display: block;
font-size: 10px;
margin-top: -3px;
letter-spacing: -.5px;
text-transform: uppercase;
}

This is how those lines were originally – which is slightly different than your example.

/* Logo Image —*/
.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: 40px;
margin: 12px 0 0 20px;
padding: 0;
width: 120px;
}

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

/* Logo text —*/
.logo-text h1 {
font-size: 22px;
font-weight: normal;
line-height: normal;
}

.logo-text h1 span {
display: inline-block;
font-size: 10px;
line-height: normal;
padding-right: 0;
padding-top: 5px;
vertical-align: top;
}

.logo-text h1 a {
color: #fff
display: inline-block;
font-weight: bold;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.7);
text-transform: uppercase;
}

.logo-text:hover h1 a,
.logo-text h1 a:hover,
.logo-text h1 a:active,
.logo-text h1 a:focus {
color: #fff
}

.logo-text p {
color: #dfedc3
display: block;
font-size: 10px;
margin-top: -3px;
letter-spacing: -.5px;
text-transform: uppercase;
}

[wingly Friend winglyJoin date: February 2014Posts: 310Downloads:0Uploads:87 Thanks: 80 Thanked: 83 times in 48 posts]

#528634

Ok now i see.

This should make it – go to templates/ja_wall/themes/color_black/css/ and open file theme.css

about line 1231 find the code:

.logo-image h1 a {
background: url(../images/logo.png) no-repeat top left;
height: 24px;
float: right;
text-indent: -999em;
width: 56px;
}

replace it with:

.logo-image h1 a {
background: url(../images/logo.png) no-repeat top left;
/* height: 24px; */
float: right;
text-indent: -999em;
/* width: 56px; */
}

Also at line 1224 find the code:

.logo-image h1 {
height: 24px;
margin: 10px 0px 15px 30px;
padding: 0;
width: 56px;
}

Replace it with this one:

.logo-image h1 {
height: 24px;
/* margin: 10px 0px 15px 30px; */
padding: 0;
width: 56px;
}

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

#528843

O.K. – as you can see on a regular computer the logo is now working – THANK YOU SO MUCH WINGLY!! Noticed :(( however on my iPhone that there is a double logo showing up with the text – DR4Christ Ministries showing up over the logo in grey. Any way to get that off?

Tom
http://www.dr4christ.com

[wingly Friend winglyJoin date: February 2014Posts: 310Downloads:0Uploads:87 Thanks: 80 Thanked: 83 times in 48 posts]

#528897

@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.

1 user says Thank You to wingly for this useful post

1. dr4christ

[Author]

Posts