Extra column/Blog page help!

  • Unknown's avatar
    andrea100sec · Member ·

    Hello!

    I am building a website using a template than initially had two columns. I used the following css to get rid of the right column, as we want everything in the site to one column and centered.

    .site-main {
    border-right: none;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
    position: relative;
    }

    For some reason this is not affecting the pages the open for individual blog posts when the screen in on a large screen (it goes to one column when the window is smaller). Is there specific CSS we can add in to make the blogs also appear as one column and centered?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    CSS editing is theme specific editing. Volunteers cannot view private blogs and we Volunteers do not request access to them. Staff can view private blog content and this thread is now tagged with modlook for their assistance. Please be patient while waiting for a response and subscribe to this thread so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.

  • Unknown's avatar
    andrea100sec · Member ·

    Thanks Timethief! Would volunteers be able to help if i loosen the restrictions on my page? Would I need to repost this help request?

    Thanks again!! Everyone here is always a huge help.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @andrea100sec, we can widen the content on the single post pages with the following. 

    .single .entry-content {
    width: 100%;
}

    Also, since you have widened the overall theme, you need to scroll down below the CSS edit area and put 1260 into the Media Width field so that the images and videos will use that full width.

  • Unknown's avatar
    andrea100sec · Member ·

    Thank you so much! That worked like a gem.

    Another quick question related to our blog posts/”News” page (the one that will list multiple blog posts, not the individual blogs themselves).

    I’m interested in changing the look of this page, but not having any luck accessing a spot to make changes.

    Ideally I would like to have a little extra space between the top blog entry (this page only) and add an email sign up for our newsletter (I have code for this from Mailchimp).

    Questions:
    1. How would I start the CSS if I want it to affect the style of only this page?
    2. What location would I add code to if I want it to appear on this page, below everything that is slated to be there? (Let me know if this is the wrong place to ask this question, as I know it is not CSS related!)

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, themes here at WordPress.com have a lot of CSS classes set in the opening body tag in the HTML. Some of these are unique to the specific page. In the case of your news page, we can use the “blog” body CSS class to specifically target this page. We could also use the unique page id body class CSS class to target virtually any page. The following will match the spacing on the archives type pages (date, category, etc.). 

    .blog .site-content-inner {
    margin-top: 20px;
}

    On the newsletter signup, this would be more difficult to accomplish. First off most of those use iframes or forms, both of which cannot be used at WordPress.com for security reason. What you would have to do is to use a link to your signup form on the service’s site instead of embedding the form itself. Mailchimp should be able to help you with getting that link.

    Canard has a footer widget area. You can add a Text Widget to to the footer widget area and then insert that link into the text widget. Here are some helpful link on Text Widgets and creating links in them.

    Text Widget
    Text Widget Links
    Linking Images

    If you wish to only have the widget show on the News blog page, you can use the Widget Visibility feature to limit it to only that page. For the page, select “Posts Page”, not the actual name of the page.

  • The topic ‘Extra column/Blog page help!’ is closed to new replies.