Customising DW Timeline

Hello Kevin ! 1. To change the page background of the DW timeline, You can add the following code to the Header Code ( Dashboard > Appearance > Customize > Custom Code)

 <style>
body.page {
    background: #...; 
}
</style>

– To change  background for the  quote format, You can add the following code to the “Header Code”

 <style>
blockquote {
   background: #...;
   color: #...;
}
</style> 

– If you want to change the color of your site, You can open the main.css file, then change color of the site here. 2. To change the font family in the site , Please do as the following:
Step 1: Find the font that you want to use at here: http://www.google.com/fonts/
Step 2: click the Quick-use button
see the screenshot:
Step 3: Please go to “@import” tab and copy the links as shown below:
See the screenshot:
Step4: Paste the link copied above into main.css file.
See the screenshot:   Step5:  final step, go to file main.css, and change all the font-family in this file to the font-family that you want to use. 3. Of course ! If you want to replace the site title with a graphic on the home page, You can log in to Dashboard > Appearance > Customize > Site title &  Tagline, then remove the Site Title. – After removing your site title, you need to add your image to the Media Library by go to Media >> Add New – The next thing you need to do is to go to Appearance > Editor, open style.css file then add the following code:

 .banner .page-title {
    background-image: url('URL File')  no-repeat;
    height: ...px;
}

Note: You can copy the URL File in the Media > Image, then change here: URL File
4. To remove the “Diamond shape” behind the the title on the home page, You can add the following code to the “Header Code”

 <style>
.banner hgroup:after {
    background: none;
}
</style>

5. Please tell me more details about the issue or you can send me a screenshot for further checking.

Hi, anyone have any thoughts on the above?

Hi Kevin ! – You can send me your site for further checking and please tell me detail about the positions that you want to change color ( possible a screenshot).
– You can find the main.css file in the folder path “\wp-content\themes\dw-timeline\assets\css”
– If you want to replace the site title with a graphic on the home page, please add the following code to the main.css file:

 .banner .page-title {
    background: url('URL File') no-repeat;
    height: ...px;
    width: ....px;
}

Hope this helps !

Thanks for the reply Dominic.
Thanks re: position of main.css – the compressed nature of it makes it hard to load up and edit in pico! Your instructions worked nicely, I’ve replaced the title with a graphic – thanks!
 
I’ve attached a screen capture as requested. I’ve annotated red numbers on it to talk specifically about the points raised…
 

 
1
How do I clear out the diamond shape behind the Title & Tagline?
2
I’m wanting a blog with a dark background and light text ie: I need to invert the colours in each of the elements marked with “2” on the screen capture. I would also want the same colour scheme to carry through to when reading the post entries themselves too. 
I’m assuming this all needs to be edited in main.css ? If so, would you mind letting me know which tags indicate which elements on the screen? (inserting the your suggested codes with numeric colour values into the header code didn’t change the colour scheme for me)
3
I seem to be having trouble getting carousel bootstrap to work (like in your demo with the graphic of the tree in different seasons). The plugin seems to have installed ok but I’m getting strange output. Could you please let me know step by step how you construct such a scrolling gallery from the Post Editor? Do the pictures need to be of the same dimensions for the carousel to work?
 
Thanks again!
Kevin.

Hi Kevin !
1. If you want to clear out the diamond shape behind the Title & Tagline in the DW Minion, you can log in to Dashboard > Appearance > Customize > Custom Code, add the following code to the Header Code:

<style>
.banner hgroup:after {
    background: none;
}
</style>

2. To change color fo the positions “2” as your screenshot, please add the following code to the Header Code:

<style>
.timeline-pale span {
    background: #....;
    color: #....;
}
body {
    background: #....;
}
.hentry .entry-inner {
     background: #....;
} .dwtl-right .entry-inner:after {
     border-right-color: #...;
}
a {
    color: #...;
}
a:hover, a:focus {
   color: #...;
}
</style> 

3. We use WP Bootstrap Carousel plugin which allows you to display the Gallery Post Format. You should install the WP Bootstrap Carousel plugin before getting started. After installing and activating the plugin successfully, you need to insert the shortcode [carousel] into your post. The WP Bootstrap Carousel plugin will get all images which currently uploaded into your Media. So, make sure that you upload images from your computer into the Media Library so that the Gallery Posts will be displayed properly. Before publishing, navigate to Format pane on right hand side and select Gallery
Hope this helps !

Hi Dominic,
Thank you again for replying.
I’m sorry to say, but I have already unsuccessfully tried much of the above as you have supplied many of those code snippets in preceding replies.
Regarding website appearance – so that it is 100% clear, this is exactly what I have done:

1. In the admin screen, I navigated to Appearance > Customize
2. Then under Custom Code, I have the following in the Header Code textbox saved (please note that I have some variation in the types of colour values entered in an attempt to try to get this to work):
   <style>
   .timeline-pale span {
   background: #000;
   color: #fff;
   }
   body {
   background: #000;
   }
   .hentry .entry-inner {
   background: red;
   } .dwtl-right .entry-inner:after {
   border-right-color: #999;
   }
   a {
   color: #777;
   }
   a:hover, a:focus {
   color: #fff;
   }
   </style>
   <style>
   body.page {
   background: #000000;
   }
   </style>
   <style>
   blockquote {
   background: #333333;
   color: #999999;
   }
   </style>
   <style>
   .banner hgroup:after {
   background: none;
   }
   </style>

