Web based family history software

Question CSS Width for .header-logo

  • KosherJava
  • Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 2 months ago #1 by KosherJava
CSS Width for .header-logo was created by KosherJava
The following is the CSS for the header logo for webtrees/css-1.6.2/style.css. The size of a background image is ignored and the width of the div should probably be removed. Even as it is one can use a wider image with the with the width being ignored (I replace the image with my own of the same height but greater width). There is a background-size in CSS3 that can constrain the image, but we probably do not want to shrink or resize this image in any case. Is there a reason to constrain the width of the div?
Code:
.header-logo { float: left; width: 242px; height: 50px; }

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

More
9 years 2 months ago #2 by fisharebest
Replied by fisharebest on topic CSS Width for .header-logo
If you do not specify the size, then the browser has to load/process the image to find the dimensions. This delays rendering the page.

Also, I am moving away from "background" images, as these do not work with assistive-technology (such as high-contrast views), nor do they print by default.

Assuming you are looking at the new theme code and found the sample "custom theme", you should be able to create a custom theme that does this very easily.

Something like this, perhaps?
Code:
class KosherJavaTheme extends WT\Theme\[color=green][b]webtrees[/b][/color] { public function themeId() { return 'kosher_java'; } public function themeName() { return 'KosherJava theme'; } public function hookHeaderExtraContent() { return '<style type="text/css"> .header-logo { ... } .header-logo:after { ... }</style>'; } }

Caution: the API is not finalised yet, and may change slightly before the 1.7.0 release

Greg Roach - greg@subaqua.co.uk - @fisharebest@phpc.social - fisharebest.webtrees.net

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

  • KosherJava
  • Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 2 months ago #3 by KosherJava
Replied by KosherJava on topic CSS Width for .header-logo
Given the simplicity of it, it is likely the way I will go. BTW, is there a plan to change the look and feel of some of the bundled themes such as webtrees for the 1.7 release?

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

More
9 years 2 months ago #4 by fisharebest
Replied by fisharebest on topic CSS Width for .header-logo

BTW, is there a plan to change the look and feel of some of the bundled themes such as webtrees for the 1.7 release?


If I get time ;-)

Rob has done a great job rewriting the theme CSS to be more consistent - which will make future maintenance and development much easier.

Greg Roach - greg@subaqua.co.uk - @fisharebest@phpc.social - fisharebest.webtrees.net

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

Powered by Kunena Forum
}