Change color of search or header - by spallsport

This topic has 18 replies, 2 voices, and was last updated 5 years, 10 months ago ago by Rose Tyler

  • Avatar: spallsport
    spallsport
    Participant
    May 8, 2018 at 19:29

    can it change the background colour of box search and box of top header?
    Attach images https://prntscr.com/jfeh5v
    https://prntscr.com/jfeh83

    17 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2018 at 08:10

    Hello,

    .header-type-2 .top-bar, .top-bar .container, .header .search .et-mega-search form input[type="text"] {
        background-color:  white;
    }
    .top-bar .top-links {
        margin-top: 10px;
    }
    .side-area-icon {
        top: 18px;
    }

    Regards

    Avatar: spallsport
    spallsport
    Participant
    May 10, 2018 at 09:28

    very good thanks!!1
    and If I want to put any text in the top bar? Can I mad here or I must do in other location?
    Thanks

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2018 at 10:40

    You’re welcome!
    To add content in the top bar you need to place it in appropriate widget area (Appearance > Widgets).

    Regards

    Avatar: spallsport
    spallsport
    Participant
    May 10, 2018 at 11:15

    thanks bu I need to put in the midle of the top bar, widget doesn’t allow, and neither can change the color of text…

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2018 at 12:34

    You can create a static block and edit content of it using Visual Composer (Visual Composer > Role manager and enable composer for the Static Blocks), then add your block in top bar widget area. I will help you to put it on the center of the bar (using custom css code).

    Regards

    Avatar: spallsport
    spallsport
    Participant
    May 10, 2018 at 14:29

    good thanks I can put, but now my top bar is more wide and I dont change the color text, can you help me?
    Thanks

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2018 at 14:58

    Please provide temporary wp-admin access.

    Regards

    Avatar: spallsport
    spallsport
    Participant
    May 10, 2018 at 15:12

    in private content you have.

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2018 at 15:19

    The credentials to wp-admin panel are incorrect. Please check them.

    Regards

    Avatar: spallsport
    spallsport
    Participant
    May 10, 2018 at 15:34

    try now please.
    Now de color of text is black but I cant modify, and the top bar is very wide ;(

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2018 at 16:07

    – Please edit content of this text block and change http://prntscr.com/jg62pj to http://prntscr.com/jg62um, because if text starts from new line in page code will be added <br>, like – http://prntscr.com/jg63oh.
    – The color you can also change by editing the content – http://prntscr.com/jg644w
    – Set here 0px – http://prntscr.com/jg64sw to remove default margin value.
    – Add custom class for row http://prntscr.com/jg65ju
    and use this custom css code:

    .top-bar p:empty {
      display:none;
    }
    .top-bar .widget_icl_lang_sel_widget, .top-bar .vc_row {
        display:  inline-block;
    }
    .top-bar .vc_row {
        margin-top: 10px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    chanage .vc_row in the code to your custom class.
    The result should be like on this screenshot – https://prnt.sc/jg69a9

    Regards

    Avatar: spallsport
    spallsport
    Participant
    May 10, 2018 at 16:32

    Sorry but I dont get the las step, I dont Know my custom class.
    my text is under the languages, It isnt in the same level of languages that your picture

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2018 at 17:03

    “Custom class” means text you added in “Extra class name” field https://prnt.sc/jg65ju, like – http://prntscr.com/jg7139
    in this case, the custom css should be:

    .top-bar p:empty {
      display:none;
    }
    .top-bar .widget_icl_lang_sel_widget, .top-bar .top-content {
        display:  inline-block;
    }
    .top-bar .top-content {
        margin-top: 10px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    Regards

    Avatar: spallsport
    spallsport
    Participant
    May 10, 2018 at 17:18

    thanks, wher do I insert the custom css?
    best regerads

    * sorry I edit, I find the custom css.
    Sorry I am rookie, thanks for all!!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 11, 2018 at 08:28

    Hello,

    You’re welcome!
    Here you can find a few video tutorials – https://www.8theme.com/videos/ I hope they will be useful.
    Have a nice day.

    Regards

    Avatar: spallsport
    spallsport
    Participant
    May 11, 2018 at 11:06

    very good, thanks!!!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 11, 2018 at 12:05

    My pleasure 🙂

    Regards

  • Viewing 18 results - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.