Changing my form

Hello guys, I have a site for vacation rentals and I use a 3rd party plugin called Lodgix, their widget inserts a vertical form (as seen on hawaiisands. com), and I would like to change it to a horizontal one, similar as one seen on Airbnb for rental search. I'm learning CSS and am a little stuck on how to change the properties. Any help is greatly appreciated

 

Okay, we are supposed to make recommendations without having any idea of how your site looks or how it is coded and there is an assumption that we are familiar with a plugin that is probably something on the fringe like 100,000 other obscure 3rd party offerings?

 

Yup, we are supposed to be God and read his mind and be a magician and conjure up his site. And then if we try that, we are accused of trying to be God. We can't win!

 

I'm confused? I posted that my site is hawaiisands.com, the plugin uses html and css to create the form for searching properties, and i just want to style it to a horizontal search bar similar to airbnb.. I was just hoping to get some help with custom css to do so

 

If the form is coded as a table, there's something VERY wrong with the code/plugin, and the OP should get another form plugin.

 

I apologize if any of my post is vague, I'm in my first year of web design, but I love to learn. Anyways, the main documents are in PHP, here is a snip of the start code for the widget

class Lodgix_Rental_Search_Widget extends WP_Widget {

    function __construct() {
               
        parent::__construct(
            'lodgix_custom_search',
            __( 'Rental Search' ),
            array( 'description' => __( 'Lodgix Rental Search Widget' ) )
        );       

    }


