Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • Ch1vpH Friend
    #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


    1. Screen-Shot-2017-05-31-at-20.38.36-copy
    Pankaj Sharma Moderator
    #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
    #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
    #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
    #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
    #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
    #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, 3 months ago by  Ch1vpH.

    1. B4-CLICKING-SEARCH
    2. AFTER-CLICKING-SEARCH
    Pankaj Sharma Moderator
    #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
    #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, 3 months ago by  Ch1vpH.
    Pankaj Sharma Moderator
    #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
    #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, 3 months ago by  Ch1vpH.
    Pankaj Sharma Moderator
    #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
    #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, 3 months ago by  Ch1vpH.
    • This reply was modified 7 years, 3 months ago by  Ch1vpH.
    • This reply was modified 7 years, 3 months ago by  Ch1vpH.
    Pankaj Sharma Moderator
    #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
    #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, 2 months ago by  Ch1vpH.
Viewing 15 posts - 1 through 15 (of 16 total)

This topic contains 15 replies, has 2 voices, and was last updated by  Pankaj Sharma 7 years, 2 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum