17 replies · opened Nov 25, 2020
hello semicolon team
I do habe a problem that drives me crazy.
on my template there is randomly appearing a white bar on to of the page and I cannot come around where it results from.
I made a very short screen recording to show you and explain.
https://www.dropbox.com/s/pm1nzx3m7j7ec9v/WhiteBarProblem.mov?dl=0
I would be really grateful if you could help to come around this issue.
thy and rgds
GUIDO
Hello,
Apologies for the Inconvenience caused due to this!
Thank You so much for the very detailed explanation. We have detected an issue with the includeOffset Function when using Transparent Headers and Sliders together. We are working on this and will provide you with a solution within 1 business day. Thanks for your Patience and Apologies for the Delay, as we would have to check some other variations of this function before changing it completely.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
you are unbelieveable !!!
would be great to know how you found out.
but do not hustle, no need to fix it immediately.
the site is under contruction and as mentioned there is so far only the header and footer coming dynamically from TYPO3 CMS
the whole content has to be coded into typo3 so that the customer can edit it from CMS backend
what I want to say is, that I will have at least 2-3 weeks to get it roughly done, with all the subpages
so if you have it in mind/on the list, there is no need to hustle and provide a solution in 1 day
take your time, if I could have a fix before going live, that would be awesome.
rgds
guido
Hello,
Thanks for your Patience! We are actively working on it and we will have a solution within the next 12-24 hours as we still have some tests to run on this. We would rather fix this asap, so one less thing for you to worry! Then we can release a stable update for everyone.
Meanwhile, do let us know if you are facing any further issues with Canvas.
;-) understand, I just did not want to rush you and make the impression of beeing impatient
you guys are always that damn quick, r.e.s.p.e.c.t.
am wondering if the problem is related to the page loader as well?
I have the problem of jumping page title parallax images.
your suggestion is either lazyload or pageloader, I went with pageloader as on lazyload the image does not jump in the pagetitle but the content still does.
pageloader has a fadeIn and a fadeOut data option
the fadeIn workz on all pages, but the fadeOut does not work when jumping back to the home page coming from no matter page.
so
anypage -> home: fadeOut NO
anypage -> anypage (but home) fadeOut YES
home -> anypage fadeOut YES
no matter if I use the header Logo link, the footer Logo link or manual reload
when switching to homepage, there is no fadeOut
hope you understand and can reproduce it / see it on my dev page
rgds
guido
P.S.
sorry for the page beeing slow, it is just a small dev-server but mostly it is slow as I disabled the caching in TYPO3 for development.
tried with caching but that doesn't solve the "no fadeOut when switching TO homepage"
Hello,
Thank You so much for being understanding and allowing us to take our time in fixing this issue. This is very rare and very appreciated! :) Our Team Thanks You!
Meanwhile, we are still working on this as there are many variations on using the Transparent Headers and Sliders together, so we are trying to come up with a better solution! Please allow us some more time!
When using the Page Loading Transitions, the Fade Out is active only for the Menu Links. Not for the Logo Links. If you would like to enable this, please find the following line of code in the js/plugins.min.js File:
[ch_pre]linkElement:'body:not(.device-md):not(.device-sm):not(.device-xs) .primary-menu:not(.on-click) .menu-link:not([target="_blank"]):not([href*="#"]):not([data-lightbox]):not([href^="mailto"]):not([href^="tel"]):not([href^="sms"]):not([href^="call"])',[/ch_pre]
and replace it with:
[ch_pre]linkElement:'body:not(.device-md):not(.device-sm):not(.device-xs) a:not([target="_blank"]):not([href*="#"]):not([data-lightbox]):not([href^="mailto"]):not([href^="tel"]):not([href^="sms"]):not([href^="call"])',[/ch_pre]
The Fadeout should work fine now.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
hey folks
first ... the js/plugins.min.js fix works perfect, smooth page transitions faded in an out, thx a lot !!!
regarding the "white-bar-on-top" I told you, take your time, there is really no need to hustle and rush for me.
I am happy that you already found the problem
and the experience I had in the past with you is that once you have narrowed down the cause you will for sure find a fix ;-)
so it will be ready when it's ready - period.
rgds
GUIDO
Hello,
Thanks for your Continued Patience!
We have been testing this and initial tests appear to be working fine with the Default Codes. We have tried comparing your codes with ours and there are some custom CSS codes used on your Website, which can be used in a different way as Canvas 6 has a different approach for Sticky Headers.
Consider following these steps:
In your HTML Codes, find the data-sticky-shrink="false" and replace it with data-sticky-shrink-offset="0".
In the css/custom.css File, you are using:
[ch_pre]#header:not(.sticky-header) #logo img {
height: 85px !important;
}
#header.sticky-header #logo img {
height: 65px !important;
margin-top: -25px;
}
#header.sticky-header #header-wrap {
height: 100px !important;
}[/ch_pre]
Instead, consider using this:
[ch_pre]/* Custom Header Size
—————————————————————–*/
.header-size-custom #logo img {
height: 85px;
}
@media (min-width: 992px) {
.header-size-custom .header-wrap-clone {
height: calc( 125px + 1px );
}
#header.header-size-custom + .include-header {
margin-top: calc( -125px – 2px );
}
.header-size-custom.sticky-header-shrink #header-wrap #logo img {
height: 65px;
}}[/ch_pre]
Please check this Documentation to determine how to use Header Heights properly: http://docs.semicolonweb.com/docs/header/header-heights/ .
Additionally, adding an additional margin to the #logo is not required as the Elements in the Header will always be placed centrally as we are using CSS Flex in Canvas 6 for the Headers.
Consider trying the above codes and let us know if you are facing further issues with the White Bar on the Top. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
hello semicolon team, thx for your support.
this is the first time, that I would like to change the Canvas version in a project.
therfore - as I am a very conservative and safety-orientade type - I do have questions please.
of cause I do make always complete fullbackups before making such changes - with greatings from 'murphy and his law' ;-)
besides your input regarding the changes I should make in custom.css (which is not part of the package anyway) and changes I made e.g. to the plugin.js as you advised before - these changes I do have documented and of cause will have to adapt them manually.
can I simply exchange all files I used from 6.1.3 to the 6.1.4 versions without problems?
in the changelog on themeforest are mentioned minor fixes, will they have impact on the writer template I have used from 6.1.3?
I ask because I already made the templtes up into bits an pieces over several files in order to integrating them into the TYPO3 CMS.
may approach would be to leave the html.code I used as it is and overwrite all .css .js, the adapt changes to .js files I made manually.
no changes to the .css files, as I did not change anything an wrote all changes into custom.css
amything else I should take care of?
rgds and thx
guido
Hello,
Simply Update the Files according to the File/Code Changes mentioned in the Changelog: http://docs.semicolonweb.com/docs/changelog/version-6-1-4/ . You do not need to change any other Files. If you are not using the Components/Files mentioned in the Changelog, then you simply choose to skip this update.
This particular Update does not seem to impact the Writer Template in any way, so it would be recommended to skip this update altogether.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
awesome, cool, did not know about this changelog ind documentation
that is exactly what I was looking for
now the upgrade process should be clear for me
tested the whitebar fix as you mentioned and seems to work in safari
please leave the topic open
will test this on more browsers and OS/machines
when all workz fine I will let you know to close the thread
rgds
guido
all tested and workz perfect
thx a lot for all your effort and support.
sending virtualy :beer: / :wine:
thread can be closed
rgds
guido
cool that the thread ist still open
I unfortunately found a little glitch compared to the evrsion before I made the css adjustments for the header
now the header and sticky header on normal pages are both the same height
before the changes the header sticky height got smaller as the logo does
you can see that it does not change on e.g.
http://gjd.web.my1.cc/news
before the changes in css the stick nav went from 120px height to 100px height
so not only the logo but also the transparent background or in other words the whole sticky-header wenst smaller to 100px
I checked the docu on header heights and header classes but did not find a solution :-(
so what I need is for
@media (min-width: 992px) -> sticky header height down from 120 to 100px
rgds
guido
dear semicolon team
tonight (it's nearly 5:30am here in germany) I finally found time to dig deeper into this header sticky issue, as the last week I was busy finishing the integration of Canvas into TYPO3.
I have to deeply apologize again and hope you didn't put too much effort in my request, I am very sorry.
finally I got around how you implemented the 'Header Heights' as described in the documentation.
all I did so far fiddeling around was a big mistake and mess on my site and far too complicated.
your implementation is awesome, and finally I understand how '.header-size-custom' commbined with the JS dada-* attributes workz. very neat and sexy implementation !!!
I tested it on static html and it workz like a charm.
what I wanted to achieve is a header that will smoothly transform it's height when scrolling for the header height as well as the logo image. and that I finally understood now.
before going live I will implement that in TYPO3, a.t.m. is still the messy css and html code online, just in case you look at it.
and as we use lazy page loading anyway, the perfect solution.
so no more effort needed on this please, sorry again.
there is two things left.
one is the language switch.
as we are planning to go online first with default language german - the translations for the content in english will not be finished on time - that is a task for next year. and as I understood the smooth movement of the menu depends on the padding of the '.menu-container > .menu-item > .menu-link' I will find a solution to integrate the language switch into the header nav and make it behave same as the menu links and move along with them nicely. so that one is postponed, and maybe we will simply position it elsewhere. we will see.
the second thing is sth. I have still on my list and deals with transparencies.
actually I use to different approches, one for the home-page and one for all other pages.
on homepage the header is initially fully transparent and the when scrolling becomes sticky and semi-trasparent.
on the other pages the header should be from the beginning semi-transparent and when scrolling remain semi transparent, only become smaller in height.
my problem is, that a.t.m. I use this code:
<header id="header" class="transparent-header semi-transparent dark header-size-custom" data-sticky-shrink-offset="0" data-sticky-class="semi-transparent">
the combined classes transparent-header semi-transparent are what I want regarding the overall transparency and color.
but then when scrolling and the sticky header comes into action it is getting slightly darker and less transparent.
so I tried different variations and assigned
transparent-header semi-transparent as well for the :not(.sticky-header) as the .sticky-header
than the other way round just semi-transparent for both ..sticky-header and not(.sticky-header)
neither worked :-(
what I want please is the the transparency/opacity color and factor for both the same
it should look like now where transparent-header semi-transparent are assigned together
I include a screenshots for better understanding.
you can check it out live on this site:
http://gjd.web.my1.cc/news
when scrolling it gets darker and less transparent
would be really great if you could help me out with that.
thx and rgds
guido
success ... I have implemented - as described in the previous post - the ‘Header Heights’ with #header.header-size-custom and now it workz perfect. we went for position:absolute on the langswitch, abd that workz perfect as well. sorry once again for all the trouble.
remains please the question regarding the different semi transparencies (see screenshot of previous post).
rgds,
guido
Hello,
Thank You so so much for your patience on this and really glad that you like this functionality! We wanted to introduce an easier way to manage Headers and create Custom Headers without too many additional codes.
Please let us know if you are facing any issues with this and we will definitely fix it for you.
Regarding the Semi-Transparent Headers, there is a line of CSS Codes in the demos/writer/writer.css File which changes to the Semi-Transparent Header little bit darker when the Header is sticky:
[ch_pre]#header.sticky-header.semi-transparent #header-wrap {
background-color: rgba(30, 35, 42, 0.85) !important;
border-bottom: 1px solid #444 !important;
}[/ch_pre]
You can choose to delete or comment out this line and this would disable any changes for the Semi-Transparent Headers when sticky is active.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
dunno why I didn't find that code, I was looking in the browser inspector up and down to find it, now it looks as desired.
thy & rgds
guido
Hello,
The Background Colors are applied to the #header-wrap DIV. Consider checking this on the Browser's Inspect Element and you should be able to see this now.
Glad that the issue was resolved.
Please do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard