- 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 tried this but the top menu is just hanging in the middle now – not sure it’s picking up the custom css?
martinmuir.com/blueventures/
Hi,
Is not styled.
Add this CSS in Theme panel -> Custom CSS
.wpb_separator {
background-color: #B6B6B6;
height: 2px;
}
hi,
Christopher is right, play with the theme colors and the css a little bit, also in version 3.6 we have added color (and some other options) in Custom Typography.
Thanks for you message.
Radu A.
You could likely achieve this with the color settings in the theme panel and some very minor custom CSS, to do the “video gamer” kind of look to the site. I thought about this myself, and actually was playing around with changing the colors (I made the menu bar a dark purple to see what would happen…. kind of cool). But yeah, I’m sure some folks would like a one-click “reverseo changeo” 🙂
Hi,
I’m sure that can be fixed with a CSS but please show me a link to see the issue or a screenshot.
Thanks @Christopher Simmons for your help!
Hi,
1. http://screencast.com/t/dHVqgSdA
2. Add this CSS in theme panel -> Custom CSS
.td-header-menu-wrap .menu-top-container {
margin-right: 33px;
}
.td-header-menu-wrap .span9 {
text-align: right;
}
hi,
try to use this css:
.td-g-rec-id-header .adsbygoogle {
position: relative;
top: 13px;
}
here: http://screencast.com/t/hOhNznJcX
Thanks for you message.
Radu A.
Hi,
At this moment is only a template and don’t have parameters to filter the posts there.
The file where the timeline template are coded is loop-timeline.php you can add there some condition manualy like if you are on a particular page use this filter
if (is_page(2)) {
query_posts($query_string . '&cat=1,2,3');
}
like here: http://screencast.com/t/SCoFpLdxV
Make some conditions for each timeline page.
To add a thumbnails add this code: the_post_thumbnail('thumbnail'); like here: http://screencast.com/t/SblP5k4aP6K
then add this CSS in Theme panel -> Custom CSS
.timeline .wp-post-image {
padding-right: 10px;
width: 40px;
}
Thanks for the message!
hi,
retina logo is for Apple iPad and iPhones, but you can use the same image for both of them.
the best place to put your custom css is where is get outputted in the source of the page (like: http://screencast.com/t/0ShwzaJZ) and not in an external css file.
Thanks for you message.
Radu A.
I think you need to look at a published post on your site, since the jetpack code is inserted on view from JetPack, then view source and see what div tag they wrap their buttons in, then try putting an adjustment to that into the custom css box in the theme panel. Since I don’t use Jetpack and you didn’t include a link to a sample page on your site, I won’t be much additional help.
Marius is the wizard…. I’m just visiting 😉
Also, where is the optimal place to put the edited .CSS ?
Right now i have added some custom css in the “theme panel” but also in “apperance -> Edit css” could this be slowing my site down ?
Thanks for the quick reply – it sounds a bit beyond me, I can tweak CSS spacing etc but not much other experience. I looked at the Single Post page in the Editor (‘Newspaper: Single Post (single.php)’)if that’s what you meant but couldn’t see much I recognised.
Will wait for Marius..
Probably need to look at the post page source code, then put in some custom CSS for the style used by JetPack for the social buttons, since JetPack is an external system and not part of the theme itself.
Marius will likely be happy to share a snippet of code for that, but you could experiment with that yourself right now, obviously.
Hope that helped.
Goodmorning marius. Of course i have the date post. but when i make a post “review” the date replaced by the Stars. When i hide the stars with css block:none trick, the date doesn’t appear.
Check here
Review Post: http://bit.ly/1pNYOtz
Non Review Post: http://bit.ly/1jXCMax
-
This reply was modified 12 years by
saggel.
Add this CSS in Theme panel -> Custom CSS
.td-older-pagination a {
background-color: #4DB2EC;
display: block;
font-family: 'Roboto',serif;
font-weight: bold;
height: 35px;
margin-bottom: 40px;
text-align: center;
color: #FFFFFF;
line-height: 33px;
}
Hi,
Add this in Theme panel -> Custom CSS
.comment-list .comment:last-child {
border-bottom: 1px solid #F5F5F5;
}
hi,
use this css code :
.sf-menu > .current-menu-item > a, .sf-menu > .current-menu-ancestor > a, .sf-menu > li > a:hover, .sf-menu > .sfHover > a {
border-bottom: 0px !important;
}
here : http://screencast.com/t/FPC6kE3Z
Thanks for you message.
Radu A.
i make this marius, and i remove the stars on homepage with this (http://screencast.com/t/4EM0y4jrX3) but inside of each review post, under the title in place of dates, appears the stars! http://grab.by/vDXk
if i add this code in Custom CSS panel
.post .entry-review-stars {
display:none;
}
The stars disappears, but the date doesn’t appear. http://grab.by/vDWS
Can you tell me how to fix it?
Hi,
1. For me look fine: http://screencast.com/t/f4nDxD0z9rGa what is wrong there?
3. Remove the // in loop-single.php http://screencast.com/t/OjJNnEQ4G
5. Add this CSS it in Theme panel -> Custom CSS
.author .td-sub-title {
font-size: 20px;
}
6. Add this CSS it in Theme panel -> Custom CSS
.author .td-sub-title {
position: relative;
top: -18px;
}
hi,
we support 6 style of headers : http://screencast.com/t/15ReSchzJq0
1. use this css to position the logo in the left top corner:
.header-logo-wrap a img {
position:absolute ;
left:0 ;
top:0 ;
margin: 0;
width: 200px;
}
2. use this css to reduce the size of the item in the menu and move it to the right:
#menu-td-header-1{
padding-left: 15px;
}
#menu-td-header-1 li a {
font-size: 11px !important;
}
in version 3.6 that we are releasing soon the theme has the ability to use custom fonts. Also in version 3.6 from the Theme panel -> Custom Typography you will have the ability to change the fonts, size , color of the items in the menu. you should check it out. Be sure to update your site before you update.
3. use this css for top social :
.topsl .td_block_wrap.td-social-wrap.td-social-wrap-32 {
position:absolute !important;
right:-35px !important;
top:0 ;
margin: 0 !important;
}
you can add all the css here: http://screencast.com/t/BdpSQk3kx
Thanks for you message.
Radu A.
Hi,
Add this code
<div class="row">
<div class="span12 td-header-style-1">
<?php echo td_global_blocks::get_instance('td_ad_box')->render(array('spot_id' => 'header')); ?>
</div>
</div>
like here: http://screencast.com/t/ufwgeKoCb
Add this CSS in Theme panel -> Custom CSS
.td-g-rec-id-header .adsbygoogle {
top: 10px;
right: 0px;
left: 0px;
margin: 0 auto;
position: absolute;
}
.td-g-rec-id-header {
height: 90px;
}
Thanks for the message!
Hi,
Add this CSS in Theme panel -> Custom CSS
.sf-menu > li > a {
line-height: 52px;
}
Thanks for the message!
Can someone help me fix the header?
1. I want the logo smaller in the left corner
2. The menu seems to spread out far to the right. I want it smaller and be able to change the font too.
3. I want the social icons in the far right corner.
Please help. I do not have CSS or any code editing experience, so any in depth help is appreciated.
Hey guys,
Just wanted to request if for future updates, on style.css you could use dppx for retina media-query when calling icons sprite. It has been giving us some headaches every time we update the theme mobile nav and search icons disappeared because it was placing bigger icons instead of higher resolution icons.
Chrome reports:
Consider using ‘dppx’ units instead of ‘dpi’, as in CSS ‘dpi’ means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual ‘dpi’ of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)
We solved it by adding dppx after the number 2 on line 10798
@media only screen and (-webkit-min-device-pixel-ratio: 2dppx), only screen and (-moz-min-device-pixel-ratio: 2dppx), only screen and (min-device-pixel-ratio: 2dppx) {
Thanks
Hi,
Do you want the default to be like this? http://screencast.com/t/qzWnJTJu or full but with text-align left?
To make the default one as left align just add this CSS in theme panel -> Custom CSS
blockquote p {
text-align: left !important;
}
Thanks for the message!