    function form( $instance ) {
        if ( $instance ) {
            $title = esc_attr( $instance['title'] );
            $amenities = esc_attr( $instance['amenities'] );
        }
        else {
            $title = __( 'Rental Search' );
            $amenities = false;
           
        }
   
        ?>       
            <p>
                <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
                <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /><br>
            </p>
            <p>
                <label for="<?php echo $this->get_field_id( 'amenites' ); ?>"><?php _e( 'Amenities:' ); ?></label>
                <input class="widefat" id="<?php echo $this->get_field_id( 'amenities' ); ?>" name="<?php echo $this->get_field_name( 'amenities' ); ?>" type="checkbox" <?php checked(true, $amenities ); ?> />
            </p>
        <?php

PHP:

 

Sorry about missing the link. it is pretty well hidden in the middle of the text with no highlight, and the space between the dot and come mean it does not even eork in the address bar without editing.

Now to the problem. The page is no where near valid code. Some of the errors are minor, but there are serious structural errors including some involving the form. I suggest you run it through the validator and fix the errors before you do anything else.

I have to agree with PoPSiCLe, the plugin is junk, but the design of the site is such that it does not matter. The design is horrible. It is the same page I have already seen a thousand times with different unimpressive photos. Like most novice web developers you think web pages are about presentation... WRONG! Web pages are content delivery vehicles, and you are not delivering any content, just a bunch of pictures without any description of what they are, zero information; zero message; and zero reason for any user to stay long enough to even let it fully load.

That exact design has already failed thousands of times, and if you are content you just grab third party stuff off the internet instead of learning how to actually code a site, the best you can ever achieve is some level of mediocrity. Yeah I'm harsh. I have found that telling people politely how crappy their design is gets ignored and I truly want to help new developers raise their game. S instead of a gentle nudge you get a kick in the a....

 

Float elements. Than reduce height.

 

Lol, I'm in my first 3 months of learning to do any sort of coding or putting together a website.. So yeah, I'm by no means "good" at content delivery or anything of the sort. 2nd, I havn't even put a day into that site, I have not loaded any content at all, yes there will be text / articles, yes there will be content. I don't know what is up with the judging.

Oh and the site is for vacation rentals, so far the largest feedback I have gotten from tourists is they want to see pictures.. ones of the interior of the property, ones of the exterior, ones of the surrounding area.. not one of the 150 surveyed have said they want text explaining anything, its all about the person looking for a vacation, being able to visualize where they will be staying.

So after replying you didn't offer any help with my problem, only harsh unnecessary criticism of a website that I spent barley any amount of time on.

 

Thank you Webcosmo,

I got the bar to look like I want it to, I only have one small issue left maybe you could help out. Above the bar is some white space, it seems that "widgettitle" is creating extra space above the search bar, or at least looking at firebug it seems to be the reason. I can't seem to find in any of the widget code where it's being created.. do you have any input on how to remove the space? Do you need to see more code from the widget file? Really appreciate feedback!

 

Holy CRAP, that is some VERY bad code. The amount of nested divs... my head hurts.
But you can fix your H2-problem by just removing the H2 from the code in that particular place. That will pull the search-bar up to the header image. The H2 is empty anyway, so there's no reason to have it there if you're not using it.

 

Thr criticism is absolutely necessary because you are so screwed around on priorities and going in the wrong direction that all you are headed for is a big portion of disappointment.

The absolute first thing you do with any web page or web site is CONTENT. Layout comes after the content is prepared and ready for mounting. The layout is there to enhance the content, not dictate how it must fit into a theme. The styling and special effects come last, and only after the page is laid out with valid markup. As for the survey... the responses are unreliable. Without seeing how it was administer and the content it is impossible to say if it has any value. However in most such surveys users generally give an answer they think you want to here. The only metric that gives an absolute indication of how users feel about a site is the bounce rate, and what I'm looking at will have an 80% or higher bounce rate.

The other thing you have to be concerned about are the search engines. In that niche you will live or die depending on how much search traffic you get. You need quality content to be indexed; not just promotional material. Oh an by the way the SE crawlers are blind, the can't see the pictures and are not going to give you any weight for them. The fact that the whole above the fold area is taken up with pictures means the crawlers will find nothing to index above the fold, and you will lose 25 to 40% (depending on what else is on the page) of your weight in that will mean you never get a high ranking for the competitve keywords and the small amount of traffic you get will be non-prime and only marginally interested in you site.

If ou want to just hack away at problems instead of learning to do things right g right ahead; your efforts will lead to failure because you THINK you know what you are doing when you clearly do not even understand the most basic things about doing business on the internet.

 

Just delete or comment out the widgettitle class h2
<h2 class="widgettitle"></h2>

 

COBOL:

I appreciate any constructive criticism, and always will. But there are much, much better ways to help a person, who is looking for help, than coming off as angry, constantly putting down their work and making negative comments. Furthermore, the website in question was created for a friend, and he wanted it on WordPress, I created the installation, used Total Theme and the "presentation" you keep saying I don't need was already there. I threw the Lodgix widget on there because it was something I wanted to deal with first so I could find out what it could look like and placement for it. I am not disputing the importance of content, but you are making a lot of assumptions about why the website looks the way it does. I did not focus on trying to upload a bunch of pictures first and then add text around it, the pictures there were mainly from a slider that was already in place with demo images, i took two minutes to change the slider images, more out of boredom, than necessity at the moment.

As I sad before, this is one of my first attempts at creating a website, I am doing it for free, for a friend, as it is a learning expereince. I am happy to continue learning and appreciate any feedback, but when you attack someone like that, it does nothing to help them learn, only feel bad about how far they are progressing in the field in a short amount of time.

 

I know there is an issue with the nested div's, the user i created the site for wanted to use a drag and drop plugin to modify the page in the future. I installed Visual Composer for wordpress which created the code, not me.

As for the H2, the issue I am having is that its a dynamic website, so its not as easy as removing the code from a known file, the line "widgettitle" does not exist in any of the plugin files, which is confusing to me. I was hoping for some input on where i should try looking for the code so i could remove it

 

If you installed it then it is your code. Blaming the theme for doing what is designed to do is like blaming the car when drive through a red light and cause a wreck.

In the 50 years I have been programming I have trained hundreds of developers both on the job and college course I taught. Some like you did not like getting a kick in the ass when the work was not well done. Not my problem. Web development is done very publicly. If you can't handle criticism, or you want to find something to blame then you would be happier not doing webdev. If you do the page it does not matter what tools you use; wher the code came from; or what you had to start with. You put it together; you are responsible for it; you get the criticism and how you feel about the critic is irrelevant.

 

Then change / add the following in the CSS:

#lodgix_custom_search-4 h2 {
display: none;
}

Code (markup):

which should remove the h2 from the visible space, and make the search-banner move up.

I hope you understand that excusing yourself with "this is how <client> wanted it" and also not knowing where in your code a particular line of code is to be found, or is being gathered from, is VERY bad practice.

 

You said, "I have a site for vacation rentals" but gave NO indication what that site was. Then you said, "(as seen on hawaiisands. com)" which based on your CONTEXT is a site that someone else owns and which has a vertical form which you would like to use on YOUR site. NOWHERE in your first post is it clear that your site is hawaiisands.com.

Being new to coding and working with computers, it is understandable that you would assume we would get the picture. HOWEVER, computers interpret what you code EXACTLY as you code it. They NEVER make any assumptions. THEREFORE, YOU must ALSO be extremely accurate both in your coding and in your description of a problem you want help in solving. We will interpret your words EXACTLY as you write them. If you are not clear, we will interpret your words EXACTLY like a computer would. We CANNOT help you if you do not CLEARLY and CONSISELY tell us what you REALLY want. GUESSING does NOT work in the computer world.

 

I agree with this. Just hide it afterwards.

Also, I must agree with some of the criticism here, if you don't know at least 2 ways to hide something on your page, you should start learning from beginning, not by installing WP themes.