Author Topic: Flex Skin Logo  (Read 1853 times)

jmonroe

  • Active Member
  • ***
  • Posts: 63
  • Karma: +1/-0
Flex Skin Logo
« on: June 30, 2015, 07:28:19 PM »
How do I change the logo? Manually I am assuming in the code?

KHDev

  • Global Moderator
  • Veteran Member
  • *****
  • Posts: 518
  • Karma: +45/-2
  • Etano Contributor (Skins & Mods)
Re: Flex Skin Logo
« Reply #1 on: June 30, 2015, 08:42:22 PM »
There should be some instructions in the user manual in the skin download.

The logo/mobile icon are defined in skins_site > def > widgets > login > display.html

OR

skins_site > def > index.html / frame.html  / frame_general.html

(I'm away from my computer at this very moment which is why im not 100%)

Admittedly previously I used the login widget as a header bar widget as it saves time (only need to edit 1 file instead of 3) however all future releases (starting with Deano Deluxe) will have the login widget reverted back to just a login form and placing logos and stuff in the frame/index files for better organisation. :)

jmonroe

  • Active Member
  • ***
  • Posts: 63
  • Karma: +1/-0
Re: Flex Skin Logo
« Reply #2 on: July 02, 2015, 04:00:46 PM »
Tried that but no luck. I only see icon.png and some other misc png but no logo. Right now, it's showing the name of the site as a logo.

KHDev

  • Global Moderator
  • Veteran Member
  • *****
  • Posts: 518
  • Karma: +45/-2
  • Etano Contributor (Skins & Mods)
Re: Flex Skin Logo
« Reply #3 on: July 02, 2015, 05:18:01 PM »
By default Flex uses your sites name as the logo (in form of a link) therefor a logo image file is not provided since most people customize the skin to their own branding. (although a demo icon for small screens is provided for demo purposes)

in skins_site > def > widgets > login > display.html

Code: [Select]
## On line 6

<a id="site_name" href="{tplvars.relative_url}home.php" title="{tplvars.sitename}">{tplvars.sitename}</a>

## On line 43

<a id="site_name" href="{tplvars.baseurl}" title="{tplvars.sitename}">{tplvars.sitename}</a>


If you prefer to use an image based logo then simply change the above links to something like

Code: [Select]
<a id="logo" href="{tplvars.relative_url}home.php" title="{tplvars.sitename}"><img src="{tplvars.tplurl}/images/logo.png" alt="{tplvars.sitename}" title="{tplvars.sitename}" /></a>

## On line 43

<a id="logo" href="{tplvars.baseurl}" title="{tplvars.sitename}"><img src="{tplvars.tplurl}/images/logo.png" alt="{tplvars.sitename}" title="{tplvars.sitename}" /></a>

Then add a logo image (named logo.png based on this example) to skins_site > def > images > here i'd suggest an image within W 200px by H 50px



EDIT -
additional css styling maybe required.
You might find tthe logo not hiding in smaller screens and over lap thats because I changed the 'id' of the links in the example above. Just change the <a id="logo" back to id="site_name"

jmonroe

  • Active Member
  • ***
  • Posts: 63
  • Karma: +1/-0
Re: Flex Skin Logo
« Reply #4 on: July 02, 2015, 08:15:06 PM »
The only thing I am noticing is ever since I replaced sitename with logo image, it no longer brings up the site on my cell phone. Works fine on tablet, laptop, computer but connection always times out on site.

And its not internet issue on phone as I can surf other sites just fine.

Strange.

jmonroe

  • Active Member
  • ***
  • Posts: 63
  • Karma: +1/-0
Re: Flex Skin Logo
« Reply #5 on: July 03, 2015, 05:07:13 PM »
I went and did what you said but I elected to make the logo 200 x 45 so that way there is some spacing. I would like to put some padding above the logo and may do so in the css so that way it is more centered on the fixed_bar

Edit: a padding of 5px does nicely on the .logo-box