Moved Core Theme Logos to CSS

In order to make it easier for a user/developer to replace logos in the core theme, I removed the hardcoded `logo.svg` and `logo-wide.svg` from the html, and replaced them with `div`s that use css background-image instead.

This has multiple advantages:
1. The user can now use any filename they want for the logo.  They are no longer forced to use logo.svg or logo-wide.svg.
2. The user can now easily use a JPG, PNG or GIF logo instead of SVG (SVG's are awesome, but used by an unfortunately small percentage of web developers at the current time.  Most probably don't even know how to make an SVG…).
3. The user doesn't have to resort to hacking the core theme template files in order to use a different filename or file type.
4. Greatly simplifies documentation instructions for how to change the logos (http://owncloud.org/theming/).

Signed-off-by: Jake Wilson <jakew@huebnerpetersen.com>
This commit is contained in:
Jake Wilson 2013-10-10 12:29:13 -06:00
parent 0641365a10
commit 5144def99b
3 changed files with 17 additions and 3 deletions

View File

@ -46,6 +46,19 @@ body { background:#fefefe; font:normal .8em/1.6em "Helvetica Neue",Helvetica,Ari
opacity: 1;
}
#header .logo {
background-image: url(../img/logo.svg);
width: 250px;
height: 118px;
margin: 0 auto;
}
#header .logo-wide {
background-image: url(../img/logo-wide.svg);
width: 147px;
height: 32px;
}
/* INPUTS */
input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], input[type="url"],
textarea, select,

View File

@ -36,7 +36,7 @@
<body id="body-login">
<div class="wrapper"><!-- for sticky footer -->
<header><div id="header">
<img src="<?php print_unescaped(image_path('', 'logo.svg')); ?>" class="svg" alt="<?php p($theme->getName()); ?>" />
<div class='logo'></div>
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
</div></header>

View File

@ -43,8 +43,9 @@
<?php endif; ?>
</div>
<header><div id="header">
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud"><img class="svg"
src="<?php print_unescaped(image_path('', 'logo-wide.svg')); ?>" alt="<?php p($theme->getName()); ?>" /></a>
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud">
<div class='logo-wide'></div>
</a>
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
<ul id="settings" class="svg">
<span id="expand" tabindex="0" role="link">