Colour change for buttons

Homepage Forums Travel Log Colour change for buttons

This topic contains 13 replies, has 3 voices, and was last updated by  Support Team 1 year, 4 months ago.

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

    laurenc
    Participant

    Hello,
    Is it possible to change the colour of the following on the homepage:
    – button for the call to action section
    – hover colour and ‘ALL’ for the post filter section
    – band at the bottom, right above the footer
    – navigation menu widget arrows
    – main menu icon and hover colour
    THANK YOU SO MUCH!!!

    #4716

    Support Team
    Keymaster

    Hello @laurenc,

    Since we do not have the option to change the color of various parts of the section, we have provided the custom CSS for each one.

    For this go to Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS.

    – button for the call to action section.

    .highlight-tag .highlight-wrapper .highlight-book {
        background: #4267b2;
    }

    – hover colour and ‘ALL’ for the post filter section

    #filters li span.active {
        color: #2013df;
    }
    
    #filters li span:hover {
        color: #4f14df;
    }

    – band at the bottom, right above the footer

    footer#footer {
        border-color: #4267b2;
        }

    – navigation menu widget arrows

    .widget ul li:before {
        color: #4267b2;
    }

    – main menu icon and hover colour

    .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a {
        color: #4267b2;
    }

    You can change the color code as per your requirement.

    Hope this helps.

    Best Regards!!

    #4896

    laurenc
    Participant

    Thank you so much! I will let you know if I have problems with any of these 🙂

    #4904

    Support Team
    Keymaster

    Hello @laurenc,

    Glad we could help you.

    If you have any issues further, then please feel free to post.

    We would also really appreciate if you could help us by rating our theme by following the link given below:

    https://wordpress.org/support/theme/travel-log/reviews/

    Thank you 🙂 .

    Best Regards!!

    #4927

    laurenc
    Participant

    Rating done, can’t thank you enough…
    Also, is it possible to change the title “Itineraries” in the ‘Itineraries’ tab on each trip page to “Itinerary”?

    #4945

    Support Team
    Keymaster

    Hello @laurenc,

    Thank you very much for the effort 🙂 .

    Now to change the text “Itineraries” to “Itinerary” you have to use the child theme.

    You can create the child theme manually or you can simply create the child theme using the plugin given below.

    https://wordpress.org/plugins/wp-child-theme-generator/

    After activating the child theme in your child theme functions.php file paste below given code.

    https://gist.github.com/anonymous/315253c1e3bc4ad4d7b27d127f6aa0b3

    Hope this helps.

    Best Regards!!

    #5363

    iz29
    Participant

    hello,
    what about change the color of book now button and search button?

    #5365

    Support Team
    Keymaster

    Hello @iz29,

    As there are many book now and search button in the theme, Please provide the screenshot of the buttons you are referring to so that we can provide the precise fix.

    Thank you 🙂 .

    Best Regards!!

    #5366

    iz29
    Participant

    #5367

    iz29
    Participant

    PIC 1 = BOOK NOW BUTTON
    PIC 2 = Search button
    PIC 3 = Book now button
    PIC 4 = the red text

    #5368

    iz29
    Participant

    anyway, is there a simple way like change the css file
    and replace the red code #xxxxxx to any color code we want
    I changed the file style.min.css but it doesn’t change anything

    #5377

    Support Team
    Keymaster

    Hello @iz29,

    To change the color of the section as you have mentioned, please use below given CSS.

    For this go to Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS.

    PIC 1 = BOOK NOW BUTTON

    .slider-book-now {
        background: #5cc4ef;
        border-color: #5cc4ef;
    }

    PIC 2 = Search button

    #section-itinerary-search div.wp-travel-search p.wp-travel-search input{
        border: 1px solid #5cc4ef;
        background-color: #5cc4ef;
    }

    PIC 3 = Book now button

    button.wp-travel-booknow-btn {
        background-color: #5cc4ef;
    }

    PIC 4 = the red text

    .main-navigation li > a:hover, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a, .main-navigation li:hover > a{
        color: #5cc4ef;
    
    }

    Here you can change the color code as per your requirement.

    Also please do not make any modification directly in your original file as all of your modification will be lost upon update to new versions. So we strongly recommend you to use the child theme for any code customization and as for CSS you can place them in Additional CSS location.

    Hope this helps.

    Best Regards!!

    #5386

    iz29
    Participant

    wow
    THANK YOU SO MUCH!! for your great support ^^

    #5388

    Support Team
    Keymaster

    Hello @iz29,

    Glad we could help you !!

    If you have any issues further, please feel free to post your queries and we will happily help you further.

    We will really appreciate if you could help us too by rating our theme in WordPress repo here:-

    https://wordpress.org/support/theme/travel-log/reviews/

    Best regards !!

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

You must be logged in to reply to this topic.