[outer_netParticipant]

Hey, I have 2 au’s

1st is a possible problem, ever since the update 1 hour ago any new custom css i put in doesn’t seem to have an effect?

Other qu

I am trying to customise the top bar to decrease the height by about 30 % and something a bit creative to make it stand out, maybe a transition or gif animation of colour / light.

or maybe just a simple gradient, i came across another topic :
.x-topbar,.x-logobar,.x-navbar{
background: linear-gradient(to bottom, #222224 0%, #4C5C75 100%) repeat scroll 0% 0% transparent;
}

but as i say nothing i add has any effect?

Thanks in advance for any advice

[outer_netParticipant]

Sorry website is http://www.waterstreetgallery.co.uk

[John EzraMember]

Hi there,

Thanks for writing in! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[outer_netParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

The wordpress login provided above doesn’t seem to work.

Kindly check again and let us know.

Thanks

[outer_netParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks, please checked your whole custom css here: http://csslint.net/ and address all errors (missing brackets).

#2 Since you only need the gradient background on the topbar, please update your code to:

.x-topbar {
	background: linear-gradient(to bottom, #222224 0%, #4C5C75 100%) repeat scroll 0% 0% transparent;
}

To decrease the height of the topbar, you need to decrease the content size first which is the text. You can use the custom css below to control the size and color of the topbar text.

header .x-topbar .p-info {
	color: red;
	font-size: 1rem;
}

You need to address the missing brackets issue first, else those custom css might not work. Or you can add this CSS on the very top of the custom CSS box.

Hope it helps, Cheers!

[outer_netParticipant]

Hey, Thx

You were absolutely right, I seem to have a problem somewhere with my custom css! how do i copy it to the past into css Lint?

Thank you

[outer_netParticipant]

Sorry I meant, how do I copy it so that I can Paste it ?

[JadeModerator]

Hi there,

You can go to Appearance > Customize > Custom > CSS then select all the codes that in the box and paste them in the CSS Lint site.

Hope this helps.

[outer_netParticipant]

Hey,

Ive tried that but the new dark interface for the css doesn’t let you cmd – A select all or drag and select all?

I know its the most simplest thing I’m probably missing here?

Thank you

[outer_netParticipant]

Oh so i was being silly, you can select it, its just a little tricky, when you hover over the column numbers the selection goes.

So I ran it on the recommended site css lint and it came back with the following:

443 22 Parsing Errors Expected RBRACE at line 119, col 22. All

443 17 Parsing Errors Expected RBRACE at line 179, col 17. All

443 1 Parsing Errors Expected RBRACE at line 213, col 1. All

443 2 Parsing Errors Expected RBRACE at line 235, col 2. All

So I have isolated these ‘Parsing errors” ? and put them below – I think these are the issues

118 .x-logobar {
119   font-family: Lato; “Book 300”
120 }
121 .x-logobar {

176     background: rgba(0,0,0,0.5);
177     text-align:center;
178     padding:30px
179     margin-right: 18.5em;
180     margin-left: 18.5em;
181 }

210 @media (max-width: 767px) {
211     .x-brand img {
212         width: 125px;
213 @media only screen and (min-width : 1024px) {
214
215     /**for centering the logo**/
216     .x-topbar .p-info {
217         width: 90%;
218         text-align: center;
219     }

233 .x-topbar{
234 background-color:#4894e4;
235 }

I know this is a huge ask but if there is any way you might be able to take a real quick look I would appreciate it sooooo much, I can’t put in any new css until I fix this.

So far I’m on 3 licences and the more sites I’m doing I always go for this theme, what you guys do is amazing!

Thank you in advance : )

[FriechModerator]

Hi There,

Please update each of your custom css above with my corresponding code below:

.x-logobar {
  font-family: Lato, "Book 300";
}

background: rgba(0,0,0,0.5);
text-align:center;
padding:30px;
margin-right: 18.5em;
margin-left: 18.5em;
}

You’re missing two closing brackets on this one, first to close the custom css rule and the second one is to close the @media query. You followed immediately this code with another @media block, so I assume you only have one rule on this block which is .x-brand img {width: 125px;} that is why I’d added the closing bracket right there.

@media (max-width: 767px) {
.x-brand img {
width: 125px;
}
}

This is the tricky one; you’re missing a the @media closing bracket here, I can add that. However, I’m not sure which of the css rule that is underneath of this block that is actually a part of the @media only screen and (min-width : 1024px) block?

@media only screen and (min-width : 1024px) {
/**for centering the logo**/
.x-topbar .p-info {
width: 90%;
text-align: center;
}

You can add the closing bracket after the:

.x-topbar{
    background-color:#4894e4;
}

If all those css rule underneath it is part of the @media only screen and (min-width : 1024px) block.

Keep in mind that those custom CSS before that was not working because of this syntax errors, would actually trigger now. So you might want to re-evaluate all your custom CSS, because this could make or break the site.

Thanks.

[Author]

Posts