Search Results for 'css'

Hi,

The same solution should work for Newsmag post template 8. Paste the provided code in the single_template_8.php file after the featured image code
– https://www.screencast.com/t/cn7UcaEY6cF6
Then apply this CSS code for some styling, you may change it however you like
– https://www.screencast.com/t/A4c7PFSS7

.td-feat-image-caption {
color: #ffffff;
padding: 10px;
background-color: rgba(34, 34, 34, 0.55);
}

Thanks

Hello,
The bullet point size comes from the text size. If you increase the font size of the text, the bullet will also increase. There is no separate control over the bullet themselves.
If you want more controls over the bullets please use this guide:
https://www.w3schools.com/css/css_list.asp

Thank you!

Hello,
It depends on what shadows and where you have in mind. That will be a complex css implementation you need. The theme does not provide these settings so you will either have to learn how to implement css shadows:
https://www.w3schools.com/css/css3_shadows.asp
https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
https://www.cssmatic.com/box-shadow

or hire a freelancer to help out.

Thank you!

Hi,

The paragraph padding adds a class to all the elements which you select to have such padding
– https://www.screencast.com/t/3uV4KbJccCv
– https://www.screencast.com/t/itP48xvqf
Everything inside it, like paragraphs and headings will be be aligned accordingly.
You could manually apply this padding, depending on what you have in the post content, the padding has to be applied for each.
A code like this will affect all paragraphs and h3 in a post example
– https://www.screencast.com/t/EiVBQ7KGJIO8

.td-post-content p,
.td-post-content h3 {
padding-left:4%;
padding-right:4%;
}

For a page it would be like this

.td-page-content p,
.td-page-content h3 {
padding-left:4%;
padding-right:4%;
}

You can modify the padding values as you wish, and experiment further with the codes. Then enter them in Theme panel->Custom CSS.

Thanks

Hi,

Please try entering this code in Theme panel->Custom CSS and check if it solves the issues. The problem with the words I see is mainly on the module post titles and in some posts for the next/prev
– https://www.screencast.com/t/HdXPPqTGV
This is the code, try and see if it working properly. Maybe clear all caching after entering it in the theme panel.

.td-md-is-firefox .td-module-title {
word-wrap: break-word!important;
}
.td-md-is-firefox .td-post-next-prev-content a {
word-break: break-all!important;
}

Thanks

Hi,

I could give you a code to reduce the line height of the menu and the top and bottom padding, just for that particular menu item
– https://www.screencast.com/t/59JOdkRQ834
When zoomed in two times (200%) it would look like this
– https://www.screencast.com/t/UuKPWMrnqe4n
This is the code I used, you can enter it in Theme panel->Custom CSS if you decide to use it

.menu-item-4242 ul li {
line-height: 18px;
}
.menu-item-4242 .sub-menu .td-menu-item > a{
padding: 4px 5px!important;
}

Thanks

Hello,
Please add this css to the theme panel-> custom css box:

.widget a:hover{
color:#e56e04;
}

Thank you!

Hi,

The Black demo has custom design and styling, that would not be possible with theme options. It is specific to the mentioned demo. You could achieve it with custom CSS. Take inspiration from the demo stylesheet and see how it was made
– https://www.screencast.com/t/vapyFaSR4nq
It may not be easy to achieve this without installing the actual demo, but it can be done. For example you can experiment with a code like this, for a black TV category page
– https://www.screencast.com/t/z9kXpFHW3Eu

.category-tv .td-container-wrap {
background-color: #1a1a1a;
}
.category-tv .td_module_11 a,
.category-tv .td_module_6 a,
.category-tv .widget a,
.category-tv .td-footer-instagram-title,
.category-tv .td-page-title,
.category-tv .header-search-wrap .td-icon-search,
.category-tv .sf-menu > li > a {
color:#fff;
}

Add more elements in the code as you identify them, use the browser inspector to do it
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

