Looking for a coding expert

Hello guys! I need someone to fix a code that I implement in my project. I am trying to connect a script that is a search engine for a travel agency that I am launching. This code is connected to an external server and must be implemented as document content. I managed to add it in the separated bricks but there are some mistakes that I don’t know how to solve.

Here is a link with some information: MerlinX
And here is my site (under construction) so you can see what problems I am having. Volfly

Some of the things I need to fix:

The engine search engine does not work well, it does not have the right size in safari, it also crashes and there are elements that doesn’t work.

It should look like this:

Somehow the code is affecting my menu bar, and changes it.
Good menu:

Bad one:

Also when we browse through the pages created by the code you can see all the hidden elements that I have on the page.

In addition I would like to remove the horrific header added by the widget but from merlinx they have told me that I have to remove it with code.

I really hope anyone here will be available to do it :slight_smile:

1 Like

Hi @Stewie_Griffin

Well, there’s a few css things that can be done:
For navigation:
.nav {-ms-flex-wrap:none;flex-wrap:none}

For title bar:
.navbar-expand-md .navbar-nav {float:right;margin-bottom:-1em}
.navbar {margin-bottom:0px;-ms-flex-align:baseline;align-items:baseline}
.navbar-brand {height:auto;padding:0px}

Removing ONLY All inclusive header: (Not sure if this will remove others but maybe it will work)
.offer-box .section-header {display:none}

Bill
BricsDesign

Thank you for answering! Where do I need to add this?

Do you add it like this?

I have tried all the possible ways I could think of but it doesn’t work! Im 200 percent sure Im doing it wrong hehe

No, easiest to just go to Page > Settings > Add Code and put style tags and all the code I gave you between them:

Bill
BricsDesign

Thanks a lot! it work but there are some problems!
The size of the menu is different now on the home page than on the other pages.
You can see here:
http://volfly.net
supposed to be like this : http://volfly.net/cookies/

Also there is this problem if you click in one of the offer for example:


what you see that side service center is the toggle with visibility I got on the call center button on the menu bar http://volfly.net/RWD/index/132464072/0_21_182/

Also the it didn’t remove the hot deals header or the search engine and it move the position. But the frame problem is only with safari.

You’ll have to apply these to each page that you want these changes on:

For title bar:
.navbar-expand-md .navbar-nav {float:right;margin-bottom:-1em}
.navbar {margin-bottom:0px;-ms-flex-align:baseline;align-items:baseline}
.navbar-brand {height:auto;padding:0px}

For subnavigation:
.nav {-ms-flex-wrap:initial;flex-wrap:initial}

Remove hot deals header:
.offerlist-box section-header {display:none}

Clicking on an example is loading page w/o animate.min.css, bootstrap.min.css, font-awesome, jQuery, etc - I’m guessing they are missing because it’s dynamically generating a new page which of course doesn’t know about all those other files.

I can’t do much more, due to time constraints, but at least the css should get you close enough to what you want and then tweak as needed.

Bill
BricsDesign

Thank you so much @Bill I added this one to the other code as alone was not removing the headers but hot deals is searcher is still there!

I think it will be almost impossible to do it on my own without having any coding knowledge right?

Re: hot deals: Remove the offer-box line & also in the line above add a . to beginning of section-header

Well, I thought you were familiar w/ web design :wink: For the dynamic stuff, ask the plugin developer if they have a way to apply other css and js to the dynamically created pages - otherwise it will never work.

Bill
BricsDesign

they got less idea than me haha! The only code they got is what you can see on their page!

Question? There is any way to see the code they gave me: https://www.merlinx.pl/vibe_podlaczenie_en.php
in this page for example? www.protravel.pl They got all the widget implemented on the page! I just cant find it with the inspector!

No, you can’t see the actual code in the inspector, as it’s php, runs before page loads or called using ajax.

And no, I’m not familiar enough, to be able to interpret what you’re supposed to do - that’s their job to explain it - sorry.

Bill
BricsDesign

They told me they don’t know how to do it! Like this i need to pay for their ugly sites

