Docs

[Adam Breen]

url: htp://livingnow.com.au
Wordpress version: 4.6.1
Multisite: Yes
Cornerstone version: 1.3.3
X-Theme version: 4.6.1
Child-Theme: Yes

Hi there
I have two posts open, and they are both related to CSS. Seems sensible to consolidate them into a single support request.
The links are here and here

Bottom line, we are having trouble getting the following to take place:
– footer content should be consistently white (it isn’t)
– top bar content should be consistently white (it isn’t)
– Post titles on the home page should not be in ALL CAPS but Normal (not capitalised), and they aren’t.
– Post title links on the home page should be orange not red (they are set to orange in the customizer)

There seems to be something going on with the Newscodes Plugin, which is a concern, since it’s touted as working with Cornerstone, but obviously hasn’t been perfectly configured to work with X-Theme. This plugin was the best solution we could find to the absence of real ‘magazine’ style functionality within X-Theme, so there’s no way we’re going to move away from it, until you come up with something that gives us this functionality 🙁

Hopefully somebody on your team can help me figure out how to resolve this issue once and for all

CSS in the customiser is pasted below for your review

———–

Reply to support ticket from Newscodes:

“Hi, yes, the issue is with the Cornerstone. The problem is that we have a style=”” parameter in our shortcode. They’ve added it too later and these functionalities are in conflict. They way you could set the style now, is to edit the page in text mode, find the shortcode and add your style=”” parameter with the style slug. This is however tricky. The update should be in 2 days that will fix this.”

I’m not entirely certain how to resolve this based upon their information, but am hopeful that you have some sense of what they mean.

———–

.x-navbar .desktop .x-nav>li>a>span {
    padding-left: 5px; 
    padding-right: 5px;
}

.x-navbar .desktop .x-nav > li:nth-child(1) > a:not(.x-btn-navbar-woocommerce),
.x-navbar .desktop .x-nav > li:first-child > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 0 !important;
}

.x-navbar .desktop .x-nav > li:nth-child(1) > a > span,
.x-navbar .desktop .x-nav > li:first-child > a > span {
    padding-left: 0px; 
}

.x-btn-navbar {
    margin-top: 20px;
    color: #000 !important;
}

