Docs

[[email protected]]

Hi there, I’m a total noob just forewarning, it took me 2 weeks just to set up the first bit of my website.

When I go to the blog page of my site, it has a pre-set layout, where I can only make very few customization. How to change the white background and the baige section that covers the “Blog” to the mail chimp widget?

http://thedaoofaction.com/blog

[Rad]

Hi there,

Thanks for writing in.

You mean background color customization specific to blog page only? Currently, it’s using the global background image set under Customizer > Layout and Design.

You can remove that globally, or simply add this CSS to your customizer’s custom CSS with your preferred background.

body {
    background: #ffffff url(//theme.co/x/demo/ethos/1/wp-content/uploads/sites/2/2014/05/neutral1.png) center top repeat;
}

And this one for the sidebar,

.x-sidebar {
background-color:#fff;
}

Hope this helps.

[[email protected]]

Hi there thanks for the quick response! you guys are awesome! I applied the code in the custom CSS and it told me that I “You tryin to cheat huh?” lol and I cannot customize this page. I also tried through the customizer in layout and design and I applied colour changes and nothin happen.

[Jade]

Hi there,

That code should work fine if you added it in Appearance > Customize > Custom > CSS.

Are there any other codes in the customizer aside from what you have added? If there is none and you’re still having this issue, kindly provide us with the admin access to your site so we could check.

[[email protected]]

This reply has been marked as private.

[Rahul]

Hi,

I have added the css for you.

Let me know if you need any further help.

Thanks

[[email protected]]

Hi thanks! but the blog portion isn’t honoring the codes. Which i’ve had problems before. Is there anything else I can do?

[Friech]

Hi There,

The baige background color on the “Blog” title is actually an background image pattern for the whole page, which you can reset on the Customizer > Layout and Design.

And you can change that white content background with this code.

div.site {
	background-color: #2d2727;
}

You can add this under Custom > CSS in the Customizer.

However, you have a bigger issue than this. The Customizer on your site seems to be broke. I suspect that is because you have two instances of X|Theme.

And by the look of it, it seems you did some modification in there. And I can’t tell if you have the latest version or old because you did remove the comments on style.css file. Would you mind deleting that two instance of X|Theme and reinstall a latest version? You can get a latest version of X|Theme from your ThemeForest account download page.

But before you do that, make sure you backup your customizer settings. To do that navigate to Addons > Customizer Manager > Export, keep this XCS file on your local machine so you can import it back later after reinstalling the X|Theme.

If you’re having hard time re-installing the theme please provide us FTP credentials in private reply and we are more than happy to assist with this.

Thanks.

[[email protected]]

Awesome I’v been able to change the background after updating and removing the old modified theme.

Now I can’t seem to change the hover link color in the blog posts. It remains purple after I’ve tried entering a test css code

a:link {
color: green;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: red;
}

/* selected link */
a:active {
color: yellow;
}

Everything changes except the hover link stays purple.

Also at the very top there is a white space that I do not know how to change the color of as well. Thank you guys! I’m finally making progress to the site thanks to ya’ll.

[Rue Nel]

Hello There,

Please check your customizer and make sure that you change all the purple colors to something else. The site links color can be found in Appearance > Customize > Typography > Site Links.

If you still want to use your custom css, perhaps adding !important would work.

a:link {
color: green !important;
}

/* visited link */
a:visited {
color: green !important;
}

/* mouse over link */
a:hover {
color: red;
}

/* selected link */
a:active {
color: yellow;
}

Please let us know how it goes.

[[email protected]]

Thank you so much! I was able change it through Appearance > Customize > Typography > Site Links but I had to go under blog post and edit through the customizer. After that I was able to change everything. You guys rock!

[[email protected]]

I’m not sure if I can ask this in this thread but I’m also trying to change the opacity of my background image in section 1, I’ve tried adding CSS codes from looking at similar topics but I haven’t been able to get the image to change. Since my account is already on here if you guys need to check it out, hopefully makes things easier. Thank you!

[Rue Nel]

Hello There,

Thanks for updating this thread! It will be impossible to apply an opacity to a background image because the other contents of the section will also be affected with the opacity. What we need to add is have some sort of overlay for the background instead. please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.home #x-section-1 {
    position: relative;
}

.home #x-section-1:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
}

Feel free to change the background color opacity by changing the value from 0.1 up to 1.0. Right now I have set it at 0.75.

[[email protected]]

Thanks so much! you guys are a life saver! It worked perfectly!

[Joao]

I am glad we were able to help.

let us know if you need help with any other issue.

Joao

[Author]

Posts