I have also tried wrapping the whole thing in a single tag of <style></style> as well. Unfortunately, I do not note any changes in the site’s appearance. It seems unlikely to me but is there some sort of linux file permissions setting that may be the problem here?
Regarding carousel: I have the WP Bootstrap Carousel plugin installed and enabled. I then posted a test gallery as follows:

1. In the admin screen: Posts > Add New
2. Title = Test Gallery
3. I then clicked on the “Add Media” button then clicked on the “Create Gallery” link on the left.
4. I then click on some pictures then the “Create A New Gallery” button then the “Insert Gallery” button.
5. I then in the Visual editor, I typed in [carousel] after the graphic representing the newly inserted gallery.
6. I then set Format = Gallery for the Post on the right
7. When I click the preview button, I unfortunately do not get a carousel but a grid of the images.

Any further thoughts?
Thanks,
Kevin.

Hi Kevin !
Please see the screenshot below for how to select a private answer:

 

Hi Kevin !
I have checked your site, currently  you are using the older version 1.0.1. Please download the latest version 1.0.3. After updating, you can follow the solution that I provided in the answers before.
Hope this helps !

Thanks again Dominic.
A few points:

1. I’m new to wordpress (I’m sure you can tell) – do themes detect if they are out of date? (like plugins) I wouldn’t have known you have a newer version had you not told me.
2. I downloaded 1.0.3 from your site. Please note that it actually reads as 1.0.5 in wordpress itself.
3. After switching to 1.0.5, I note that the previous Custom Header Code was preserved. 1.0.5 unfortunately did not change the appearance of the site as hoped for. I even deleted the existing Custom Header Code and reinserted what I have written in post #6 above – still no effect I’m afraid.
4. I also double checked on the a Test Image Gallery and implemented it as per post #6 – it still isn’t coming up as a carousel.

I’m pretty keen to get this to work but this is turning out to be more difficult than I would have thought it should be 🙁 Any further thoughts? What version Timeline does your demo run on?

Hi Kevin,
Sorry for the long confusing conversation!
There were bugs in the custom code section in previous versions, we have fixed the issue and the latest version of DW Timeline is 1.0.6.
Sorry for this inconvenience, please download and update the theme. Let me know if the issue still insists.  
Regards,

Hi Wilfred, Bingo! Thanks for fixing the issues in versi0n 1.0.6. I’m happily customising away now. Some issues outstanding…

1. I’m still getting that diamond in the background of the title in the home page despite inserting the following Custom Header Code:
   <style>
   .banner hgroup:after {
   background: none;
   }
   </style> Any further suggestions?
2. As per post #6, I created another test gallery. Still no joy in getting that to work. Is this another bit of coding in the background that needs to be sorted?
3. How do I change the colour of the vertical timeline which runs down the home page? 
   How do I change the colour of the arrows which point centrally toward this timeline?
   Would you mind letting me know all the different id’s of the elements that the theme uses? I could then fully work on the theme using the custom header code without further questions.

Thanks, Kevin.

Hello Kevin !  1. Please add the following code to the Header code:

 <style>
.banner hgroup:after {
     background: none !important;
}
</style> 

3. To change the color of the vertical timeline which runs down the home page, you can add the following code to the Header Code: 

 <style>
.timeline:before {
   background: #...;
}
</style>

– To change the colour of the arrows which point centrally toward this timeline, you can add the following code to the Header Code:

 <style>
.dwtl-left .entry-inner:before {
    border-left-color: #...;
}
</style>

– To find all the ID & Class of the elements that the theme use, you can open the main.css file in the folder path “\wp-content\themes\dw-timeline\assets\css”
Hope this helps !

Hi,
 
So, i tried to change the title with a image, but no sucess. I followed the instructions but nothing happened… plz help me!
Here, go my site: http://bibliacolorida.bvfilms.com.br/novo/
The Image URL: http://bibliacolorida.bvfilms.com.br/novo/wp-content/uploads/2014/04/logo-biblia1.jpg
i changed the syle.css and main.css and nothing…

¡hola Tiago,
Try this…

1. Go to your WordPress admin and then Appearances > Customise > Custom Header Code
2. Insert the following into the header code for background image at the top:
   body { 
   background: url(‘http://bibliacolorida.bvfilms.com.br/novo/wp-content/uploads/2014/04/logo-biblia1.jpg‘); background-repeat:no-repeat;
   }

Hope that helps!
If anyone else can help about how to get something like WP Bootstrap Carousel working with this theme, I’m still interested (Jetpack’s carousel doesn’t work either).

Hi Kevin ! Thank for your help. I appreciate it.
@thiago,
You can resolve this issue with solution provided by Kevin.
Regards,