gretche

Thank you – great suggestion.
I’ve created a new topic here:
https://www.ads-software.com/support/topic/how-replay-an-animated-gif-header-image-on-refresh/

I didn’t know how to ‘move’ this topic … so I thought of contacting a moderator to ask … then I saw you WERE a moderator … so created a new topic. If it was wrong to do so, please let me know.
Once again, thanks for your suggestion – much appreciate.

Great suggestions.

I hadn’t considered an animated gif, because it’s a high-(ish) res picture and I though would have too many colors, but I’ve just tried it and it works fine.

A background image is also a good and simple solution just with some added css.

We will put the two methods side by side and select.
The background method offers greater clarity of image.
The .gif offers tweening between images.

Thanks for your help.

Hi,
On another issue – I need to fade slowly between slides. I changed the css transition time and to 5s (for experimentation) and see the slides fade from ‘slide to white to 2nd slide’ i.e not fading directly between slides.
Is this as intended?

Also – I notice you have set the status to ‘resolved’ but your reply reads as if you are in the process of developing a solution. Is this right?

Thanks

I went through testing all the plugins … and it was the last one (because it starts with a ‘Y’ – Yoast SEO – that was the problem.
I updated it, and everything works OK again now.

Issue Solved

I installed Health Check plugin and enables ‘trouble shooting’ mode, which switched off all plugins.
I then ‘enabled’ just Classic Editor – and can now see/change html ;)))

The problem is therefore no longer urgent – as I can update the site.
But I still need to know what caused it.

And … surely the ‘WP Downgrade’ plugin needs admin/updating/checking each time there is a new WP release – as that’s the time it will be needed most?

Just noticed that also can’t ‘Paste’ (with Cntl+c)

Also: Now looking at updating from current 5.3 to 6.4.
On the ‘Themes.php’ page – it shows 6.4, and on hover shows ‘Live Preview’.
I try this and it basically looks OK, but with a few display issues.

Then I notice in its ‘additional CSS’ it has:
——————————–
/*
You can add your own CSS here.

Click the help icon above to learn more.
*/
/* Responsive menu additions*/
#responsive-menu-button {
border-radius: 5px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}
#responsive-menu-container {
opacity: 0.98;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}
.slide-left {
height: 80%;
border-radius: 0 25px 25px 0;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7)
opacity: 0.5;
}
.responsive-menu-item {
border-bottom: 1px solid #111;

}
/* end Responsive menu */
/* Home page AppleLikeDockMenu */
#dock-container {
position: fixed;
bottom: 0;
text-align: center;
right: 10%;
left: 10%;
width: 80%;
background:red; /* temp */

background: rgba(0,255,255,0.2);
border-radius: 10px 10px 0 0;
}
#dock-container li {
list-style-type: none;
display: inline-block;
position: relative;
margin:0;
}

#dock-container li img {
width: 100px; /* was64px; */
height: 64px;
-webkit-box-reflect: below 0 /* was 2px */
-webkit-gradient(linear, left top, left bottom, from(transparent),
color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
-webkit-transition: all 0.8s;
transition: all 0.8s;
-webkit-transform-origin: 50% 100%; position:relative;
}

#dock-container li:hover img {
-webkit-transform: scale(2);
margin: 0 2em; margin:0;
z-index:9;
border-radius: 10px 10px 0 0;
}
#dock-container li:hover + li img,
#dock-container li.prev img {
-webkit-transform: scale(1.5);
margin: 0 1.5em; margin:0;
}
#dock-container li.next img { /* doesnt work on prev */
-webkit-transform: scale(1.5);
margin: 0 1.5em; margin:0;
}
#dock-container li span {
display: none;
position: absolute;
bottom: 140px;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.75);
padding: 4px 0;
border-radius: 12px;
}
#dock-container li:hover span {
display: block;
color: #fff;
}

/* End AppleLikeDocMenu */
—————————————

Which is slightly? different from the Additional CSS in my 5.3 version:
/*
You can add your own CSS here.
*/

/* for the Title */
.logo h1 {
font-style: italic; text-shadow: #ffffff 2px 0px 0px, #ffffff 1.75517px 0.958851px 0px, #ffffff 1.0806px 1.68294px 0px, #ffffff 0.141474px 1.99499px 0px, #ffffff -0.832294px 1.81859px 0px, #ffffff -1.60229px 1.19694px 0px, #ffffff -1.97998px 0.28224px 0px, #ffffff -1.87291px -0.701566px 0px, #ffffff -1.30729px -1.5136px 0px, #ffffff -0.421592px -1.95506px 0px, #ffffff 0.567324px -1.91785px 0px, #ffffff 1.41734px -1.41108px 0px, #ffffff 1.92034px -0.558831px 0px, 0px 0px 6px blue !important;
}
.nav-head { background-color: #336699;}
h5 {font-weight:bold;}
h2 {
font-size: 1em;
line-height: 1.5em;
font-weight:bold;
}

#responsive-menu-button {
border-radius: 4px;
background-color: rgba(0,0,0,.6)
!important;
box-shadow: 5px 10px 5px
rgba(0,0,0,.4);
}

