I have this blog which I give support from time to time for a client. It uses those dynamic views from blogger. My task was to change the blog's header and insert my client's logo.
I know how to do it and it is working just fine, EXCEPT that sometimes the images from the headers just don't get loaded and some elements are showed without style. The CSS for that block is not loaded for some reason. There is a similar question here: Images are SOMETIMES there . I've got the exact same behavior: The first time I open the site the header styles are there. If I reload the page, it goes away and reappears randomly as I continue to reload the page.
This happens in any browser - IE, Chrome, Firefox.... you name it. And it seems that this issue is around there since 2009, It would be nice if Google could get rid of it someday. Until there, does anyone have a clue about how to work around this problem??
Somethings to note:
There is no console errors.
The blog views work, despite of this issue.
Thanks in advance.
Edit:
How the image was inserted:
A blog post was created and the logo was uploaded in it.
I copied the link from this post.
Custom CSS was inserted using the "Add CSS" option, in MODELS->ADVANCED->ADD CSS. (this is a literal translation, I'm getting it from a language other than English)
The <h1> was edited in order to hide the text and show the logo as a background image. Like so:
background: transparent url('http://1.bp.blogspot.com/-IWokMKhUVbg/UaCJ_ZULa2I/AAAAAAAAAs4/908V5umDsLM/s1600/myfakelogo.png') no-repeat scroll 13px 5px;
float: left;
margin-left: 73px;
margin-top: 10px;
text-align: left;
text-indent: -99999px;
width: 420px;
The <h3> tag was hidden using display: none;
Note that this is not a CSS problem because it actually works. The issue here is that it SOMETIMES FAILS. So a workaround would be, perhaps, changing the way I upload the Image. Or maybe not because the styles are not being loaded either, not only the images...
Go to Dashboard, select Template from the pulldown menu, and Edit HTML. Then scroll down until you see the following lines at the bottom of the template:
<script language='javascript' type='text/javascript'>
setTimeout(function() {
blogger.ui().configure().view();
}, 0);
</script>
</body>
</html>
Change the timeout value from 0 to 1000:
<script language='javascript' type='text/javascript'>
setTimeout(function() {
blogger.ui().configure().view();
}, 1000);
</script>
</body>
</html>
Credit for this trick
Related
I am developing a website with a large banner that displays differently on each page. The background image is not displaying when I put the background image on the page selector but it will work on the main banner CSS code.
This is for my wordpress site (WordPress 5.2) running a completely custom theme developed from scratch by me. Running PHP version: 7.0.33.
.page-id-15 .bannerImage {}
.postid-15 .bannerImage {}
I have tried both background image and background color with Chrome Developer Tools not displaying that it is seeing this style.
I have confirmed the correct page/post id of 15.
I have put the background image/color into .bannerImage and it displays as expected.
Not sure what else to try. This should be easy.
/// This will display background image and/or color ///
.bannerImage {
/* Set a specific height */
height: 337px;
/* Position and center the image to scale nicely on all screens */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/// This will not display background image and/or color (showing color style) ///
.page-id-15 .bannerImage { background-color: #35CC4B; }
.postid-15 .bannerImage { background-color: #35CC4B; }
/// HTML Code ///
<div class="bannerImage">
<h2>Contact Us</h2>
</div>
/// Word Press Admin URL to show correct page/post number ///
http://box5308.temp.domains/~naiedmon/wp-admin/post.php?post=15&action=edit
/// URL ///
http://box5308.temp.domains/~naiedmon/contact-us
I expect to see a banner that is 337px high with a width of 100% that is different on each page.
What I actually see is a blank white banner space with the H2 displaying.
Chrome only outputs the .bannerImage selector and not the .page-id-15 .bannerImage or .postid-15 .bannerImage selector.
***** updated *****
Below I have added the code I am seeing when I look at Chrome Developer Tools. Unlike the suggestions I completely agree with should work (I have tried), my selector tag of .page-id-15 .bannerImage {} is not be read by the browser and displayed. I did also attempt .postid-15 .bannerImage {}. This is where it has me stumped.
Screen Capture of Code from Chrome Developer Tools
WordPress sometimes re-writes your CSS. I had this problem before. try using "!important" in all of your CSS attributes. this probably works.
I have had to move on and find another solution to my problem. Unfortunately I have not been able to successfully work with page ids as CSS selectors. My solution around the problem was to add additional classes and call them that way.
Example being on my about page to make a selector .about and attach my background image to that class. A simple fix but I was hoping to understand why I couldn't get the page id to work as a selector.
Onward and upward! Thank you to the community for your responses and attempts to help me out on this!
I was able to get help in the WordPress.org forum and so I thought I would put the answer here in case someone else has this problem.
What I did:
So, for some reason I decided to write my body tag like this (and continued to overlook the error):
<body class="body" <?php body_class(); ?> >.
I do not need to call the class "body". Once I deleted class="body" the correct body string was written and I can now call styles by page id.
The correct body tag in my case looks like this:
<body class="page-template page-template-page_fullwidth page-template-page_fullwidth-php page page-id-394 page-parent logged-in admin-bar no-customize-support" >
The exact advice I received:
The main problem is that you’re not calling the body_class() function
in your theme. Once you do that, the right body classes (like
page-id-15, etc) will be associated with the body element. Right now,
your body element looks like: <body class="topgradient">
If you change your site to another WordPress theme, and then inspect
the body element, you’ll see what it’s supposed to look like.
I am very thankful for communities like this and others!
Currently working with a website, and I'm running into a weird issue. The code at fault is this:
The style sheet behind the <ul>, <b>, and <li> tags looks like so:
ul.secretariat {
list-style-type: none;
font-style: italic;
font-size: 12pt;
text-align: center;
}
li {
margin-bottom: 25px;
}
<ul class="secretariat">
<li><b>Item one</b> Faculty Advisor</li>
<li><b>Item two</b> Secretary-General</li>
...
</ul>
I am well aware that the majority of those don't affect the text; I included them to show that the CSS isn't the culprit (I don't think so, anyway. I'm no expert on HTML, someone just asked me for a favor). The issue I'm having is that in the webpage, the first item in the list has a background color that I can't get rid of. If I inspect element, I find something even stranger; a style has appeared in the <li>! I don't know where it's coming from. I've Ctrl+F'ed ever file in the site and can't find that text anywhere. Overwriting with style = "background: none" doesn't seem to do anything, (I don't know if that's valid, I can't find much documentation for creating an empty background) so I would really appreciate any help I could get on this small but annoying issue.
In order to find the code that is messing with your elements style attribute, you can:
Select the element in chrome dev tools
Toggle Break on Attribute Modification
Refresh the page
Execution will pause in the violating code
Since your question is very broad it is very difficult to see where the change is taking place, however this JQuery should fix the issue, add it to the bottom of the page, right before the closing </body> tag, see fiddle http://jsfiddle.net/c5moax9h/1/
<script>
$(document).ready(function() {
$('.secretariat > li').each(function() {
$(this).css('background-color', 'inherit');
});
});
</script>
I am using Squarespace as my website builder. I have added a search icon above my blog feed https://www.livingwithphotography.co.uk/learn/ however for some reason the search box also appears on each blog post as well. This is what I don't want, instead I just want it to be shown on this page https://www.livingwithphotography.co.uk/learn/.
In order to code search icon I added this code in the site header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
I then added this css code
.myTitle {
width: 100px;
padding: 10px;
border: 1px solid grey;
margin: 40px;
font-size: 22px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Lastly I then added this code to the PAGE HEADER CODE INJECTION
<div class="myTitle"><img src="https://livingwithphotography.squarespace.com/s/Screen-Shot-2015-06-01-at-120646.png" alt="search icon" style="width:20px"> <a href="/search?q=&f_collectionId=5568d109e4b0cb923356090b">Search</div>
<script>
$(document).ready(function() {
$(".myTitle").prependTo("#content");
});
</script>
I hope there is a way, thanks for your help :)
This is a little hacky, but it should work. Wrap the code where you prepend the div in this if.
$(document).ready(function() {
if(window.location.pathname == "/learn") {
$(".myTitle").prependTo("#content");
}
});
Lawrence,
In your CMS (SQ), the type of mod you're wanting here is actually best done in 'developer' mode. Essentially, there's only one collection-ID assigned to the blog itself, which is why when you inject to the main page/content area, it appears across the board as you've noticed. The only differentiating factor is that blog overview pages have added class of "blog-list", while blog entries pages have added class "blog-items" (again, both still contained within the same collection).
So that all said, if you're trying to do this with Jquery in an existing template on a blog module specifically (and you are not toggling into developer), one way to workaround is to target the first instance of the ".entry-header" class on the blog [instead of using 'prependTo' #content].
After targeting the first instance of the entry-header, you would additionally need to also hide the display on the '.blog-items' pages as well (these are the actual entry items themselves). With this approach, your new class "myTitle" should appear only on the blog overview page (in your case: /learn/), but keep it hidden on actual article entry view.
So instead of what you have now, try instead using:
$(document).ready(function() {
$('.myTitle').insertBefore('.entry-header:first');
});
Then in Custom CSS put:
.myTitle {
font-size: 30px;
margin: 40px auto;
padding: 10px;
text-align: center;
width: 201px;
}
.blog-item .myTitle {
display: none;
}
As a note, while it's not totally "proper" form, many just put the whole shebang right into the blog module header since it's page specific and won't run globally.
In that case, you would just input all your code directly into: > Configure Blog > Advanced. Here's a screenshot example (note: shot taken directly from their UI and why the line wraps look funky):
Last note: This method does work, however, bear in mind that if you've manipulated other elements in your site as well (which I wouldn't know if you did) then those other changes could also impact.
Hope this helps.
You could use the Squarespace search block and summary block to do this without any coding:
Just create a new page.
Insert a "search" block and constrain it to only search your blog collection.
Insert a "summary" block and set it to display your existing blog.
Here is an example I set up on my site to demonstrate: http://www.figjamit.com.au/example
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
This is my situation; I am displaying ads on my website but I want to display a specific banner if a visitor is using an ad blocker. First thing I've looked for is a script that detects the ad blocker, but after trying a few different scripts it seems most of them no longer work (at least, I couldn't get them to work).
So I gave up on that and went with a different solution. Displaying a CSS background image behind the ad so that if the ad isn't shown, the image is. Because a typical ad takes a moment to load I made the background image a GIF image with 2 seconds of transparency. This works like a charm the first time, but when you reload the page or open a different page the GIF animation doesn't play and instantly displays the last frame, skipping the transparency.
I've tried adding random stuff behind the URL in the CSS, which didn't work. I've tried a data/inline version of the image, that didn't seem to work either. I'm kinda running out of solutions.
The CSS:
.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
background-image: url('/images/ads/ads_top.gif?randomstuff=39485')
}
I'm basically looking for either;
1) A way to show an alternative image if the ad is blocked (that is still actual and works).
2) A way to delay a CSS background image from being loaded.
3) A way to prevent a GIF from being cached or forced to replay the animation on each pageload.
Any of these would fix my problem. Hope someone is able to help.
Thanks!
Look this link. It is very simple and I don't think you need comments. Another question is how to set up time to each image.
Time to use some jQuery:
Your html code:
<div class='ads'></div>
<div class='ads'></div>
And the css code:
.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
}
Your jQuery code:
$(".ads").each(function() {
var timestamp = $.now();
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
});
Your jQuery code have to be placed into the .js file. Do you have some js files? If yes, then add my code into onload handler. If you don't have any create new file, say, scripts.js and put this code into it:
$(document).ready(function()
{
$(".ads").each(function() {
var timestamp = $.now();
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
});
}
Explanation:
.ready function means that all instructions in body of this
function will be read and started on page load. You don't need them
to work before page loaded, right?
$(".ads") — we get element with selector .ads (with class ads).
$(".ads").each(function() { /* body */ } — .each function means that we will assign instructions from function body to all elements with selector .ads
var timestamp = $.now(); — getting timestamp and assigning it into variable
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')"); — adding css property to $(this) element (this element is current element with selector .ads)
Thats all. Simple. Now you have file scripts.js with content above. Put it somewhere on your site, where you usually put your media files. For example, {root}/media/ <-- here.
The last thing you should do is link your new js file and jQuery library. Note, that jQuery library have to be linked before file, using $ variable.
Add next code to the <head></head> tag to your view:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/media/script.js"></script>
Don't forget to do all js actions in onload handler.
Hope this will help. Tell me about result, please.
JSFIDDLE
A possible solution for option 1, is to check with javascript (or preferably jquery) if the banner is visible. (You probably need to put a setTimeout around it, because as far as I know the page js loads first, and after that the adblocker js.
var ads = $('.ads').filter(':visible');
if(!ads.length) {
//do your alternative image showing magic here
}
A possible solution for option 2 might be to link to a php script and put a sleep(2); inside it, with after that the appropriate headers and print/echo of the image.