Joomla Templates Club 406,261 posts

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1038571

Hi there – My site is: http://ch1vph.xyz/ri2k/

When I click the search button it appears at the top of the page in a full-screen mode BUT it’s very hard to tell if you’ve even clicked it…because it popups in ‘white text’ over the top of my main banner and is hardly visible.

*Is it possible to have the background ‘greyed out’ so a visitor can see the ‘Search’ box and know it has been clicked?

Image attached of what it looks like when u click the search button at the moment….

Thanks

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1038627

Hi
Here is the code used for the search

.head-search-dropdown .search input, .head-search-dropdown .finder input {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 36px;
    font-family: sans-serif;
    font-weight: bold;
    padding-left: 0;
    padding-top: 0;
    height: auto;
    width: 100%;
}

Add the code in the custom.css file and change the value as per needs, you can also add new style in the same code.

Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1047677

Hi there,

So I’ve added the code above into custom.css but I cannot get the background colour to change & I’ve also noticed that the masthead disappears when you click ‘search’ on my homepage.

Second problem is in a different other than page my homepage I click ‘search’ and it does not show up, although the masthead disappears?

Please advise

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1047870

Hi
Use this code to add a background color

.head-search-dropdown .search input, .head-search-dropdown .finder input {
    background-color: gray!important;
    color: #ffffff;
}

Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1048185

Hello
Second problem is in a different other than page my homepage I click ‘search’ and it does not show up, although the masthead disappears?

Please advise

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1048245

Hi
Can you provide how to replicate the issue? with a screenshot and description over it.
It help me to understand your new issue.

Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1048786

Hi there,

I have attached two attachments the first one called ‘b4 clicking search’ and the other ‘after clicking search’ but if you go to this page below or any other page on the site….and just click ‘Search’ you will see the problem as well.

https://ri2k.london/index.php/handbags/all-handbags

Please advise

• This reply was modified 7 years, 4 months ago by  Ch1vpH.

---

Attachments:

1. 
2. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1048925

Hi
Do u mean you are getting this issue after changes in code
?Can u provide me steps how to replicate this issue.
Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1049291

Hi there,

No this is whats happening when you click search (live on the site)….if you go to this page below or any other page on the site….and just click ‘Search’ you will see the problem as well.

https://ri2k.london/index.php/handbags/all-handbags

PS what I’m trying to replicate is something like the search on this site…if click the search icon (top right) a background colour appears over this page and the search box is visible in the center

• This reply was modified 7 years, 4 months ago by  Ch1vpH.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1049296

Hi
I mean on which chnage you applied that create this issue. On demo site i can not see this issue and also not able to replicate it .

Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1049632

Hi there,

So the issue seems to be on my masthead on all my other pages…as on your demo site the main banner also uses a similar setup to the masthead (as the text on the banner fades in & out) But my main banner and homepage is OK at the moment…

The problem just seems to be with the way search doesn’t fade inside my masthead boxes (on other pages) as it does on your demo pages? I’ve no idea why…as I’ve not changed anything to do with the search box on my other pages…could it perhaps be to do with the padding on the search as my mastheads are lower than yours on the demo

The only thing I changed so far was above (in the other posts) but that only made changes to my homepage search box. This issue on the other pages is hard to explain as I don’t know why its doing this….one possible thought is it could be to do with maybe something I’ve changed whilst setting up the site but that could be anything and wouldn’t know where to start looking right now (although I will try and find any changes made to the masthead on other pages)

Finally in regard to the main home page search box is there any way to make it display more like the one on this page I forgot to include in my last post – http://www.prada.com/ with a faded coloured background instead of just my homepage search box being the gray colour?

Thanks

• This reply was modified 7 years, 4 months ago by  Ch1vpH.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1049664

Hi
Your site has too customisation that created this issue.
I checked your site and its due the long header height the search is not visible on other pages.

body.head-search-open .head-search-dropdown {
    top: 250px;
}

You can try above code to move the search down.
Besides to apply new style on the search I suggest you use firebug or inspect element to check the classes from example site and override the new style using the custom.css file. This needs efforts and time to check and test the custom style. Also, it may need custom work in js to get the same effects.
If you are not familiar with custom works I suggest you hire a developer for this work.
Such customisation is out of support scope.

Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1049830

OK thanks that bit of code, it seems to have worked as the search does now display on my other pages with the padding moving it down.

The only query I have now is that I need someway to make the whole background fade out as it does on the JA Charity template search? Is there any way to incorporate this?

Or is there a way to possible remove the frame the search box is in??

• This reply was modified 7 years, 4 months ago by  Ch1vpH.
• This reply was modified 7 years, 4 months ago by  Ch1vpH.
• This reply was modified 7 years, 4 months ago by  Ch1vpH.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1049936

Hi
If you want customise the search view kindly apply my suggestion
below again:
Besides to apply new style on the search I suggest you use firebug or inspect element to check the classes from example site and override the new style using the custom.css file.
http://prntscr.com/fxvehd
This needs efforts and time to check and test the custom style. Also, it may need custom work in js to get the same effects.
If you are not familiar with custom works I suggest you hire a developer for this work.
Such customisation is out of support scope.

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1056661

Hi there,

Can you let me know how I can stop the search from dropping down from the top of page…so I can use a normal search box setup instead of the popup type search that is currently on site, because even if I want to use a normal Joomla search (and not a VirtueMart Search Product module) it still uses the dropdown search which does not work well at all even with the additional padding we added so it could work a bit better on my other pages besides from my homepage.

Any advice is welcome…

Thanks

• This reply was modified 7 years, 3 months ago by  Ch1vpH.

[Author]

Posts