T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Fred Cass
  2. General Discussion
  3. Sunday, 03 November 2013
  4.  Subscribe via email
Hi,

I'm trying to set an SVG file as
@T3LogoImage
in t3_blank/less/themes/my_theme/variables.less, e.g.

@T3LogoImage: "/site/path/to/imagesdir/file.svg";


Because I want to insert an SVG image - not GIF,PNG or JPG, I cannot use the Joomla T3 template UI, as the Image dialog it shows filters out SVG as a non-image filetype.

I had also previously set a PNG version of the same file using the Joomla Template Manager UI. This sets a logo image filename in the SQL database table
#__template_styles
.

No matter what I do, the
.logo-image a {
CSS is always overridden on the rendered page by the
<a style"background-image: url(filename)...>
inline style from the database. if I delete the logo filename in the UI, then I see nothing.

In the end, I had to use phpMyAdmin to modify the
params
field of the
#__template_styles
table entry directly.

I also need to apply some custom CSS to the
.logo-image a {
CSS too, but, if I put that in t3_blank/less/themes/my_theme/style.less, it is ignored.

What is the correct way to include a responsive scalable SVG image as a logo ?


T3v3 v1.4.1
Joomla 2.5.14
Attachments (1)
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,


SVG is not support by Joomla Media manager.
But you can still use svg as logo.

1. For T3 Blank, it use image background, so the svg does not responsive. (you can use background-size if you want to make it responsive in CSS)
Here the steps:
- Upload your svg file to /images folder (for ex: /images/mylogo.svg) by using any ftp client
- Open Theme tab in T3 Template Manager. Then choose your svg image. And yes, by default, your logo file will not able to select. Just type the url in Image url box ( should be /images/mylogo.sgv)
- Save and check your frontend site.


2. You can modify your logo markup to something like this.
- Open tpls\blocks\header.php and replace
     <a href="/<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>


by

  						<div class="brand">
<a <?php echo ($logotype == 'image' && $logoimage) ? '' : 'class="bg-image"' ?> href="/<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>">
<?php if($logotype == 'image' && $logoimage): ?>
<img class="logoimg" src="/<?php echo JURI::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</div>


- Use this logo less code instead of existing one.
// Logo
// ---------------------------------------------------------
.logo {
float: left;

.brand {
padding: 0;
margin: @T3globalMargin/2 0 0;
text-shadow: none;
}

a {
display: inline-block;
line-height: 1;
margin: 0;
}

}


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

a {
width: @T3logoWidth;
height: @T3logoHeight;

&.bg-image {
background-image: url("@{T3LogoImage}";);
background-repeat: no-repeat;
}
}

//hide sitename and slogan
span, small {
display: none;
}

}


// Logo Text
// ----------
.logo-text {

a {
color: @grayDark;
text-decoration: none;
font-size: @fontSizeLarge;
}

&:hover a,
a:hover,
a:active,
a:focus {
text-decoration: none;
}

// Taglines
.site-slogan {
display: block;
font-size: @baseFontSize;
margin-top: 5px;
}

}


- Save and recompile LESS to CSS.


Note: the second option will help you easy to manage the responsive logo.

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for the reply and your helpful suggestions. I missed that I could just have typed the URI into the dialog box !

I needed PNG fallback, so I used a method here http://css-tricks.com/svg-fallbacks/.

with Modernizr and LESS more-or-less like this

a {
width: @T3logoWidth;
height: @T3logoHeight;

&.bg-image {
background-image: url("@{T3LogoImageSVG}");
background-repeat: no-repeat;
}
.no-svg & {
background-image: url("@{T3LogoImagePNG}");
}

}


and a modified header.php
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
It is no longer possible to type in a URL for the logo in T3.

If the media types and file extensions allowed in the media manager configuration settings include SVG, shouldn't it be possible to upload and select these files?
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Accepted Answer Pending Moderation
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.