Changing the Background Color in a Table?

  • I am trying to line up different size pictures with text next to it. See here: https://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.

    https://www.ads-software.com/extend/themes/customizr/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator t-p

    (@t-p)

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

    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!

    Thread Starter vincentc3rd

    (@vincentc3rd)

    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: https://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.

    Thread Starter vincentc3rd

    (@vincentc3rd)

    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

    You’re welcome! ??

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing the Background Color in a Table?’ is closed to new replies.