Sorry - If they don’t know and I sure don’t and you don’t have a clue - time to look elsewhere for a better and more friendly implementation :thinking:

Bill
BricsDesign

I wish! They are the only providers in Poland for travel agencies. So i need to find a way yes or yes haha

Hi @Bill they gave me an example of index

<?php

require_once 'rwdGate.php';

$rwdgate = new rwdGate('fe81ac43ba1059');

$widgets = array(2471037, 2471022);

$rwdgate->fetch($widgets);

if ($rwdgate->isRawResult())
{
  $rwdgate->printRawResult();
  die();
}

?>
<!DOCTYPE html>
  <head>
    <?php echo $rwdgate->getSection('HEAD'); ?>
  </head>
  <body class="homePage">

  <div id="wrap">

    <?php
    $menuFile = basename(__FILE__);

    $list = $rwdgate->getSectionsList();

    if(in_array('2471037', $list))
    {
      echo '<div style="width:800px; border:1px solid lime;padding:5px;overflow:hidden">'.$rwdgate->getSection('2471037').'</div>';
    }

    if(in_array('2471022', $list))
    {
      echo '<div style="width:800px; border:1px solid lime;padding:5px;overflow:hidden">'.$rwdgate->getSection('2471022').'</div>';
    }

    if(in_array('BODY', $list))
    {
      echo $rwdgate->getSection('BODY');
    }

    ?>

  </div>

<?php
  if(in_array('FOOTER', $list)) {
    echo $rwdgate->getSection('FOOTER');
  }
  ?>
  </body>
</html>

Also there another file called rwdDemoStyle.css any idea of what to do now?

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by its height */
    margin: 0 auto -60px;
    /* Pad bottom by footer height */
    padding: 0 0 60px;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,207cca+51,7db9e8+100 */
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #207cca 500px, #7db9e8 1000px); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(500px,#207cca), color-stop(1000px,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 500px,#7db9e8 1000px); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#207cca 500px,#7db9e8 1000px); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#207cca 500px,#7db9e8 1000px); /* IE10+ */
    background: linear-gradient(to bottom, #1e5799 0%,#207cca 500px,#7db9e8 1000px); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

/* Set the fixed height of the footer here */
#footer {
    /*height: 60px;*/
    background-color: #f5f5f5;
}

.container {
    background-color: white;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

#wrap > .container {
    padding: 60px 15px 15px 15px;
}
.container .credit {
    margin: 20px 0;
}

#footer > .container {
    padding-left: 15px;
    padding-right: 15px;
}

p.lead {
    margin:15px 0;
    /*color: white;*/
}

code {
    font-size: 80%;
}

.navbar-brand
{
    display: block;
    position: relative;
    padding-top:0;
    padding-bottom: 0;
    width: 260px;
    height: 50px;

}
.navbar-brand img
{
    display: block;
    position: absolute;
    top: 0 !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    float: none;
    margin: auto;
    width: 225px;
}

.navbar-fixed-top
{
    transform: translateZ(0);
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}

#map-canvas {
    height: 350px;
}
/*
li.active a {
    background-color: #7db9e8 !important;
}
*/

Well, for the css you could certainly put that rwdDemoStyle in the custom css as I showed you.

The php would have to be added to a page after it is exported from Blocs. I have no idea what the array numbers are for, but they call for the rwdGate.php file which has a path indicating it would have to be on the server next to the index page.
That’s about all I can infer from the code - good luck.

Bill
BricsDesign

so if you have to rip it into blocs would be like this?


and the one from the rwdDemoStyle goes on right? The numbers are the widgets id from the merlinx panel!

Im doing this but isn’t working and now I did something don’t know what cause Im doing exactly the same but the site stop working!

Your code widget code is all messed up. It should start w/ <div id="wrap"> and the code you put in there is very different than what you showed above. Also, you have extra php call on line #22 which will break the php.

If you want more help, then my rates are $35usd/hr & I’m sure this will take quite a while to get working properly.

Bill
BricsDesign