[Michaela]

Hi Mahesh,
I have a few pages where I want to have three (invisible) columns in the main body (not the sidebar). Basically it should be a table with 1 row and three columns. How do I create this?
Thanks for your help,
Michaela

[Mahesh]

Hi @micha,

I am a bit confused on your requirement.
What do you mean by invisible columns? You mean table without border, just the content text… And do you mean to add it in the page content. Please clarify more if possible with a image.

Regards,
Mahesh

[Michaela]

Hi Mahesh,
Yes, exactly. Table without borders, just content and text, added to the page content.
Thanks,
Michaela

[Mahesh]

Hi @micha,

For that you can write html for table in content’s text tab as below:

<table>
	<tr>
		<td>Column One</td>
		<td>Column Two</td>
		<td>Column Three</td>
	</tr>
</table>

And for no border, add the Custom CSS in “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box:

.entry-content table, .entry-content td {
    border: none;
}

Regards,
Mahesh

[Michaela]

Great. Two more questions:
1. How do I determine the column width? Lets say they should be 50%, 25% and 25%?
2. How do I make this table unique? I know I have some other tables somewhere on my website, that I want to keep their unique style with a border around. But on some other pages I want no border.
Cheers

[Mahesh]

Hi @micha,

For that you’ll need to use class or id, if you want to set rule for multiple element, use class otherwise just for one element, use id

<table class="customized-table">
	<tr>
		<td class="wt-50">Column One</td>
		<td class="wt-25">Column Two</td>
		<td class="wt-25">Column Three</td>
	</tr>
</table>

And use following CSS:

.entry-content table.customized-table, .entry-content table.customized-table td {
    border: none;
}

table.customized-table td.wt-50 {
    width: 50%;
}

table.customized-table td.wt-25 {
    width: 25%;
}

Regards,
Mahesh

[Michaela]

Awesome, will start working with this asap!

[Michaela]

Not that easy as I thought…
At the bottom of this page (http://travelintense.com/eco-travel-destinations/australia/eco-lodges-in-australia/) I’d like to include a box that offers a newsletter signup (without adding another plugin that slows down my website).
Because I have a table defined in the stylesheet with an #eaeaea background (see at the top of this page, underneath the map), somehow my table with the sign up also draws this background color. But I’d like it to be totally transparent. Also, the sign up form moves to the bottom of the right side, instead of being just to the right of the image.
I don’t know how to change this.
These are the codes I have so far:

table {
         background-color: #eaeaea;
         -webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
	 -moz-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
	 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
         padding: 0 5px;
         padding: 0rem 0.5rem;
         vertical-align:middle;
}

.table tr {
  height: 10px;
}

/*Table style for table1*/
table.table1{
    background: none;
    border: none !important;
    box-shadow: none;
    -webkit-box-shadow: none;	
    -moz-box-shadow: none;	
}
table.ebook-eco-lodges, table.ebook-eco-lodges td {
    border: solid 1pt #c2c2c2;
    background-color: none !important;
}

table.ebook-eco-lodges td.w50 {
    width: 50%; 
    border: none;
    background-color: none !important;
}

What am I doing wrong here?

[Mahesh]

Hi @micha,

1. Background color for price code table only.
You are using the following codes for styling table:

table {
         background-color: #eaeaea;
         -webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
	 -moz-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
	 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
         padding: 0 5px;
         padding: 0rem 0.5rem;
         vertical-align:middle;
}

.table tr {
  height: 10px;
}

This is generic i.e. all the elements in the site will have same rule (your current issue ).
To over come this, give the table an id or class. For example:
<table id="price-code" class="custom-bg-color">
And use the following CSS instead for that specific table only:

table#price-code, table.custom-bg-color {
         background-color: #eaeaea;
         -webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
	 -moz-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
	 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
         padding: 0 5px;
         padding: 0rem 0.5rem;
         vertical-align:middle;
}

table#price-code tr, table.custom-bg-color tr {
  height: 10px;
}

To clarify you more on class and id, id is used if you need it for only one element. Id must be unique for each element. And class can be used for styling multiple elements with same style. In the above code I’ve used both id and class. If you want to add background to other tables in you site too then just add class attribute to that table as class=”custom-bg-color” and it’ll work.

2. And for sticking form to the right of the image, add the following CSS:

table.ebook-eco-lodges td {
    vertical-align: middle;
}

Let me know if any issue.

Regards,
Mahesh

[Michaela]

Hi Mahesh,
thanks a lot for the great explanation. I thought I got it… until I tried it out.
I use this code:

table.graybackground {
         background-color: #eaeaea;
         -webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
	 -moz-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
	 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);	
         padding: 0 5px;
         padding: 0rem 0.5rem;
         vertical-align:middle;
}

table.ebook-eco-lodges td.w50 {
    width: 50%; 
    vertical-align: middle;
}

I expected the price range table to stay gray, but now it’s transparent, and doesn’t have the nice 3D effect border any more. What did I do wrong?

When you look at the bottom (the ebook sign up table), it looks almost perfect. The only thing I want to change is the outer border. That should be removed. The inner border in lighter gray I want to keep. Any ideas?

Also, the sign up button shouldn’t look that edgy, but rounded, like the one here: http://www.travelintense.com/newsletter-sign-up. I achieved this by using the following code:

.sign-up-button a {
    background-color: #b1db22;
    border: 2px solid #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
    color: #000;
    display: inline-block;
    padding: 5px 10px;
}
.sign-up-button a:hover {
   background-color: #21759b;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
   color: #b1db22;
   text-decoration: none;
}

But how do I include this code so it also changes the button in the ebook table?

Thank you so much for your support, really appreciated!

[Mahesh]

Hi @micha,

1. The above code should have worked fine, I’ve just changed the css to apply for certain class, the rule and property inside is same that you’ve put. In your site, you are using the old CSS that you’ve mentioned above.

2. The outer border is because of the inline CSS in the content
<div style="border: 1pt solid rgb(194, 194, 194);">
change it to <div> then the outer border will be gone.

3. For round border for button in sign-up form, add the following CSS:

#mc-embedded-subscribe {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Regards,
Mahesh

[Michaela]

Great. There must have been a caching issue. Anyway, it’s perfect now. I had the issue that the bottom table with the ebook had a border only at the bottom (no idea where that came from), but I added the following code and now it all looks the way we wanted it:

table.ebook-eco-lodges {
    border: 1pt solid #c2c2c2; 
}

Thanks for your awesome help!

[Mahesh]

Hi @micha

Thank you for your appreciation.
Have a nice day!

Regards,
Mahesh

[Author]

Posts