I have a website that recently has stopped displaying custom css (most obvious example is header should be blue and is black) and the homepage slider is not working either. I have updated wordpress and all plugins but still no luck. Is it possible that this has been hacked?
The url of the site is: http://sherlockhomes4u.org/
Here is some code as an example
/* Header */
#masthead-wrap {
background: none repeat scroll 0 0 #155392!important;
margin-bottom: 50px;
}
#navigation .dropdown-menu a {
color:#fff;
font-size:17px;
letter-spacing:0px;
text-transform:none;
}
#navigation .dropdown-menu a:hover {
color:#15ABD6!important;
}
#quickcontactwrap {
background: none repeat scroll 0 0 #15ABD6!important;
}
#quickcontact {
color: white;
font-size: 17px;
font-weight: bold;
margin: 0 auto;
padding: 5px 0;
text-align: right;
width: 980px;
}
Jumping to it being hacked is kind of a far stretch; the updates you performed may have broken something down the chain.
If you open the inspector in your browser you'll see you're getting a 500 error from your homepage:
Failed to load resource: the server responded with a status of 500 (Internal Server Error): http://sherlockhomes4u.org/?sccss=1&ver=4.7.2
Whenever there's a 500 error in Wordpress, your php error log on your server can be helpful for debugging the issue.
It looks like the Wordpress plugin Simple Custom CSS provides this file. If you run the generated code through CSSLint, you'll see you're missing an ending brace from your plugin-generated CSS:
Opening this file in the editor and placing an end brace at the end fixes everything:
So make sure that brace ends up in your plugin, if it's there but not rendering, then there's an issue with Simple Custom CSS, and you should file it.
Related
I developed a website on WordPress using FLATSOME Theme. The website was running okay but now I am facing an issue and not finding any way to resolve it. The screenshot of the issue is mention below
.container .message-container { padding-left: 0; padding-right: 0; font-size: 25px; color: red; }
This is being displayed on every page above my header.
I'm trying to use WP Web Scraper plugin with WP in my site www.eastwickpark.co.uk to get online ratings of the practice from another site
https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice
I used this code snippet
<img src="http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/iwantgreatcarelogo.png" />
<div>
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
</div>
Then I used custom CSS in the themes stylesheet editor
.btn.blue,
div .btn.blue {
font-size: 16px;
padding: 8px 16px;
}
/*** Stars ***/
.sprite-icons.star-blue-outline {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-outline.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-fill {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-half {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-half.png');
width: 19px;
height: 17px;
}
.sprite-icons.caret-white {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/caret-white.png');
width: 10px;
height: 14px;
}
I've got a problem with my CSS in that the button "wraps".
Tried to just get the star rating targeting the class "raty-rating-wrapper-readonly" part but then I get a whole load of vertical stars.
i.e. if i use
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".raty-rating-wrapper-readonly" basehref="1" ]
I get a whole vertical list of 5 * images?
If I use image-middle div like this
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
I get a weird wrap on the button.
Can't figure this out, and have to admit I'm not a CSS guru. Any insight would be gratefully received.
I've got a problem with my CSS in that the button "wraps"
The cause of the wrapping behaviour is due to <br> tag dynamically generated by WordPress. You can either fix it by following the guideline here: Stop WordPress automatically adding <br> tags to post content
The above post is a plus for you because it also removes the <p> tags that are dynamically generated. I just browsed through your code and found a lot of unwanted p tags.
Can't figure this out, and have to admit I'm not a CSS guru. Any
insight would be gratefully received.
Since you hinted for a CSS solution, a simple fix is to hide the br tags using #widgets .textwidget br { display: none; }. Alternatively #widgets .textwidget a { display: inline-flex; align-items: center } fixes the space and aligns the arrow image as the br tag is ignored inside and initial direction of flex is row.
Unwrapped button:
I folks I have a problem which I solved on one page, but it has not fixed it on another...
There is a grey box that comes up over an image link which I am trying to get rid of.
It still shows up here:
http://1aproductions.ots-internet3.net/work/?cat=dramas
It does not show up here anymore: (On the three recent projects at the bottom)
http://1aproductions.ots-internet3.net
Here's the code I have used, which got rid of it on the homepage, but not on the other pages:
.pg-icon {
font-size: 30px;
line-height: 40px;
color: #252525;
display: none;
background-color:transparent ;
background: none ;
}
.pc-wrapper .icon-circle {
background-color:transparent ;
background: none ;
}
Any help would be much appreciated!
Thanks
You don't have a pc-wrapper class on your dramas page, that's why the code in .pc-wrapper .icon-circle is ignored.
Your other pages seems to have a pg-items-wrapper class in common, so this code will make it work :
.pg-items-wrapper .icon-circle {
background-color:transparent ;
background: none ;
}
Hi i'm pretty new to web development and have just recently finished my first attempt at web design. I've stumbled across one issue i can't find a solution to however. In webkit-browsers one of my ul-lists (navigation) initially renders in the wrong place. When i click on one of the links it pops back in the correct position again. Full site: stenius-online.com
header ul {
float: right;
padding-top: 16px;
font-size: 145%;
}
header li {
padding-right: 58px;
text-decoration: none;
}
On your site you have a link immediately preceding your <ul>. Make that link float:left; that should solve the problem.
Hi I am developing a simple application based upon ASP.NET MVC. I have altered the default master.css to my have my own styles. Now the only problem is that i am adding background-image property to my one of my UL->Li->A to create menus. It is working fine in firefox but the images are not showing up at all in Internet explorer (IE7/8).
Does anyone has clue what is going wrong ?
my CSS is following;
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
color:White;
}
#nav-menu li
{
/*float: left;*/
margin: 0.15em 0.15em;
display:block;
}
#nav-menu li a
{
background-image: url('/Images/leftbarlightblue.jpg');
background-repeat:no-repeat;
background-position:bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
text-decoration: none;
text-align: center;
color: white;
}
#nav-menu li a:hover
{
background-image: url('./Images/leftbardarkblue.jpg');
background-repeat:no-repeat;
background-position:bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
#nav-menu
{
width:15em
}
while XHTML is
<div id="menucontainer">
<div id="nav-menu">
<ul>
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
</div>
Yes i tried with ./Images/... but it still not worked.
Following is my hierarchy of folders
Solution -> Content
Site.css
Images
logo.jpg
leftbarlightblue.jpg
->Controllers
-> Models
->Views
Home
Shared
Site.Master
your stylesheet needs to use the literal path as follows:
background-image: url('/Content/Images/leftbarlightblue.jpg');
and not
background-image: url('/Images/leftbarlightblue.jpg');
If your working with CSS a lot I really recommend getting FireFox and FireBug, it will enable you to look at your stylesheets on the fly and see exactly why certain things aren't working.
Next have you double checked that the URL is correct for the image? A quick way of checking is to get the absolute URL (browse to it in the browser to be sure, it should be something similar to http://myapp/content/images/leftbarlightblue.jpg) and place that in your code instead of your old image URL. If that loads then it is probably your relative paths are wrong (the ../ part), because I don't know your folder structure I cannot help you with what it should be.
On a seperate note background-position should have the horizontal position followed by the veritcal position.
background-position: left bottom;
I guess the display depends on the url.
Where is your master.css located?
Have you tried url('Images/leftbarlightblue.jpg') instead?
I Got the issue, the images were created using CMYK. So FF was showing them using approximate colors while Internet explorer was totally ignoring them. Changing the format solve the issue. Thanks for your help guys.
Add the XHTMLfor #nav-menu, also if you have a live link of this problem post that as well
Try starting the image paths without all the extra dot's and slashes. For example:
/images/image.jpg
Instead of
../../images/image.jpg
I'm still not sure how the files are stored on your actual webserver so you may need to add a directory or two but usually it is not wise to use dot's to tell the server how many levels up to go in the directory tree (plus a lot of people forget that you need to specify where the image is as seen from the CSS file's location not necessarily the HTML/ASP file's location)