Recreating "Travel" demo design

Posted in: Newspaper
Post count: 13

Hey,

Simion referred me to this forum for help.

I’ve used the “Travel” demo (installed it), but not everything is replicated as in your demo. For the most part, it’s all good, but I’m having issues replicating the following aspects of the homepage:

1. Header background image – I used a background image for Header in Theme Panel, but it doesn’t show up. How do I have a background image the same way you have it in Travel demo?

2. The first three (Big Grid?) most recent posts that are in the style of Photo Card. Cannot do that.

3. The 3-4 rows of the following posts, 3-columns with Category selection on the right and excerpts under each title. I’ve tried all 3-column blocks, but none of them are like that.

Also, a small issue that I’ve encountered:

4. For Pagination, I have “Load More” button and ‘Unique Articles’ is enabled on the Homepage. However, when clicking the “Load More” button, when new articles are loaded, some of them are the same as those above – so we get two rows of the same articles. Basically, ‘Unique Articles’ option doesn’t work. How do I ensure that there are no duplicates on the Homepage?

Thank you for your help guys!

Dean

Post count: 13

Hi,

Just to follow-up on this. I’ve noticed another issue that seems quite problematic, and I have no clue what that is.

When I load or refresh the homepage, for a split second, there’s some screen (seems like login screen). It shows for maybe 0.5 second, and then disappears, moving to the right (takes about 1 second). It’s a transparent screen, looks like some login confirmation. This started immediately after installing the Newspaper Theme or after the Travel Demo, not sure.

Also, it doesn’t happen every time. I’ve noticed that it’s most likely to happen after some settings in Theme Panel are saved. For example, I’ve just been experimenting with fonts, and after every 2-3 Theme Panel saves, I get that screen on refreshing the homepage.

It’s hard to catch it in full screen mode because it’s fast, but here’s a screenshot of this screen moving to the right and then hiding (there’s also an X to close it at the top right): https://i.imgur.com/YX9sYv8.jpg

Do you know how to disable that thing?

Post count: 22421

Hello,

1) please check: https://forum.tagdiv.com/topic/how-can-i-change-travel-demo-main-bag-ground-image/

2) the big grid used in the travel demo is not available in other demos. If you are trying to re-create the design on an other demo, you will have a hard time doing so as each demo has it’s own custom style. Please install the travel demo and then use this page layout. This is the ‘shortcode’ of the page layout. You can simply paste it inside your page editor in classic mode and text mode: http://screencast.com/t/SUt9ItUc the code: http://pastebin.com/RAA6DkWp

3) That is a block 4 but that is the custom design it gets on the travel demo. This is the default look of the block: https://demo.tagdiv.com/newspaper/block-4/ you have to use it on a full width row without a sidebar in order to get 3 columns of posts.

4) Sorry but the unique articles option does not work with pagination. It only works on the first load. – https://www.screencast.com/t/0epOsh4wR

As for the follow up, it is a cdn issue. it is the mobile background image. Please remove the rocket loader setting on your cdn server.

Thank you!

Post count: 13

Hi Bogdan,

1) Got it!

2) This worked! Would you mind telling me the perfect size in width/height px for the background image in this? Also, after using the shortcode, I get some grey shadow covering background image all the way from top menu down to the bottom of the Big Grid (and the width of the shadow is as the width of Big Grid) – your Travel Demo doesn’t have that shadow. How do I remove it? Can’t seem to figure it out.

3) Got it!

4) I’m confused. Isn’t this a massive bug? How do I allow my website visitors to view articles on my homepage without showing them duplicates? If a person comes to the site, and wants to see what articles the site has, they scroll down to see older articles, and obviously if duplicates start showing up, it’s going to look very unprofessional. How do I avoid that? [Just FYI, I switched to standard view/block size and just off-set 3 posts from the big grid to avoid duplicates, seems to work but obviously not ideal. If you have any other ideas where I can use other block sizes and not have duplicates, that’d be great.]

5) Rocket Loader is disabled, and was never enabled for this site. So that is not the reason. Any other thoughts?

Thanks, Bogdan.

  • This reply was modified 8 years by deanysus.
Post count: 13

Bogdan,

Also, another small question: is there any way to modify blocks? For example, is there a way for Block 24 to make its thumbnails smaller, and possibly extend the width for article headline and excerpt? Basically, so the thumbnail takes up less space, and the text moves more to the left and takes up more space.

Thanks!

Post count: 20688

Hi,

4. The unique articles is intended to be used only when the page contains elements without using pagination
https://www.screencast.com/t/qsvbBINGrn3M
If pagination is used there will still be unique articles on the initial page load, but when the pagination is used there will be duplicates.
There are sufficient default filtering and sorting options for the grids and blocks to prevent duplicates from happening
https://forum.tagdiv.com/block-settings-tutorial/
If it is for some reason required to implement the same filtering and sorting on different blocks, there is also an offset feature that can be used
https://forum.tagdiv.com/offset-feature/

In most case the rocket loader caused similar issues with the sliding mobile background. If you could provide a link to your website we will inspect it.

The theme blocks and grids are predefined, they cannot be modified unless through code. Blocks will always look the same, depending on the layout they are placed. Block 24 for example
https://demo.tagdiv.com/newspaper/block-24/
Try different block and grid types, there might be one that would be similar to what you are describing.

Thanks

Post count: 13

Hi,

Thanks. Could you please also answer the question #2?

– What’s the standard size for that background image?

– How do I remove a shadow that stretches across when the background image is added? I’ve changed all kinds of “shadow” settings for it in CSS, but nothing affects it.

Screenshot of the shadow: https://i.imgur.com/rRTxxi1.png

This shadow is showing when using your shortcode (provided above by Bogdan).

Thanks!

Post count: 20688

Hi,

The demo uses an image like this one for the row background
https://www.screencast.com/t/d1NvOracxq
Regarding the shadow you mention, please enter this code in Theme panel->Custom CSS section, it should remove that effect

.td-travel-header .td-element-style {
z-index: 2;
}

Thanks

Viewing 8 posts - 1 through 8 (of 8 total)
The forum ‘Newspaper’ is closed to new topics and replies.