- NewspaperCreate Custom Code with the browser’s Inspector or the Live CSS Box
- NewspaperScroll Animation
- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- NewspaperHow to setup Twitch for Social Counter
- NewspaperModal Popup
- NewspaperFlex Block Settings Guide
- NewspaperAutoptimize Plugin – install and configuration
- NewspaperAdding Multiple Authors to Your Articles
- NewspaperDesign your Post Pages using the Cloud Library Templates
- NewspaperBig Grid Flex Settings
- NewspapertagDiv Composer Tutorial
- NewspaperTheme modules and blocks
- NewspaperThe Mobile Theme
- NewspaperCompare theme files – Winmerge tutorial
- NewspaperUsing Other Ads
- NewspaperBlock settings tutorial
- Using custom fonts
- Using typekit fonts
- NewspaperChild Theme Support
- NewspaperHow to Make the Site Faster
Hi,
You can use this custom css to do it:
@media (max-width: 767px){
.home .td-main-page-wrap {
padding-top: 0;
}
}
Result: http://screencast.com/t/GvJlH1Yj
Thank you!
-
This reply was modified 10 years by
Bogdan B..
Hello,
The menu color can be changed from the theme panel like so: http://screencast.com/t/jdtbq46pjxj
As for the dimensions, you can use this custom css:
.td-header-menu-wrap-full{
height:48px!important;
}
.td-travel .td-header-style-5 .td-main-menu-logo a{
line-height: 50px!important;
}
.td-header-style-5 .td-main-menu-logo img {
max-height: 55px!important;
}
.td-header-style-5 .sf-menu > li > a{
line-height:48px!important;
}
.header-search-wrap .td-icon-search{
line-height:38px!important;
}
I hope this helps.
Thank you!
I believe, that’s because my tagdiv speed booster plugin moves the theme styles to the html bottom. I used provided css in the custom css field and the problem’s disappeared.
Thanks!
Hello,
This is the simplest solution of recreating the travel demo homepage on another demo. This cannot be done without the custom classes used by this demo.
Please follow these simple steps to recreate the travel demo homepage with another demo installed:
1) 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
2) The background image will not be found so you will need to add your own image in the row setting: http://screencast.com/t/yB2Bh0rbo
3) This is the final and most important step as the css for the travel homepage will not apply without this step. Please add this class: td-travel to the body of the website like so: http://screencast.com/t/fOt9sfquQtVy
This will be the result: http://screencast.com/t/vlZG4G8m1Xpy
I hope this helps!
Thank you!
Hello,
Unfortunately the theme has no option to change the menu position. This will require custom work and it will be no easy task as all of the menu css will have to be modified to adjust all the different menu-related elements: sub-menus, mega-menu…etc. The header styles control the menu position. At the moment the only menu positioning option is choosing different header styles: https://forum.tagdiv.com/header-styles/
Thank you!
Hello joyceloh,
I’ve checked again your Custom CSS area and I saw that you have again some syntax errors. Please add the missed curly brace that I said you in the previous topic. If you have not closed all tags properly, all the codes from Custom CSS area do not work properly and gives you some syntax errors.
For your second question, if you want to have only on mobile mode, you have to use @media(), like this:
@media (max-width:767px) {
.td_block_big_grid_3 {
padding-bottom:10px;
}
.td-a-rec-id-custom_ad_2 > div {
margin-bottom:10px;
}
}
The result you should see here: http://screencast.com/t/AxYJhi2wxlx6
Please be more careful on “{” “}” for does not have syntax errors.
Hope this helps and let us know how it goes!
Thank you for the message!
Hello,
I’m not sure exactly what you mean but i will try to cover a few things. The category color can be set from the theme panel: http://screencast.com/t/uuYAEhpmq but this color will only be visible on posts: http://screencast.com/t/3NqXqrge3
The category tags color on modules and blocks from the homepage cannot be changed from the theme panel and they will not receive the color you set for the particular category.
You could change these tag colors with css:
.td-post-category{
background-color:red
}
But this will affect all category tags:
http://screencast.com/t/gsDssegdvR
Another method to use the blocks with different colors is to set the color from visual composer like the example in the reply above.
Unfortunately these are the only controls the theme has at the moment regarding category tags.
I hope this helps.
Thank you!
Hi
The default widgets from WordPress don’t have options to change the background-color for theirs tiles, you have to apply some css code to achieve that. If you want the same color for all widgets use this css:
.widget .block-title > span{
background-color: #f4524d;
}
If you want different colors depending by the widget follow this example to get the widget’s class in order to target it’s title: http://screencast.com/t/Ac4FV8Vr
.widget_recent_entries .block-title > span{
background-color: #f4524d;
}
Hope this help.
Thanks!
That’s not exactly what I mean..
I got this response on the discussionpage:
“Hi,
Yes, unfortunately in newspaper version 6 that block title style option isn’t available anymore but it can be achieved trough custom css.
Set a block title for your slide and open a new topics on our forum: https://forum.tagdiv.com/ provide a link or the connect of these conversation and we will give the right custom css code to get that design.
Thanks for the message!
Lucian C. tagDiv”
Hi
Try this css: http://screencast.com/t/mVlY6ugSoSj
#dcl_comment_btn:hover {
background: #3071A9
}
#dcl_comment_btn{
height: 40px;
}
I suppose that the indicated box refers only at this button, but its options are limited by the html structure of the button.
Thanks!
Hello,
I have checked your website and saw the issue. It seems something is interfering with the css (maybe a plugin). You could try to use this code to adjust it:
#content .wpb_alert p:last-child, #content .wpb_text_column :last-child, #content .wpb_text_column p:last-child, .vc_message_box>p:last-child, .wpb_alert p:last-child, .wpb_text_column :last-child, .wpb_text_column p:last-child{
margin-bottom:auto!important;
}
I hope this helps.
Thank you!
Hi
You can modify the header with using this css in theme panel > custom ceode > custom css: http://screencast.com/t/3x0zB56Fru9w
.td-header-wrap{
width: 1021px;
margin-right: auto;
margin-left: auto;
}
This css will make the header by an equal width with the footer.
To reduce the footer height try this css: http://screencast.com/t/FRaoUkSjC
.td-footer-container{
padding: 12px 0 5px 0;
}
.td-footer-info {
margin-bottom: 3px!important;
}
.footer-logo-wrap {
margin-bottom: 0px;
}
Thanks!
Hi Andrei,
thank you – it’s working properly.
I have the same problem here
http://analisidelsangue.net/forums/users/drumma/topics/
can you suggest me custom code css for this section too?
thank you again!
Hello,
I have tested this again and it works as expected: http://screencast.com/t/9hYOrU5xm1z
Please make sure you copy the whole code and make sure all tags are closed in your cusom css box. If the code still does not apply, please provide a link to your website so we can inspect it.
Thanks.
Hi
Sorry for the delay but we take take the topics from the oldest to the newest.
I’ve added this issue on our issue tracker and we will fix it in the next theme’s updates. Meanwhile you can try this css in theme panel > custom code > custom css: http://screencast.com/t/oMFOQsB0ZTNs
#bbpress-forums #bbp-user-wrapper ul.bbp-replies{
clear: both;
}
Thanks!
-
This reply was modified 10 years by
Andrei L..
Hello joyceloh,
I have checked you Custom CSS and I saw you have a syntax error and therefore, the code does not work.
http://screencast.com/t/MkYOKoE4E
Hope this helps and let us know how it goes!
Thank you for the message!
Hello,
Any ideas, why video sign is not centered on sidebar images: http://take.ms/fpQ7t
See http://earlybirg.02hosting.com/wp2/
I use no custom css, so it should be a bug with theme styles.
Could you please check?
Hi,
Unfortunately you cannot add it in php because it is already there. It is hidden with css (with display:none) that is why css is the solution to ‘unhide’ it. If you want to alter the theme files to ‘unhide’ it, the best one to modify would be style.css as the menu is hidden there.
Thank you!
Hello John,
If you want to move to the left your logo, you have to use a bit of CSS. Please try the code below and add it in Theme panel->Custom CSS area, like this: http://screencast.com/t/erWaKfeLV5
.td-header-style-1 .td-header-sp-logo {
margin-left:-20px;
margin-right:50px;
}
The result you should see here: http://screencast.com/t/6V8yMQvWI
Hope this helps and let us know how it goes!
Thank you for the message!
Also, not sure if it helps, there is a field for the plugin to add custom CSS. This is what it says:
Custom Button Class
to customize the button
Here you can add any custom class to the button. By using custom class you can use your own style for comment button. Leave empty if you don’t care. (Works only with “On Click” option)
So shouldn’t I be able to make it unique?
Hello EDMSU,
I’ve checked your website and I saw that you are using header style_1. You have to insert a custom class and then you have to control with a bit of CSS to insert an image. Below, I gave you an example for header style 1. Please try to implement using the same code into your back end and achieve as you wish.
The code is:
.custom_image {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-size: 1068px 300px;
background-repeat: no-repeat;
width:1068px;
height:300px;
position:relative;
margin-right:auto!important;
margin-left:auto!important;
}
The above code must to be added in Theme panel->Custom CSS area, like this: http://screencast.com/t/jB1SumPM
You can adjust the values until you achieve as you wish.
The result you should see here: http://screencast.com/t/j4VHuB3X9cQ
Hope this helps and let us know how it goes!
Hello,
In order to hide an element for desktop you can use css and media queries.
As an example if you aded the linked in button:
@media (min-width:767px){
.td-social-linkedin {
display:none!important;
}
}
Thank you!
Hello RadioUahid,
If you want to add a button between top bar menu si header menu items, you have to add a custom class within header file like this: http://screencast.com/t/yN3BaFrp0 -> http://screencast.com/t/uISOtMvuMlL There is the place of your button. Now, you have control to this with CSS…and you need some customization to implement this.
Hope this helps and let us know how it goes!
Thank you for the message!
Hello,
1) You can change the title position by using this custom css. It will need further customization for colors though
.td_module_mx8 {
position: relative;
padding-bottom: 80px;
}
.td_block_18 .td-column-3 .td_module_mx8 .td-module-meta-info{
bottom: -55px;
}
.td_module_mx8 .entry-title a{
color:black;
}
.td-module-comments a{
color:black;
}
2) As Alin stated above, you can check the excerpts section to see which module is used by which block.
Thank you!
-
This reply was modified 10 years by
Alin [tagDiv].
Hello emmaus,
You can achieve this if you use a bit of CSS to hide the block. Below I gave you an example for block_2. If you are using another type of block you can target it like an example.
.td_block_2 {
display:none;
}
If you want to hide the block from a specific page, you should target the page ID and add it in the code above before the block -> http://screencast.com/t/OPXDpW3mayC
Hope this helps and let us know how it goes!
If is not what you mean, please provide more details.
Thank you for the message!