Web based family history software

Question JustLight theme for webtrees 1.6.0 released!

  • JustCarmen
  • Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
9 years 5 months ago - 9 years 5 months ago #1 by JustCarmen
As announced earlier I promised you a brand new theme.

TheJustLight theme is finally released!

This is a new modern theme in clean white and blue. The layout is adjusted as much as possible for use on touch devices like tablets and mobile phones.

A few things to mention:
  • The menu is responsive. This means it will collapse on smaller screens and have only clickable items. You might be used to hover over a menu item to get it’s submenu but on touch devices the hover functionality doesn’t exist.
  • The homepage and mypage are responsive as long as you keep some things in mind. Using the statistics block for instance means the page cannot shrink on smaller devices.
  • At the individual page the sidebar will collapse automatically when viewing from smaller screens.
And much more…

Like the JustBlack theme, this theme also have it’s own option module.

I really looking forward to here your opinon about this theme.

I have submitted the theme to the add-ons section [strike]but it waits for approval by the moderator[/strike]. You also can grab the theme from here: www.justcarmen.nl/themes/justlight-theme/
or from here: github.com/JustCarmen/justlight/releases/latest

For a live preview of the theme go to: www.wijzijnfamilie.nl


Carmen
Designer of the JustLight theme (comes with a light and dark color palette), Fancy Imagebar, Fancy Research Links and Fancy Treeview for webtrees 2


Check my website at www.justcarmen.nl
Last edit: 9 years 5 months ago by JustCarmen. Reason: Text updated

Please Log in or Create an account to join the conversation.

More
9 years 5 months ago #2 by taalia81
Replied by taalia81 on topic JustLight theme for webtrees 1.6.0 released!
Thank you Carmen! I like it very much and have installed it this morning!

Please Log in or Create an account to join the conversation.

  • Conjurer
  • Visitor
  • Visitor
9 years 5 months ago #3 by Conjurer
Replied by Conjurer on topic JustLight theme for webtrees 1.6.0 released!
Thanks for making this available. Very nice work!

Please Log in or Create an account to join the conversation.

More
9 years 5 months ago - 9 years 5 months ago #4 by bigwidower
Replied by bigwidower on topic JustLight theme for webtrees 1.6.0 released!
I just installed the JustLight theme : it is realy very nice and fits perfectly the theme I choose for my wordpress site!

Congratulations JustCarmen and many many thanks for sharing your talent!


I meanwhile have a question : at my server, I uploaded the directory "justlight_theme_options" into the directory "modules_v3". Is it the right place ?

I do not manage to find the JustLight Theme Options configuration page....

www.venarbol.net/borsodg31 (webtrees v 2.0.25)

Hébergé par PlanetHoster
Last edit: 9 years 5 months ago by bigwidower. Reason: message complété

Please Log in or Create an account to join the conversation.

  • JustCarmen
  • Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
9 years 5 months ago #5 by JustCarmen
Replied by JustCarmen on topic JustLight theme for webtrees 1.6.0 released!
Thank you :)

You uploaded the theme options module to the right place. You only need to enable it from the admin panel/modules.

After you have enabled it you will see an extra menu option.


Carmen
Designer of the JustLight theme (comes with a light and dark color palette), Fancy Imagebar, Fancy Research Links and Fancy Treeview for webtrees 2


Check my website at www.justcarmen.nl

Please Log in or Create an account to join the conversation.

More
9 years 5 months ago #6 by bigwidower
Replied by bigwidower on topic JustLight theme for webtrees 1.6.0 released!
I found it
Thanks again!

www.venarbol.net/borsodg31 (webtrees v 2.0.25)

Hébergé par PlanetHoster

Please Log in or Create an account to join the conversation.

  • godzil
  • Visitor
  • Visitor
9 years 5 months ago - 9 years 5 months ago #7 by godzil
Hi, i have problem with displaying your themes but only in polish language, i mark it on attached screen



on the upcomings events the box seems too small and it cut off part of the text, there is no horizontal scroll

on the top it cut part of the page even if the page is scrolled up - even in english language

could you help me or i must live with it? :)
Last edit: 9 years 5 months ago by godzil. Reason: img not attached

Please Log in or Create an account to join the conversation.

More
9 years 5 months ago #8 by bigwidower
Replied by bigwidower on topic JustLight theme for webtrees 1.6.0 released!
Hi Carmen,

Another question : how is it possible to include a personalized banner with photographs, as in your tree at www.wijzijnfamilie.nl/ ?

www.venarbol.net/borsodg31 (webtrees v 2.0.25)

Hébergé par PlanetHoster

Please Log in or Create an account to join the conversation.

More
9 years 5 months ago - 9 years 5 months ago #9 by JMoreau
Replied by JMoreau on topic JustLight theme for webtrees 1.6.0 released!
Bonjour
Avec Fancy Imagebar
ici
Jean

