Search Results for 'css'

Hi,

Yes, I see the issue now. That happens because the initial color of the menu is black. This black color is then overridden by the color set in the theme panel. This is basically CSS code, this works in cascade. First the black color is loaded, then the white color follows
– https://www.screencast.com/t/GAobBzb3O2
This effect or flash can sometimes be noticeable. In this case what you can do is to make a small modification in the theme stylesheet. Modify the initial color to white as well here
– https://www.screencast.com/t/rgVj3orUlUVV
Or remove the background color entirely
– https://www.screencast.com/t/aR7Qt5mehB
Try it like that and check the result. Maybe clear the cache as well.

Thanks

Hi,

I could give you a code to left align those images on mobile. The theme treats them like normal images in the post content, and automatically centers them on smaller devices
– https://www.screencast.com/t/y2L0SjnOA

@media (max-width: 500px) {
.alignleft {
float:left;
margin-right: 21px;
}}

Enter the code in Theme panel->Custom CSS section, then check if it is working properly. Maybe clear the cache if the code does not apply after entering it.

Thanks

In this case you will need to make a few more adjustments for the proper functionality of wp and the theme. Please read these guides:

http://www.wpbeginner.com/wp-tutorials/how-to-add-ssl-and-https-in-wordpress/
https://css-tricks.com/moving-to-https-on-wordpress/
https://yoast.com/dev-blog/move-website-https-ssl/
https://forum.tagdiv.com/topic/moving-to-ssl/

Thank you!

Hi,

There is a current issue with the text elements, in the theme. When setting a row background it will be displayed over the actual content, instead of a background.
This issue will be fixed in the next theme update, in the meantime please enter this code in Theme panel->Custom CSS
– https://www.screencast.com/t/vrPcQqSQA2e

.wpb_text_column .td-element-style ,
.td_block_text_with_title .td-element-style {
z-index:-1;
}

Thanks

Hello,

You can try to use an ‘image box’ element and remove the overlay with this css:

.td_block_image_box .td-custom-image a:before{
display:none;
}

Here is an example of the results:
https://www.screencast.com/t/6eGUAu9yC5Z and https://www.screencast.com/t/wRVBWkom

Make sure you select the stretch row and content option by accessing the row settings.

Thank you!

Hi,

The most recommended method and also guaranteed to work is to regenerate the thumbnails
– https://forum.tagdiv.com/thumbnails-fix-strange-looking-images-on-blocks/
This process will recreate thumbnails from the featured images.
The thumbnails are defined in this theme file if you want to change how future thumbnails will be created, in the code
– https://www.screencast.com/t/hQhW0WEf
You will have to modify the module used as well, each module uses one of those thumbnails
– https://www.screencast.com/t/xd6lCHNJSdi3
There will probably be need for additional CSS styling for the module, as other elements displayed on it depend on the current thumbnail size for positioning margins, padding etc.

Thanks

Hello,

1) There is an image creating that space there added by the cookies-for-comments plugin.

2) Your sidebar is using the defualt open sans font and your content uses the palatino font. Please make sure you change all of the fonts in the fonts section of the theme panel.
As an alternative, you can add this code in your theme panel-> custom css box:

.td_block_list_menu li{
font-family:Palatino Linotype;
}

Thank you!

Hi,

It would be helpful if you could provide a link to your website or some details, for a more accurate solution. I could give you a code to reduce the padding between menu items (the default is 14px)
– https://www.screencast.com/t/1Zb6M9d7Uzcg

.td-header-main-menu .sf-menu>li>a {
padding: 0 12px;
}

You can enter this code in Theme panel->Custom CSS section.
Or maybe you could stretch the header menu to create more space, if there are many items in it
– https://www.screencast.com/t/7TJMrXzilI7

Thanks

Hi,

The Recipes demo has an example of a simple recipe format
– https://demo.tagdiv.com/newspaper_recipes/td-post-frozen-blood-and-sand-cocktail/
That could be recreated in any post, if you wish so. It is simply HTML structure and corresponding CSS from the recipes demo. This is a similar topic
– https://forum.tagdiv.com/topic/how-to-setting-up-post-with-demo-template-recpes/
You could create other designs, or modify this example as you like.
There are recipe plugins I believe, that you can use to create and style recipes.

