Docs

[jlouproductions]

Hello. I would like to alter the header widget button from the triangle at the top right of the page to appear as a rectangular button, all one color, with text and an icon in the button. How would I do that? i do not understand the css that controls the borders on that area. Please help!

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[jlouproductions]

This reply has been marked as private.

[Jade]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[jlouproductions]

Here is an image of how the header widget looks now. Here is what I want it to look like. I have the icon for the tool box. Just do not have the styles to turn the triangle button to a rectangular button.

[jlouproductions]

Here is the before image.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

a.x-btn-widgetbar:before {
    content: "Tool Box";
    text-align: center;
    color: #fff;
    font-size: 15px;
    display: block;
    padding-top: 17px;
}
.x-btn-widgetbar {
    position: fixed;
    top: 26px;
    right: 41px;
    border-radius: 12px 0 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    background-color: #000;
    width: 125px;
    height: 50px;
}
.x-btn-widgetbar i {
    top: 20px;
    right: 20px;
}

Hope that helps.

[Author]

Posts