@media (max-width: 1440px) {
  html body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
  
.x-colophon.bottom .x-colophon-content,.x-colophon.bottom .x-colophon-content, .x-colophon.bottom a, .x-colophon.bottom .x-nav li a  {
  color: #ffffff;
}

.x-colophon.bottom a:hover {
    color: #ff5100;
}
  
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-nav li:after,
.x-colophon.bottom .x-colophon-content a {
    color: #ffffff;
}

.x-colophon.bottom .x-colophon-content a:hover,
.x-colophon.bottom .x-nav li a:hover {
    color: #ff5100;
}
  
.single-post h1.entry-title {
	font-size: 200%;
}
  
.single-post h2 {
	font-size: 150%;
}
  
.newscodes ul.newscodes-wrap li h2> a {
    text-transform: initial;
}

@media (max-width:  979px) {
	.x-topbar {
		  display: none;
}

@media (max-width: 1440px) {
html body {
padding-left: 10px !important;
padding-right: 10px !important;
}
  
body .x-topbar p.p-info {
    color: #ffffff;
}

[Friech]

Hi There,

Thanks for writing in!

#1 footer content should be consistently white (it isn’t)

The Footer content, menu items, and social links are all white. Are you referring to the text that overlaying the images?

http://livingnow.com.au/wp-content/uploads/sites/15/2016/10/icologi-ad-LN-fullwidth07.jpg?pas=8796858501611040650

If so, regretfully we can not apply a CSS to that text.

#2 top bar content should be consistently white (it isn’t)

Add this on your Custom CSS on Customizer

.x-topbar .p-info,
header .x-social-global a {
	color: #fff;
}

#3 Post titles on the home page should not be in ALL CAPS but Normal (not capitalised), and they aren’t.

Are you referring to this?

http://image.prntscr.com/image/3f4e0696639a44bd9aef3bdf1a73a2ba.png

You have this on your Custom CSS, this will set the text-transform to none;

.newscodes ul.newscodes-wrap li h2> a {
    text-transform: initial;
}

Which means the text/title will not be transformed and will display how you wrote it.

Its the plugin that transform this to upper-case in the first place.

http://image.prntscr.com/image/13812dddd92f489280718fa25a26e4ad.png

#4 Post title links on the home page should be orange not red (they are set to orange in the customizer)

Please see this screenshot

http://image.prntscr.com/image/586a1de738cb4f86a598f90f2de2a535.png

That means the plugins controls the styling of that element. Maybe they have an color options for that check your plugin.

Yeah, regarding your CSS please address this issues first else any custom CSS you added on the Customizer might not work.

You miss the closing bracket of this @media query, please add it.

@media (max-width:  979px) {
	.x-topbar {
		  display: none;
}

This one too missing a closing bracket.

@media (max-width: 1440px) {
  html body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

And another one:

@media (max-width: 1440px) {
  html body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

This might also be the reason why some of the CSS we’re giving on your other thread is not working.

Let us know how it goes.

Cheers!

[Adam Breen]

Thanks for the detailed response:
1. I am referring to the menu and the copyright information in the footer; if you view on a wide screen (2560) you will see that it isn’t white
2. I have added this and it hasn’t changed anything; I note that this is the third piece of CSS I have been given to solve this issue
3 & 4 – So what you’re telling me is that the plugin is the issue, and that I can’t override/ignore the plugin css?

Re: closing brackets. All of the edits to the CSS have been supplied by X-Theme support and copied and pasted by me. Further, I can’t see the missing bracket on the live CSS; I’m not certain what you’re referring to.

I note that there are several different elements in the CSS customizer that I have been advised by different people to add. I’m concerned that there is unnecessary code in here, specifically:

.x-colophon.bottom .x-colophon-content,.x-colophon.bottom .x-colophon-content, .x-colophon.bottom a, .x-colophon.bottom .x-nav li a {
color: #ffffff;
}

.x-colophon.bottom a:hover {
color: #ff5100;
}

.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-nav li:after,
.x-colophon.bottom .x-colophon-content a {
color: #ffffff;
}

.x-colophon.bottom .x-colophon-content a:hover,
.x-colophon.bottom .x-nav li a:hover {
color: #ff5100;
}

AND

body .x-topbar p.p-info {
color: #fff;
}

.x-topbar .p-info,
header .x-social-global a {
color: #fff;
}

[Rue Nel]

Hello There,

Upon inspection, I found out that you have inserted an invalid css. Please see the screenshot below:

For best css practice, please put all your @media block at the bottom of all your other css codes.

Hope this helps.

[Friech]

Hi There,

#1 Thank you for the clarification, this is why we need to fixed your @media query CSS missing bracket first. Please examine your entire custom CSS, this is the block that makes the footer color white.

.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-nav li:after,
.x-colophon.bottom .x-colophon-content a {
    color: #ffffff;
}

That block is inside @media (max-width: 1440px) because you did not close it, that styling will only take effect on screen lesser than 1440px, hope this make sense.

#2 Actually if you resize the browser you will see that the text color turns to white and the topbar background as well. Please address the missing closing bracket issues I mentioned above.

#3 & #4 There is no plugin issue at all, because that is how the plugin style the posts on your home page. We can override it though. That is what we are doing now, and that is why you have this:

.newscodes ul.newscodes-wrap li h2> a {
    text-transform: initial;
} 

On your Custom CSS to make the post title not on uppercase, yes?

Pleas resolve the issue on @media query, since we can not do that for you as we do not know which of those CSS blocks will be inside the @media query.

Thanks.

[Adam Breen]

Hi there – thanks for the detailed feedback.

To be clear, all of the custom css was provided via X-theme support, and was copied and pasted without editing, in the sequence provided.

I have moved the media references to the bottom of the list in order to ensure they’re not compromising the balance of the edits, however there are still ‘open brackets’, that I don’t know how to resolve. Please let me know how these media blocks should be presented in the css so that the brackets are closed.

If you can also advise on how to override the link hover color from the newscodes plugin, that would be appreciated.

I also note that we are now having issues with how the checkmarks in the pricing table are being presented; they have a black background, which they didn’t before. http://livingnow.com.au/subscribe/ Not sure if this is related, or not, but seems stylesheet driven.

Please advise

Cheers

[Christopher]

Hi there,

Please update following codes :

@media (max-width:  1440px) {
	.x-topbar {
		  display: none;
}
  
@media (max-width: 1440px) {
  html body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

To :

@media (max-width:  1440px) {
	.x-topbar {
		  display: none;
}
}

@media (max-width: 1440px) {
  html body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
}

Add this code as well :

i.x-icon-check:before {
    background-color: transparent;
}

If you can also advise on how to override the link hover color from the newscodes plugin, that would be appreciated.

I’m not sure which button you’re referring to, please provide us with URL and screen shot.

Hope it helps.

[Adam Breen]

Hi there,
This helped so much – thank you.
Regarding the unresolved item, I’m referring to the hover over link color on the article title.
In the customizer, this color is set to rgb(255, 81, 0)
In the Newscodes CSS, it’s set to #red (not sure where the settings are configured)
I have attempted to edit this in the plugin, but it’s not sticking. I’ve been waiting for a plugin update that will work as expected with X-Theme, but it’s taking a while to clear the CodeCanyon code review, hence wanting to override those settings.

[Rue Nel]

Hello There,

Thanks for the updates! All the link color and hover color can be set in the customizer, Appearance > Customize > Typography > Site Links. There is a color picker for each of them.

Hope this helps.

[Adam Breen]

Hi there,
As always, I am extremely grateful for support. I would be even more grateful if my requests were read before being responded to.

Regarding the unresolved item, I’m referring to the hover over link color on the article title.
In the customizer, this color is set to rgb(255, 81, 0)
In the Newscodes CSS, it’s set to #red (not sure where the settings are configured)
I have attempted to edit this in the plugin, but it’s not sticking.

I have set the color in the customizer and it isn’t working, because it is being overriden by the CSS in the Newscodes plugin. Clearly there is a way to tell the theme to ignore certain attributes of the CSS being generated by this plugin, as we have already done so.

I need the hover over color on the article links to be orange, not red. Please advise on what addition to make to the CSS to achieve this.

This is the override to take from the plugin ALL CAPS to normal case:
.newscodes ul.newscodes-wrap li h2> a {
text-transform: initial;
}

I suspect there is a similar override for the hover link color.

[Christopher]

Hi there,

Hover color is orange, please see the attachment.
If you’re referring to specific page, please provide us with exact URL and some screen shots.

Thanks.

[Adam Breen]

Hey there
See attached screenshot. The color issue is in the article hover over link.
This was mentioned in my very first post:

“Post title links on the home page should be orange not red (they are set to orange in the customizer)

Screenshot attached

[Adam Breen]

see attached

[Friech]

Hi There,

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

/*NewsCodes posts hover title color to orange*/
.newscodes ul.newscodes-wrap li a:hover,
.newscodes .newscodes-pagination ul li a:hover {
	color: #ff5100;
}

Add it just before the @media query blocks, to keep your CSS code neat.

Cheers!

[Adam Breen]

Nailed it!

Thanks everyone. Problems collectively solved.

[Author]

Posts