[Support request] How To Change Theme Colors Including Footer

Home Forums Support [Support request] How To Change Theme Colors Including Footer

Home Forums Support How To Change Theme Colors Including Footer

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #2080739
    Ryan

    How do I change the color of my theme? I am wanting to change it so that it resembles a Red/Black/White theme. When I go to Appearance > Customize > Colors….I don’t see how to change the footer color. Right now my footer is a Navy/Blue color and when I go to the Footer Bar, it shows that the current color is white.

    #2080764
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field:
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know ๐Ÿ™‚

    #2080787
    Ryan

    I just sent it via private message.

    #2080812
    Leo
    Staff
    Customer Support
    #2081557
    Ryan

    Here it is again.

    #2081565
    Leo
    Staff
    Customer Support

    This should help:

    I would recommend watching the entire video ๐Ÿ™‚

    #2081678
    Ryan

    Thanks for the video. Can you tell me how I can change the color of the contact button menu in the header?

    #2081684
    Leo
    Staff
    Customer Support

    Are you using the new dynamic typography system?
    https://docs.generatepress.com/article/dynamic-typography-overview/

    If so it would be the accent color.

    #2081701
    Ryan

    I don’t really know dude. I have a contact button in the header of the site that I am trying to change the color of. So it’s more of a color issue than a typography issue. I don’t see anywhere to change the color in the typography section. I’m able to change the color of all other header tabs plus all of my other buttons. I just can’t seem to find where to locate the contact button to change the color.

    #2081707
    Leo
    Staff
    Customer Support
    #2081729
    Ryan

    Ok, I got it. But how can I remove the border around the contact button on the header menu?

    #2081741
    Leo
    Staff
    Customer Support

    In that case, remove this block of code from Additional CSS field in the customizer:

    .main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
    	color: var(--accent);
    	border: 3px;
    	border-style: solid;
    	line-height: 36px;
    	border-radius: 2px;
    	margin-left: 20px;
    	transition: all 0.6s ease 0s;
    }
    
    .main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
    	color: var(--accent-hover);
    } 
    #2081750
    Ryan

    Under the “Services” tab on the “Search” theme, there are 4 blue icons. Is it possible to change the color of those icons?

    #2081924
    David
    Staff
    Customer Support

    Hi there,

    the color of those icons are part of the SVG, so you would need to save those images make an edit using a desktop app like Illustrator and then re-add them to the site.

    #2082442
    Ryan

    I copy the file URL and open in a new browser, I then save the file. But when I open that SVG file in Illustrator, there is nothing there. Do you know why this is?

    Also when I go to edit the icon in the backend, under “Icon” (Icon SVG HTML) it has this link:

    <svg xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 50 50″><circle cx=”15.36″ cy=”15.36″ r=”15.36″ opacity=”.8″ fill=”#f2f2fa”></circle><linearGradient id=”a” gradientUnits=”userSpaceOnUse” x1=”3.402″ y1=”37.565″ x2=”48.618″ y2=”21.107″><stop offset=”0″ stop-color=”#4560e6″></stop><stop offset=”1″ stop-color=”#6212b3″></stop></linearGradient><path d=”M28.45 39.33c6 0 10.88-4.88 10.88-10.88 0-6-4.88-10.88-10.88-10.88s-10.88 4.88-10.88 10.88c0 1.75.42 3.4 1.15 4.86L7.91 44.12c-.65.65-1.01 1.52-1.01 2.44 0 .92.36 1.79 1.01 2.44a3.454 3.454 0 004.87-.01l10.81-10.81c1.46.74 3.11 1.15 4.86 1.15zm0-20.11c5.09 0 9.23 4.14 9.23 9.23 0 5.09-4.14 9.23-9.23 9.23s-9.23-4.14-9.23-9.23c0-5.09 4.14-9.23 9.23-9.23zm-16.84 28.6a1.787 1.787 0 01-3.05-1.27c0-.48.19-.93.52-1.26L19.6 34.77c.7.98 1.55 1.83 2.53 2.53L11.61 47.82zm10.32-19.37c0-3.6 2.93-6.52 6.52-6.52.46 0 .83.37.83.83 0 .46-.37.83-.83.83-2.68 0-4.86 2.18-4.86 4.86 0 .46-.37.83-.83.83-.46 0-.83-.37-.83-.83zM50 27.2v2.56c0 .34-.21.65-.53.77l-4.13 1.62a18.2 18.2 0 01-.43 1.61l2.76 3.45c.21.27.24.64.07.93l-1.28 2.21c-.17.3-.5.46-.84.41l-4.39-.67c-.37.41-.77.8-1.18 1.17l.66 4.38c.05.34-.11.67-.41.84l-2.21 1.28a.83.83 0 01-.93-.07l-3.47-2.77c-.53.17-1.07.31-1.61.43l-1.61 4.12c-.12.32-.43.53-.77.53h-2.56c-.34 0-.65-.21-.77-.53l-1.62-4.13c-.7-.15-1.38-.35-2.05-.58a.837.837 0 01-.51-1.06c.15-.43.62-.66 1.06-.51.73.26 1.49.46 2.26.61.28.05.51.25.62.51l1.58 4.03h1.42l1.57-4.02c.1-.27.34-.46.62-.51.77-.14 1.53-.34 2.26-.6.27-.09.57-.04.79.14l3.38 2.7 1.23-.71-.65-4.27a.82.82 0 01.28-.75c.59-.51 1.15-1.06 1.66-1.65.19-.22.47-.32.75-.28l4.28.65.71-1.23-2.69-3.37a.805.805 0 01-.13-.79c.26-.73.46-1.49.61-2.26.05-.28.25-.51.51-.62l4.03-1.58v-1.42l-4.02-1.57a.81.81 0 01-.51-.62c-.14-.77-.34-1.53-.6-2.26a.833.833 0 01.14-.79l2.7-3.38-.71-1.23-4.27.65a.82.82 0 01-.75-.28c-.51-.59-1.06-1.15-1.65-1.66a.828.828 0 01-.28-.75l.65-4.28-1.23-.71-3.37 2.69c-.22.18-.52.23-.79.13-.73-.26-1.49-.46-2.26-.61a.846.846 0 01-.62-.51l-1.58-4.03h-1.42l-1.57 4.02a.81.81 0 01-.62.51c-.77.14-1.53.34-2.26.6-.27.09-.57.04-.79-.14l-3.38-2.7-1.23.71.65 4.27a.82.82 0 01-.28.75c-.59.51-1.15 1.06-1.66 1.65-.19.22-.47.32-.75.28l-4.28-.65-.71 1.23 2.69 3.37c.18.22.23.52.13.79-.26.73-.46 1.49-.61 2.26-.05.28-.25.51-.51.62l-4.03 1.58v1.42l4.02 1.57c.27.1.46.34.51.62.14.77.34 1.53.6 2.26.15.43-.08.91-.51 1.06a.84.84 0 01-1.06-.51c-.23-.67-.42-1.35-.57-2.05l-4.12-1.61a.823.823 0 01-.53-.77v-2.56c0-.34.21-.65.53-.77l4.13-1.62c.12-.54.26-1.08.43-1.61l-2.76-3.45a.833.833 0 01-.07-.93l1.28-2.21c.17-.3.51-.46.84-.41l4.39.67c.37-.41.77-.8 1.18-1.17l-.66-4.38c-.05-.34.11-.67.41-.84l2.21-1.28c.3-.17.67-.14.93.07l3.47 2.77a18.2 18.2 0 011.61-.43l1.61-4.12c.12-.32.43-.53.77-.53h2.56c.34 0 .65.21.77.53l1.62 4.13c.54.12 1.08.26 1.61.43l3.45-2.76c.27-.21.64-.24.93-.07l2.21 1.28c.3.17.46.5.41.84l-.67 4.39c.41.37.8.77 1.17 1.18l4.38-.66c.34-.05.67.11.84.41l1.28 2.21c.17.3.14.67-.07.93l-2.77 3.47c.17.53.31 1.07.43 1.61l4.12 1.61c.32.12.53.43.53.77z” fill=”url(#a)”></path></svg>

    So even if I change the color of the SVG and then upload it. How do I link to the icon?

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