- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hi
Try this custom css and add it in theme panel > custom css section: http://screencast.com/t/ctkccvhrn
.td-post-template-8 .td-post-header{
background-color: rgba(0, 0, 0, 0.2);
}
Thanks!
Salut,
Din pacate Tabs block din Visual Composer sunt considerate elemente complexe care nu permit adaugare unor alte elemente complexe, poti adauga elemente simple. Poti rescrie aceasta valoare care este adaugata de css-ul din Visual Composer, incearca acest css in Theme Panel > Custom Css :
.wpb_tabs .wpb_video_widget .wpb_video_wrapper iframe {
height: 95%!important;
}
Mersi!
-
This reply was modified 11 years by
Alin [tagDiv].
Hi,
The Newspaper grid wasn’t built with borders in mind so even if you add some they won’t look as the ones on Newsmag. You could try some custom css, ex – http://screencast.com/t/Mm1NwtGk
.vc_row.wpb_row, .td-pb-row{
border: 1px solid #e6e6e6;
}
.td-pb-span8{
border-right: 1px solid #e6e6e6;
}
Some elements may get broken and on some areas the borders may appear on the wrong location – http://screencast.com/t/Zq10e1Acf
Thank you!
-
This reply was modified 11 years by
Emil G.
Hi,
Please try this custom css in Theme Panel > Custom Css and also clear cache:
.td-page-wrap {
background-color: transparent !important;
}
Thanks!
Hi,
I have checked this and you are right, I have also added it on our list and the views will be removed also from slide module. Until we will remove it please comment this line – http://screencast.com/t/WZd0YmnEG or you can use this custom css in Theme Panel > Custom Css: http://screencast.com/t/vVcxsohcj
.td_block_slide .td-post-views {
display: none !important;
}
Thanks!
Hello,
There is many new font icons comes in new version and this theme is still using 4.1.0. How to update it to 4.3.0? i cant find this line http://cdn.jsdelivr.net/fontawesome/4.1.0/css/font-awesome.min.css?ver=4.1.0
I want to update it to http://cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.min.css?ver=4.3.0
Thanks.
Hi,
For pages the content is especially designed to be used pagebuilder(Visual Composer) and add elements(blocks) there and you can set fonts for these in Theme Panel > Theme Fonts – http://screencast.com/t/x27edUpp
If you add text content to your page it should work this option to change the fonts – http://screencast.com/t/OjjRdhlgD as you can see – http://screencast.com/t/W28c0WjVS – http://screencast.com/t/VBgVSvxfe – http://screencast.com/t/WkqD28nwA
If you use text block on your page the font family can be changed for body and it will be applied also on text block content, unfortunately for font size, style you will have to use custom css as there is not option in Theme Panel – http://screencast.com/t/ol5bsfw7vd25 or change to html editor and add inline css – http://screencast.com/t/xos8wa1J2Iw9
Hope this helps!
Hi,
You will need custom work for this as this cannot be achieved only with custom css and it is not an easy task and unfortunately we cannot provide any type of custom work at this time as we work hard on development, fixes and support, sorry! You will have to call the top widget(social icons) in the header style that you use like it is located in the top menu template – http://screencast.com/t/UxLNvFQF and change the logo and banner position. I suggest to hire a freelancer to do this for you if you need this.
Thanks!
Hi,
Please try this custom css in Theme Panel > Custom Css – http://screencast.com/t/yH6suuYNoPqA as there is no option in Theme Color to change this.
@media (max-width: 767px) {
.td-header-wrap .td-header-menu-wrap-full, .td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu {
background-color: #fff!important;
}
#td-top-mobile-toggle i {
color: #222 !important;
}
.header-search-wrap #td-header-search-button .td-icon-search {
color: #222!important;
}
}
Thanks!
Hi
i cant remove from up this css
<link rel=’stylesheet’ id=’google_font_open_sans-css’
<link rel=’stylesheet’ id=’google_font_roboto-css’
<link rel=’stylesheet’ id=’google-fonts-style-css’
<link rel=’stylesheet’ id=’js_composer_front-css’
<link rel=’stylesheet’ id=’td-theme-css’
also i put in td_speedboster.php this
$this->move_style_to_footer_queue(‘google_font_open_sans-css’);
$this->move_style_to_footer_queue(‘google_font_roboto-css’);
$this->move_style_to_footer_queue(‘google-fonts-style-css’);
$this->move_style_to_footer_queue(‘contact-form-7’);
$this->move_style_to_footer_queue(‘open-sans’);
$this->move_style_to_footer_queue(‘cookie-notice-front-css’);
$this->move_style_to_footer_queue(‘js_composer_front-css’);
$this->move_style_to_footer_queue(‘td-theme-css’);
i try to eliminate css (google_font_open_sans instead google_font_open_sans-css)
but nothing happens
any suggestion?
thanks!
-
This reply was modified 11 years by
Bintmusic.
Hi,
1. There isn’t an ideal image size(aspect ratio) so it can look good on all thumbs, also depends which blocks/modules that you use and you have to do some tests and see what aspect ratio to use as. On post style 3 the image is cropped at 1068x0 as you can see here – http://screencast.com/t/RRMdhh6Fa so there is a specified width but it takes the image’s default height. You could read more about the featured image size here (it’s from Newsmag documentation but the principles are the same) – https://forum.tagdiv.com/image-size/
2. You have this issue with the featured image because of this css min-height(this css is added in case that is not used a featured image on this template, so the post title will not disappear). You can fix this using this custom css in Theme Panel > Custom Css – http://screencast.com/t/semPWvQDCw
@media (max-width: 767px) {
.td-post-template-3 .td-post-header-holder {
min-height: inherit !important;
}
}
Thanks!
Thank you very much the css code worked like a charm!
Hi,
Thank you for your help! Another problem I am facing with this technique is that the row background image does not seem to be responsive. It appears fine on a desktop browser but in a phone screen, the image does not get smaller. What kind of media queries can I use to make it responsive? I tried the Column Settings (“Responsive Options”) but that did not seem to work either.
Also, I want the row background image to have a gradient just like some of the other slide based modules in the theme. I tried assigning the class “td-image-gradient” to the image but the gradient is not applied uniformly as shown in the screenshot.
I’d like to move the text block to the bottom of the row image. I tried a few CSS changes but couldn’t get that to work either.
Appreciate the help.
Hi,
All theme style is in style.css file, so if you want to change the header style you will have to search for header, also there is a general css for header and for each style. If you don’t know how to change it I suggest to get a freelancer so do this for you as we cannot provide custom work, sorry!
Thanks!
That is strange. Why would you not add login/logout in mobile. It’s a must have (even ‘must have’ is an understatement). Registered user interactions is like a backbone for a lot of sites. I will make do with the css fix but is this being considered for the future?
I currently use NewsMag which I like but I prefer the wider format of NewsPaper. The only thing that I would miss would be the hairline borders from NewsMag. How difficult would it be to add borders to all items in NewsPaper so it looks like NewsMag? IS it just CSS stuff or does it go deeper than that.
@Fergofer00 ya resolviste el problema? podría ser algun ajuste de la base de datos que esté tomando valores de una instalación anterior
sobre el wp rocket no me había percatado jajaja, pero bueno en mi caso no me repercute mucho pues tengo mucho tráfico así que se recrean los caches enseguida aunque hayan sido borrados
@chavamx en el apartado de exluir solamente colocas style.css y listo.
saludos
Como excluimos el archivo style.css de above the fold?
Hi,
Please add “Lists” font settings for “Pages” in the theme fonts (theme panel) like you added the setting for “Posts” in the last update. For now, I have to add manually custom CSS to change font and font size of list in “Pages”.
Here’s a good start. It’s how I’ve added some opacity to the body on my site – InsideTheStar.com. This will get you started and may do the whole thing. You’ll have to check it out once applied and find any gaps, if there are any.
.td-post-template-3 .post,
.td-post-template-4 .post,
.td-post-template-6 .post,
.td-post-template-7 .post,
.td-post-template-9 .post,
.td-post-template-10 .post,
.td-post-template-11 .post {
background-color: transparent !important;
}
.td-post-template-3.post,
.td-post-template-4.post,
.td-post-template-6.post,
.td-post-template-7.post,
.td-post-template-9.post,
.td-post-template-10.post,
.td-post-template-11.post{
background: transparent !important;
}
.td-post-template-default article,
.td-post-template-1 article,
.td-post-template-2 article,
.td-post-template-5 article,
.td-post-template-8 article {
background-color: transparent !important;
}
.td-post-template-8-box,
.td-main-content-wrap,
.td-category-grid,
.td-category-header {
background: transparent !important;
}
Add those four rules to your Custom CSS in the theme panel.
Hi Sir,
I want set header, like this : social media vertical on left header, logo on center, and banner on right header. how to custom css like this link http://prntscr.com/7pwym6 ?
regards
J
As an update to this, I’ve tracked the issue down to an interaction between your CSS when handling TypeKit fonts and default WordPress embeds.
On my test site I can re-style text without problem unless I use TypeKit, at which point the widget js no longer styles the embeds. Once I remove the Typekit font reference the problem disappears.
Hi,
Please try this custom css in Theme Panel > Custom Css: http://screencast.com/t/pIhWl8tatHQf
.td-ss-main-content #ac_55600 .ac_adbox {
text-align: center !important;
}
Thanks!
Hi
Sorry for the delay, but we are a small team and we face a great deal of work.
This buttons are available only on Newspaper, but can be done with this custom css in Theme Panel->Custom Css:
.td_block_5 .block-title{
width:300px;
border-bottom:2px solid red;
}
.td_block_5 .block-title > span{
top:0;
height:30px;}
.td_block_1 .block-title{
width:300px;
border-bottom:2px solid red;
}
.td_block_1 .block-title > span{
top:0;
height:30px;}
The result should be like here: http://screencast.com/t/UxEnhnVBY http://screencast.com/t/MdZMTtpFa0k
Thanks!
Hi
By default the top menu don’t appear on mobile devices, but you can use this custom css to display the Log In/ Log out option:
@media (max-width: 767px) {
.td-header-top-menu {
display:block;
}
}
@media (max-width: 767px) {
.menu-top-container {
display:none!important;
}
}
@media (max-width: 767px) {
.td-header-sp-top-widget {
display:none!important;
}
}
@media (max-width: 767px) {
.td-header-sp-top-menu{
top:0!important;
}
}
If you want to display only the Log in/ Log out option, add this lines of code:
@media (max-width: 767px) {
.td-header-sp-top-menu .td_data_time{
display:none;
}
}
The result should be like here: http://screencast.com/t/nM8IvOr9A0
Thanks!