Thanks

Hi,

I forgot to mention, the code needs to be entered in Theme panel->Custom CSS section
– https://www.screencast.com/t/m9lnAAnq

Thanks

Hi,

That is happening because of a margin from the demo you are using, for the top row containing the slider. There are two ways how this can be fixed.
Either remove that margin in the demo stylesheet
– https://www.screencast.com/t/F23w24Dteco
Or enter this code in Theme panel->Custom CSS section
– https://www.screencast.com/t/QDGJd30Wz

.td-politics .td-slider-row {
margin-top: 0;
}

This modification will affect the desktop version as well. Before removing the code or adding the custom code
– https://www.screencast.com/t/TXLmE6w2G3X
And after making the modification
– https://www.screencast.com/t/2Zwc2ZI0jhpD
If you want the desktop version to remain the same, do not modify the demo stylesheet. Simply enter the code provided in the Theme panel->Advanced CSS in the phones section, so it will apply only on mobile devices.
Let me know if you have any further questions or need further help.

Thanks

Hello jeanlucb,

You can try using the code below and place it in Theme panel -> Custom CSS Area.

The code is ->

.td-footer-wrapper {
padding-top:0!important;
}
.td-main-content-wrap {
padding-bottom: 0;
}

Thanks.

Hi,

1. That is an author box, it is automatically displayed on the author page. You could remove it with some CSS if you don’t want the author meta displayed
– https://www.screencast.com/t/0oBGNuh3

.author .author-box-wrap {
display: none;
}

2. To remove the “Tag:” text you will have to edit this theme file
– https://www.screencast.com/t/EecHV4TCg0
– https://www.screencast.com/t/G4mdyYvQX5m
The result is like this
– https://www.screencast.com/t/bbf91j0y58f
The breadcrumbs can either be enabled or disabled for all the website, there is no option to disable them specifically for the tag pages.
You could use some CSS to remove them on tag pages only, like this
– https://www.screencast.com/t/kXzovJQo

.tag .entry-crumbs {
display: none;
}

3. That could be increased like this
– https://www.screencast.com/t/flM1XEXkeAO

.td_search_subtitle {
font-size: 20px;
}

4. There are no options to modify those elements at the moment, unless you use custom code and make modifications in the 404 template of the theme
– https://www.screencast.com/t/CGbyqnrSzX

5. The easiest way would be with custom code
– https://www.screencast.com/t/j9JnggbAokkB

.td-menu-mob-open-menu .td-menu-socials {
display: none;
}

Thanks

Hi,

That would be possible with some CSS for example. You can use the unique post IDs to achieve it. This is an example, where the post ID is used to hide the author name and date just for that post
– https://www.screencast.com/t/Fj0EB9DMMIe
This is the code used in thee example

.postid-18078 .td-post-author-name,
.postid-18078 .td-post-date {
display: none;
}

Thanks

Hi,

The easiest way would be to hide these elements with CSS on the posts you mention. You can use the post unique ID and create a code to remove the sharing and also related articles just for those posts. Like in this example
– https://www.screencast.com/t/ux94lD9ks6
– https://www.screencast.com/t/IszaczKLlZYH
– https://www.screencast.com/t/TXwtMUPfB4
Use the post Ids you want in the code, and it will remove the sharing and related articles only in them. Enter the code in Theme panel->Custom CSS section

.postid-18093 .td-post-sharing,
.postid-18093 .td_block_related_posts {
display: none;
}

The post Id can be found either with the browser inspector for example, or in the WordPress posts edit screen
– https://www.screencast.com/t/n7hX9419
There are also other ways.

Thanks

Hello narinder912,

If you want to hide the author name for the search page, you should try using the code below and place it in Theme panel -> Custom CSS area.

The code is ->

.search .td-post-author-name{
display:none;
}

The result is here -> https://www.screencast.com/t/eLxo0NnU

Thanks for your understanding!

Hi,

I don’t see why not. You might need a fix to allow uploading SVG files in the media library, in order to set the logo
– https://css-tricks.com/snippets/wordpress/allow-svg-through-wordpress-media-uploader/

Thanks