Support Center Visit Demo License manager Buy @ envato

Changing Color of the Contact Box

OrcahoddyOrcahoddy
in BeBuilder
Good day everyone

I'd like to make the background color transparent of the contact box which by default has a light blue. 

Appreciate any help I can get, thanks.


- Florian

Comments

  • AlbertAlbert
    Hi Florian,

    to make "Get in touch" item transparent, you need to use extra css: 
    .get_in_touch { background: transparent !important; }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • OrcahoddyOrcahoddy
    Thanks a lot for the prompt reply, I really appreciate it.

    There are some more things where I really cannot find a work-around...

    1.Double-Header:

    As you can see on the landing page, there is a header or sub-header below the header I intended to display (it says Home>Home). I want to remove this header, how do I do so?

    2. Action Bar:

    I want to change the Icon color, font as well as the background color of the Action bar atop of the header. Beyond that, I would like to distribute the different items such as phone e-mail, etc. along the action bar, not all of them on the left side... Can you tell me how I can change those settings?

    3. Header Color & Header Menu Items

    I tried to change the header color from white to a light grey, but somehow it didn't work, or it was not the right configuration. Furthermore, I want to center the menu items (Home, etc.) to the middle of the header, any help?

    4. Footer Editing Options

    The default footer is quite...how should I say, long and broad. Where can I find all the editing options beside the one's you can find under the Appearance section? 

    5. Contact Box Padding/Margin

    Last but not least, I tried to change the padding of the contact box at the end of the page, however the custom CSS doesn't work in that case. Both the map and the contact box are in one wrap, but I want the contact box to be displayed with a padding, though the map without any. By doing so, the last section looks like a grid with the contacts on the left, map below, and the form on the right.

    I do know these are a lot of points, but I would appreciate any help I can get, since I will have a meeting on this Thursday. Until then, the rough outline should be done...

    Thanks yet again!

    - Florian

  • OrcahoddyOrcahoddy
    P.S. Subheader thingy solved, one point less!
  • OrcahoddyOrcahoddy
    Small update, even when I do a fixed header, the menu items are aligned to closely, as well as the height of the header is too much...Any options for that??
  • AlbertAlbert
    1. Subheader can be disabled under Header & Subheader > Subheader section.

    2. All details about changing Action Bar colors you can find on this forum already http://forum.muffingroup.com/betheme/discussion/1021/how-to-change-betheme-action-bar-link-colour but it's background can be changed under Colors > Menu & Action Bar. However, it is not possible to change it's position.

    3. Top Bar background can be changed under Colors > Header section but if you want menu to be centered, you need to use Stack: Center header type.

    4. The other footer options are located under Theme options > Footer section.

    5. Please show us on the screenshot how exactly you want to set padding.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • OrcahoddyOrcahoddy
    Not working, here the link for the image: https://drive.google.com/file/d/0BwCkR5CGbTgcazA5T2YtMlhmYTg/view?usp=sharing

    I simply want to have a padding fo 55px around the contact box without affecting the padding of the map below. So if you take a look at the picture, you will be able to see that from an visual perspective all is fine expect that I want the text to be a bit more centered to the middle, away from the boarders.
  • OrcahoddyOrcahoddy
    Thanks by the way for your answers!!

    & what about the height of the header, can I influence that?
  • OrcahoddyOrcahoddy
    and sometimes the menu item so fthe header are overlapping, for example when I have a fixed header. How can I avoid that?
  • AlbertAlbert
    Ok, so to set 55px of padding for Get in Touch item, please use the following css: 
    .style-simple .get_in_touch { padding: 55px !important; }
    About header height, we do not understand what you mean exactly.

    How menu items overlapping? Please show us.

    P.S. We would be grateful if you can do not post so many messages one by one because it's confusing and unreadable.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • OrcahoddyOrcahoddy
    edited September 2016
    Sorry for that, sometimes the small issues just pop-up after I have sent a message...

    Ok, some more issues I got resolved thanks to you guys, brilliant!

    I figured out how to center the action bar by using the following code:

        #Action_bar .contact_details { width: 100%; text-align: center !important; }


    Furthermore, I was able to change to background color of the header, which was named 'top bar', not 'Header'.

    Thinks I still need to do work on is:

    Is
    there a way to get a border around the action or header? I would like
    to have a black line or a black seperator between the header and the
    action bar or a shadow dropping form the header so as to seperate the
    different content blocks a little bit.

    Thanks in advance for your help!
  • AlbertAlbert
    Please show us on the screenshot how this border supposed to look like.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.