- 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
I just don’t want to load down my site with bloated stuff that isn’t needed.
I also found a big chunk of Buddypress CSS – why is that there?
I’ve removed some of the things I don’t think I need and that has taken the 876K down to 691K. (I estimate I can get it down another 100K.
The minified complete style.css is 648K and the cutdown minified css is 489k
Before, My story pages were loading in 8+ seconds. Now they are loading in 4 seconds.
That is better, but I want them to be faster. That is why I want to remove anything that doesn’t need to be there. I haven’t tried it with the cutdown CSS yet.
I’ve also tried most of the things suggested by Chris, including preventing Visual Composer loading in stories (posts).
After this, I will work on shrinking VC for the front page.
Then, I will try using Varnish and nginx rather than Apache.
Hello,
I would like to ask you how to change sidebar blocks css.
I tried to change margin between table widget header and content from 26px to 10px in main style.css
.vc_tta-container .vc_tta-color-grey.vc_tta-tabs-position-top.vc_tta-style-classic .vc_tta-tabs-container {
margin-bottom: 10px !important;
margin-right: 0;
border-bottom: 2px solid #4db2ec;
display: block;
}
However nothing changed :/
Please, how can i do that?
Best regards
M.
Hi,
Our css is not the biggest one, we found other themes with bigger ones. The css got so complex due to market demand and users don’t want simple themes anymore and the majority of users want a theme that works with a lot of other features. Many large complex themes have one large CSS file for better caching, while some others break it down into 4-6 other files. Our choice is one file for better performance and it can be minified.
We also have worked on this and now the woocommence style is in a different file which is loaded only when woocommerce plugin is active and also the demo styles were removed, each demo has its own file.
So if you want to remove some code from style.css you are free to do this if you have some basic experience. The specific css related to the post templates contain the unique class for each one for example:
– .td-post-template-default – for default post style/template
– .td-post-template-1 – post style/template 1
– .td-post-template-2 – post style/template 2
and so on
Thanks!
Hi
1. Do you want the header ad to be displayed only in posts from a specific category? If so that can be achieved by adding a condition in ads.php file: http://screencast.com/t/4jbC6dwEdvLI
if (in_category('category-slug')) {
echo td_global_blocks::get_instance('td_block_ad_box')->render(array('spot_id' => 'header', 'spot_title' => $tds_header_ad_title));
}
You just need to add category’s slug, name or id as a parameter for in_category() function and the add will be displayed only on posts which belongs to given category.
2. This can be achieved only with a change in theme’s code. You need to edit: td_block_mega_menu.php file and move the indicated line like here: http://screencast.com/t/Uj3bnfxkTuL You will also need this css in theme panel > custom code > custom css: http://screencast.com/t/Fvbm7xII7I
.td_mega_menu_sub_cats {
float: none;
}
Thanks!
Hello,
This depends on whether you use thew child theme or not. The child theme has it’s own css and you should add the code in the mobile theme tab under custom code. Also if the code is not specific enough, the child theme code could still be overwritten by the default code. Css sometimes does that as it’s a very specific language.
Thank you!
Thanks, Bogdan for the css. Will give it a try.
Much appreciated.
Nik
Hi,
I assume you are talking about the hover effect with the yellow border and transition effect.
The way the site you mention has done it is with this css:
.td_module_mx6:hover .td-module-thumb {
border: 5px solid #F3EC04;
}
.td_module_mx6 .td-module-thumb {
border: 0px solid #F3EC04;
transition: all 0.3s linear!important;Thanks.
Hi,
If you already have the sprites, you can use this guide on how to use sprites: http://www.w3schools.com/css/css_image_sprites.asp
Alternatively you can use this topic to see how it can be done:
https://forum.tagdiv.com/topic/how-to-change-the-single-post-pagination/
Thank you!
How can I tell which page styles are in use?
I want to know which post styles are in use so I can delete the CSS for unused styles, to made the style file smaller.
I know I run the risk of selecting a style that I’ve removed the stylesheet for, but I am OK with that risk, because I’m fairly sure I have only allowed three styles. – I just want to prove it.
Also, I want to work our which modules and other block I’m using / not using, so I can delete the unused stylesheet information.
I have already tried minifying the stylesheets and I already compress them, but I want to try to make more improvements. Minifying the 876K stylesheet makes it 648K.
It would be a great thing if there was a way to have the stylesheet consisting of many small parts, that are then joined together to make the production stylesheet.
Hi,
In order to target these links, you need to assign a custom class to the row containing them in visual composer: http://screencast.com/t/meJp1GMh Then you can use this css using the class you gave the row::
.imagelinks .wpb_text_column a{
color:red;
}
.imagelinks .wpb_text_column a:hover{
color:blue;
text-decoration:none;
}
Thank you!
Hi,
Unfortunately there is no way of removing the lightbox on a tagdiv gallery. It’s the way the gallery was created. you can use a css trick though to make it not clickable if this is what you are after:
.post_td_gallery .td-slider{
pointer-events:none!important;
}
You can add this code in the theme panel-> custom css box
Thank you!
Hi,
The style of the theme ads a min width to the logo and as you use a very narrow logo, it will require a bit of css for better positioning. Please use this code:
.td-politics .td-header-style-11 .td-logo-wrap-full{
min-height: 160px!important;;
}
.home .td-main-page-wrap{
padding-top:0!important;
}
I hope this helps.
Thank you!
The text above says “The blockqopte color can be set separately from here: http://screencast.com/t/ChmofAOcHWC3”. I have set that one to the same as my Theme Accent Colour, but the dropcap still gets gray. One CSS changed changed my dropcap colour permanently.
Hi,
Unfortunately these are the only 2 options. Either css or removing code from the theme files (main theme only).
Thank you!
Hi
Try this css: http://screencast.com/t/AKipmC3pO
.wp-caption-text {
position: relative;
top: -25px;
color: white;
}
Thanks!
Hi guys,
Message 2 here. I have taken the CSS code from the child theme style.css and moved it into the theme settings custom code tab and that seems to have fixed this.
Just for my own learning, is it better to have the custom CSS in the theme panel? Is there any reason why the CSS in the child theme would not render on a mobile?
Thanks.
Hi team,
I have done some custom CSS on title and text blocks on my home page (drbillsukala.com.au). They look fine on a laptop but when I look at the page on my Android phone (in both Chrome and Firefox browsers), the text is extremely small (as if the CSS is not being recognised).
Note, I am NOT using the mobile theme. Only the responsive feature.
Is there a separate CSS file for responsive/mobile rendering that I am not aware of? If so, do I just need to add my code from my CSS file (child them) to a different style sheet?
Thanks
Hello Bogdan, thanks for the reply and Css code. 5 Stars for the support.
understood. Can you please give me the css code to put there ? I’ll be very thankful to you!
Hey thanks for taking a look. The color remains unchanged for some reason. Would you mind taking another look?
EDIT— ALL GOOD! I placed the code into Custom HTML instead of Custom CSS on accident. Thanks, I wasn’t aware of this custom css location within the template
Hello – not sure if this is the same thing, but my Accent Color is set, but this is not the color that appears with Drop Caps.
Is it necessary to add/edit the css – or is there a setting/re-fresh that I am missing to change the default Drop Cap colour?
Thanks…
C.
UPDATE: I now get this error when trying to reactivate my Newspaper theme: Warning: require_once(mobile/includes/td_css_generator_mob.php): failed to open stream: No such file or directory in /home/truenoy2/public_html/wp-content/themes/Newspaper/functions.php on line 36
Fatal error: require_once(): Failed opening required ‘mobile/includes/td_css_generator_mob.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/truenoy2/public_html/wp-content/themes/Newspaper/functions.php on line 36
I am new to all of this. PLEASE HELP!!!
The last change work perfect, thanks.
Previous I got a CSS-change to det the dropcap colour to the pink colour which is my Theme Accent Colour now. Is it possible to set the dropcap colour to the same as my Theme Accent Colour insted of the colour i use right now, using CSS-changes? I do not want to change all posts manually if I change theme accent colour.
I also have a question which would be a bonus for me. In addition to the dropcap I also mark the words following the dropcap in bald uppercase letters in the same colour. Is it somehow possible to do this automatically as well?
http://www.ladiesabroad.se/2016/08/airbnb-lagenheten-inte-ar-som-beskrivet.html
Thanks from Lena
Hi
This happens because you have magazine demo installed and that is the default layout for that demo. Try to comment or delete the indicated code from demo_style.css then test the site again: http://screencast.com/t/mDdDZQ8YteCO
Thanks!
Thanks….so that is just changing the color to red?
What I’m looking for is to put the text on top of the photo in the bottom right corner in like white or grey text… is there some .css to do that?
