Custom CSS für search bar?

This topic contains 9 replies, has 4 voices, and was last updated by  Alex Rollin 6 years, 3 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • #409010

    David Sirius
    Expired Member
    Post count: 163

    Hi,

    I managed to make some CSS adjustment to the search function (e.g. removing a grey background). However, I struggle to customise the search area further.

    I have already read the custom CSS page https://wpgeodirectory.com/docs/customizing-your-style/ but it doesnt help further unfortunately.

    I would like to i.a. a) get rid of the top and bottom white bars, b) customise the format of the input fields, and c) customise the search button (eg colours, corners etc). However, when I look in the code with the inspector it refers to me a section where I cannot find any relevant code to make such amendments, which I could then copy in my custom CSS field.

    Could anyone help me how to find the code for the search function in order to format it?

    Many thanks
    David

    #409028

    Guust
    Moderator
    Post count: 29970

    We would need to see the page in question, so please post a link.

    a) get rid of the top and bottom white bars
    These are most likely added by your theme.

    b) customise the format of the input fields
    Can you explain what you mean? Like change the font? That would be most likely in your theme styling.

    c) customise the search button (eg colours, corners etc).
    Again, this may be your theme.

    See also https://wpgeodirectory.com/docs/common-styling-examples/#search

    Thanks

    #409151

    David Sirius
    Expired Member
    Post count: 163

    Hi Guust

    a) get rid of the top and bottom white bars
    These are most likely added by your theme.

    I dont have a theme that could influence this actually. What I have done is: I’ve taken the parent GD parent theme and then created an “empty” child theme that doesnt have any formats. So the format of the search field (e.g. the bars and the red colour of the search button, should be from the parent GD theme).

    b) customise the format of the input fields
    Can you explain what you mean? Like change the font? That would be most likely in your theme styling.

    Yes for example change the font in the search input fields, or make rounded corners of the fields, or change the colour of the font in the search input fields.

    c) customise the search button (eg colours, corners etc).
    Again, this may be your theme.

    I understand, but how?

    Thank you!

    Best regards,
    David

    #409164

    Guust
    Moderator
    Post count: 29970

    We would need to see the page in question, so please post a link.

    How? See https://wpgeodirectory.com/docs/customizing-your-style/

    Thanks

    #409196

    David Sirius
    Expired Member
    Post count: 163

    The page is not online yet (only on my localhost). I could post the HTML code if that would be of help?

    Sorry your link isn’t of any help. In my screenshot I’ve already shown that I’m using a CSS Code inspector. I feel you haven’t read or understood my problem. The inspector isn’t providing a detailed enough information to understand what needs to be amended, ie what classes are called by the input forms and search button.

    Could anyone else maybe help with this?

    Cheees
    David

    #409197

    Guust
    Moderator
    Post count: 29970

    The screenshot does not show the CSS, so I recommend to wait until your site is live, so we can access all the right code etc. The inspector will show enough data if we could actually use it ourselves, but that is not possible for the moment.

    GDF does not have those white lines so they must come from somewhere else, see https://wpgeo.directory/gdf/

    Please contact us again once we can inspect the code properly. Thanks

    #409198

    Stiofan O’Connor
    Site Admin
    Post count: 22956

    The inspector isn’t providing a detailed enough information to understand what needs to be amended, ie what classes are called by the input forms and search button.

    It looks like ur using FF? You shoudl have a pannel to the right that shows u waht CSS and classes are applied to each item, it might be hidden, if so see the bar that has the + on the left, that bar to the very far right should have a arrow <- try clicking that to show the panel or you can always try chrome inspector (i prefer it) Thanks, Stiofan

    #409278

    David Sirius
    Expired Member
    Post count: 163

    OMFG!!! I GOT IT!!!

    The problem was that Firefox didnt collapse the code completely and I noticed this when I installed chrome now and saw the full code right away (“wait something is weird here, why am I seeing suddenly the full code that I was after”). If you look at my screenshot you see that the code isnt fully collapsed now surprise I was in mystery land and the CSS didnt show on the right side. Well there you go I’m total beginner. I identified all items and was able to reformat.

    RE bars:
    These are indeed from GD not from my theme. They are called .geodir-loc-bar

    .geodir-loc-bar {
    padding: 10px 0 10px 0;
    border-top: 1px #e1e1e1 solid;
    border-bottom: 1px #e1e1e1 solid;
    margin: 20px 0;

    taking out the top and bottom border solves the problem.

    Thank you guys!

    #409290

    Guust
    Moderator
    Post count: 29970

    You’re welcome, from both of us 🙂

    #409469

    Alex Rollin
    Moderator
    Post count: 27815
    This reply has been marked as private.
Viewing 10 posts - 1 through 10 (of 10 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket