- NewsmagHeader styles
- NewsmagHeader ads
- NewsmagtagDiv Composer Tutorial
- NewsmagCategory templates
- NewsmagSmart list ads
- NewsmagWeather Widget
- NewsmagInstagram widget
- NewsmagPage Menu
- NewsmagMain menu
- NewsmagTop bar templates
- NewsmagLogin – how to enable the user registration
- NewsmagLogo & Favicon
- NewsmagFooter templates
- NewsmagCategory grid styles
- NewsmagCategory top post styles
- NewsmagHow category settings work
- NewsmagTheme colors introduction
Hi,
You can select header style that you want from Theme Panel > Header: http://screencast.com/t/7EbtHHZpV
You can use a header with full logo, if this is what you mean. You can upload your logo from here: http://screencast.com/t/v81AEgFq1orr
Also our documentation is useful: https://forum.tagdiv.com/newsmag-documentation/
Please provide more details is this is not what you mean, a screenshot will helps also your site URL!
Thanks!
Hi.. Thanks!
But after removing the slider their is spacing between the sticky header and the content area…. How can i remove that spacing?
Thanks!
Hi,
You can use custom css for this: http://screencast.com/t/Eak92erw
.td-style-8-logo-wrapper .td-logo img {
max-height: 48px !important;
}
.td-header-style-8 .menu-item{
max-height: 48px !important;
}
.td-header-style-8 .menu-item a{
max-height: 48px !important;
}
.td-header-style-8 #td-top-search{
max-height: 48px !important;
top: 0px;
}
.td-header-style-8 .td-li-wrapper-menu .sf-menu > li > a .menu_icon{
top: 10px !important;
}
.td-header-style-8 .td-li-wrapper-menu .sf-menu > li > a {
height: 51px!important;
line-height: 50px !important;
}
.td-header-style-8 .td-li-wrapper-menu .sf-menu > li > a .sf-sub-indicator{
top: 26px!important;
}
.td-header-style-8 {
position: relative;
height: 51px !important;
}
.td-header-style-8 .td-li-wrapper-menu .sf-menu li:hover ul, .td-header-style-8 .td-li-wrapper-menu .sf-menu li.sfHover ul{
top: 55px;
}
.td-style-8-menu-wrapper .header-search-wrap .dropdown-menu{
top: 46px !important;
}
Please adjust it like you wish.
Thanks!
Hi,
Unfortunately header style 3 and 6 use the same logo also on mobile view. It was initially created like this but we have this on our list and we will think to another implementation. Sorry for inconvenience!
Thanks!
Hi,
I have the single line header (Style 8 ) enabled & have it set to sticky.
When you first load up a page, the header is vertically large (around 80 px in height) , but once you start scrolling , the header turns sticky and looks smaller and much more elegant ( around 50 px in height).
I want to have that “scrolling/ elagant” single header(50 px) to show up on top of the page instead of the original 80 px one.
I am very happy to play / modify code if needed .
and can provide you site & FTP access details if needed.
Cheers,
Wissam
Does anyone know how to prevent the menu bar from expanding? I feel like this should be a quick thing to fix in css, but I’m not exactly sure what to change, I tried changing a couple of top-header-menu rules, but they didn’t work?
If anyone can shed some light on this I’d appreciate it.
Thanks!
I have just started working on my blog. My knowledge of code is limited, but I am struggling through some customizations.
The header appears to automatically resize itself in the program. It is much too small. In order to try and overwrite this I posted a new image to server and renamed it with old resized file’s name. I have refreshed all browsers several times while customizing the code. Firefox randomly grabbed the old resized file and renamed it, replacing the larger logo. I don’t understand what caused it to update or how to prevent it from updating.
Can anyone help with this? Also how can I control the padding under the header (or over the menu bar)?
Any advise would be greatly greatly appreciated!
One more possible mod for the functions.php file.
If you are *not* using the next / previous story options, or/and also want to ensure that is removed from your header meta for some reason, you can use this in functions.php to remove the next/prev from the header data:
remove_action(‘wp_head’, ‘adjacent_posts_rel_link_wp_head’, 10, 0 );
I personally remove those since they don’t serve a purpose for most things. I think Yoast SEO has this as option, but why rely on a plugin to do something you can do yourself 🙂
Hi,
When you look at my site (http://dawg.christianinternethosting.com/) when the screen is under 600px wide, you can see two menu icons. I wanted to remove the one on the far right. So, using Inspect Element I added the below CSS to my Custom CSS field in the Theme Panel:
@media only screen and (max-width: 600px) {
#mega-menu-wrap-header-menu-10 .mega-menu-toggle + label { visibility: hidden; }
}
This hides the far right icon fine, but when you click on the far left icon it pulls out the menu, but the menu is gone. It is hidden along with the far right icon.
Can you tell me what I am doing wrong please? Thanks 🙂
Hi,
1. For contact page and advertising: http://screencast.com/t/K3fIs9okOJ – http://screencast.com/t/IeW96409rfH
@media(min-width:768px){
.page .header-content-rec .td-a-rec-id-header{
margin-bottom: 20px;
}
}
.home .header-content-rec .td-a-rec-id-header{
margin-bottom: 0px!important;
}
2. For category page that use that ad with another class like above try to use !important: http://screencast.com/t/yybZNKJIL – http://screencast.com/t/VQxm1RHB
@media(min-width:768px){
.archive .header-content-rec .td-g-rec-id-header{
margin-bottom: 20px !important;
}
}
Thanks!
<!– Style compiled by theme –>
<style>
.td-menu-header .td-sp,
.sf-sub-indicator{
background-image: url(‘http://cdn.rnbjunk.com/wp-content/themes/Newspaper/images/header/elements-menu.png’);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.td-menu-header .td-sp, .sf-sub-indicator{
background-image: url(‘http://cdn.rnbjunk.com/wp-content/themes/Newspaper/images/header/elements-menu@2x.png’);
}
}
</style>
<!– JS generated by theme –>
<script>
var td_blocks = []; //here we store all the items for the current page
//td_block class – each ajax block uses a object of this class for requests
function td_block() {
this.id = ”;
this.block_type = 1; //block type id (1-234 etc)
this.atts = ”;
this.td_cur_cat = ”;
this.td_column_number = ”;
this.td_current_page = 1; //
this.post_count = 0; //from wp
this.found_posts = 0; //from wp
this.max_num_pages = 0; //from wp
this.is_ajax_running = false;
this.header_color = ”;
this.ajax_pagination_infinite_stop = ”; //show load more at page x
}
var td_ad_background_click_link=””;
var td_ad_background_click_target=””;
var td_ajax_url=”http://www.rnbjunk.com/wp-admin/admin-ajax.php”;
var td_get_template_directory_uri=”http://www.rnbjunk.com/wp-content/themes/Newspaper”;
var tds_snap_menu=”snap”;
var tds_header_style=””;
var tds_mobile_swipe=””;
var td_search_url=”http://www.rnbjunk.com/search/”;
var td_please_wait=”Please wait…”;
var td_email_user_pass_incorrect=”User or password incorrect!”;
var td_email_user_incorrect=”Email or username incorrect!”;
var td_email_incorrect=”Email incorrect!”;
var tds_more_articles_on_post_enable=””;
var tds_more_articles_on_post_time_to_wait=””;
var tds_more_articles_on_post_pages_distance_from_top=”0″;
var tds_theme_color_site_wide=”#4db2ec”;
</script>
<script type=”text/javascript”>
/* <![CDATA[ */
var wpNotesIsJetpackClient = true;
/* ]]> */
</script>
</head>
<body class=”home page page-id-41827 page-template page-template-page-homepage-loop page-template-page-homepage-loop-php logged-in admin-bar no-customize-support td-full-layout wpb-js-composer js-comp-ver-4.4.2 vc_responsive”>
Now It’s better. but the color is blu. My question is, can i change colors in a easier way bypassing that panel?
Hi,
Please add an } to the above code this is correct(I forgot to close it, sorry for this):
@media(max-width:767px){
.archive .header-content-rec .td-a-rec-id-header{
margin-bottom: 0px;
}
}
Also please try this custom css for your issue, this ad has another class: http://screencast.com/t/naY6IYUoh
.archive .header-content-rec .td-g-rec-id-header{
margin-bottom: 20px;
}
@media(max-width:767px){
.archive .header-content-rec .td-g-rec-id-header{
margin-bottom: 0px;
}
}
Hope this helps!
Hi,
Please reduce margin bottom value on mobile view: http://screencast.com/t/GPdwCBisWwY
@media(max-width:767px){
.archive .header-content-rec .td-a-rec-id-header{
margin-bottom: 0px;
}
}Thank you!
Hi,
Please use this custom css for post page in Theme Panel > Custom Css: http://screencast.com/t/kL9gKsaZPW
.single .header-content-rec .td-a-rec-id-header{
margin-bottom:20px;
}
Also for category’s page: http://screencast.com/t/C63i9hYkj
.archive .header-content-rec .td-a-rec-id-header{
margin-bottom: 20px;
}
Thanks!
working sir…
can help me for make flat line on MENU bottom sir? because i see any shadow on bottom line
http://4.bp.blogspot.com/-rffPVnYlKaw/VOb78ssSoeI/AAAAAAAAADE/nql-jEarC2M/s1600/header%2Bcustom.jpg
Thanks
Hi,
Please use this custom css in Theme Panel > Custom Css: http://screencast.com/t/Kh63c2qFSPZf
.td-full-layout .td-header-menu-wrap{
border-bottom: 1px solid red;
}
.td-full-layout .td-menu-background{
border-top: 1px solid red;
border-bottom: 1px solid red;
}
Result: http://screencast.com/t/70etvMBdN
You can change top-menu background to white from here: http://screencast.com/t/QtvuMhelHMB and also text color from Theme Panel > Custom Typography > Menus: http://screencast.com/t/3e4sqEMDc4f
Thanks!
Hi,
Unfortunately there is no social widget to be added with VC or from Widgets area. Sorry for inconvenience!
You can enable social network from Theme Panel > Header: http://screencast.com/t/8B9CeVcMfgQ also will appear in footer if you use Column 1 predefined content: http://screencast.com/t/YRypz6ORF
Thanks!
Hi,
Please try this custom css in Theme Panel > Custom Css: http://screencast.com/t/WT4fMfmQI
.header-logo-wrap{
float: right;
margin-left: 0px!important;
}
.header-logo-wrap img {
margin-left: 0px;
}
.td-a-rec-id-header {
left: 0 !important;
}Thanks!
Hi,
1. For Classic Block stack we made a special header, this one http://screencast.com/t/FEoXVhLMpcv and in combination with other headers is not guaranteed that everything will work fine.
Anyway if you want to use it like this please can try this custom css in for logo:
.header-logo-wrap img{
display: table;
margin-right: auto !important;
margin-left: auto !important;
}
2. Also for borders:
.blog-stack .td-menu-background{
border-bottom:none;
border-top: none;
}
3. That option were removed because we change grid and it won’t be available.
That is page padding, you can try to remove that with css:
.td-page-wrap .td-grid-wrap{
padding: 0px;
}
.td-page-wrap .td-grid-wrap .container-fluid{
padding: 0px;
}
Try to inspect with Chrome and see where you have padding.
4. You can use TagDiv gallery on full width post(without sidebar):
Post settings: http://screencast.com/t/eYQ0RfJ87
Result: http://screencast.com/t/802x12Md
Thanks!
Hi,
Please use this custom css: http://screencast.com/t/GXij7S2xijYf – http://screencast.com/t/9iaB9bp4 – http://screencast.com/t/F5P26hYkx7H
.td-header-main-menu.td-affix {
top: 60px;
}
.admin-bar .sbNavIframe {
top: 32px;
}
.admin-bar .td-header-main-menu.td-affix {
top: 92px;
}
@media screen and (max-width: 600px){
#wpadminbar {
position: fixed;
}
}
Also on mobile view: http://screencast.com/t/JnxB7M8u – http://screencast.com/t/O2oRyw0gOfxN
Maybe you will have to use !important
Thanks!
Hey guys, I was trying to find the exact code that allows the category description from the Posts > Categories > Description to display correctly on the search engine. Right now I was using
<?php echo category_description( $category_id ); ?>
in the header.php but it was displaying the main websites description for all categories in the Google search results. What is the code and where would I place it for this theme, and for a plain default theme (for testing purposes). Thanks!
Yep, here’s the code – http://pastebin.com/nDRpQgHg
All javascript, loads a lot like an ad. Trying it out where you suggested on header style 4 now. Will let you know how it works.
I’ve deleted from style.css, but still having code on the page:
<!– Style compiled by theme –>
<style>
.block-title a,
.block-title span,
.td-tags a:hover,
.td-scroll-up-visible,
.td-scroll-up,
.sf-menu ul .current-menu-item > a,
.sf-menu ul a:hover,
.sf-menu ul .sfHover > a,
.sf-menu ul .td-menu-item > a:hover,
.td-rating-bar-wrap div,
.iosSlider .slide-meta-cat,
.sf-menu ul .current-menu-ancestor > a,
.sf-menu ul .current-category-ancestor > a,
.td-404-sub-sub-title a,
.widget_tag_cloud .tagcloud a:hover,
.td-mobile-close a,
ul.td-category a,
.td_social .td_social_type .td_social_button a,
.dropcap,
.td-forum-category-title .td-forum-category-name,
.td_display_err,
.td_block_mega_menu .td-ajax-next-page:hover,
.td_block_mega_menu .td_ajax-prev-page:hover,
.post-via span,
.td_wrapper_video_playlist
.td_video_controls_playlist_wrapper
{
background-color: #6e61b0;
}
.block-title,
.sf-menu li a:hover,
.sf-menu .sfHover a,
.sf-menu .current-menu-ancestor a,
.sf-menu .current-category-ancestor a,
.header-search-wrap
.dropdown-menu,
.sf-menu > .current-menu-item > a,
.ui-tabs-nav,
.woocommerce .product .woocommerce-tabs ul.tabs,
.td-forum-list-head,
.td-login-panel-title
{
border-color: #6e61b0;
}
.widget_price_filter .ui-slider-handle,
.td_wrapper_video_playlist .td_video_currently_playing:after
{
border-color: #6e61b0 !important;
}
.author-box-wrap .td-author-name a,
blockquote p,
.page-nav a:hover,
.widget_pages .current_page_item a,
.widget_calendar td a,
.widget_categories .current-cat > a,
.widget_pages .current_page_parent > a,
.td_pull_quote p,
.page-nav-post a:hover span,
.td-forum-last-comment-content .td-forum-last-author,
.td-topics-title-details a,
.td-posted-in a
{
color: #6e61b0;
}
.woocommerce .button,
.woocommerce .form-submit #submit,
.widget_price_filter .ui-slider-handle,
.jetpack_subscription_widget input[type=”submit”],
.pp_woocommerce .pp_close,
.pp_woocommerce .pp_expand,
.pp_woocommerce .pp_contract,
.pp_woocommerce .pp_arrow_previous,
.pp_woocommerce .pp_arrow_next,
.pp_woocommerce
.pp_next:before,
.pp_woocommerce .pp_previous:before,
#bbpress-forums .button
{
background: #6e61b0 !important;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.bbp-template-notice,
.td-reply-list-header
{
border-color: #6e61b0 !important;
}
.woocommerce .woocommerce-message:before,
.woocommerce .woocommerce-info:before,
.td-login-button
{
background-color: #6e61b0 !important;
}
.buddypress #buddypress div.dir-search input[type=”submit”],
.buddypress #buddypress .message-search input[type=”submit”],
.buddypress #buddypress .item-list-tabs ul li.selected a,
.buddypress #buddypress .generic-button a,
.buddypress #buddypress .submit input[type=”submit”],
.buddypress #buddypress .ac-reply-content input[type=”submit”],
.buddypress #buddypress .standard-form input[type=”submit”],
.buddypress #buddypress .standard-form .button-nav .current a,
.buddypress #buddypress .standard-form .button,
.buddypress #buddypress input[type=”submit”],
.buddypress #buddypress a.accept,
.buddypress #buddypress #activate-page .standard-form input[type=”submit”],
.buddypress #buddypress .standard-form #group-create-body input[type=”button”],
.post-password-required input[type=”submit”]
{
background: #6e61b0 !important;
}
.buddypress #buddypress .groups .item-meta,
.bbp-forum-title:hover,
.td_login_tab_focus,
.block-mega-child-cats a.cur-sub-cat
{
color: #6e61b0 !important;
}
.page-nav .current,
.page-nav-post span
{
background-color: #6e61b0;
border-color: #6e61b0;
}
.wpb_btn-inverse,
.ui-tabs-nav .ui-tabs-active a,
.post .wpb_btn-danger,
.form-submit input,
.wpcf7-submit,
.wpb_default,
.woocommerce .product .woocommerce-tabs ul.tabs li.active,
.woocommerce.widget_product_search input[type=”submit”],
.more-link-wrap,
.td_read_more {
background-color: #6e61b0 !important;
}
.header-search-wrap .dropdown-menu:before {
border-color: transparent transparent #6e61b0;
}
.td-mobile-content .current-menu-item > a,
.td-mobile-content a:hover
{
color: #6e61b0 !important;
}
.category .entry-content,
.tag .entry-content,
.td_quote_box
{
border-color: #6e61b0;
}
.td-timeline-block-title {
background-color: #6e61b0 !important;
}
.td-timeline-wrapper-links {
border-color: #6e61b0 !important;
}
.td-timline-h1-link span {
background-color: #6e61b0 !important;
}
.td-page-title .td-search-query {
color: #6e61b0;
}
.td-sbig-title-wrap .td-sbig-title,
.td-slide-item-sec .td-sbig-title-wrap,
.td-big-grid-title .td-sbig-title-wrap
{
background-color: rgba(110, 97, 176, 0.7);
}
::-moz-selection {
background: #a093e2;
color: #fff;
}
::selection {
background: #a093e2;
color: #fff;
}
a, .widget_recent_comments .recentcomments .url {
color: #6e61b0;
}
.cur-sub-cat {
color:#6e61b0 !important;
}
.blog-stack .sf-menu .current-menu-item a,
.blog-stack .sf-menu .current-menu-parent .current-menu-item a,
.blog-stack .sf-menu .current-menu-parent > a,
.blog-stack .sf-menu > li:hover > a,
.blog-stack .sf-menu ul li:hover > a,
.blog-stack .td-post-text-content .more-link-wrap:hover a,
.blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat,
.blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat:hover,
.blog-stack .td-mega-menu .block-mega-child-cats a:hover,
.blog-stack .td_mod_mega_menu:hover .item-details a,
.blog-stack .sf-menu .current-menu-ancestor > a,
.blog-stack .sf-menu .current-category-ancestor > a
{
color:#6e61b0;
}
.blog-stack .sf-menu > .current-menu-ancestor > a,
.blog-stack .sf-menu > .current-category-ancestor > a
{
color:#6e61b0 !important;
}
.blog-stack .sf-menu ul li {
background-color: #6e61b0;
}
.blog-stack .td-post-text-content .more-link-wrap a:hover {
outline-color: #6e61b0;
}
a:hover,
.widget_recent_comments .recentcomments .url:hover
{
color: #ed4fef;
}
.td-menu-header .td-sp,
.sf-sub-indicator{
background-image: url(‘http://cdn.rnbjunk.com/wp-content/themes/Newspaper/images/header/elements-menu.png’);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.td-menu-header .td-sp, .sf-sub-indicator{
background-image: url(‘http://cdn.rnbjunk.com/wp-content/themes/Newspaper/images/header/elements-menu@2x.png’);
}
}
</style>
Hi,
Please edit menu-top.php and add this code: http://screencast.com/t/FLiykdlZn
I paste the code also in pastebin: http://pastebin.com/4820ncGg
<div id="td-top-search">
<!-- Search -->
<div class="header-search-wrap">
<div class="dropdown header-search">
<a id="search-button" href="#" role="button" class="dropdown-toggle " data-toggle="dropdown"><span class="td-sp td-sp-ico-search"></span></a>
<div class="dropdown-menu" aria-labelledby="search-button">
<form role="search" method="get" class="td-search-form" action="<?php echo home_url( '/' ); ?>">
<div class="td-head-form-search-wrap">
<input class="needsclick" id="td-header-search" type="text" value="<?php echo get_search_query(); ?>" name="s" autocomplete="off" /><input class="wpb_button wpb_btn-inverse btn" type="submit" id="td-header-search-top" value="<?php _etd('Search')?>" />
</div>
</form>
<div id="td-aj-search"></div>
</div>
</div>
</div>
</div>Also you have to use some css code in Theme Panel > Custom Css: http://screencast.com/t/A5oAS0QV
.td-header-menu-wrap .span3{
position: relative;
}
.td-header-menu-wrap #td-top-search {
right: 0px;
}
.td-header-menu-wrap .header-search-wrap #search-button .td-sp-ico-search{
top: 0px;
left: 0px;
}
.td-header-menu-wrap .header-search-wrap .dropdown-menu{
top: 30px;
left: -310px;
}Result: http://screencast.com/t/7wZu0KKFI
After that if this work you can delete search code from main menu: http://screencast.com/t/luqpz3zxFv
Thanks!
I’ve been playing around with this since Newspaper and never was able to get it quite right.
I’ve got a bar I need to add to the top of the site for sponsors and such. It’s full width and 60px tall. The problem I keep running into is wherever I add the bar (Theme panel under custom javascript, or in the header file inside the main wrapper or before it), it shows up but breaks some part of the layout.
Is there a place to add this bar that won’t break the layout around the admin bar and sticky header menu? I can deal with some goofy space when the admin bar shows up, but the sticky menu disappears behind the top bar because it’s still going to the top of the browser window.
Thanks.
