Change color

Support
#1

Hey,
I downloaded a template that I liked.
I want to customize it now but I can’t find a way to change some colors. I want all the colors to be orange instead of blue.
The specific parts that I can’t seem to control the color for are marked with the red arrow (the ring around the icon and the shadow under the button)

.

Where can I change this colors?

#2

Hello Barbara,

Thanks for writing in!

To resolve your issue, please go to X > Theme Options > Typography > Site Links. You will need to use the color picker to change the blue to orange for your link color and link hover colors.

If you need anything else we can help you with, please let us know.

#3

Hey Rue,

Actually it was something else :).
I had to enable more options (Advanced Mode) and now I am also seeing this color.

Thanks,
B

#4

Hi Barbara,

Yes that works too for the element. Previous suggestion was to reset the default color globally so you don’t have to do that on every elements.

Glad it works now for you.

#5

Hmm, actually it was not a site link. But that one is fixed now.

I have another question now… Where do I change the color of the numbers on the About Us page of the template.

Instead of blue, I would rather have orange.

Thanks
B

#6

Hello Barbara,

Please go to X > Theme Options > Custom CSS

and find this custom css block:

/*
// Dropcap
*/

.x-dropcap {
  background-color: #02aed6;
}

Change the #02aed6 with the hex color code for orange.

We would love to know if this has worked for you. Thank you.

#7

Perfect! Thanks very much.

#8

You’re always welcome Barbara!

Cheers.

#9

Hey guys,

I found a way to show my text under the image on my portfolio page.
I added thsi code:
.single-x-portfolio .entry-featured,
.single-x-portfolio .entry-wrap {
float: none;
width: 100%;
padding-left: 0;
padding-right: 0;
}

Now I would like to make my image appear smaller. How can I do that?
Thanks.

#10

Hello Barbara,

You can make use of this code if you want to make the featured image smaller:

.single-x-portfolio .entry-featured img{
    max-width: 500px;
}

Feel free to change maximum width value.

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

CSS Selector Reference
How to find the css selector in chrome

#11

Hi Rue

Ok, the code you provided did not work to my expectations.
Can you provide the last two links directly in the message. Looks like I can’t click on them in your last post.

Thanks,

#12

Hey Barbara,

Please replace the previous code with the following one:

.single-x-portfolio .entry-featured {
    max-width: 500px;
    margin: 3% auto 0;
}

Here are the links from the previous post:

CSS Selector Reference
How to find the css selector in chrome

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.