Kevin Tam
asked 6 years ago

Hi,
DW Timeline looks promising. However, I do need to be able to do the following – can that be done (I have no problems tinkering with code if required)?

  1. I’m wanting to have a dark colour scheme, how do I change the various element’s colours? (page background, font colours, quote block background etc.)
  2. Can I specify the different fonts for the different text types (titles, authour/date/category label, post text etc.)?
  3. Is it possible to replace the site’s title with a graphic on the home page?
  4. Can the “Diamond shape” behind the the title on the home page be removed?
  5. The fade applied to the background graphic is nice but is it possible to rotate it 90 degrees? ie: to have the effect running vertically as opposed t horizontally as it does now.

Thanks!
Kevin.

5 Answers
DominicStaff
answered 6 years ago

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.

Kevin Tam
replied 6 years ago

Hi Dominic,

Thanks for the reply!

I went to Dashboard > Appearance > Customize > Custom Code > Header Code and entered the 2 blocks of code as you wrote above (using ellipses as colour values as per your code but also with entering actual colour values eg: #000000)
Unfortunately I didn’t notice any changes to the colour scheme. The code changes do look like they were saved (I checked by exiting and then re-entering website to “refresh” the changes). I even tried “hard reloading” the site with Ctrl-F5 (I’m using Windows 7) to ensure I wasn’t getting any caching issues – still no changes to appearance. Any suggestions?

Unfortunately I can’t see where main.css is either in Appearance > Editor or anywhere within the subdirectories of my wordpress installation. Could you please tell me where to find this file?

Whilst there was no problem clearing the title text on the home page and I was able to upload a graphic to replace it, I haven’t been able to have a graphic appear. I added to header code the code you mentioned using the graphic’s permalink as well as the URL specific for it

Thanks,

Kevin.

Kevin Tam
answered 6 years ago

Hi, anyone have any thoughts on the above?

DominicStaff
answered 6 years ago

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 !

Valerie Ben
replied 6 years ago

Hi, sorry, got stuck in this step:
– You can find the main.css file in the folder path “\wp-content\themes\dw-timeline\assets\css”

Can’t find the main.css file. Is it somewhere in here wp-admin/theme-editor.php?

Dominic Staff
replied 6 years ago

Please download the latest version of the DW timeline.

Kevin Tam
answered 6 years ago

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.

DominicStaff
answered 6 years ago

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 !

Kevin Tam
answered 6 years ago

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.

Dominic Staff
replied 6 years ago

Please send me username & password of your site (via private answer) for further checking.

Kevin Tam
replied 6 years ago

Thanks again for help. How do I send you a private answer via this forum?

DominicStaff
answered 6 years ago

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

 

DominicStaff
answered 6 years ago

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 !

Kevin Tam
answered 6 years ago

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?

Wilfred
answered 6 years ago

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,

Kevin Tam
answered 6 years ago

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.

Kevin Tam
replied 6 years ago

Ah…worked it out. Looks at WP Bootstrap carousel’s code needs to be updated as it is only compatible up to WP 3.7.1
That’s a shame. I’ll have to see what other alternatives can do the work that one did.

Otherwise, I’d appreciate thoughts on points 1 & 3.

Cheers,
Kevin.

DominicStaff
answered 6 years ago

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 !

Kevin Tam
replied 6 years ago

Brilliant, solved! Thanks again Dominic. Much appreciated!
I’ll dig around to see if I can work out what the “dots” & the “vertical arrows” on the time line are called to do the final bit of customisin then.

SInce WP Bootstrap Carousel is only compatible up to WP 3.7.1, is there an alternative to it that you would recommend? I did like the way it would carousel images even in the “snippet” of the posts on the timeline’s home page.

I did try using Jetpack’s Carousel but would it be correct to say that there’s something in Timeline’s code that is causing Jetpack’s Carousel to disable? ie: Jetpack state’s that if there’s a potential conflict in the gallery function, its carousel will disable itself. If so, I don’t suppose there’s an easy way to disable Timeline’s function in this domain?

Thanks again.

Kevin Tam
replied 6 years ago

Hi – as said, all’s running well and basically solved – thanks!

I am still keen to find a way of getting something like WP Bootstrap Carousel working with this theme – any alternatives since that doesn’t work with WP 3.7.1 (I’m running 3.8.1 and Jetpack’s carousel doesn’t work either)?

I’m also wondering if there’s a way inserting a random quote in the top graphical area of the home page? There are widgets for this but this theme doesn’t seem to allow for that?

Thanks,
Kevin.

Thiago Rodrigues
answered 6 years ago

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…

Kevin Tam
answered 6 years ago

¡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).

DominicStaff
answered 6 years ago

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

Kevin Tam
replied 6 years ago

Hi Dominic,

Any ideas with regards to getting something like WP Bootstrap Carousel working with this theme?

Thanks.

Dominic Staff
replied 6 years ago

You can find here for some plugin support carousel: http://wordpress.org/plugins/search.php?q=carousel

Kevin Tam
replied 6 years ago

Thanks. I tried the 1st on the list (agnosia) – no-go with that one. Once again, I have tried several carousels including the one you used in the demo (WP Bootstrap Carousel – I believe this is not compatible with the later version of WordPress I’m using).

Could you please point me to a carousel which will definitely work with WordPress 3.8.3 running DW Timeline theme?

Dominic Staff
replied 6 years ago

At the moment, the DW Timeline isn’t yet already to be compatible with the latest WordPress 3.9.
Please note that, the WordPress latest release has included lots of changes and we are already working on that to make it compatible so that it’s taking some time and we will release it in the next two weeks.
Please stay tuned. Will let you know once released.

Kevin Tam
replied 6 years ago

Hi Dominic,

Thanks for the reply and re: DW Timeline not being compatible with WordPress 3.9

You’ll note however that my question about the Carousel very much predates anything to do with WordPress 3.9 and that I am running 3.8.3. With that in mind, are you aware of any carousels which will definitely work with WordPress 3.8.3 running DW Timeline theme?

Dominic Staff
replied 6 years ago

Apologies for the delay in replying to you.
At the moment, the DW timeline free isn’t yet already to be compatible with the latest WordPress 3.9.
Please note that, the WordPress latest release has included lots of changes and we are already working on that to make it compatible so that it’s taking some time and we will release it in the next two weeks.
Notice: If you have any question, you can create new question then we will help you resolve it.

Powered by DW Question & Answer Pro