3D FlipBook - Show own logo in navigation panel

j***k@gmail.com
2021-09-08
2021-09-23

Hello, I have purchased the pro version of your plugin. After this purchase the 3D FlipBook logo dissapeared from the navigation panel. I would like to display my own logo, so the question is, if it would be possible. If so, could you please provide me some documentation how to manage it? Thanks a lot.

Replies

a***r@3dflipbook.net
2021-09-09
2021-09-09

Hi, there is no such option, but if you wish, you can customize the plugin template css.

j***k@gmail.com
2021-09-09
2021-09-09

And could you please provide me a sample code? Thanks a lot.

j***k@gmail.com
2021-09-10
2021-09-10

I have created a copy of short-white-book-view.css, edited the template.php file and added this css code to the new css file (according to the free version of plugin):

.logo .place { display: inline-block; width: 36px; height: 13px; position: relative; }

.logo .place .smb { top: -11px; width: 36px; height: 36px; position: absolute; background-size: contain; background-image: url('../images/icon.ico'); opacity: 0.75; }

.logo:hover .place .smb { opacity: 0.9; }

.logo:active .place .smb { opacity: 1; left: 1px; top: -9px; width: 34px; height: 34px; }

The new template is visible and selectable, but the logo is not displayed. Thank you for any advice and help

j***k@gmail.com
2021-09-10
2021-09-10

I have already solved my problem by myself and add own logo to the navigation bar. It was a bit of alchemy, because I found no documentation which files have to be changed and which way. Could you please provide some document which describes the template creation? Thanks a lot.

a***r@3dflipbook.net
2021-09-23
2021-09-23

for free version logo is implemented as:

...
<ul class="buttons">
  <li class="logo" title="3D FlipBook"><a href="http://3dflipbook.net/?from=lite" target="_blank"><div class="place"><div class=smb></div></div></a></li> 
...

in default-book-view.html and

.logo .place {
  display: inline-block;
  width: 36px;
  height: 13px;
  position: relative;
}

.logo .place .smb {
  top: -11px;
  width: 36px;
  height: 36px;
  position: absolute;
  background-size: contain;
  background-image: url('../images/icon.ico');
  opacity: 0.75;
}

.logo:hover .place .smb {
  opacity: 0.9;
}

.logo:active .place .smb {
  opacity: 1;
  left: 1px;
  top: -9px;
  width: 34px;
  height: 34px;
}

in short-white-book-view.css

We will add in docs how to create custom templates.

Log In to leave a comment