Home / Forums / DynamiX Support / Custom Widget Area Header (right of branding)

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts

  • BenFranks_Pie
    Participant

    Hi,

    Is it possible to add a custom widget area to the right of my website’s header (aligned right of the branding)?
    I would like the site to remain responsive and collapse in a similar way to the visual composer columns on a mobile device, i.e. the right-aligned widget area would appear under the left-aligned branding on a mobile device.

    Please advise.

    Best,
    Ben


    BenFranks_Pie
    Participant
    This reply has been marked as private.
    Andy
    Andy
    Keymaster

    Hi Ben,

    It can be done if you know CSS and HTML. There is the option to add custom HTML / CSS into the header ( Appearance > Theme Options > Header > Custom Header HTML / Shortcode ). If you’re not familiar with HTML, the next best option is below the menu, there is a widget area in Appearance > Widgets > Header Panel, here you can add widgets like the text widget to achieve what you want.


    BenFranks_Pie
    Participant

    Hi Andy,

    Would you be able to put some quick code together I can use if I just need to add it to the Custom HTML/CSS area?

    Ben

    Andy
    Andy
    Keymaster

    Hi Ben,

    Unfortunately it would be based on the content you’re putting in there. Is it just an image you want placing in there? If so, what image is it, do you have a link?


    BenFranks_Pie
    Participant

    Hi Andy,

    So it’s just putting this HTML in there:

    <p style="text-align: right;"><a href="http://tuckingmillbeta.co.uk/book-online/"><img class="size-full wp-image-22091 alignleft" src="http://tuckingmillbeta.co.uk/wp-content/uploads/2015/09/bath-self-catering1.gif" alt="Bath Self-Catering Offer - Save 3% book direct with Tucking Mill" width="410" height="94" /></a>Tucking Mill Cottages
    Midford, Bath, BA2 7DB
    <a href="mailto:holidays@tuckingmill.com">holidays@tuckingmill.com</a>
    Tel: +44(0)7900 570037</p>
    &nbsp;

    It contains 4 lines of text and one image.. all the custom links are already done above too, so it’s just the placing of the code that I need help with (as in how to turn it into custom CSS/HTML) to fit seamlessly with your theme.

    As I showed in this screenshot: http://tuckingmillbeta.co.uk/wp-content/uploads/2015/09/Custom-Widget-Area-needed-Tucking-Mill-Beta.jpg – it would need to go in that highlighted space.

    Ben

    Andy
    Andy
    Keymaster

    Hi Ben,

    I can do this for you, however it would have to be done as a customization. It would be approximately $40 for my time to implement it.

    I’m assuming you’d still want it visible on mobile too and it will either above or below the menu ( I can’t remember what order the custom HTML field loads in )?


    BenFranks_Pie
    Participant

    Hi Andy,

    Yes please I would like you to do that and I’m happy to pay you. Will you need access to the wp-admin?
    And I would like it to show up on mobile as well, yes.

    Andy
    Andy
    Keymaster
    This reply has been marked as private.

    BenFranks_Pie
    Participant
    This reply has been marked as private.

    BenFranks_Pie
    Participant

    Hi Andy,

    Hope you’re well.

    Would you be able to make the discussed changes by Thursday?

    Many thanks,
    Ben

    Andy
    Andy
    Keymaster

    Hi Ben,

    Sorry, I’ve not been in the office much this week. I’ve managed to squeeze it in today, take a look and see what you think.

    For reference the following CSS was used:

    Custom CSS:

    #primary-wrapper #header .custom-html {width:580px;right:0;top:60px;text-align:right;}
    #primary-wrapper #header .custom-html .imglink {display:block;width:410px;float:left;}
    #primary-wrapper #header .custom-html p {float:right;width:160px;font-size:12px;}

    Mobile CSS:

    #primary-wrapper #header .custom-html {position:relative;width:100%;top:auto;text-align:center;}
    #primary-wrapper #header .custom-html .imglink {margin-bottom:15px;}
    #primary-wrapper #header .custom-html .imglink,
    #primary-wrapper #header .custom-html p {float:none;width:100%;}

    HTML:

    <a href="http://tuckingmillbeta.co.uk/book-online/" class="imglink"><img class="size-full wp-image-22091" src="http://tuckingmillbeta.co.uk/wp-content/uploads/2015/09/bath-self-catering1.gif" alt="Bath Self-Catering Offer - Save 3% book direct with Tucking Mill" width="410" height="94" /></a>
    <p>Tucking Mill Cottages
    Midford,
    Bath, 
    BA2 7DB
    <a href="mailto:holidays@tuckingmill.com">holidays@tuckingmill.com</a>
    Tel: +44(0)7900 570037</p>

    BenFranks_Pie
    Participant

    Really good of you, Andy, thank you.

    I’ll be using DynamiX with all my clients’ sites from now on.

    Cheers,
    Ben

    Andy
    Andy
    Keymaster

    You’re welcome! That’s fantastic about using DynamiX too, thank you!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.