Strange layout on my new site.

Hi kerdezo. Based on the link you posted it appears that the plugin is replacing or creating the entire post content. There might be a CSS naming conflict with the theme although it appears the plugin uses a plugin-specific naming convention. If you can post a link of your site showing the problems you described I can take a look at it but I’m guessing it’s not a theme-related issue.

Hi bdbrown,

The link to my site showing the problem is
https://www.kolcsonzesberles.hu/kolcsonzes/browse-ads/

You will see in the main content a “dropdown” placeholder with a text saying All categories.If you click in this window the menu will appear,so the function is working.

But comparing with the proper sample page (or any other pages in the Showcase tab on this site)
https://awpcp.com/classifieds/browse-categories/4/clothing-accessories/
one may see, that this dropdown box should be in line with the Ad category text and the Change category button
Also this box should contain a dropdown arrow.

Well I’m not a coder,but made some search that I have learned here in the forum: putting the cursor over the dropdown box,first on my site, and next on other proper sites, and in Firefox/right mouse button click/Inspect element. I have checked the Styles Rules in the popup window and I’m seeing a difference.

On all other sites, using this plugin, the styling of this element derives from the plugin (.awpcp-category-dropdown), but on my site this css element is disabled and overridden by the Hueman style (.themeform select).

When I came to know this, I started (in Inspect element mode)to take off the ticks, one by one, from the .themeform select style to see, if
any of them has an influence on this issue.

I have learned, that taking off the tick from
display: block;
resulted a proper layout, and taking off the tick from
moz-appearance: none;
resulted the dropdown arrow appear.

I do not know how to step next,as I don’t have a view over, how this orders affect the whole Hueman Theme.

I could write down only what I saw, so sorry if it is not a programmer approach:-)

One more note,
Under Internet explorer my layout is also the same,I mean bad, but dropdown arrows are appearing correctly in the box.
I still don’t know what is happening under Chrome and Safari

The problem is not that the theme is overriding the plugin styles; it’s that the plugin is depending on the browser default styling instead of providing specific styles. The theme styles override the browser styles so the plugin output is not correctly formatted. You can add this to your child theme CSS to move the selection dropdown up inline and display the dropdown arrow:

.awpcp-category-dropdown-container select {
    display: inline;
    -webkit-appearance: menulist;
}

Thanks bdbrown,
I gave the above code but no result , then gave this (I use firefox)

.awpcp-category-dropdown-container select {
    display: inline;
    -webkit-appearance: menulist;
    -moz-appearance   : menulist;
}

and that page is ok:-)
But I have one more page with dropdowns,that are not yet showing the arrows, please see here:
https://www.kolcsonzesberles.hu/kolcsonzes/search-ads/
All categories,Select county, Select city should have arrows.
How can I fix?

thx

You can try this code:

.awpcp-search-ads-form select {
    display: inline;
    -webkit-appearance: menulist;
    -moz-appearance   : menulist;
}

If you keep using the plugin you’re going to be chasing these issues every time you add a control it uses. If you’re already familiar with “inspect” browser tools then you should be able to find these elements by checking the DOM.

Hi bdbrow,

Above code makes no change.

Sorry!Of course I don’t want to disturb anyone in vain. Unfortunately I’m not a programmer though I have been learning about coding since I started my site some months ago.
If I encounter a problem, first I try to find a string here in the forum,then googling, and finally making experiments. I write here to the forum only if I’m not able to proceed.

As your first code is working fine, I was trying to follow the steps that lead to a solution on my Browse categories page.
So learned, that in your first code you gave to me the element was a <div> so I was looking for a similar element on my Browse ads page., but found no <div> there.

The nearest div what i saw there involving the dropdown lists, was the div.entry, so I gave the style to that. That made no any change. Then I was making experiments by adding the styling to the other elements that I found there with the”inspect”.

The element that you are styling in above code

.awpcp-search-ads-form select

was among my trials and has no influence on that page,neither with

.changecategoryselect select

The solution that was working on my Browse category page is not working on my Browse ads page,and I do not know why.

This is the reason why I get back to the forum, to You with the question.

Thanks in advance any applicable solution,as I have worked weeks to launch this new site.

On all “default” WP themes the plugin displays correctly, without any problem, under IE,Firefox and Chrome.
I checked switching the Theme to Wp Twenty Fourteen,Wp Twenty Fifteen and WP Twenty Sixteen because I just received this answer from plugin support:

“Hi kerdezo,
We are sorry that you ran into this.
Which version of WP and AWPCP are you using?
Have you tried using another theme and see if the dropdown arrows show up?
This looks like something (like javascript) on your theme is causing the dropdown arrow to not show up on the AWPCP pages.

But I don’t want to change my favourite HUEAMAN theme, so keep looking for solution to use both.

Above code makes no change.

Where did you add it? I don’t see it in your child theme style.css file.

in your first code you gave to me the element was a <div> so I was looking for a similar element on my Browse ads page., but found no <div> there.

CSS is sometimes applied to the element but it’s better to use the element IDs and/or classes. If you target just the element you’re likely to affect other areas of the page that aren’t related to what you’re trying to change. That’s why the code I posted uses the “.awpcp-” plugin-specific class names.

On all “default” WP themes the plugin displays correctly, without any problem, under IE,Firefox and Chrome.

Because the default WP themes aren’t applying any other styling to forms.

Hi bdbrown,

Thanks for getting back to me, with the info.

I put the second code to the same place, where I had put the first which was working. To my child theme style.css file.
I was trying to add it,next to the first code, and also tried to add it “alone”, I mean taking off the first code and having only that second code in the style.css file. First code is always working but the second never.

You could not see as I removed when I saw that having no influence on the Search Ad page.
Now I put it back, so you can see.

thx
kerdezo

I just checked this page: https://www.kolcsonzesberles.hu/kolcsonzes/search-ads/
Looks like it’s working now.

Hallelujah and Heureka.
Sure X-files case and UFO..:-)

When I answered to You,as I wrote, I put back the code, but did not checked the result on the site, as on the night before, I had spent couple of hours to fix the problem without any result. During that process I was adding several codes several times, including also the one that is on now.

I simply can not understand why was that trial ineffectual yesterday and why is a success now. X-files case ??

Thank you bdbrown for the kind assistance, advices and the patience.

Have a nice day!
kerdezo