- 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
- NewsmagtagDiv Composer Tutorial
- TutorialsFrom WPBakery to tagDiv Composer
- NewspapertagDiv Composer Tutorial
- NewspaperTheme modules and blocks
- TutorialsDefault Block Settings Guide
- NewspaperThe Mobile Theme
- NewspaperCompare theme files – Winmerge tutorial
- NewsmagBlock settings tutorial
- NewsmagLogo & Favicon
- NewsmagFooter templates
The issue looks like the fact that you’re setting .sf-menu to display: block on screens smaller than 767px. The team has designed the two menus (desktop and mobile) to both exist on the page and just hide one or the other using display: none. (Not a great way to do it in terms of SEO but they say they’re working on it.) By setting sf-menu to display:block you’re forcing it to show on mobile too.
The actual mobile menu id is #td-mobile-nav — that’s the one that slides in on the side. The little toggle icon for it is td-top-mobile-toggle. Your CSS would want to affect one of those. But are you sure you want to centre the mobile menu as well? There isn’t much to centre. 🙂
Thank you both for your suggestions. I have the following changes:
1. Lucian – Your example is how mine is configured, but the size is not fixed when the width of the window is changed. This is not a major issue, but if there is a setting I’m not using or some css code I should add to the page, please let me kno.
2. The 2/3 & 1/3 setting seems to be find for this application, so I will leave it at this setting.
3. Lucian – I don’t have a specific design in mind. I just wanted to take advantage of pre-designed functions and experiment with different color setting, buttons, etc.. for a Call To Action message (I’m not an accomplished graphics designer so a feature like this is helpful).
4. I incorporated your examples for centering the menu and expanded the spacing between the options.
5. I will make the change as you suggested.
6. This is handled as well.
Please let me know when you might have a fix for the CTA function.
Hey guys. I am using style 3 (full width logo + menu). I am also using custom CSS for centering the menu which you provided being:
.sf-menu {
display: table;
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* responsive phone */
@media (max-width: 767px) {
.sf-menu {
display: block;
float: left !important;
margin-left: 0px;
margin-right: 0px;
}
I have a different logo for the desktop logo and mobile logo. The mobile logo is smaller. Now on mobile view, it is showing the desktop view logo. It is also hiding behind the transparent header of the mobile view.
What is the issue here?
Hi Lucian,
I’ve changed the font to see if that was an issue but no luck with the block css:
Hi,
You can hide the inline ads via css. Please send me your site URL so I can inspect and provide you the custom css that you can use to achive this.
Thanks
Hi,
Use this css to change the link color and get it underlined in comments, add it in theme panel > custom css:
.comment-content a {
text-decoration: underline !important;
color: #1f9ee7 !important;
}
You can remove the text-decoration: underline !important; line if you don’t want that the links get underlined and change the color as you like.
The theme doesn’t have a feature like that, the comments are moderated from the back-end, you can try to find a plugin that dose this if exists one.
Thanks
Hi,
Add this css in Theme panel > Custom CSS:
.rev_slider_wrapper {
z-index: 0;
}
Thanks
Hi,
The menu is made using script and all the css for it it’s compressed so it’s not an easy task to modify it and you need custom work, unfortunately we cannot offer custom work as we work hard on the development, updates, fixes and support.
You can always get a freelancer from sites like: http://studio.envato.com/ if you don’t know how to do it yourself.
Thnaks
Hi,
Thanks @Kronos17!
@Rodney828 Add this css in Theme panel > Custom css and change the color as you like:
.td-page-wrap .td-grid-wrap {
background-color: antiquewhite;
}
We will think about adding an option for this in Theme Panel.
Hope this helps!
Thanks
Hi,
@Evanggie
Have you managed to install it?
Please let me know if you have any other problems, specify the issues details and send a link to your site also.
Thanks @Christopher!
Hi Lucian,
You are right, reinstalling the speed booster 2.5 fixes it (in combination with theme version 4.2).
Thanks!
Good morning Lucian,
Thank you for your css.
I’ve added some extra code however it’s still displaying “Roboto Condensed”
.td_mod_wrap .entry-title a {
font-family: ‘open-sans’,sans-serif;
color: #4c4c4c;
font-size: 18px;
line-height: 24px;
font-weight: 400;
text-transform: uppercase;
}
Hi,
Please try this css:
.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 {
color: #3daced !important;
background-color: #ffffff;
}
Remove the classes for hover if you don’t want this effect to happen when a menu item is hovered.
Hope this helps!
Thanks
Hi,
Yes, modify the font-family property with your font and just add the custom css in theme panel > custom css.
If you want this font to apply only on front page (add .home) or only for block 6 you may want to add .td_mod9 class.
This css:
.td_mod_wrap .entry-title a {
color: #222222;
font-family: ‘open-sans’,sans-serif;
font-weight: normal;
}
..will change all titles for all block regardless the page.
Hope this helps!
Thanks
Hi,
This is a common issue using the speed booster plugin, regarding theme color you can try this solution.
Regarding fonts you can try to remove the fonts you don’t use from here and see if this makes a difference.
Of course the best way would be to disable the plugin.
Also try to delete and install the speed booster plugin from the latest theme version files (4.2) I have tested this and seems that this issue don’t happen anymore.
Thanks
-
This reply was modified 12 years by
Lucian.
Another css question, which custom css code does change the link color in comments? (they are light grey now)
Further, i noticed that there is no ‘edit comment’ link for admins in the comment section. What’s the reason and how to change it?
Thanks!
You’re using W3 Total Cache – Be sure to empty all caches after selecting the Blog Style header and saving changes, then load it up and see how it works. The only other thing coming to mind would be custom CSS hard-coding the header into place, which isn’t likely.
div.td-grid-wrap { background-color: #d6d6d6; }
Add that to your custom CSS and change the color to your preference. It should be noted that there is no quick way to do this. Immediate inspection found that the pagination background remained white, and the footer background was taken over by this color change as well.
Another possibility is to search/replace #FFFFFF in the main CSS file with the color of your choosing, but this may alter anything from backgrounds, to boxes, borders, text, etc.
A theme panel option to set the background color of the content area would be nice. Until then, though, it’s a custom job. Use the Inspect tool in FireFox and Chrome to identify the classes/IDs of the areas that you want to change, then add the adjusted rules to your custom CSS.
Yes, the advanced css is very helpful. I think I found a nice solution by using the big slider on the desktop homepage and a taller version of the regular slider on the mobile homepage.
Thanks for the help. I love all the options with this theme.
You need to install the zip file for just the theme, not the entire package with docs and support information. Try the smaller zip file inside the big zip, or the second download from your themeforest download page which is just the installables.
Hi Lucian,
Add the code, worked out perfect!
Great support again, thanks!
JBH
I am trying intall it, but the returns an error “style.css.”
What Happened?
Hi,
Please try to add it like this:
body {
font-size: 16px !important;
}
Please let me know if it’s working.
Thanks!
-
This reply was modified 12 years by
Lucian.
Hi,
Please send us your site’s URL so we can check this, also do you want the height of the slider to be modified only on desktop screens?
If so you would have to add the css inside this media screen so that it will apply only when your site it’s viewed from screens with the minimum width of 1200px:
* responsive monitor */
@media (min-width: 1200px) {
add your custom css for the slider here
}
Add this in the Custom css filed in Theme Panel.
You could also use the advanced css field to add css only for desktop, tablet or phone: http://screencast.com/t/SnoYInU8
Hope this helps!
Thanks