Change Styling

Hi,

The example and the screenshots have been tweaked using CSS to get things to fit in nicely with my site. This plugin does it’s best to use the styles that you currently have on your site.

That being said you can adjust everything visually using CSS. I can’t provide CSS for everything you’ve asked, but if you check through these support forums most of what you’ve asked has been answered before with CSS code.

You can adjust the size of the images using the provided filter. You may want to check the Other Notes section of the plugin repo for the hooks+filters and some usage examples.

Thanks,
Evan

Closing this thread due to inactivity.

Evan

Hi, I’m new in WordPress and I wanted to use your plugin for my website but I found that the text in the “READ MORE” buttons turns black so I cannot read them anymore. I cannot find a setting to change the color in the plugin? After some investigation I found that it is possible to change the setting via a child theme but I can’t get it to work. This is the link to the page: https://chocolateriegeleijnse.nl/wp/chocoweetjes/

I noticed that when I change the colors in the file: wp-content/plugins/timeline-express/css/timeline-express.min.css

.cd-read-more{float:left;color:#fff}.cd-read-more{float:right;color:#fff;padding-right:0}

from #333 to #fff the problem is solved.

How can I change this?

I hope that you cab help me to change this setting.
Thanks in advance.

Bram.

Hi,

You can try the following:

#cd-timeline .cd-read-more {
  color: #fff !important;
}

You’ll need to add that to your active theme or child theme, not to the plugin file. If you need additional help please consider the pro version for continued support.

Thanks,
Evan

Hi, wouw thank you for the quick responce! I copied your lines to the style.css in the chilt theme but unfortunattelly it didn’t work. This is the compleet line in the file: wp-content/plugins/timeline-express/css/timeline-express.min.cs.

.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:right}.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:20!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}

Hi Evan, how much does the pro version cost?