primary sidebars

  • Unknown's avatar
    samwel1 · Member ·

    Hi!
    I really need help with the css coding of my primary sidebars. I want to enlarge the width of my primary sidebars, which is different from my 1-column, to make it good for embedding my you tube videos. So far I have tried some coding, which seem to work with all other normal columns, but not my “primary-sidebar”. Here’s the code:
    #primary-sidebar {
    margin-top:100px;
    margin-left: 0px;
    width: 300px;
    }

    When i put this code in: Everything in the middle post and carousel column moves down below the left sidebar. That’s strange. I have no idea why that happens. Is there anything that I could do to increase the size to 300px without affecting the position of my other widgets/posts.

    In addition to that, after I successfully resized the column in my home page, the entire website seemed to have moved to the left. So I tried to take look at a mobile preview it looks like there is an extra background space left hanging. Can someone drop down the code that would make my website fit with a proper view on mobiles and computers?….Thank you

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

  • Unknown's avatar
    nizamilputra · Member ·

    Hi there, let me try to help you with this css code;

    body{
  overflow-x: hidden;
}
#page{
  overflow-y: hidden;
}
.site-branding,
.site-navigation,
.main-container,
.footer-container{
  width: 1200px;
}
.left-sidebar .image-carousel-container{
  width: 960px;
}
.image-carousel-item{
  margin: 0 11px 0 0;
}
#col-1{
  margin-left: 10px;
  padding-right: 0;
  width: 535px;
}
#footer{
   width: 100%;
   margin: 0;
}

    Paste all code above under your existing custom css.
    About mobile view, I think you are not using theme that support mobile view (responsive).

  • Unknown's avatar
    samwel1 · Member ·

    Thank you so much for your suggestions. I have tried to copy paste you codes, but seems like everything just get disrupted. I actually don’t need changes on my columns. All I need is to successfully change my sidebar without interrupting with the locations of the image carousel and posts column. In addition to that, I just want to get rid of the extra grey space on the right side. Here’s the screen shot. http://grab.by/D9IQ

  • Unknown's avatar
    nizamilputra · Member ·

    Extra grey space can be removed by add 

    body{
  overflow-x: hidden;
}

    If you want to enlarge you left-side bar you need to change width of .main-container. And the carousel is inside .main-container, so if we change width of.main-containerwe also need adjust everything inside it.

    I try to paste all of my css codes via web inspector then the website become like this http://awesomescreenshot.com/0bb41op1ca

  • Unknown's avatar
    samwel1 · Member ·

    Thanks a lot for that.Looking from the screen shot it appears like the grey problem area has been solved. However, in order to really know if there’s know grey area left to the right, you’d have to scroll the page to the very left and see how the hero slider looks like. If there’s no any sharp cut on the hero-slider then its solved.
    I like the look of the home page, but is it possible to have that column to 330px?…
    Also, could you forward to me the screen-shot of other pages like “Dance Parties” to see how they look like when you apply those changes. But, I’d really love to see the left sidebar at 330px.

  • Unknown's avatar
    nizamilputra · Member ·

    We can make both home page and single page have left-bar width 330px like this http://awesomescreenshot.com/00441p7qdf, but we can’t make the carousel has same width on home page and single page. If it’s ok for you, I can make it.

  • Unknown's avatar
    samwel1 · Member ·

    Thank you so much. Thea’s pretty close to what I really wanted. Only that now I still see the extra grey to the right( just take a look at very-right of the hero slider). Also, if by setting the top-margin of the left-side bar to 100px, does not does allow us space for the image carousel, then I’m totally fine with decreasing its size. Please go ahead and help me configure those changes. Thank you so much for your help.

  • Unknown's avatar
    nizamilputra · Member ·

    Then lets try this;

    .site-branding,
.site-navigation,
.main-container,
.footer-container{
  width: 990px;
}

#primary-nav{
  overflow-x: hidden;
}

.primary-sidebar{
margin-top: 100px;
  width: 330px;
}

#col-1{
  width: 330px;
}

.page.left-sidebar .image-carousel-container,
.left-sidebar .site-content, .right-sidebar .site-content,
.left-sidebar .site-content .page-header,
.right-sidebar .site-content .page-header,
.left-sidebar .site-content .hentry,
.right-sidebar .site-content .hentry {
  width: 620px;
}

#footer{
  width: 100%;
  margin: 0;
}
  • Unknown's avatar
    samwel1 · Member ·

    Hi, Thank you so much for your help, but I have already figure out the whole setup of the website. Maybe just a few things that I need help with are adding social media icons to the top bar/ menu bar and not in the bottom footer. And also, I wanted to add a thumb up/down feature in each post that I’d make. I will highly appreciate if you help me out with those two problems.

  • Unknown's avatar
    thesacredpath · Member ·

    And also, I wanted to add a thumb up/down feature in each post that I’d make.

    WordPress does not have a thumbs up/down rating system, but there is the 5-star rating system which is controlled at Settings > Rating, and I see you have that active on your posts right now.

    I need help with are adding social media icons to the top bar/ menu bar and not in the bottom footer.

    Social icons/links can be added to the main navigation quite easily in Soundcheck.
    1. Go to Appearance > Menu, click on the Screen Options tab at top right and make sure that CSS Classes is checked.
    2. Create the links (using Custom LInks) in your custom menu for the social networks and arrange them where you want them.
    3. In the Label field, enter the name of the social network and then in the CSS Classes field, enter the CSS class for the social network (see below).
    4. Save the menu.

    Here are the CSS classes that are supported in Soundcheck.
    amazon
    facebook
    flickr
    lastfm
    itunes
    myspace
    rss
    twitter
    youtube
    vimeo
    soundcloud
    bandcamp

  • Unknown's avatar
    thesacredpath · Member ·

    @samwel1, I apologize, we do have a thumbs up/down rating system, that is offered through Polldaddy. If you go to Settings > Ratings, select where you want the ratings to appear (posts, comments, pages) and save the changes, an “advanced settings” link will appear at bottom left. What you want to select in there is “Nero” rating.

    See our Ratings Support Page for more information.

  • Unknown's avatar
    samwel1 · Member ·

    HI, Is it possible to export my entire website with all the css customization to an organization that has host WordPress upgrade version locally.

  • Unknown's avatar
    thesacredpath · Member ·

    I’m not seeing the Soundcheck theme available for self-hosted WordPress installations anymore, so the CSS wouldn’t do you much good. CSS is theme specific.

    You can export all of your content and import it into a self-hosted WordPress installation as explained here though.

  • The topic ‘primary sidebars’ is closed to new replies.