[Michaela]

Great, that worked Mahesh. Thanks a lot!
And I think I also fixed the issue that Mailchimp didn’t show the message once you hit the subscribe button:
1. It seems they change their embedded form code quite regularly, so I updated the one I had.
2. To make the title of the fields “First Name” and “Email Address” look the same like the rest of the text in terms of size, I had marked this to lines and defined them as p (paragraphs). Apparently when you do this, it screws up the triggering of the javascript code that should show up when a subscriber hits the button. I therefore didn’t define it as p, but styled it in my CSS.
Hope this helps some other people in the future who have similar issues.
Thanks a lot for your help!
Michaela

[Michaela]

Weird… it doesn’t seem to be visible when I’m logged out of WP. Looks like I only saw it when I was logged in. So problem solved – front end style is what counts!
Cheers

[Michaela]

Hi Mahesh,
I used to have some text coming up once a reader hit the subscribe button that told him to check his inbox. I don’t know why it’s not showing up, as I had tested it a couple of days ago, and it worked.
Do you know why?
Also, I have set Mailchimp in a way that it should send people to this page once they hit the submit button: http://www.travelintense.com/newsletter-opt-in. This doesn’t work either, maybe because I use an embedded form and not their general sign up form.
As these two options don’t work, I need to find another option of telling my subscriber what’s happening once he has hit the button, because the fields get simply emptied and he is sent an email. But as he doesn’t know about the email, he might try signing up a couple of times. In order to avoid this, I at least want to have some small print that tells him about what’s coming next.
This should be the text:
<span style="font-size: 10px;">After you hit the subscribe button you should check your emails for a message from us.</span>
Right now it’s showing up all the way to the right. This is not really what I want. It should show up right underneath the submit button (not under the picture, which would happen if I used `<div class=”clear”></div>). How do I achieve this?
Thanks a lot!

[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!

[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!

[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?

[Michaela]

Looking forward to the new update. It’s been time! 😉

[Michaela]

Hi Mahesh,
I removed the CT social icons from the top of my right sidebar for now. But you can still see them at the bottom of the page in the right footer. Would be great if you could replace these with some really nicely designed and high-quality images.
Cheers,
Michaela

[Michaela]

Seriously?!? That’s ridiculous! Especially, because once you click inside the comment form, the area underneath shrinks…

[Michaela]

Awesome, will start working with this asap!

[Michaela]

Okay, thanks for the clarification. I guess it makes sense for forms, but not if you don’t have any 😉

[Michaela]

I understand, but what does it do? Why can’t I just use the following code?:
<input type=”checkbox” />A
This will give me the same visible result on the frontend.

[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

[Michaela]

Great, that worked, all gone.
But now I have a lot of white space on all post underneath the “Leave a comment” section. How did this happen and how can I get rid of it?

[Michaela]

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

[Michaela]

Great, thanks a lot. I’ll use the code as installing too many plugins slows my website down.
Just one more question for clarification: Why do you need to use “name” and “value”? The radio button or checkboz also appears without these properties?

[Michaela]

Great, thanks a lot, it now shows up neat and clean!

[Michaela]

Hi Mahesh,
yeah, the website you saw up was an old version that my hosting service provider uploaded – but it was the wrong version.
Please access the link again and have a look at the page now.
Regarding 1.) I already implemented the changes you suggested for the bottom and top space, and it worked. Thanks a lot!
Regarding question 2.) I still don’t know what to do. I’d like to have the form fields to the right of the image, not underneath.
Cheers!

[Michaela]

Whishful thinking. They just crashed the hosting again. I’ll send you a note once it is live for good. Thanks for your patience!

[Michaela]

Hi Mahesh,
the site should be up now, there was a migration issue by our hosting provider. Please check.
Cheers,
Michaela

[Author]

Posts