WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Changing the Background Color in a Table? (7 posts)

  1. vincentc3rd
    Member
    Posted 1 year ago #

    I am trying to line up different size pictures with text next to it. See here: http://costa-entertainment.com/testimonials/
    The only way I can figure to do this to align properly is with a table. However, the default for a table seems to be alternating colors of grey and white. All I want is to have the content align properly with the same background color as the overall site. I cannot figure out how to change the tables background so that it does not alternate between grey and white.

    If someone could help I would really appreciate it. If someone has a better way to format this without a table I am interested to here it. Been researching style, css, table, class but nothing seems to work when inserted in the CSS section in Customizr. As you can see I have a small sample table to show you what I mean and you can see how the text and pictures do not align properly.

    http://wordpress.org/extend/themes/customizr/

  2. Tara
    Member
    Posted 1 year ago #

    Try using - for example - a tool like Firefox with the Firebug add-on for this kind of CSS work. http://getfirebug.com/ . Help info on Firebug https://getfirebug.com/faq/

  3. ElectricFeet
    Member
    Posted 1 year ago #

    Ah! Been there, done that...

    Customizr is built on the twitter bootstrap, which means that there is already a well-defined invisible grid on the page just waiting to be used. If you look on here for example, I have 3 sections with pictures on the page and each picture section is divided into a row of 3 blocks:

    1. picture - text - picture
    2. text - picture - picture
    3. picture - picture - text

    Each of my rows of pictures/text are defined in 3 blocks of text/pictures as follows:

    <!---------------------NEW ROW OF CONTENT--------------------->
    <div class="row-fluid">
    
    <div class="span4">
    ....picture inserted with the add media button
    </div>
    
    <div class="span4">
    <p>...text...</p>
    </div>
    
    <div class="span4">
    ....picture inserted with the add media button
    </div>
    
    </div>
    <!------------------END OF ROW OF CONTENT--------------------->

    ...with the blocks in various different orders.

    You can also use just 2 blocks of span3 + span9 (=12). Or 4 blocks of span3 + span3 + span3 + span3 (=12) etc. Just make sure that whatever you put inside the <div class="row-fluid"></div> has divs with spans that add up to 12.

    As you're not using the full-with layout, the numbers may need to change; I'm not sure; you need to experiment.

    Good luck!

  4. vincentc3rd
    Member
    Posted 1 year ago #

    Thank you ElectricFeet. After reading your response I was still a little unclear what to do as I am not a coder just a very clever person. But I did a little research and found this page: http://www.w3resource.com/twitter-bootstrap/grid-system-tutorial.php

    I cut and pasted some of the code into my site on a test page and I can see how awesome this can be. With a total of 12 blocks you can set it up however you like. Even if you want to space out the blocks with blank space.

    From the website I looked at it used <div class="row"> But you used row-fluid. What does the fluid part do?

    Thank you Very much by the way. Gonna get to work on it.

  5. vincentc3rd
    Member
    Posted 1 year ago #

    I got it. Fluid is for a responsive website. To resize by percentages. I got it going good now. Webpage is looking a whole lot better. This for the most part eliminates column short codes. Thanks for your help. ElectricFeet

  6. ElectricFeet
    Member
    Posted 1 year ago #

    You're welcome! :-)

  7. arvind kejriwal
    Member
    Posted 5 months ago #

    Refer to this demo to understand in great detail http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Tables.php

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags