One column announcement

(@eherman24)

Hi nmr61,

Do you have a link to your site. It sounds like some sort of styling conflict, or something similar.

Thanks,
Evan

mariakm

(@mariakm)

Greetings Evan,

Thank you for the amazing plugin. I’m facing the same issue that nmr61 face. and here is the link : http://mostaqbli.org/%D8%AA%D8%A7%D8%B1%D9%8A%D8%AE-%D9%85%D8%B3%D8%AA%D9%82%D8%A8%D9%84%D9%8A-2

Highly appreciate your support!
Maria 🙂

Plugin Author

(@eherman24)

Hey Maria,

This is a known issue with sites running RTL text. I’m not entirely sure why it would be dong that, but it is something that I am actively working on getting resolved.

Thanks!
Evan

mariakm

(@mariakm)

Thank you for your quick answer!

you are right, I added the RTL functionality to the theme.

would you please update me once this resolve? and if there is anything I can do with you, feel free to tell.

Thank you!
Maria

(@nice111)

i just looked a the URL given by Marikm

try this both with problem
look for this in your express timeline css file

.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}

change it to

.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: left;
}

its seams when applying RTL the word “left” is being changed to “right” so you need to put it back

i would also guess overwriting the css file with original timeline css file would be another way to fix it

Shame i cant fix my own problem with this plugin so easy

(@nice111)

i just rechecked my own solution of the RTL problem
it seams the code is orginally set to “right” meaning there is no issue with the plugin code so it has to be problem with some themes that have had RTL applied
however if those users are wanting to keep there themes and the them dev is not solving it then i would suggest Evan keeps a copy of this file and send it to users who have the problem with instructions on how to overwrite the timeline express file

the file needed to be overwritten is the one called

timeline-express/css/timline-express/timeline-express.min.css

this is the code which i have modified to work for these problem RTL sites
Evan this might be useful to compile into a file and pass to these people as a useful workaround

/* Timeline Express Minified Styles 1.1.6.6 */
/*	By Evan Herman (http://www.evan-herman.com */
/* -------------------------------------------------- */
.cd-container{width:100%;max-width:822px;margin:0 auto}.cd-container::after{content:'';display:table;clear:both}.cd-timeline-announcement-image{box-shadow:none!important;width:100%;display:block;margin:1em auto}#cd-timeline{position:relative;padding:2em 0;margin-top:2em;margin-bottom:3em;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}#cd-timeline::before{content:'';position:absolute;top:0;left:18px;height:100%;width:4px;background:#d7e4ed}.announcement-banner-image{width:100%}.timeline-express-single-page-announcement-date{display:block;margin-bottom:1em}@media only screen and (min-width:822px){#cd-timeline{margin-top:3em;margin-bottom:5.5em}#cd-timeline::before{left:50%;margin-left:-2px}}.cd-timeline-block{margin:25px 0}.cd-timeline-block:after{content:"";display:table;clear:both}.cd-timeline-block:first-child{margin-top:0}.cd-timeline-block:last-child{margin-bottom:0}@media only screen and (min-width:822px){.cd-timeline-block{width:100%;margin:-3.5em 0}.cd-timeline-block:first-child{margin-top:0}.cd-timeline-block:last-child{margin-bottom:0}}.cd-timeline-img{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 4px white,inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05)}.cd-timeline-img img{display:block;width:24px;height:24px;position:relative;left:50%;top:50%;margin-left:-12px;margin-top:-12px}.cd-timeline-img.cd-picture{background:#75ce66}.cd-timeline-img.cd-movie{background:#c03b44}.cd-timeline-img.cd-location{background:#f0ca45}@media only screen and (min-width:822px){.cd-timeline-img{width:60px;height:60px;left:50%;margin-left:-30px;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden}.cssanimations .cd-timeline-img.is-hidden{visibility:hidden}.cssanimations .cd-timeline-img.bounce-in{visibility:visible;-webkit-animation:cd-bounce-1 .6s;-moz-animation:cd-bounce-1 .6s;animation:cd-bounce-1 .6s}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(0.5)}60%{opacity:1;-webkit-transform:scale(1.2)}100%{-webkit-transform:scale(1)}}@-moz-keyframes cd-bounce-1{0%{opacity:0;-moz-transform:scale(0.5)}60%{opacity:1;-moz-transform:scale(1.2)}100%{-moz-transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}60%{opacity:1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.cd-timeline-content{position:relative;margin-left:60px;background:#fff;border-radius:.25em;padding:1em;box-shadow:0 3px 0 #B9C5CD}.cd-timeline-content:after{content:"";display:table;clear:both}.cd-timeline-content .cd-date,.cd-timeline-content .cd-read-more{display:inline-block}.cd-timeline-content .cd-read-more{padding:.8em 1em;position:relative;z-index:9999}.cd-timeline-content .cd-date{float:left;padding:.8em 0;opacity:.7;font-size:12px}.cd-timeline-title-container{display:inline-block;width:100%;float:left;margin:.55em 0}.cd-timeline-title-container h2{float:left}.cd-timeline-content .timeline-date{opacity:.7;font-size:.857143rem;float:right;margin-top:.5em}.cd-timeline-content::before{content:'';position:absolute;top:16px;right:100%;height:0;width:0;border:7px solid transparent;border-right:7px solid #fff}@media only screen and (min-width:768px){.cd-timeline-content h2{margin-top:0;margin-bottom:0}.cd-timeline-content .the-excerpt{display:block;float:left;width:100%;margin:1em 0;position:relative;z-index:999}.cd-timeline-content .cd-date,.cd-timeline-content .cd-read-more{font-size:14px;font-size:.875rem;position:relative;z-index:999}}@media only screen and (min-width:822px){.cd-timeline-content{margin-left:0;padding:1.6em;width:39%;background:#EFEFEF}.cd-timeline-content::before{top:24px;left:100%;border-color:transparent transparent transparent #EFEFEF}.cd-timeline-content .cd-read-more{float:left;color:#333}.cd-timeline-content .cd-date{position:absolute;width:100%;left:125%;top:15px}.cd-timeline-block:nth-child(even) .cd-timeline-content{float:left}.cd-timeline-block:nth-child(even) .cd-timeline-content::before{top:24px;left:auto;right:100%;border-color:transparent #EFEFEF transparent transparent}.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more{float:right;color:#333;padding-right:0}.cd-timeline-block:nth-child(odd) .cd-timeline-content .cd-read-more{position:relative;z-index:99999;padding-left:0}.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date{left:auto;right:125%;text-align:right}.cssanimations .cd-timeline-content.is-hidden{visibility:hidden}.cssanimations .cd-timeline-content.bounce-in{visibility:visible;-webkit-animation:cd-bounce-2 .6s;-moz-animation:cd-bounce-2 .6s;animation:cd-bounce-2 .6s}}@media only screen and (min-width:822px){.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in{-webkit-animation:cd-bounce-2-inverse .6s;-moz-animation:cd-bounce-2-inverse .6s;animation:cd-bounce-2-inverse .6s}}@-webkit-keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes cd-bounce-2{0%{opacity:0;-moz-transform:translateX(-100px)}60%{opacity:1;-moz-transform:translateX(20px)}100%{-moz-transform:translateX(0)}}@keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px);-moz-transform:translateX(-100px);-ms-transform:translateX(-100px);-o-transform:translateX(-100px);transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);-o-transform:translateX(20px);transform:translateX(20px)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes cd-bounce-2-inverse{0%{opacity:0;-moz-transform:translateX(100px)}60%{opacity:1;-moz-transform:translateX(-20px)}100%{-moz-transform:translateX(0)}}@keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px);-moz-transform:translateX(100px);-ms-transform:translateX(100px);-o-transform:translateX(100px);transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);-o-transform:translateX(-20px);transform:translateX(-20px)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}.more-to-come-container{position:relative;background:#EFEFEF;display:block;width:100%;text-align:center}.more-to-come{margin:10em 0 0;padding:1em 0;font-weight:200;color:rgba(100,100,100,.46)}.page article.page{background:0 0!important;box-shadow:none;border:none;-webkit-box-shadow:none}#cd-timeline span.fa{color:#fff;font-size:28px;display:block;text-align:center;margin-top:17px}.cd-timeline-icon-link{color:#fff!important}@media only screen and (max-width:821px){#cd-timeline span.fa{color:#fff;font-size:18px;display:block;text-align:center;margin-top:12px}.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more,.cd-timeline-block:nth-child(odd) .cd-timeline-content .cd-read-more{padding-left:0!important;position:relative;z-index:99999}}.timeline-width100{width:100%}.timeline-width34{width:34%}.timeline-width30{width:30%}.timeline-date-left{width:100%;float:left!important}.single-post .announcement-banner-image,.single-post .return-to-timeline,.single-post .timeline-express-single-page-announcement-date{display:none}