webtrees v2.0.6 servis par PHPv7.0 sur Windows 8 64 bits. Navigateur préféré Google Chrome 67.0 geneamoreau.webtrees.net
Last edit: 9 years 5 months ago by JMoreau.

Please Log in or Create an account to join the conversation.

More
9 years 5 months ago #10 by bigwidower
Replied by bigwidower on topic JustLight theme for webtrees 1.6.0 released!
merci !

www.venarbol.net/borsodg31 (webtrees v 2.0.25)

Hébergé par PlanetHoster

Please Log in or Create an account to join the conversation.

  • JustCarmen
  • Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
9 years 5 months ago #11 by JustCarmen
Replied by JustCarmen on topic JustLight theme for webtrees 1.6.0 released!

on the upcomings events the box seems too small and it cut off part of the text, there is no horizontal scroll


I see what you mean and this doesn't happen only in polish because I see the same on my own site in Dutch. I don't use tables in the sidebar but lists only. The downside of using tables in the sidebar is they will not shrink in proportion with the rest of the page when viewing the page from smaller screens. You will end up with a page where the sidebar will take half of the screen.

But nevertheless if you do want to use tables in the sidebare then a horizontal scrollbar would be handy ;)

It is just a small change in the css file to accomplish this. You can do it your self if you want.

The class to change in justlight/css-1.6.0/style.css is:
.small_inner_block

change overflow-x: hidden to overflow-x: auto

I will update the css file with this change.

So you don't have to live with it ;).


Carmen
Designer of the JustLight theme (comes with a light and dark color palette), Fancy Imagebar, Fancy Research Links and Fancy Treeview for webtrees 2


Check my website at www.justcarmen.nl

Please Log in or Create an account to join the conversation.

  • Conjurer
  • Visitor
  • Visitor
9 years 5 months ago - 9 years 5 months ago #12 by Conjurer
Replied by Conjurer on topic JustLight theme for webtrees 1.6.0 released!
Hi JustCarmen

What do you recommend for changing the top to use our own logo image? See my image attached which shows how I would like to replace in the top with an image logo.




I tried doing it with a background image in navbar and padding, but the padding messes up the rest of the display. The current site url is corgi webtree



Do you have suggestions on how/where best to insert the image?

Thanks
Attachments:
Last edit: 9 years 5 months ago by Conjurer. Reason: attached image

Please Log in or Create an account to join the conversation.

  • JustCarmen
  • Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
9 years 5 months ago - 9 years 5 months ago #13 by JustCarmen
Replied by JustCarmen on topic JustLight theme for webtrees 1.6.0 released!
Hi Conjurer,

Add an extra div for the logo to the file header.php just above the navbar-header div:
Code:
<div class="navbar-logo"></div> <div class="navbar-header"> <h1><a href="index.php" class="navbar-brand"><?php echo WT_TREE_TITLE; ?></a></h1> </div>

Add this to style.css:
Code:
.navbar-logo { background-image: url("images/logo.jpg"); background-repeat: no-repeat; background-size: contain; position: fixed; left: 0; top: 0; height: 100%; max-height: 86px; width: 100%; max-width: 375px; z-index: -1; } .nav-pills { margin-top: 50px; }

change the css for navbar-brand from this:
Code:
.navbar-brand { font-size: 32px; padding: 15px 0; }

to this:
Code:
.navbar-brand { text-indent: -9999px; white-space: nowrap; }

To test this I've cut out the logo from the screenshot, so the real image dimensions could be different. Adjust them if necessary. This also counts for the top-margin added to the nav-pills (the menu bar). It depends on the height of the real image.

Leave the site title as is, but move it out of sight (with the text-indent). This way it is not visible but still reachable by search engines.

You now have a responsive logo, which will shrink on smaller screens. See attached screenshots.


Carmen
Designer of the JustLight theme (comes with a light and dark color palette), Fancy Imagebar, Fancy Research Links and Fancy Treeview for webtrees 2


Check my website at www.justcarmen.nl
Attachments:
Last edit: 9 years 5 months ago by JustCarmen. Reason: typo

Please Log in or Create an account to join the conversation.

  • Conjurer
  • Visitor
  • Visitor
9 years 5 months ago #14 by Conjurer
Replied by Conjurer on topic JustLight theme for webtrees 1.6.0 released!
Thanks so much for the detailed notes on how to fix it up.

Love the new theme! Truly appreciate your help on this, I was getting lost in the forest of code!

Will implement later this afternoon. :-)

Please Log in or Create an account to join the conversation.

  • godzil
  • Visitor
  • Visitor
9 years 5 months ago - 9 years 5 months ago #15 by godzil

JustCarmen wrote: The class to change in justlight/css-1.6.0/style.css is:
.small_inner_block
change overflow-x: hidden to overflow-x: auto

Thanks :)

But i discovered better solution for me: i changed maximum size of elements #index_small_blocks and now it looks better, scroll is no longer needed

And with cutted upper part of home page: solution is disable Image Fancybar if there is no image selected to display :-)
Last edit: 9 years 5 months ago by godzil.

