Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Styling Issues

edited June 2012 in Design

What exactly are the index blocks? Are they the items you can add using the + symbols on the index page? If so...I am trying to customize the ones on my site due to the text running too close. I see using inspect element in Chrome that they are displayed as a table. I tried adding table styling to my css sheet but without success.

Also...my sidebar menu text are really small for some reason. I haven't added any styling to the text. Shouldn't be it default to the frameworks styling?

Any suggestions? Thanks.

Comments

  • On the default index page, those are just a table in the body of the page. They're not setup as blocks, just a little sample content so new sites aren't empty. So you can style/edit/replace them any way you choose. I always just replace all the default content with real content myself.

  • I have replaced it with real text by typing in what I want it to say. Are you referring to completely removing whats there and placing something else instead?

  • That's what I do, yes :)

    You can check out some of the other themes to see how they use custom blocks too, for example:

    https://github.com/jbroadway/montreal/blob/master/montreal.html

    That uses 3 custom blocks (index-left, index-middle, index-right) to create editable sections of the homepage that will always fit with the site's structure, whereas a table in the page editor can be modified by users, removing columns, changing alignment, etc.

    Hope that gives you some ideas to try!

  • Thanks J...it does. I am almost finished my new layout which is looking really nice. I have come far with CSS in just a few days time.

  • edited June 2012

    I have looked at the site and I have the 3 index blocks in there now. However, which class do I call for each since I am not using grid layout? I have a class called #index-blocks with some styling specified. When I look at the Montreal stylesheet, I do not even see styling being defined in the css. How does the system know to use grid_4 and where does it get its styling from? Can you elaborate a little more? My blocks have not changed even after adding the index-blocks section of coding to my html. I have chose to edit page and removed the html for the tables that were displaying the text. I do not get the add blocks + symbols on my screen to add blocks.

    Now...if on the edit page screen...I choose code snippet and past the div class"index-blocks coding for the 3 boxes and paste it into the editing window above my horizontal bar and save...then the 3 + buttons show up on the page but in a vertical position along with the coding next to each button.

    Thanks

  • The Montreal template is using the 960 grid system, which is where the grid_4 class styles are defined. If you want to create an editable area (aka block), take a look at the following page for help with that:

    http://www.elefantcms.com/wiki/Creating-editable-areas

    To make several blocks align next to each other, you can use a grid system like 960 provides, or build the CSS yourself. For example:

    http://jsfiddle.net/kAsVr/

  • I got it working...I had to float:left my class index:blocks and set them up at width 33% with a padding-left of 3% and got them right where I wanted them.

Sign In or Register to comment.