Search Results for 'css'

Hi mboydnv,

Please try the code below and place it in Theme panel->Custom Css area, like this: http://screencast.com/t/oTNuYm7Gl

.td-footer-wrapper .td-icon-facebook {
background-color: #3b5998;
border-radius:20px;
}
.td-footer-wrapper .td-icon-flickr {
background-color: #ff0084;
border-radius:20px;
}
.td-footer-wrapper .td-icon-googleplus {
background-color: #dd4b39;
border-radius:20px;
}
.td-footer-wrapper .td-icon-instagram {
background-color: #517fa4;
border-radius:20px;
}
.td-footer-wrapper .td-icon-pinterest {
background-color: #cb2027;
border-radius:20px;
}
.td-footer-wrapper .td-icon-twitter {
background-color: #00aced;
border-radius:20px;
}
.td-footer-wrapper .td-icon-youtube {
background-color: #bb0000;
border-radius:20px;
}

The result you should see, here: http://screencast.com/t/PdwkooGQc84
With border-radius condition, your social icons corner will be a circle. You can adjust this value as you wish.

If is not what you mean, please provide more details about this.

Thanks!

Hello,

The category tags on modules/blocks cannot be colored from the theme panel. This was a design choice to avoid too many colors on the front page. It can be done with css as Alin suggested above:
http://screencast.com/t/VOkPxAWbnJe
.td_module_wrap .td-post-category {
background-color: #BB391B;
}
Alternatively you can select block color to differentiate a specific category by color as our home page is set up: http://demo.tagdiv.com/newspaper/ same block type, different category, different color. You can do this from block settings in visual composer. You can also use the ajax filter to select sub-categories to display

I hope this helps
Thank you.

Hi Arafat,

Please try the code below and your Trending Now is hidden on desktop. Place the code in Theme panel->Custom Css area, like this: http://screencast.com/t/kkuGPBpB92JS

@media (min-width:767px){
.td-trending-now-wrapper {
display:none;
}
}

The result you should see here: http://screencast.com/t/WQTXfm55bG

Thank you!

Hello,
The general link color is affected by the theme accent color: http://screencast.com/t/XyefDrYX3
If you want this color to be different for a specific URL, you can only target it with css but we will need more details to which one you plan to customize.
Thank you!

Hi servedaily,

Yes, it is possible to display an image in that gray box. You can set this within Theme panel, as background image, like that: http://screencast.com/t/AtlvgnQib and the image will be the full background of the page. In this category style, header container are transparent and practically in this container you can see the background image. http://screencast.com/t/6x3ZUf4ZrQo

Also, another possibility for you, would be to use a bit of Css to make some customization. Please try the code below in your Theme panel->Custom Css area to fix the problem, like this: http://screencast.com/t/gtGlwFvufE

.td-category-header.td-image-gradient-style8 {
background-image: url('enter your URL image');
background-repeat: no-repeat;
}

Note: If you want to follow the above option, please use a background color/image (white color for example).

Every category has an custom class set to it. You can get this class by inspecting the category page with your browser inspector: http://screencast.com/t/5uS8nYlTc6u
For example mine is category 66. So i would add this to the beginning of the code like so:

.category-66 .td-category-header.td-image-gradient-style8 {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Winnersh_Meadows_Trees.jpg');
background-repeat: no-repeat;
}

Now the code will only apply to that specific category. So if you need to use the code for another category you can simply copy and paste it and change the category number and the image.

To achieve custom headers for each category is not a simply task and this things are required custom work. You can use another category_top_posts_style (1,2,3,4,5,7) for each category you have and it is necessary to create some function in php and shortcode in order to works fine. http://screencast.com/t/0DIS3Bzfxi

This is a complex task which requires lots of customization and if you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you as we can’t offer customization services at the moment.

Hope this helps!

Thank you for your understanding!

Hi,
You can use this custom css to do it:

#wpadminbar .ab-top-secondary{
float:left!important;
}
.wp-admin-bar-root-default{
float:left!important:
}
.quicklinks{
display: table;
margin-left: auto!important;
margin-right: auto!important;
}

Thanks.

Hi Andy,

Unfortunately, to hide the counter you have to modify the td_social_counter plugin file, because it is not possible to use only Css. Please open your social counter core file and comment/delete this part of code, like this: http://screencast.com/t/isjpkeHcGTmI – http://screencast.com/t/gvgypKQI

The result you should see here: http://screencast.com/t/XdD0MvGtncH

Hope this helps and let us know how it goes!

Thank you!

Hello,

The comment section can only be targeted with css:

#reply-title{
font-family:MY CUSTOM FONT!important;
}
.logged-in-as{
font-family:MY CUSTOM FONT!important;
}
#commentform input[type=text],
#commentform input[type=url],
#commentform input[type=tel],
#commentform input[type=email],
#commentform textarea{
font-family:MY CUSTOM FONT!important;
}
.form-submit input[type=submit] {
font-family: MY CUSTOM FONT!important;
}

Use this code in the theme panel->custom css box and add the font you want to use to it.
I hope this helps.
Thank you!

• This reply was modified 10 years by Bogdan B..

Hi Edward,

Please try the code below in Theme panel->Custom Css area.

.td-footer-wrapper .td-animation-stack:hover a{
color:#a8a8a8!important;
}
.td-footer-wrapper .td_block_popular_categories a:hover{
color:#a8a8a8!important;
}

Thank you!

Hi globalmediacompl,

You can try the Css below in Theme panel. With this code you can improve the main menu display but, unfortunately, there is not complete justified as you wish.

This is a complex task which requires lots of customization and if you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you as we can’t offer customization services at the moment.

.td-header-style-10 .td-header-main-menu {
padding-left: 0!important;
padding-right: 0!important;
}
.td-header-style-10 .sf-menu > li > a {
padding:0px 25px!important;
}

Hope this helps!

Thank you for your understanding!

Hello,

Unfortunately the theme does not have such an option at this moment. The only method to do it is hard-coding it. CSS is not very hard to figure out. It is better than the alternative which involves altering the PHP files and adding conditionals to td_category_template.php.
You can use css without altering core files and you can have control over it from the theme panel which is a big plus.
You can set the code Catalin gave you to apply to a specific category only. Every category has an custom class set to it. You can get this class by inspecting the category page with your browser inspector: http://screencast.com/t/5uS8nYlTc6u
For example mine is category 66. So i would add this to the beginning of the code like so:
.category-66 .td-category-header.td-image-gradient-style8 {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Winnersh_Meadows_Trees.jpg');
background-repeat: no-repeat;
}
Now the code will only apply to that specific category. So if you need to use the code for another category you can simply copy and paste it and change the category number and the image.
I hope this helps.

Thank you!