#responsive-menu-container {
box-shadow: 5px 10px 10px
rgba(0,0,0,.4);
border-radius: 0 0 16px 0 ;
height:80%;
}

/* override basic version of responsive menu */
.menu-item { padding:0 6px !important;}
.menu-item:hover {background-color:#1a57ba !important;}
#responsive-menu li {margin-left:-20px !important; list-style:none !important; padding-left:0 !important;}
/* –end of overrides — */
.coloured { color:#042860;}
.bold { font-weight:bold;}

/* === to display AMBADGE with text === */
/* <!–
.logo {background-image: url(“https://www.v12vanquish.com/wordpress/wp-content/uploads/2017/06/AmLogoShad.png&#8221;); background-repeat: no-repeat;
background-position: left;
background-size: 160px 50px;
}
–> */
/* END */

@media screen and (max-width: 800px) {
.logo {
font-size:8pt;
}
.logo {background-size: 25%; background-position: top left;}
}

/* === for the Apple-like Dock effect ===*/
#dock-container {
position: relative; /*fixed;*/
bottom: 0;
text-align: center;
right: 0%;
left: 0%;
width: 100%;

background: rgba(0,255,255,0.2);
border-radius: 10px 10px 0 0;
}
#dock-container li {
list-style-type: none;
display: inline-block;
position: relative;
margin:0; /* temp */
}

#dock-container li img {
width: 100px; /* was64px; */
height: 64px;
-webkit-box-reflect: below 0 /* was 2px */
-webkit-gradient(linear, left top, left bottom, from(transparent),
color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
-webkit-transition: all 0.8s;
transition: all 0.8s;
-webkit-transform-origin: 50% 100%; position:relative;
}

#dock-container li:hover img {
-webkit-transform: scale(2);
margin: 0 2em; margin:0; z-index:9; border-radius: 6px 6px 0 0;
}
#dock-container li:hover + li img,
#dock-container li.prev img {
-webkit-transform: scale(1.4); z-index:8; border-radius: 6px 6px 0 0;
margin: 0 1.5em; margin:0;
}
#li2:hover ~ #li1 img
{
-webkit-transform: scale(1.4); z-index:8; border-radius: 6px 6px 0 0;
margin: 0 1.5em; margin:0;
}

#dock-container li span {
display: none;
position: absolute;
bottom: 140px;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.75);
padding: 4px 0;
border-radius: 12px;
}
#dock-container li:hover span {
display: block;
color: #fff;
}
/* END */
————————

Question – how is this CSS generated? Why is it different to the original?
How should I proceed?
AND Thanks for a GREAT theme !

Thanks @almcr – I have now got floated images working – thanks to your clear description.
But still need to know how to best <clear:right> before/at the next block.

And still don’t understand why am not able to ‘paste’ into a ‘classic’ block.

Still looking for the best solution, And Gutenberg editor doesn’t help!!

Thanks, I didn’t realise that.

Thanks @joy,

But tried your code and still not working. S I tried the following:
group img:after { content: “abc”; display: table; clear: both; }

And abc isn’t displayed.
I’ve updated chrome (just in case).
But still doesn’t work.
I’ve viewed he html of the page and the style IS there.

What could be wrong?

I have same/similar problem. I’m running 5.0.2 and trying to edit content on a page. I switched on a ‘classic’ para to show html – and now can’t switch the para back to show the content.

Just tried it again on a normal para – and I CAN switch from Edit Html to edit visually.
Tried it on a classic para – and it worked as above.

Don’t know why one classic para worked OK and another not.

I’m trying to create a page of para’s. Each with an image floated right, and clear:both ready for the next para.

What’s the best way in v5 of achieving this. I’m a developer and can code html, but the users (who will add/maintain content) are not.

• This reply was modified 6 years, 3 months ago by gretche. Reason: additional info

Thanks @baljitdhanjal – I see the Date field, now that you’ve pointed it out. I didn’t notice it before, and I guess I’m not the first not to notice it (but then I would think this wouldn’t I).

I’ve got the s’ware working fine now, and like it. Well done & thanks.

However, IMHO your instructions for 1st use could do with expandtion, & I notice you have a video, but this is tucked away in the ‘pro’ section.

Happened to notice that if I do a ‘Quick Edit’ on each Story, there is Date – which seems to be the date used on the Timeline.
Didn’t see this field on a (full?) ‘Edit’!

Thanks @darkglass, much as I’m new to WordPress, I’ve never experienced fiverr at all!
And selected this app as it has great reviews for capabilities AND support.

I’ve now changed the shortcut on the paage from:
[cool-timeline layout=”default” animation=”FadeInOut” date-format=”F j” icons=”YES” show-posts=”10″]
{which is the example of their ‘Description’ page.)
to
[cool-timeline]
and the 3 ‘Stories’ now appear on the ONE page.

The only issue I am left with is how to set a (timeline) Date for each story.

I’ll wait for a solution for this, meantime I’ll get on with other development issues/opportunities.