-
Posts
-
Hi:
I want to style the head and text, (i.e. post title and body copy), for just the posts in the blog. I want to have control over the size, font, color, spacing, and so on without effecting anything else globally.
What are the specific CSS lines that will do that and where can I find them, (are they in “layout.css”)?
Then, if I copy that css into the “custom.css” file, will it give me the control I want by overriding the “layput.css” without modifying the “layout.css”?
Also…is there any way to change the round Gravatar in the multi-user blog to another shape like a square or square with rounded corners? I know the code, just not where to lines are that control the function. I write css, but not php.
Thanks.
Hey blaircomm!
Thank you for using the theme.
You can use the plugin firebug or google chrome’s developer tool to get the right css selectors. You can use it directly on custom.css file. For example, if you want to change the body text of single post, use this:
.single .template-blog p { font-size: 18px; color: red; font-weight: bold; }Use this for the post title:
#top .fullsize .template-blog .post-title { text-align: center; font-size: 50px; padding: 15px 0; max-width: 800px; margin: 0 auto; }Change the round container using this:
span.rounded-container { border-radius: 0; }In case you have any questions, please take some time to review all of the resources in the Theme Documentation as a lot of basic stuff like theme installation, css snippets etc are already available in there with better explanation and awesomeness. Watch some of our Video Tutorials to learn more about the different aspect of the theme. You can also search the forums for queries that has been answered before that might be related to your problem.
If you find that you still have questions after taking the time on our documentations, don’t hesitate to let us know and we will be happy to assist you. If you have any requests or you feel like giving us a warm hug? You can definitely post it on our Feature Requests page. :)
Best regards,
IsmaelThank you for your reply. I will try that.
I have another vexing issue with the blog. It has lost the capability to show “excerpt only with a read more link.” Up until this morning it has always worked perfectly. Here is what I did:
• I reset the blog page in the theme options to the page I have been using. I did this because I had neglected it before and the title would show an incorrect link on individual posts in the breadcrumbs.
• I also set the global preferences to not show title and breadcrumbs.
• I then set each post to show title and breadcrumbs.
• I rechecked the blog page (nextblog) within the blog content dialog to ensure the “show excerpt with read more link” was selected.
Now, the individual post will show the title and breadcrumbs correctly, but the main blog page has lost the capability to show only excerpts with the read more link. I have tried everything I can think of, including going back to the original settings I had–but nothing worked. This is an essential feature I need to get back somehow.
Here is the link to the blog page:
http://www.blaircomm.us/blaircomm14/nextblog/
A second blog I am just starting with identical settings works perfectly. http://novabook.us/novabookblog/blog/
Can you help me fix this issue so I can get the “excerpt with read more link” function to work again?
Thanks.
Correction: The blog just started working correctly again. It must have been some kind of server latency, which I’ve had trouble with before on Network Solutions hosting. Thankfully, it seems to be working perfect again. Thanks.
Hi:
I managed to get control of all the blog posts title and text, (body copy,) styles by using the “Quick CSS” feature. The code you supplied above did not work in the custom.css or the layout.css. None of the css files, which I edited directly, had even the slightest effect on the font styling. I find that the custom.css does not overwrite in any cases. I can only assume there is code I do not know about that is overriding it all within the heiarchy somewhere. Firebug and Chrome’s developer’s tools were not much help as I could not get granular enough to spot the specific css selectors–but I am not expert with those tools. Here is the css I used in the “Quick css” slot:
.template-blog .post-title {
font-size: 23px;
padding: 0px 0;
max-width: 800px;
margin:-20 auto;
}.template-blog p {
font-size: 13px;
line-height: 22px;
color: #666666;
font-weight: normal;
}It works globally on all blog posts, but leaves all other pages alone. There was an indent on the title which I could not spot the source of, so I had to apply a minus margin to justify it left. It easily gives me control over the posts font styling.
I also discovered that the custom blog layout must be selected under the “blog style” for the “excerpt with read-more link” function to work when using a blog content container within the page.
Thanks
– Michael
Oh…I forgot something…
This code:
span.rounded-container {
border-radius: 8px;
}…works also in the “Quick css” slot, (with and without the “span”,) however the Gravatar is still round inside the container that now I can square off. Do you know what code controls the actual Gravatar picture because it is still round only now within a square gray box. See:
http://novabook.us/novabookblog/blog/contributors-blog/
There must be a selector.
Thank you again.
– Michael
Hey!
Thank you for the update.
Regarding round image, use this:
.rounded-container, .rounded-container img { border-radius: 0; }I thought you’re trying to change the single post view. Anyway, glad you fixed the font size on blog overview page.
Best regards,
IsmaelHi!
You can use this on Quick CSS or custom.css:
#top .main_color.fullsize .template-blog .post_delimiter { border-color: #ffffff; }Adjust the post delimiter height with this:
.flex_column .template-blog .post_delimiter { margin: 0 0 20px 0; padding: 50px 0 0 0; }Best regards,
Ismael
- You must be logged in to reply to this topic.