Suburbia Theme Help

  • Author
    Posts
  • #837136

    Is there are a way to change the text under the navigation?
    On the demo it says next, but on mine it says Older Posts. I can’t see the text in the CSS and I’m not sure where this is to change it.

    Also I’ve added the Milestone widget and can’t seem to edit the colour or find it in the CSS either.

    Any help would be much appreciated, thanks!

    The blog I need help with is origininteriors.org.

    #837530

    Is there are a way to change the text under the navigation?

    At WordPress.com, we have a plan to make the previous/next navigation on all themes consistent and we labeled them “older posts” and “newer posts.”

    You can use the following workaround to try to update the text using CSS:

    .nav-previous a {
    visibility: hidden;
    }
    .nav-previous a:before {
    visibility: visible;
    content: "Previous posts";
    }
    #837531

    I’ve added the Milestone widget and can’t seem to edit the colour or find it in the CSS.

    To change the header background color, border, and font color for the Milestone Widget, add this CSS:

    .milestone-header {
    background-color: darkcyan;
    }
    
    .milestone-countdown, .milestone-message {
    background-color: white;
    border: 1px solid darkcyan;
    color: darkcyan;
    }

    Adjust the color name as necessary.
    http://www.w3.org/TR/css3-color/#svg-color

    #837549

    Thanks so much for all the help :). I’ve just got a few more questions…

    For the previous, next navigation, I can’t click on the word Previous Posts when I change the CSS, it doesn’t have a hover colour either. Is there something else I need to add into the coding?

    For the milestone widget, is it possible to change the design style or font as on the the Forever theme it has a completely different look and I would like to try and create something closer to that i.e. less blocky. Is that possible? http://en.support.wordpress.com/widgets/milestone-widget/

    Finally (I think) I’m trying to get the sticky picture design the same on each page, so 2 large ones and 5 below = 7 posts on each page. I’ve tried to make the top two posts on the 2nd page sticky, but then they show up on the 1st page under the first 2 sticky posts. On the demo, it had different ones on each page and each page looking similar in design, but I can’t seem to change anything in settings and there is nothing in the CSS about Sticky Posts.

    If possible, I would like to create a rule that makes the 2 most recent posts on each page (i.e. 2 most recent out of 7) to be sticky so that I don’t have to go round editing the sticky posts whenever I write a new post. Not sure if you can create rules like that in CSS?

    #837564

    I can’t click on the word Previous Posts when I change the CSS

    Hmm, I see that too. Try adding “display: block;” so the final CSS would be this instead of what I posted earlier:

    .nav-previous a {
    display: block;
    visibility:hidden;
    }
    
    .nav-previous a:before {
    visibility:visible;
    content:"Previous posts";
    }
    #837565

    For the milestone widget, is it possible to change font to something less blocky?

    You can set the font in the milestone widget using the font-family property. Here is an example so you can see how it works:

    .milestone-header, .milestone-countdown {
    font-family: serif;
    }

    You should adjust the font stack as described in this article:
    http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

    #837566

    I’ve tried to make the top two posts on the 2nd page sticky, but then they show up on the 1st page under the first 2 sticky posts.

    I’m not exactly sure which pages you mean here. It would be awesome if you always included the page links when asking questions. For the 1st page, I think you mean home page. For the 2nd page, the page when you click the previous posts link?

    Note that you cannot change how things function on WordPress.com blogs using CSS, you can only use CSS to change how existing elements look. Sticky posts work to take those posts out of the normal order and post them at the top of any list. This means it’s expected for the sticky posts to always show up on any page that displays a list of posts.

    You should only ever have one or a few sticky posts at most, and you should set them for the entire blog at once. You cannot set different sticky posts for different areas or pages.

    #837570

    I’m trying to make my Suburbia blog look like the beautiful sample you show here: http://suburbiademo.wordpress.com/
    But I’m not having any luck at all.
    How do you get the 2 featured columns? All I have managed so far is this:
    http://differentstrokes4art.wordpress.com/

    #837571

    Thank you!
    The CSS for the previous posts works fine now.

    For widget I was hoping to edit the design of the box, not just the font so that is looks more like the Forever theme example here http://en.support.wordpress.com/widgets/milestone-widget/

    For the sticky posts, sorry I forgot to put the links, but yes I did mean homage and previous post page. On the demo, the homepage has 2 large pictures for the first posts (they called them sticky) and on every subsequent post page they have two large pictures of the posts at the top of the page. Demo examples…

    Homepage
    http://wpshower.com/demo/?theme=suburbia
    Previous Posts
    http://wpshower.com/demo/?theme=suburbia

    I would like to be able to recreate this or at least have the right number of posts on the previous page to cover the space correctly (i.e. 9).
    Currently my post number is set to 7 per page as my homepage has 2 sticky and 5 small, however if I can’t have stickies on the subsequent pages I will need to be able to show 9 post summaries to fill the space. Is this possible? As otherwise the demo is very misleading and I can’t have each post page of the blog looking the same as it shows. Example pages…

    Homepage
    http://origininteriors.org

    Previous Posts
    http://origininteriors.org/page/2/

    Really appreciate all your help, thank you! :)

    #837583

    Dear Happiness Engineer and Origin Interiors,
    I think I figured it out. Thanks for your information.
    Origin Interiors your website is beautiful!

    #837593
    #837642

    psunkel
    Member

    Im having a similar problem only that once I make my 2 feature posts sticky it seems to leave two empty spaces on the right of my cotton jones article, here is a link: http://hype-mag.com/

    How do I make it so that two previous posts come out onto the front page so I dont have blank spots.

    I have CSS but I am very new to this so please help me by speaking to me like you are teaching a child to do this.

    Thanks in advance

    #837643

    timethief
    Member

    How many posts have you set to display here? > Settings > Reading

    #837644

    psunkel
    Member

    Ah I was able to fix it. Thanks for your help

    #837645

    timethief
    Member

    Hello again,
    I’m glad I helped you and you’re welcome. :)

    #837675

    Hi designsimply

    Are you able to help with my previous query please?

    For widget I was hoping to edit the design of the box, not just the font so that is looks more like the Forever theme example here http://en.support.wordpress.com/widgets/milestone-widget/

    For the sticky posts, on the demo, the homepage has 2 large pictures for the first posts (they called them sticky) and on every subsequent post page they have two large pictures of the posts at the top of the page. Demo examples…

    Homepage
    http://wpshower.com/demo/?theme=suburbia
    Previous Posts
    http://wpshower.com/demo/?theme=suburbia

    I would like to be able to recreate this or at least have the right number of posts on the previous page to cover the space correctly (i.e. 9).
    Currently my post number is set to 7 per page as my homepage has 2 sticky and 5 small, however if I can’t have stickies on the subsequent pages I will need to be able to show 9 post summaries to fill the space. Is this possible? As otherwise the demo is very misleading and I can’t have each post page of the blog looking the same as it shows. Example pages…

    Homepage
    http://origininteriors.org

    Previous Posts
    http://origininteriors.org/page/2/

    Also since I changed to the Suburbia theme, my pictures haven’t been showing in the email notifications when a new post is live. I tested whether this is due to making them ‘sticky’ but have tried both ways and they aren’t showing up, so my readers are only seeing the text.

    I would like to get my blog looking as much like demo’s key design elements as possible and would really appreciate your help. Thank you!

    #837717

    zeccalady
    Member

    Hello, I think I have the same query regarding featured posts and I don’t seem to understand the thread above. I’m new with blogging and still experimenting on this theme.

    How do I make a post featured?

    Hoping someone can give me a step by step guide to this.

    Thanks in advance!

    #837719

    Hi origininteriors

    Are you able to help with my previous query please?

    Looking through now. Note that lots of different questions in one thread is harder to track, and you can always create a new thread for each topic and that would make it easier to help. :)

    #837720

    For widget I was hoping to edit the design of the box, not just the font so that is looks more like the Forever theme example here http://en.support.wordpress.com/widgets/milestone-widget/

    To do this, I would recommend checking the CSS stylesheet from the Forever theme and then adjusting it to fit Suburbia.

    Here’s the Forever stylesheet:
    https://s-ssl.wordpress.com/wp-content/themes/pub/forever/style.css?m=1332951977g&minify=false

    #page .milestone-header {
    	color: #4a4a4a;
    	background: #fff;
    	border: 3px double #eee;
    	border-width: 3px 3px 0;
    	padding: 1.615em 0 0;
    }
    #page #supplementary .milestone-header {
    	border-color: #dcdcdc;
    }
    #page .milestone-countdown {
    	color: #4a4a4a;
    	background: #fff;
    	border: 3px double #eee;
    	border-width: 0 3px 3px;
    }
    #page #supplementary .milestone-countdown {
    	border-color: #dcdcdc;
    }
    #page .milestone-header .date:before {
    	content: "— ";
    	color: #ddd;
    }
    #page .milestone-header .date:after {
    	content: " —";
    	color: #ddd;
    }
    #page .milestone-countdown {
    	font-style: italic;
    }
    #page .milestone-countdown .difference {
    	color: #ddd;
    	font-weight: normal;
    	font-size: 700%;
    	line-height: 1;
    }

    To modify it, start with something like this and go from there:

    .milestone-header {
    	color: #4a4a4a;
    	background: #fff;
    	padding: 1.615em 0 0;
    }
    .milestone-content {
    	border: 3px double #eee;
    }
    #supplementary .milestone-header {
    	border-color: #dcdcdc;
    }
    .milestone-countdown {
    	color: #4a4a4a;
    	background: #fff;
    	border: 3px double #eee;
    	border-width: 0 3px 3px;
    }
    #supplementary .milestone-countdown {
    	border-color: #dcdcdc;
    }
    .milestone-header .date:before {
    	color: #ddd;
    }
    .milestone-header .date:after {
    	color: #ddd;
    }
    .milestone-countdown {
    	font-style: italic;
    }
    .milestone-countdown .difference {
    	color: #ddd;
    	font-weight: normal;
    	font-size: 700%;
    	line-height: 1;
    }
    .milestone-countdown, .milestone-message {
    	border: none;
    }
    #837721

    For the sticky posts, on the demo, the homepage has 2 large pictures for the first posts (they called them sticky) and on every subsequent post page they have two large pictures of the posts at the top of the page. Demo examples…

    The demo link you mentioned is not the same version of the theme here at WordPress.com.

    The demo for Suburbia on WordPress.com is here:
    http://suburbiademo.wordpress.com/

The topic ‘Suburbia Theme Help’ is closed to new replies.