Joomla Templates Club 406,261 posts

[dinopatel Friend dinopatelJoin date: December 2012Posts: 52Downloads:18Uploads:25 Thanks: 2 Thanked: 2 times in 1 posts]

#187997

Is it possible to put a background on the logo?

Also I wish to move the menu under the slideshow, spanning 100% width

Thanks
Dino

please see image

---

Attachments:

1. 
2. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#494887

So that I can try to best assist you, please provide the url of the site you’re working on,
as well as set your site to “Development Mode” within your Template Manager

[dinopatel Friend dinopatelJoin date: December 2012Posts: 52Downloads:18Uploads:25 Thanks: 2 Thanked: 2 times in 1 posts]

#494915

I am working locally, although there is a test site here: http://www.tikiwine.com/TESTDRIVE/

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#494916

<em>@dinopatel 375565 wrote:</em><blockquote>I am working locally, although there is a test site here: http://www.tikiwine.com/TESTDRIVE/</blockquote>
It appears that your test site requires login credentials

:((

[dinopatel Friend dinopatelJoin date: December 2012Posts: 52Downloads:18Uploads:25 Thanks: 2 Thanked: 2 times in 1 posts]

#494917

pm’d with details

[dinopatel Friend dinopatelJoin date: December 2012Posts: 52Downloads:18Uploads:25 Thanks: 2 Thanked: 2 times in 1 posts]

#494919

my local site has advanced a bit more then this, with better logo etc slideshow 100%width as nothing in position 5 etc but I still need the menu below the slideshow and background behind the tiki logo.

hey thanks for helping me..

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#494921

<em>@dinopatel 375567 wrote:</em><blockquote>pm’d with details</blockquote>
Need you to put your site in Development Mode (if J3.0) – in your Template Manager

If site J2.5, set “Optimize CSS” to “No” within Template Manager–General settings

[dinopatel Friend dinopatelJoin date: December 2012Posts: 52Downloads:18Uploads:25 Thanks: 2 Thanked: 2 times in 1 posts]

#494926

Done, but you are more then welcome to login as administrator with details I sent you.

Thanks for your help.

[dinopatel Friend dinopatelJoin date: December 2012Posts: 52Downloads:18Uploads:25 Thanks: 2 Thanked: 2 times in 1 posts]

#495001

Tom have you managed to logon? any ideas? Thanks

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#495057

To put a background image onto the logo is as simple as modifying the CSS that governs the logo itself. In this case . . .

Within file path –> /t3-assets/dev/light/templates.ja_mero.less.style.less.css
… at line 5

FOR EXAMPLE PURPOSES ONLY, see the following modifications:


.logo {
background-color: #000000
float: left;
height: 100px;
width: 800px;
}

To add a background-image, you basically need to create the image and simply modify the above identified CSS rule accordingly. The syntax for adding a background-image property will depend on the file in which you put your new logo design/image – for example . . .

background: url(“../../../templates/ja_mero/images/your-new-image.png”)

Hope That Helps

[dinopatel Friend dinopatelJoin date: December 2012Posts: 52Downloads:18Uploads:25 Thanks: 2 Thanked: 2 times in 1 posts]

#495067

To help me further (as this is quite urgent) I have two images

logo: logo.png

and
background image: logo_back.png

my template is JA_MERO and I am using theme light.

I noticed that .logo-image uses background-image to place the logo, can you have two background images.

I do not want to use one Photoshopped image with background and image as this may not have responsiveness effect.

I am a newbie this is apparent by my questions (sorry)

Also can I move the menu down under the slideshow.

Thanks

[dinopatel Friend dinopatelJoin date: December 2012Posts: 52Downloads:18Uploads:25 Thanks: 2 Thanked: 2 times in 1 posts]

#495070

i.e.

in style.css we have:

// Logo Image
// ———-
.logo-image {
overflow: hidden;

a {
background-image: url(“@{T3LogoImage}”);
background-repeat: no-repeat;
width: @T3logoWidth;
height: @T3logoHeight;
}
and variables.less:
@T3logoWidth: 300px;
@T3logoHeight: 45px;

@T3LogoImage: “../images/logo.png”;

Thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#495279

Hi,

1. Could you pm login info of your site and send me screenshot of how you want to achieve with logo?

As demo site, style for logo in light theme is defined in: templatesja_merocssthemeslighttemplate.css, starting at line 2524

2. To switch position between slideshow and the main menu, you can try this way:

– Open file: /templates/ja_mero/tpls/home.php

– Move this line of code: <?php $this->loadBlock (‘mainnav’) ?>

– Into file: /templates/ja_mero/tpls/blocks/mainbody-home.php

underneath this line: <?php $this->loadBlock (‘slideshow’) ?>

Regards

[dinopatel Friend dinopatelJoin date: December 2012Posts: 52Downloads:18Uploads:25 Thanks: 2 Thanked: 2 times in 1 posts]

#495304

I am trying to achieve this:

I have pm’d you login details

Thanks

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#495386

For what you are looking to accomplish, it looks more like you will need to create a background image for your entire header section – not the logo itself.

[Author]

Posts