Home › Forums › Free Themes › Photomania › Changing color for highlight

Viewing 15 posts - 1 through 15 (of 22 total)
1 2
  • Author
    Posts
  • April 10, 2018 at 9:24 am #69640
    streetdogsociety
    Participant

    Hi, i would like to change the the base color when the cursor highlights the link.

    Right now it’s #f5245f

    I understand that it can be done via the CSS style but would like more detail advice on how to get it done.

    Any help is much appreciated!

    https://imgur.com/a/VYkbY

    Please see attached screenshot.

    April 10, 2018 at 11:31 pm #69680
    wensolutions
    Keymaster

    Hello @streetdogsociety,

    To change the color of the link in the primary menu section use below given CSS.

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

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

    You can change the color code as per your requirement.

    Hope this helps.

    Best Regards!!

    April 11, 2018 at 8:41 am #69761
    streetdogsociety
    Participant

    Hi, thank you it works.

    Would you also be able to assist with with changing the highlighted link to another color as well?

    When the cursor went over, it shows as red, would like to change to another color.

    Much appreciated!

    https://imgur.com/a/YPSjC as attached.

    April 12, 2018 at 12:00 am #69811
    wensolutions
    Keymaster

    Hello @streetdogsociety,

    To change the icon as you have mentioned, please use below given CSS.

    .home-section-portfolio .portfolio-item .popup-link {
    background: rgba(36, 90, 245, 0.8) none repeat scroll 0 0;
}

    Here change the rgb color as per your requirement.

    Hope this helps.

    Best Regards!!

    April 18, 2018 at 2:59 am #70264
    streetdogsociety
    Participant

    Thank you very much!

    April 18, 2018 at 3:09 am #70265
    streetdogsociety
    Participant

    Hi, i’ve adjusted it. but color still show as same?

    The color i wanted was a light shade of gold.

    April 18, 2018 at 3:58 am #70271
    wensolutions
    Keymaster

    Hello @streetdogsociety,

    Please replace the above given CSS with the CSS given below.

    .home-section-portfolio .portfolio-item .popup-link{
    background: #ffd700 none repeat scroll 0 0;
   
}

    Please change the color code as per your requirement.

    Hope this helps.

    Best Regards!!

    April 19, 2018 at 6:29 am #70344
    streetdogsociety
    Participant

    Hi, it still doesn’t show.

    Now my custom CSS is

    .home-section-portfolio .portfolio-item .popup-link{
    background: #b19c93 none repeat scroll 0 0;
}
.main-navigation li > a:hover, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a, .main-navigation li:hover > a {
    background-color: #b19c93;
}

    Any help is very much appreciated!

    April 19, 2018 at 6:48 am #70347
    wensolutions
    Keymaster

    Hello @streetdogsociety,

    The CSS that we have provided above is working absolutely fine as you can see in below-given screenshots:

    http://prntscr.com/j7b0yu

    So please can you post your site URL so that we could see what exactly your issue is?

    Thank you.

    Best Regards!!

    April 20, 2018 at 4:04 am #70420
    streetdogsociety
    Participant

    Hi, my URL is http://www.streetdogsociety.com

    Weird, it don’t work for me. Could it be my cache? Or i miss out something?

    My additional CSS

    .home-section-portfolio .portfolio-item .popup-link{
    background: #ffd700 none repeat scroll 0 0;
}
.main-navigation li > a:hover, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a, .main-navigation li:hover > a {
    background-color: #b19c93;
}
    April 20, 2018 at 4:19 am #70421
    wensolutions
    Keymaster

    Hello @streetdogsociety,

    We found that you not added the additional CSS in your theme.

    So please go to Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS.

    .home-section-portfolio .portfolio-item .popup-link{
    background: #ffd700 none repeat scroll 0 0;
}

    Screenshot:

    http://prntscr.com/j7pt9b

    Also, make sure to clear your cache as well.

    Hope this helps.

    Best Regards!!

    April 21, 2018 at 5:28 am #70469
    streetdogsociety
    Participant

    Hi, i’ve cleared my clear and input exactly what you have adviced me to but somehow it is not showing.

    Cos it be the first CSS code that i have that is messing things up?

    Please see screenshots.

    https://imgur.com/a/cXuvz1t

    April 23, 2018 at 2:13 am #70514
    wensolutions
    Keymaster

    Hello @streetdogsociety,

    Could you please replace the Custom CSS provided with the one below for testing purposes :

    .popup-link{
    background: #ffd700 none repeat scroll 0 0!important;
}

#main-nav li > a:hover, #main-nav li.current-menu-item > a, #main-nav li.current_page_item > a, #main-nav li:hover > a {
    background-color: #b19c93!important;
}

    Best Regards !!

    April 26, 2018 at 5:38 am #70768
    streetdogsociety
    Participant

    Hi, i have done the changes to the customizing addition CSS as advised.

    It shows now as in screenshot 1

    https://imgur.com/a/Dl08JYU

    but then my mouseover on the links on the top reverted back to the original color as shown in screenshot 2.

    https://imgur.com/a/EyYUGx2

    Also when inputting the new CSS you provided, an alert popped up stating there’s a break in the CSS code.

    Please advise. Any help is very much appreciated!

    April 27, 2018 at 12:30 am #70821
    wensolutions
    Keymaster

    Hello @streetdogsociety,

    We will provide the block of CSS code that will change every pink color to the golden color.

    For this activate the child theme.

    You can even simply activate the child theme using the plugin given below:

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

    After activating the child theme in your child themes style.css paste below given CSS.

    https://gist.github.com/Steeru/60e71642f80b9bb010fb2636d31010de

    Hope this helps.

    Best Regards!!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 22 total)
1 2
  • You must be logged in to reply to this topic.