This is unusual, the block title should have the color that you set when customizing the page with the composer
– https://www.screencast.com/t/3oqBQpjt
It seems there is an additional class that is applying on the title
– https://www.screencast.com/t/Z1OMYr7aoWVh
This could be the result of a plugin not functioning correctly, or miss-configured. I could give you a code as a quick fix, but you should identify what exactly is causing the issue. Deactivate all plugins except theme plugins as a test, and check if the problem is solved.
The fix would be this code, enter it in Theme panel->Custom CSS
– https://www.screencast.com/t/V49lzgTz

.block-title span{
background-color: transparent;
}

Thanks

Hi,

The category tags displayed on block modules have a predefined color, in the theme stylesheet. There is no option to change this color. However it could be changed with CSS.
A code like this will change the category tags background color and text color on the whole website for example
– https://www.screencast.com/t/NzsN4c15
You can change the colors to what you want, then enter the code in Theme panel->Custom CSS

.td-post-category {
background-color: red;
color:black;
}

Thanks

Hello,
If using a page builder you will first have to use the pagebuilder + page title template: https://forum.tagdiv.com/page-templates-2/
The you can add this css on the page in the top right of the screen (cog wheel)

.page-template-page-pagebuilder-title .td-crumb-container,
.page-template-page-pagebuilder-title .td-page-title{
display:table;
margin-left:auto;
margin-right:auto;
}

Thank you!

Hello,
Sorry but our theme is not compatible with RTL and we cannot provide any solutions in this regard. You will need coding skills to properly implement RTL with our theme. All of the theme modules and blocks and other theme elements have to be aligned to the new direction and it will be no easy task.

The logo and the menu will be the least of your problems. They are the easy part. You simply float them right with css.

Thank you!

Hello,

Please add this code in the theme panel-> custom css box:
.td_category_template_7 .td-category-title-holder{
padding: 50px 15% 20px;
}

Thanks.

Hi,

That is a color defined in the demo’s custom design. Each demo contains custom design, like this color for the module tiles hover. You could remove the color in this case from here
– https://www.screencast.com/t/EF4yXncQ
Removing it from the demo, the colors you set in the theme panel will apply, instead of the demo design.
Or maybe use a code like this to override the demo design
– https://www.screencast.com/t/nRw3k9BWVBa
The code must be entered in Theme panel->Custom CSS, if you decide to use this method

.td-blog-fitness .td_module_wrap:hover .td-module-title a {
color: #7651a9!important;
}

Thanks

Hello,
Please add this code in the theme panel-> custom css box:

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

Thank you!

Hi,

From what I see the header search is not functioning properly. Something is affecting it, either some modifications made, or maybe a plugin. The condition to make it visible when clicked is not applying.
I could give you a code as a quick fix to make it visible
– https://www.screencast.com/t/yDojPfm0hd0J

.header-search-wrap .td-drop-down-search-open {
visibility: visible;
opacity: 1;
top: 75%;
}

Enter this code in Theme panel->Custom CSS. But maybe it would be better to identify what exactly is causing the issue. Try deactivating all plugins except theme plugins and clear all caching, then check if this has any effect. Double check any custom code or theme modifications as well.

Thanks

Hello,

There seems to be a color change not coming from style.css: https://www.screencast.com/t/UxTRJyc0lmNn
Please check your custom css or the theme panel settings.

Thank you!

Hi,

Please note that the mega-menu is not intended to display like that. It would probably take some customization to make it display the way you want. You can use the browser inspector and identify the elements used and their classes, and create custom code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Something like this for example – https://www.screencast.com/t/taKiYgK3hN
You can further modify and perfect the code, then enter it in Theme panel->Custom CSS

.td_block_mega_menu .td_mega_menu_sub_cats {
float:right;
text-align:left;
}

Thanks

Hello,

Please add this code in the theme panel-> custom css -> advanced css and place it in the mobile phones section:

.td-header-style-7 .header-search-wrap .td-icon-search{
color:black!important;
}

Thank you!