Please Log in or Create an account to join the conversation.

  • Conjurer
  • Visitor
  • Visitor
9 years 5 months ago - 9 years 5 months ago #16 by Conjurer
Replied by Conjurer on topic JustLight theme for webtrees 1.6.0 released!
That worked great!! Had to also make small adjustment in padding-top on the content div.

What is it that would allow us to change the URL for the "Home" link. I would like to change it to go up one level to my main site home page>




In the shot above the general tab of the family tree it is building the URL, but I would prefer to have them go to " plsnt.siskiyouservices.com/corgis/index.html " instead. I don't see anyway to change it to an alternate path. Is this where the "Home page" link is pulled from and where would one go to change it?

Here is a shot of the Home page menu link I mean:




Thanks!
Attachments:
Last edit: 9 years 5 months ago by Conjurer.

Please Log in or Create an account to join the conversation.

  • JustCarmen
  • Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
9 years 5 months ago #17 by JustCarmen
Replied by JustCarmen on topic JustLight theme for webtrees 1.6.0 released!

What is it that would allow us to change the URL for the "Home" link. I would like to change it to go up one level to my main site home page


As far as I know there is no option in the admin menu to get this done. I recall this was possible back in the PGV-times, but it is removed since.

So your only option is hacking some code. But you are lucky because this could be done quite easily from the theme.

In justlight/theme-1.6.0/functions.php:

Change the last line just before the last "}" into this:
Code:
return JL_NavMenu::getHomeMenu() . $output;

In justlight/theme-1.6.0/navmenu.php:

Add this right above "public static function getGedcomMenu(){"
Code:
public static function getHomeMenu(){ return '<li id="menu-home-nav"><a href="http://plsnt.siskiyouservices.com/corgis/index.html">Home</a></li>'; }


Carmen
Designer of the JustLight theme (comes with a light and dark color palette), Fancy Imagebar, Fancy Research Links and Fancy Treeview for webtrees 2


Check my website at www.justcarmen.nl

Please Log in or Create an account to join the conversation.

  • Conjurer
  • Visitor
  • Visitor
9 years 5 months ago #18 by Conjurer
Replied by Conjurer on topic JustLight theme for webtrees 1.6.0 released!
You totally rock! Thanks so much!

Please Log in or Create an account to join the conversation.

  • Conjurer
  • Visitor
  • Visitor
9 years 5 months ago #19 by Conjurer
Replied by Conjurer on topic JustLight theme for webtrees 1.6.0 released!
To change the background images like the silhouettes and family where would I put the replacement images? I tried replacing "family.png" with a custom image, but it doesn't seem to pull it in. I seem not to have the right directory folder. Can you tell me where the icons are coming from?


Attachments:

Please Log in or Create an account to join the conversation.

  • JustCarmen
  • Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
9 years 5 months ago #20 by JustCarmen
Replied by JustCarmen on topic JustLight theme for webtrees 1.6.0 released!
These are not images but icon fonts . For this theme I use the Bootstrap framework which uses glyphicons to display responsive icons.

These particular silhouette icons I made myself with icomoon , an online application to turn images into icon fonts.

You can do something similar but you can also go the easy way:

Copy this part from the webtrees stylesheet:
Code:
/* Silhouettes on charts */ .icon-silhouette-F { width: 37px; height: 50px; background-image: url(images/silhouette_female_small.png); } .icon-silhouette-M { width: 37px; height: 50px; background-image: url(images/silhouette_male_small.png); } .icon-silhouette-U { width: 37px; height: 50px; background-image: url(images/silhouette_unknown_small.png); } /* Silhouettes on individual pages */ #indi_mainimage .icon-silhouette-F { width: 99px; height: 106px; background-image: url(images/silhouette_female.png); } #indi_mainimage .icon-silhouette-M { width: 99px; height: 99px; background-image: url(images/silhouette_male.png); } #indi_mainimage .icon-silhouette-U { width: 100px; height: 97px; background-image: url(images/silhouette_unknown.png); }

Go to the justlight stylesheet and search for this part:
Code:
.icon-silhouette-F:before { content: "\e601"; font-family: "icomoon"; font-size: 48px; } .icon-silhouette-M:before { content: "\e602"; font-family: "icomoon"; font-size: 48px; } .icon-silhouette-U:before { content: "\e603"; font-family: "icomoon"; font-size: 36px; } #indi_mainimage .icon-silhouette-F:before, #indi_mainimage .icon-silhouette-M:before, #indi_mainimage .icon-silhouette-U:before { font-size: 120px; }

Overwrite it with the copied code from the webtrees theme.

Place your images in the folder justlight/css-1.6.0/images

If your images do not have the same size as the webtrees silhouettes you also need to adjust the size in the css code.


Carmen
Designer of the JustLight theme (comes with a light and dark color palette), Fancy Imagebar, Fancy Research Links and Fancy Treeview for webtrees 2


Check my website at www.justcarmen.nl

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum
}