(@nice111)

i have tried to paste a complete modified file code here for ease of use to RTL user but it wont let me and there is no option here to upload a modified file

ive looked deeper and problem is with there themes not timeline express but there is an easy workaround for those wanting to keep there themes as above

Evan its probably worth changing code in a spare file you have and passing to users with instruction on how to overwrite

the file to change is

timeline-express/css/timeline-express.min.css

obviously if these uses update there plugin at anytime they would also need to overwrite file again

may not be perfect solution but its a good one for those that need RTL

Plugin Author

(@eherman24)

Hey Nice111,

Thank you for posting that information. That should be helpful to certain users who are encountering the issue.

In regards to pasting large bits of code, you can use a service such as Pastebin to paste the file, and then share the link here.

I can take a look and if need be make some updates, and make the necessary changes using the is_rtl() (https://codex.wordpress.org/Function_Reference/is_rtl) conditional check for those users who are on RTL installs.

Evan

(@nice111)

i never even knew the “is-rtl() was available so yes that looks like it could provide a good solution
looks like you now have yourself a little more to add on future update

Plugin Author

(@eherman24)

Hi Nice111,

I am working on a patch to get this rtl issue resolved. Can you paste a copy of the code that you used to clean up the issue? You never posted your code via pastebin.

Thanks,
Evan

Plugin Author

(@eherman24)

Hi Nice111,

The above styles that you have provided do not work for RTL support.

This issue is going to remain open until I, or someone else, can come up with a better solution. For the time being, RTL support will need to be a pro version feature.

Thanks again,
Evan

(@nice111)

Evan the code does work
try yourself on that` sit thats not displaying properly in OP

the actual code i posted only had one word changed from its original code to reveres the display as mentioned in my post about changing for left to right so i know it works although when i pasted entire file code it didnt really display in this forum the way i expected it to

Plugin Author

(@eherman24)

I did attempt to use that code, but I didn’t see any change on my end. I setup a complete test site to work this issue out.

I ended up writing a custom rtl stylesheet that gets included in the premium version, when RTL is detected. There was a lot more that needed to be done for the breakpoints, and for the background of the containers. I spent at least 4 hours re-writing parts of the plugin to support RTL. If/when time permits I will include it in the free version as well.

Thanks,
Evan

(@nice111)

gotta love code writing eh?
always starts easy and turns into nighmare

Plugin Author

(@eherman24)