Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Trouble with sidebar living it's own life.

  1. fancybloggen
    Member

    Warning: Total CSS newbie trying to explain a problem.

    I have the Modularity Lite theme, and I decided that I wanted to do some resizing in the custom design. Now, what I wanted to do was to make the main area/column/etc. 750px and the sidebar 200px. But it seems like there is something I did not think about, since they wont stand next to each other. The sidebar is currently underneath all the posts.

    I did try to do as resent posts explained - but still the sidebar is underneath the rests. What am I missing?

    C.

    The blog I need help with is fancybloggen.wordpress.com.

  2. thesacredpath
    Staff

    You can do this and keep the overall width of the theme the same as it was (taking 100px off of .span-8 (the sidebar) and adding 100px to .span-15 (the content). )

    .span-15 {
width: 690px;
}

.span-8 {
width: 210px;
}

    To go to 750 for the content, the width in #top, .container and .container inner has to be increased, so you would do this instead of the above.

    .container {
width: 1050px;
}

.container-inner {
width: 1010px;
}

#top {
width: 1010px;
}
    .span-15 {
    width: 750px;
    }

    .span-8 {
    width: 210px;
    }`

    You will probably also want to increase the width of your header image to 1010px, upload it to your media library, get the URL and add it to the background declaration below where URL OF IMAGE is between the double quote marks.

    #header-image {
background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
height: 200px;
width: 1010px;
}

#header-image img {
display: none;
}

  3. thesacredpath
    Staff

    Gaaahhh! missed a code tag on the stuff for going to 750px wide on content.

    .container {
width: 1050px;
}

.container-inner {
width: 1010px;
}

#top {
width: 1010px;
}

.span-15 {
width: 750px;
}

.span-8 {
width: 210px;
}

  4. fancybloggen
    Member

    This is great. Thank you so much!

  5. thesacredpath
    Staff

    You are welcome.

  6. fancybloggen
    Member

    Perhaps I can ask another question, Oh Holy CSS God?

    Is there any way to control which photos will show in the optional Slideshow (in modularity lite)? So far I've understood that it's only the featured ones which will show? Am I correct? But is there any way to choose, lets say, three photos - and not having to upload them in a post? And if it is possible, do I have to fix anything in the CSS after the changes I made with the sidebar and main column? (Other than the fact that the top photos should be 1010px and not 950px as before.)

    I have read through what I could find here on the forum, and the external links, but it seems like I can not find the answer.

    (The blog I need help with is still fancybloggen.wordpress.com)

  7. thesacredpath
    Staff

    From the theme description page for Modularity Lite:

    The standout feature of Modularity Lite is its beautiful home page slideshow. Each photo in the slideshow will be a whopping 950 pixels by 425 pixels. That’s huge! To get it working, first click Yes! I’d like to enable the optional home page slideshow in Appearance → Theme Options from your dashboard and click Save Options. Next make sure some of your recent posts have really large images–at least 950 pixels by 425 pixels. It’s the first image in your post that will be used for the slideshow image. The number of slideshow images will match the number of blog posts showing on your home page. You can change that number from your WordPress.com dashboard at Settings → Reading.

    There wouldn't be anyway for us to change that behavior since it is set in the theme PHP script files. You could do without the built in slideshow and add a slideshow of your own to a sticky post. It wouldn't be the really large slideshow, but it is one option.

  8. fancybloggen
    Member

    That's what I was afraid you would say. But I have seen slideshows in the Modularity Lite-theme, which has nothing to do with the latest posts. Is that because they've used the wordpress.org instead?

    Maybe I could change the top header from 200px to 425px high and get the same size as the slideshow, but without the slides? Or is that also set in the themes PHP script files?

    And thank you so much for all of your help. I really do not know what I would have done without it. :)

  9. thesacredpath
    Staff

    Most likely. With wordpress.ORG, you have access to the theme files, so you can "hack" them to your heart's content (as long as you have a good understanding of PHP scripting). It is also possible that those you've seen are using a plugin and replacing the standard slideshow with another one. Or it could even be possible that they are using the full paid version of Modularity and that full version may have more options for the slideshow.

    Yes, the header dimensions can be changed and an image put into that area directly from the CSS. You would upload the image to the media library, get the URL of that image, and then replace URL OF IMAGE in the following. The thing is the header stuff doesn't show up unless you actually put a header in at appearance > header. If you do that, then that image can be hidden and the other taller image displayed.

  10. fancybloggen
    Member

    Score!

    Thank you so much. :D

  11. thesacredpath
    Staff

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags