Joomla Templates Club 406,261 posts

[toucandesign Friend toucandesignJoin date: June 2012Posts: 47Downloads:0Uploads:24 Thanks: 8 Thanked: 3 times in 1 posts]

#468787

Awesome!

What line can I insert in the CSS to move the image up slightly, like 20px?

I’ve tried a lot of CSS trial and error to move it up with mostly error 🙂

Thanks again for all the help!

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#468812

<em>@toucandesign 340604 wrote:</em><blockquote>Awesome!

What line can I insert in the CSS to move the image up slightly, like 20px?

I’ve tried a lot of CSS trial and error to move it up with mostly error 🙂

Thanks again for all the help!</blockquote>

Thanks : D
To move up your image, in your template css file (locate in: templatesyour_template_folder_namecsstemplate.css)
Change


body.layoutview .componentheading {
margin: -97px auto 0;
}

to


body.layoutview .componentheading {
margin: -116px auto 0;
padding: 0 0 20px;
}


1 user says Thank You to Luna Garden for this useful post

1. synncom

[toucandesign Friend toucandesignJoin date: June 2012Posts: 47Downloads:0Uploads:24 Thanks: 8 Thanked: 3 times in 1 posts]

#468883

Looks awesome Luna, thanks.

I took a look at mobile, on my iPhone and probably need to adjust that as well. Any guidance you can give me?

---

Attachments:

1. 

[toucandesign Friend toucandesignJoin date: June 2012Posts: 47Downloads:0Uploads:24 Thanks: 8 Thanked: 3 times in 1 posts]

#468887

Actaully, now that I reviewed on desktop and narrowed the browser signifigantly, the logo floats down which may be why it appears like this on mobile?

---

Attachments:

1. 

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#468912

<em>@toucandesign 340737 wrote:</em><blockquote>Actaully, now that I reviewed on desktop and narrowed the browser signifigantly, the logo floats down which may be why it appears like this on mobile?

</blockquote>
Hii,
Sorry I just check only on browser, thanks for pointing it out.
Here the solution:
1. In file

templates/ja_lens/css/layout-tablet.css

from code:


body.layoutview .componentheading {
margin: -87px auto 10px;
padding-left: 10px;
}


change to:


body.layoutview .componentheading {
margin: -125px auto 10px;
padding-bottom: 40px;
padding-left: 10px;
}


2. In file
templates/ja_lens/css/layout-mobile.css

From:


body.layoutview .componentheading {
margin: -77px auto 20px;
padding-left: 10px;
}


change to:


body.layoutview .componentheading {
margin: -136px auto 20px;
padding-bottom: 70px;
padding-left: 10px;
}


3. In file
templates/ja_lens/css/layout-mobile-portrait.css


body.layoutview .componentheading {
margin: -77px auto 20px;
padding-left: 10px;
}


Change to


body.layoutview .componentheading {
margin: -135px auto 20px;
padding-bottom: 68px;
padding-left: 10px;
}


1 user says Thank You to Luna Garden for this useful post

1. toucandesign

[toucandesign Friend toucandesignJoin date: June 2012Posts: 47Downloads:0Uploads:24 Thanks: 8 Thanked: 3 times in 1 posts]

#468991

The solution works beautifully Luna, thanks so much! 😀

1 user says Thank You to toucandesign for this useful post

1. Luna Garden

[ARTIFIEDWEB Friend ARTIFIEDWEBJoin date: September 2012Posts: 2Downloads:42Uploads:0]

#471487

Dear Luna, your solution works perfect for me also.
But I have another problem. This only works when “show page heading” is set to yes in every menu item.
Is there a way to make it work globally?
Regards,
George

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#471521

<em>@Luna Garden 340451 wrote:</em><blockquote>


body.layoutview .componentheading {
background: url("your_image_url") no-repeat scroll 0 0 transparent;
text-indent: -9999px;
}
</blockquote>
You can see that, this is the background for component heading, so it’s only working for this case.
If you want it work for all pages, maybe set background for the toolbar:

#toolbar .main{
background: url("your_image_url") no-repeat scroll 0 0 transparent;
}

[ARTIFIEDWEB Friend ARTIFIEDWEBJoin date: September 2012Posts: 2Downloads:42Uploads:0]

#471588

Once more your solution was perfect…. but! sometimes, I think when not in layout view (such as slideshow or contact) the toolbar disappears.
Could you tell me a way in which I could make toolbar to always stay visible?
Sorry for the fuzz!

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#471653

<em>@irescuegr 344371 wrote:</em><blockquote>Once more your solution was perfect…. but! sometimes, I think when not in layout view (such as slideshow or contact) the toolbar disappears.
Could you tell me a way in which I could make toolbar to always stay visible?
Sorry for the fuzz!</blockquote>
Then you set the Smart search module display on all pages, toolbar appears with it.

[markkusq3po Friend markkusq3poJoin date: March 2007Posts: 66Downloads:0Uploads:6 Thanks: 20 Thanked: 1 times in 1 posts]

#480875

Hello, i tried all these two steps but dind’t get an image shown.
For the path i tried several ways with “../”, etc. and also put the image into the folder “templatesyour_template_folderhtmlcom_k2ja_lens”

but everything i see is the page title doubled. One from the home menu and the other from the img alt tag.

And by the way, firefox (17.1) shows it different than chrome.

Ok, the text i can get out of sight with the text-ident tag, but how to get the image shown?
Chrome is only showing an empty box with a missing image icon, firefox does show nothing.

Does anybody has a hint?

Thanks Markus

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#481141

Hello Markus,

Please try this solution instead: http://www.joomlart.com/forums/topic/logo-instead-of-text/#post-468655

The first one doesn’t work.

1 user says Thank You to Luna Garden for this useful post

1. markkusq3po

[anitamtan Friend anitamtanJoin date: February 2013Posts: 13Downloads:0Uploads:2 Thanks: 19 Thanked: 1 times in 1 posts]

#485306

<em>@Luna Garden 338089 wrote:</em><blockquote>To change this do as below:
1. Go to your CSS file >> Adding these lines:
body.layoutview .componentheading{
text-indent: -9999px;}
I try to follow your instruction but….I’m not sure where should I go under CSS? I went to Template manager/ edit-stylesheet…but which one is the right one to put the above message. As I’m not very familier with CSS, Can you give more specific guideline . Thanks a lot:((

[anitamtan Friend anitamtanJoin date: February 2013Posts: 13Downloads:0Uploads:2 Thanks: 19 Thanked: 1 times in 1 posts]

#485311

I think I got the page to edit, but it still doesn’t upload logo. I saved my logo in my media folder, where and how I insert into my CSS file? What does it mean: your image url?
It shows on how I add on the CSS

#logo h1 a {
color: #fff
padding-left: 0px;
width: 60px;
height: 60px;
line-height: 60px;
background: url(index.php?option=com_media&folder/allogo.png) no-repeat center center;
display: block;
font-size: 0px;
text-indent: -9999em;

Thanks

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#485338

Hello,

Your background image URL above is not correct.

Image url is relative path URLs to the image. For example, your image locate in folder “templates/ja_lens/images/” and its name is allogo.png then the image url should be: templates/ja_lens/images/allogo.png

Hope you understand.

[Author]

Posts